Template Customization

This topic is: not resolved

This topic contains 12 replies, has 2 voices, and was last updated by Phoenix phoenix 6 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #25608
    Moeghashim
    moeghashim
    Member
    Post count: 14

    Hello,

    How can I customize Menu background color/top section color? It’s currently blue and I want to experiment with white. https://www.dropbox.com/s/tknanphlshcvk03/Screenshot%202017-01-25%2012.25.48.png?dl=0

    #25613
    Phoenix
    phoenix
    Moderator
    Post count: 6824

    Pls use the below custom CSS in themeoptions –

    .header-overlay #masthead:not(.sticky) {
        background: #fff;
    }
    .header-overlay #masthead:not(.sticky) #primary-menu > ul.menu > li > a {
        color: #000;
    }
    .header-overlay #masthead:not(.sticky) .side-nav-toggle .icon, .header-overlay #masthead:not(.sticky) .side-nav-toggle .icon:after, .header-overlay #masthead:not(.sticky) .side-nav-toggle .icon:before {
        background: #000;
    }
    .side-nav-toggle .icon {
        background: #fff;
    }
    #masthead {
        background: #2A52BE;
    }
    
    #26062
    Moeghashim
    moeghashim
    Member
    Post count: 14

    I applied the suggested changes.
    How can I change the color of the font in the menu? Considering that I need to set two colors, when the menu is white and when it turns to blue on scroll.

    #26063
    Moeghashim
    moeghashim
    Member
    Post count: 14

    And how can I change the font of the logo to: “Dual”?
    how can I edit the font of the menu?

    #26070
    Phoenix
    phoenix
    Moderator
    Post count: 6824

    You can use the following custom CSS –

    #masthead.sticky #primary-menu > ul.menu > li > a {
        color: #000;
        font-family: sans-serif;
    }
    .header-overlay #masthead:not(.sticky) #primary-menu > ul.menu > li > a {
        color: #000;
        font-family: serif;
    }
    

    Rearding custom font pls check this link –
    http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/

    #26071
    Moeghashim
    moeghashim
    Member
    Post count: 14

    Hello,

    I applied the color changes as provided and it shows in the preview that the font color is black. Here is a screenshot https://www.dropbox.com/s/8djgbc9kxpgqmcg/Screenshot%202017-03-14%2009.18.05.png?dl=0
    However it’s not reflecting the black color here http://46.101.30.154/

    #26091
    Phoenix
    phoenix
    Moderator
    Post count: 6824

    Can you pls use the below modified custom CSS –

    #masthead.sticky #primary-menu > ul.menu > li > a {
        color: #000 !important;
        font-family: sans-serif;
    }
    .header-overlay #masthead:not(.sticky) #primary-menu > ul.menu > li > a {
        color: #000 !important;
        font-family: serif;
    }
    
    #26123
    Moeghashim
    moeghashim
    Member
    Post count: 14

    I tried to add !Important; but it didn’t work.

    I recently added the following:
    #primary-menu > ul.menu > li > a {
    color: rgba(0,0,0,.4) !important;
    }

    But it’s not applying it, however I can see it in when I add the code to: Apperance > Customize then Custom CSS
    https://www.dropbox.com/s/h4m3x8rfqm2rdml/Screenshot%202017-03-19%2011.24.41.png?dl=0

    Can you look into this?

    #26130
    Phoenix
    phoenix
    Moderator
    Post count: 6824

    The custom CSS seems ok. Can you share a link to your site with a temp login as a private msg?

    #26131
    Moeghashim
    moeghashim
    Member
    Post count: 14
    This reply has been marked as private.
    #26145
    Phoenix
    phoenix
    Moderator
    Post count: 6824

    Pls install and activate cosmic child theme and add the below custom CSS in child theme’s style.css file.

    #primary-menu > ul.menu > li > a {
    color: rgba(0,0,0,.4) !important;
    }
    

    You need to remove the custom css that having > symbol from customize > custom CSS tab and add it to your child theme’s style.css file.

    #26149
    Moeghashim
    moeghashim
    Member
    Post count: 14

    Can you explain why I need to install a child theme? and how do I do that?

    #26158
    Phoenix
    phoenix
    Moderator
    Post count: 6824

    The custom css that having greater than(>) symbol is causing this issue, after saving the changes the > symbol is getting converted into

    
    &gt

    and thus becomes an invalid CSS.

    You can see that changes in view page source .

    You can install the child theme just like a normal wordpress theme, install the same and activate and copy the custom CSS to child theme style.css file.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.