Header Styling « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Incarnation

Header Styling

13 posts from 3 voices

Started 4 months ago by sgshapiro
Latest reply from Dude
This topic is not a support question

Tags:

Fonts
header

sgshapiro
Member

Hello. How can I adjust the styling of the Header? (The menu titles at the top right of the page)

Mostly I would like to change the font and size.

Thanks.

Posted 4 months ago #

sgshapiro
Member

I figured it out based on some other posts on the site. I really appreciate all of your in depth support. It's one of the big reasons I bought a theme from you...as well as many others.

If you're interested this is what I have now in quick CSS (is that the same as custom.css?):

/*main menu fonts*/
.main_menu a {
font-family: "Open Sans", Helvetica, sans-serif !important;
font-size: 16px !important;
text-transform:capitalize;
letter-spacing:1px;
}
/*sub main menu fonts*/
.sub-menu a {
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 13px !important;
text-transform:uppercase;
letter-spacing:1px;
}
.header_color .main_menu ul:first-child > li a:hover {
color: #f7cc4a;
}
/*font color of submenu items*/
.header_color .main_menu ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow {
background-color: #7a4e31;
color: #ffffff !important;
}
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a {
color: #ffffff;
}
.header_color .main_menu .menu ul li a:hover {
color: #f7cc4a !important;
}

Posted 4 months ago #

sgshapiro
Member

strange. i just restarted my computer (and tried another computer altogether), and the colors no longer hold. The font sizes do, but not the colors. Any thoughts?

Thanks.

Posted 4 months ago #
Nick
Moderator

Hi,

Quick CSS comes before custom.css in the cascade so custom.css code will override identical code in quck css.

Is there a URL you can show us, because problems of this sort usually means something is overrising your css. I changed a few things in the code you posted. You can try that , but add it to the very end of custom.css file. Whenever you add new css, you should always place it at the very end (even in Quick CSS) to ensure that no other css comes after it. Also I am not sure about all those !important tags you are using. The purpose of !important is to override specificity .. if you are interested: http://css-tricks.com/when-using-important-is-the-right-choice/

Thanks,

Nick

Posted 4 months ago #
sgshapiro
Member

Hi Nick, thanks for your help.

The URL is http://www.backforward.org

Did you change the code in the post i posted itself? or did you forget to post those changes.

So the custom.css file isn't in the wordpress backend, meaning I should download it from my server, make the changes, then re-upload?

I used the !important because that was the only way it worked, but i would love to not have to.

Thanks.

::Stephen::

Posted 4 months ago #
sgshapiro
Member

I just switched everything to the custom.css file using ftp download/upload and now none of the changes are applied. what should i do?

Posted 4 months ago #

Nick
Moderator

Hi,

Taking a look now...

Please replace your entire custom.css file with this below. You had a semi colon in the font family instead of a comma ( http://backforward.org/wp-content/themes/incarnation/css/custom.css )

#header h1.logo{
padding:10px 0}
#top .title_container h1{
font-size:55px}
#top .title_container h1, #top .breadcrumb-trail, #top.page .title_container{
display:none}
/* main title on current page and hover */
#top .header_color .main_menu ul:first-child>li a:hover{
color:#f7cc4a}
#top .header_color .main_menu ul:first-child>li.current-menu-item>a, #top .header_color .main_menu ul:first-child>li.current_page_item>a, #top .header_color .main_menu ul:first-child>li.active-parent-item>a{
color:#fff}
/*font color of submenu items*/
#top .header_color .main_menu ul, #top .header_color .main_menu .menu ul li a, #top .header_color .pointer_arrow_wrap .pointer_arrow{
background-color:#7a4e31;
color:#ffffff}
#top .header_color .main_menu .menu ul li a:hover{
color:#f7cc4a !important}
/*main menu fonts*/
#top .main_menu a{
font-family:"Open Sans",helvetica neue,Helvetica,sans-serif !important;
font-size:16px !important;
text-transform:capitalize !important;
letter-spacing:1px}
/*sub main menu fonts*/
#top .sub-menu a{
font-family:"Open Sans",helvetica neue,Helvetica,sans-serif;
font-size:13px !important;
text-transform:uppercase;
letter-spacing:1px;
color:#000}
@media only screen and (min-width:768px) and (max-width:989px){
#top .align_bottom .main_menu{
width:90%}}
#top .header_color .main_menu ul:first-child>li>a{
color:#f7cc4a}

Thanks,

Nick

Posted 4 months ago #

sgshapiro
Member

well it actually seems to read now. perhaps it takes some time from the server to change the custom.css

Posted 4 months ago #
Nick
Moderator

Hi,

Possibly, besides that I added ID to make this even more specific. (code above)

Thanks,

Nick

Posted 4 months ago #
sgshapiro
Member

alrighty. thanks for your help, Nick.

Posted 4 months ago #

Nick
Moderator

Hi,

Please don't forget to change the code. You custom.css file still has

font-family: "Open Sans", helvetica neue; Helvetica, sans-serif !important; font-size: 16px !important;

After the word neue there is a semi-colon. So at least change:

font-family: "Open Sans", helvetica neue, Helvetica, sans-serif !important; font-size: 16px !important;

Thanks,

Nick

Posted 4 months ago #

sgshapiro
Member

Thanks Nick. Will do, when I get a chance. On very limited internet at the moment.
Cheers.
::Stephen::

Posted 3 months ago #
Dude
Dude

Hi!

Great, please report back if it worked out...

Regards,
Peter

Posted 3 months ago #