Changing color of tag/link box background

  • Author
    Posts
  • #108947

    katfranc
    Member

    Hi there, also wondering if anyone can assist with changing the color of the background box for the tag cloud/the little box that comes up when you hover over a link in the navigation bar? Really love the theme but would love to change it from grey! Having trouble finding the CSS class for them.

    The blog I need help with is kateysmodernlife.com.

    #109058

    ricardpriet
    Theme Author

    Hi katfranc,

    yes! add this CSS:

    @media (min-width: 768px) {
        .nav-menu .sub-menu,
    	.nav-menu .children {
    		background-color: #FFEB3B;
    	}
    	.nav-menu > li.menu-item-has-children:hover > a:after, .nav-menu > ul > li.page_item_has_children:hover > a:after {
    		border: 6px solid #FFEB3B;
    		border-color: #FFEB3B transparent;
    		border-top: none;
    	}
    }

    We have change the gray to a yellow (#FFEB3B)to highlight it.

    Use these tools to convert or select your Hex colors:
    http://www.colorpicker.com/
    http://www.hexcolortool.com/

    And here you are how to add to your site:
    https://en.support.wordpress.com/custom-design/editing-css/

    Hope this helps :)
    Ricardo P. from SiloCreativo

    #109196

    katfranc
    Member

    Hi Ricardo!
    Thank you, that’s helped a lot. I have chosen to have a tag cloud at the bottom of my blog to assist with searches. Do you know how I could also change the colors on that so that they aren’t grey/white and match the color scheme I have chosen? Is that possible at all?
    Also how I could just center those bottom widgets so that it looks a bit tidier?
    Thanks in advance if you can help :)

    #109251

    ricardpriet
    Theme Author

    Hi katfranc,

    try this CSS for colors:

    .widget .tagcloud a, .wp_widget_tag_cloud a, .widget_tag_cloud a {
        background-color: #b0e4e4;
    }
    .widget .tagcloud a:hover, .wp_widget_tag_cloud a:hover, .widget_tag_cloud a:hover {
        background-color: rgba(0,0,0,.3);
    }

    and this to center footer widgets content:

    #pre-footer .widget .tagcloud a,
    #pre-footer .wp_widget_tag_cloud a,
    #pre-footer .widget_tag_cloud a {
        margin: 0 5px 0 0 !important;
        float: none;
        display: inline-block;
    }
    #pre-footer .widget p {
        text-align: center;
    }

    Thank again!!
    Ricardo P. from SiloCreativo

    #109274

    katfranc
    Member

    Thank you!!

    #109280

    ricardpriet
    Theme Author

    You are welcome! :)

The topic ‘Changing color of tag/link box background’ is closed to new replies.