I have three areas that I would like to style the css. I'm using the Beans Child Theme on Heart of Abuse dot com.
Nav Menu (top)
I would like to style the last li menu item "Free Book" to look like a button so it stands out. Can I add a class to this menu item?
Tag Line
The tag line under the Site Title needs more space (margin or padding) above it. What is the css name to edit?
Widget Menu Sidebar
I would like to change the Widge Sidebar li a: active backgrond color. What is the css name to edit this area?
Thank You, Linda
Found the soltion to Tag Line and Widget Menu Sidebar.
Tag Line
Added margin-top:10px to tm-site-title-tag
Widget Menu Sidebar
Changed the @global-primary-backgrond color
I tried to add custom css and then text widget for menu item last with a class property. This soltion didn't work. I'll keep working on finding a soltion.
Hi Linda,
Sorry for the late reply, it has been a bit crazy over the festive season.
Menu item as button
To make your FREE BOOK! nav link a button, you may use the Beans HTML API and target it using its ID which is 820 in your example. You may add the following snippet to your Child Theme `functions.php``
// Wrap the link in a span to prevent the nav styling to overwrite the button styling.
beans_wrap_markup( 'beans_menu_item_link[_820]', 'example_menu_item_link_wrap[_820]', 'span' );
// Add the button class the Free Book! menu item (id 820).
beans_add_attribute( 'beans_menu_item_link[_820]', 'class', 'uk-button uk-button-primary' );Tag line spacing
Adding margin via CSS is perfectly fine 😉
Widget Menu Sidebar
Well done on using @global-primary-backgrond LESS variable 😉
Happy coding,
Thierry,
Thank You! I appreciate the response and code. The button looks great. One question, is it possible to style the btton on "hover"? I tried adding the css to less style sheet for the .uk-button uk-button-primary without any luck. The current button is white background with white text on hover and active.
Thank again, Linda
Oops, I left the id 5 in the previous code snippet provided which was the menu item on my test install while yours is 820. I modified the snippet in my last reply which should fix the issue. You may go ahead and grab the updated snippet again.
Have fun,
Sweet 🙂 Works like a charm. I added the @button-primary-hover-background to my style.less and changed the hover background color. Thank You!
A little off topic... I'm loving the page speed score's I'm getting with GTMetrix, Google Page Speed and Pingdom. I host with GoDaddy too. The scores are very, very good. I appreciate all the work you have done to make this happen.
Linda
Forgot to mention. I used the King Composer plugin to style my book page. It works well with Beans.
Great Linda, I am glad to hear it works as expected 🙂
Thanks for your kind words, I am happy to hear you are getting good scores and page speed. Don't forget to turn of Development mode and enable the Compiling options in your Admin->Appearance->Settings when you are done working on your website, you should get even better scores.
Have fun,
YES! The scores are better (A (100%) A (99%) - Preformance Grade A (95) - Load Time 601 ms - 95/100 Mobile Friendleness - 84/100 Mobile Speed - 94/100 Desktop Speed
I can't resist saying, Cool Beans!