CSS Styling Qestions


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!

Write a reply

Login or register to write a reply, it's free!