WordPress Tricks

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

allaboutbasic

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;
}

You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

24 thoughts on “WordPress Theme: Nuntius. Theme CSS style sheet modification , Change Header,footer,font,sidebar, spacing titles and more.”

  1. 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.

    Like

    Reply

    1. 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

      Like

      Reply

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

    Like

    Reply

    1. 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

      Like

      Reply

  3. 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;}

    Like

    Reply

      1. 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!

        Like

      2. 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

        Like

      5. 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

        Like

      6. 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 https://allaboutbasic.com/ also in larger screen

        dont worry about this larger screen view..

        Om

        Like

      7. 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

        Like

      8. 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

        Like

      9. 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!

        Like

  5. 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?

    Like

    Reply

      2. 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

        Like

Leave a reply to allaboutbasic Cancel reply