WordPress Theme: Nuntius. Theme CSS style sheet modification , Change Header,footer,font,sidebar, spacing titles and more.

Wordpress  Theme Nuntius

Today I will share you css tricks of another awesome wordpress.com free theme “Theme Nuntius” which is really cool looking and you can use this premium looking theme fully free in your wordpress.com blog. So, if you are using Nuntius theme then the modifications below will help you…

In case you have any question feel free to ask me in the comments box.

Here I have shared you

If you want to change header default background color (#890000) of theme Nuntius then try the following steps

Go to Appearance- Theme Option then change the color from using the color chooser.
If you want to change the site title’s font color,font family and font size of theme Nuntius
#site-title a {
color: red;
font-family: Lobster,Georgia,Times,’Times New Roman’,serif;
font-size: 44px;
}

 

If you want to change Site Title’s hover color of Theme: Nuntius

h1#site-title a:hover {
color: yellow;
}

 

If you want to remove the Black bar from the top of the Site Title of theme Nuntius
div#menu-secondary {
display: none;
}

If you want to change the color of top black bar of Nuntius theme

#menu-secondary {
background: none repeat scroll 0 0 green;
float: left;
width: 100%;
}

 

If you want to change the font size,font family and font color of site description in the black bar use the following code

#menu-secondary #site-description {
color: black;
float: left;
font-family: Lobster,Georgia,Times,’Times New Roman’,serif;
font-size: 20px;
line-height: 17px;
margin: 10px 0;
width: 300px;
}

If you don’t want to show the Site Description try the following code

#menu-secondary #site-description {
display: none;
}

If you want to change the font family font size and font color of secondary menu at the black bar

#menu-secondary a {
border-right: 1px dotted #2A2A2A;
color: #FFFFFF;
display: block;
font-family: georgia;
font-size: 11px;
padding: 13px 15px 11px 14px;
text-decoration: none;
text-transform: uppercase;
}

If you want to change the submenu’s background color of secondary navigation bar during hover

div#menu-secondary ul ul a:hover {
background: #890000;
}

div#menu-secondary li:hover>a {
background: #890000;
}
#menu-secondary ul ul {
padding-top: 0;
}

If you want to change the spacing between the links in the Sidebar widget section

.widget ul li {
border-top: 1px solid #FEFEFE;
line-height: 20px;
padding: 6px 20px 4px;
}

If you want to change the widget section Header title background color

#sidebar-primary .widget-title {
background-color: yellow;
}

If you want to change Sidebar Widget Title’s font color,font size and font family

#sidebar-primary .widget-title {
color: darkRed;
font-family: times New Roman;
font-size: 26px;
}

If you want to remove the Tags and Permalink at the bottom of the Home Page Posts section

.entry-meta {
display: none;
}

If you want to change Post title’s font color,font family and font size

.entry-title a {
color: #333333;
font-family: times New Roman;
font-size: 1.2em;
}

If you want to change background color of Post Title

.entry-title {
background-color: green;
}

If you want to remove the “Posted By” and “Category” showing beneath the Post Title

.byline {
display: none;
}

If you want to change the font color,font size, font family line height of Posts

.entry-content p {
color: black;
font-family: times New Roman;
font-size: 18px;
line-height: 25px;
margin: 13px 0 20px;
text-align: justify;
}

If you want to remove “Leave a comment” at the top of Home page Post title

.entry-utility {
display: none;
}

If you want to change the font color,font family,font size of Primary or Main Navigation Menu

#menu-primary a {
border-left: 1px solid rgba(0, 0, 0, 0.9);
color: red;
display: block;
font-family: times New Roman;
font-size: 16px;
padding: 18px 22px 18px 20px;
text-decoration: none;
}

If you want to change hover font color font size,font family of Main Navigation Menu and their corresponding submenu

div#menu-primary li:hover > a, div#menu-primary ul ul:hover > a {
color: red;
background: yellow;
font-family: times New Roman;
font-size: 16px;
}

 

If this CSS Modification seems helpful to you? You can Let me buy a coffee :)

Please make some donations

About these ads

24 Responses to WordPress Theme: Nuntius. Theme CSS style sheet modification , Change Header,footer,font,sidebar, spacing titles and more.

  1. Erik says:

    Hi om, I am working on my own website, could you please give me some advice:
    - how to change the green color in the menu bar en and how to change the green colors in the footer?

    URL is http://www.omniainteractive.nl/

    Theme is ColorWay 1.7.3 door InkThemes.com

    Please help me and I will give you coffee again.

    • Hi Erik
      For footer try the following code
      **the code will go eiter in custom.css or in http://www.omniainteractive.nl/wp-content/themes/colorway/css/green.css

      .footer-navi {
      background-color: red;
      }
      .footer-container {
      background-color: red;
      background-image: none;
      }

      For Menu
      try the following code

      #menu li.current-menu-item a, #menu li.current-menu-parent a, #menu li.current_page_parent a, #menu li a.selected, #menu li a:hover, #menu li.current_page_item a
      {
      background-color: red;
      }

      Pls let me konow the result

      Regards
      Om

  2. lspring1 says:

    I am currently using the theme Blix and am trying to change the color of the hover navigation. Could you help with this template?

    • HI Lesley..
      Good Morning..
      sorry for the late..as i was late last night

      Would u mind to share me the site url and also ur issues one by one?

      ** i will be little late today also…
      but let me know..

      Om

  3. Dana says:

    Please forgive what may be a dumb question. I’m setting up a website and need to change the font size on the left side of the footer.

    #footer_logo{padding-left:30px;padding-top:30px;padding-bottom:6px;font-family:Georgia, “Times New Roman”, Times, serif;font-size:30px;color:#666;font-style:italic;}
    #footer_logo_text{font-size:12px;color:#666;font-style:italic;padding-left:30px;}
    #footer_right{font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:20px;margin-right:20px;color:#FFF;float:right;}
    #footer_menu{margin-top:30px;font-size:13px;color:#FFF;text-align:right;}
    #footer_menu li {display:inline;}
    #footer_menu a{padding-left:4px;padding-right:4px;color:#FFF;font-family:Arial, Helvetica, sans-serif;text-decoration:underline;font-size:13px;}

  4. ltcfacts says:

    I am using Nuntius and want to decrease the header width. I’ve tried numerous codes, but I really don’t understand it. Please help.
    LTCFacts.org

    • Hi itcfact…
      it seems ur header is Ok..which portion of ur header u want to decrease width?

      pls let me know.

      Om

      • ltcfacts says:

        I guess it’s the depth that I was decreased. There is too much blue at the top, and I’d like it to be a little thinner, allowing more of my page to be visible. Specifically, I want the menu buttons to be located directly under my header image with only a little dark blue showing, to match the dark blue visible above the header image. I’ll probably need to adjust the header widget placement to be higher on the page too.
        Thank you for your help!

      • HI ltcfacts

        pls try the following code

        #sidebar-header {
        color: rgba(255, 255, 255, 0.5);
        display: inline;
        float: right;
        margin: 22px 20px 0 0;
        overflow: hidden;
        width: 484px;
        }

        Pls let me know it works for u or not

        Om

      • ltcfacts says:

        THANK YOU! It worked.
        I think I’ll buy you another coffee!!!

      • Hi Itcfacts..

        didnt get ur coffee :(

        Om

      • ltcfacts says:

        Om,
        I’ve got one more change that I’d like to do for this Nuntius format. When viewed on larger screens, there is lots of light gray space around the body (on the left) and the sidebars (on the right). I don’t know if this is called the gutters or margin. Anyway, I’d like this area to be narrower. Any suggestions?

        BTW – I’ve donated $5 twice, so I hope you bought coffee with it.

        Thanks.
        Carolyn

      • Hi Carolyn..
        yes..i didnt understand first that it was u as ur site name was not mentioned…and thanks for the coffee..
        :)

        In larger screen the grey area which u r seeing in both side of ur site is normal .. pls see my site http://allaboutbasic.com/ also in larger screen

        dont worry about this larger screen view..

        Om

      • ltcfacts says:

        So, how much coffee do I have to buy to get the code to change the margins? ;)

        I really like the look of websites that have wider looks to them. It just seems to be a waste of space to have 1.75″ of margins on either side of my content and sidebars. I would rather have only .75″ of margin on either side.
        Is there anyway to do this? Is there a problem with browsers displaying content this way?

        I’d really appreciate your help. Thanks!
        Carolyn

      • HI Carolyn..
        would u mind to try the following code pls.. (it is just a rough to test… pls add me in skype om2000_cuet)
        *** due to increase of width due to this css change site may look different..which u can control using the css

        .breadcrumbs {
        background: -moz-linear-gradient(center top , #FAFAFA, #F2F2F2) repeat scroll 0 0 transparent;
        border-bottom: 1px solid #E4E4E4;
        border-radius: 5px 5px 0 0;
        color: #8F8F8F;
        font: 11px/11px Arial,Verdana,sans-serif;
        min-height: 50px;
        overflow: hidden;
        width: 98%;
        }
        #container {
        background: url(“images/bg-container.png”) repeat-y scroll 0 0 #F9F9F9;
        border-radius: 0 0 5px 5px;
        overflow: hidden;
        width: 98%;
        }
        #content {
        background: -moz-linear-gradient(center top , #F9F9F9, #FFFFFF) repeat scroll 0 0 transparent;
        float: left;
        overflow: hidden;
        padding: 0 0 22px;
        width: 70%;
        }
        .hentry {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #E5E5E5;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 1px 1px #E7E7E7;
        color: #666666;
        display: inline;
        float: left;
        font: 14px/24px Arial,Verdana,sans-serif;
        margin: 20px 0 0 20px;
        padding-right: 12px;
        width: 96%;
        }
        #sidebar-primary {
        color: #8F8F8F;
        float: left;
        width: 27%;
        }

        #sidebar-primary .widget {
        background: none repeat scroll 0 0 #F3F3F3;
        border-radius: 5px 5px 5px 5px;
        display: inline;
        float: left;
        font-size: 12px;
        margin: 0 20px 20px;
        padding-bottom: 12px;
        padding-left: 12px;
        padding-right: 12px;
        width: 96%;
        }
        #comments-template {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #E5E5E5;
        border-radius: 5px 5px 5px 5px;
        display: inline;
        float: left;
        margin: 20px 20px 0;
        width: 96%;
        }

        and..try to add me in skype i remain online after my job ( i am in GMT +6 time zone)

        Om

      • ltcfacts says:

        I added you to Skype, but the code worked GREAT!! Check it out!!
        I’m buying you a double coffee for this one!! Thank you, thank you!

  5. Tytan McBride says:

    Great tips and an absolute major help! Do you know what the CSS coding for changing the colour of the selected page in the Secondary Menu is?

    I have the menu set to different shades of blue, but when you click on a page from it, the selected one turns out black. How do I change this?

    • Hi Tytan
      would u mind to share me ur site URL pls?

      Om

      • Tytan McBride says:

        My website URL is http://www.muzesoftware.com. I also wanted to let you know that I have given credit to you for providing me with the CSS codes above in the ‘Help/About’ section.

      • Hi Tytan

        pls check the following code

        below is the code of Selected secondary menu’s Parent background color
        *** change the color from “red” to ur choiceable color

        #menu-secondary .current_page_ancestor > a {
        background: red !important;
        }

        and..

        here is the code for Selected Secondary menu’s submenus background color

        #menu-secondary .current-menu-item > a {
        background: pink !important;
        }

        pls let me know they are ok ornot

        Om

  6. Hi old chap,
    I’m trying to change the font colour in the header of a page in Nunty. Currently grey, I’d like white. http://www.apisregina.com
    Coffe will be bought after Wednesday

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 303 other followers

%d bloggers like this: