Topic: Template Customization

This topic has 12 replies, 2 voices, and was last updated 7 years, 1 month ago by Veena.

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

Author

Posts
January 25, 2017 at 12:27 pm #25608

moeghashim
Member

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

January 26, 2017 at 4:06 am #25613
Veena
Moderator
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;
}
```
March 13, 2017 at 11:18 am #26062

moeghashim
Member

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.

March 13, 2017 at 11:38 am #26063

moeghashim
Member

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

March 14, 2017 at 6:24 am #26070
Veena
Moderator
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/
March 14, 2017 at 9:20 am #26071

moeghashim
Member

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/

March 15, 2017 at 11:26 am #26091
Veena
Moderator
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;
}
```
March 19, 2017 at 11:24 am #26123

moeghashim
Member

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?

March 20, 2017 at 7:40 am #26130

Veena
Moderator

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

March 20, 2017 at 8:02 am #26131

moeghashim
Member

This reply has been marked as private.

March 20, 2017 at 3:20 pm #26145
Veena
Moderator
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.
March 20, 2017 at 3:22 pm #26149

moeghashim
Member

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

March 21, 2017 at 5:01 am #26158
Veena
Moderator
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.
Author

Posts