WordPress Theme: Nuntius. Theme CSS style sheet modification , Change Header,footer,font,sidebar, spacing titles and more.
January 9, 2012 17 Comments
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;
}
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
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
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;}
Hi Dana
pls share me your website URL to check…
Om
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
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
THANK YOU! It worked.
I think I’ll buy you another coffee!!!
Hi Itcfacts..
didnt get ur coffee
Om
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
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
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!