WordPress Theme Quintus by Automattic :CSS Style sheet modification of Header,footer,site title,blog content,sidebar and more.
August 28, 2011 43 Comments
Theme Quintus by Automattic is another new theme released by Automattic. Before I have discussed about
theme Chateau by Ignacio Ricci Css style sheet modificication
and
Theme Fruit Shake by Automattic css style sheet modification
. Here I have tried to show you some basic and important css modification of theme quintus so that you can give it a new look.
If you need more help just put your question in the comments section.
1. If you want to change the font size,font type and color of Site title
#site-title a {
color: red;
font-family: tahoma;
font-size: 1.3em;
padding-bottom: 5px;
}
2. If you want to change the Site Title Hover color,font size and font family
#site-title a:hover {
color: white;
font-family: tahoma;
font-size: 1em;
}
3. If you want to remove the Top Space from the Quintus theme.
#page {
background: none repeat scroll 0 0 #F7F3EE;
border: 3px solid #050505;
margin: 5px auto 60px;
max-width: 1100px;
position: relative;
}
4. If you want to reduce the spacing in the Header Site Title..
.blog-header {
background: url(“images/header.jpg”) repeat scroll 0 0 transparent;
display: table-cell;
height: 127px;
padding: 0;
vertical-align: middle;
width: 1100px;
}
5. If you want to change the font size,font color and font family of site description
#site-description {
color: white;
font-family: times New Roman;
font-size: 18px;
font-weight: 100;
margin: 0 0 1em;
text-align: center;
}
6. If you don’t want to show the navigation bar try the following css.
#access {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #E9E0D1;
display: none;
margin: 0 auto;
padding: 10px 0;
position: relative;
width: 100%;
}
7. If you want to change the background color of navigation menu bar.
#access {
background: none repeat scroll 0 0 gray;
border-bottom: 1px solid #E9E0D1;
display: block;
margin: 0 auto;
padding: 10px 0;
position: relative;
width: 100%;
}
8. If you want to change the Navigation menu’s font color,font size and font family.
#access a {
color: white;
display: block;
font-family: tahoma;
line-height: 2em;
padding: 0 1em;
text-decoration: none;
}
9. If you want to change the Navigation menu’s Hover font color,font size and font family
#access li:hover > a, #access ul ul:hover > a {
color: red;
}
10. If you don’t want to show the search bar in the Navigation Menu
#access #searchform {
background: none repeat scroll 0 0 white;
display: none;
position: relative;
z-index: 1;
}
11. If you want to change the top Header background color
.blog-header {
background: none repeat scroll 0 0 skyBlue;
display: table-cell;
height: 127px;
padding: 0;
vertical-align: middle;
width: 1100px;
}
12. If you want to use unique color instead of image in the Background.
body {
background: none repeat scroll 0 0 green;
}
13. If you don’t want to show entry date in the blog post
.entry-meta .entry-date {
background: none repeat scroll 0 0 #C4BDB2;
color: #111111;
display: none;
font-size: 13px;
font-style: italic;
height: 64px;
left: -100px;
line-height: 44px;
position: absolute;
text-align: center;
top: 0;
width: 64px;
}
14. If you want to change Blog Post Background Color.
#main {
background-color: white;
padding: 20px 80px 40px;
}
15. If you want to change the width of blog post’s content section
#content {
margin: 0 244px 0 0;
text-align: justify;
}
#main {
background-color: white;
padding: 20px 43px 40px;
}
16. If you want to change blog post title’s font color,font family and font size
.entry-title, .entry-title a {
color: red;
display: inline;
font-family: times New Roman;
font-size: 34px;
font-weight: 400;
}
17. If you want to remove footer side Tags with comments .
footer.entry-meta {
border-left: 3px solid #FFFFFF;
display: none;
margin: 40px 0 0;
padding-left: 15px;
}
18. If you want to change the link color in the blog post.
.content a {
color: red;
}
19. If you want to change Blog Post title’s hover font color,font size and font family.
.entry-title a:hover {
color: blue;
font-family: times New Roman;
font-size: 40px;
}
20. If you want to change blog post content’s font color, font size,font family
.entry-content {
color: black;
font-family: tahoma;
font-size: 15px;
line-height: 26px;
text-align: justify;
}
21. If you want to change right sidebar widget’s font color,font size and font family
.widget .widget-title {
border-bottom: 1px solid #E7D9B9;
color: #554B34;
display: inline-block;
font-family: tahoma;
font-size: 14px;
font-weight: 400;
padding: 4px;
}
22. If you want to change right sidebar’s widgets link color,font size and font family.
.widget a {
color: red;
font-family: times New Roman;
font-size: 17px;
}
23. If you don’t want to show the Comments by using css.
#comments {
clear: both;
display: none;
margin: 20px 0;
}
24. If you want to change the font color,font family and font size of “Leave a reply”
#respond h3 {
background-color: gray;
color: red;
display: block;
font-family: georgia;
font-size: 23px;
margin-bottom: 15px;
margin-top: 15px;
padding-bottom: 0;
padding-top: 0;
}
Hi! Thanks for the great info for the Quintus theme. I am trying to remove the big space between the Navigation Menu and Blog Post Title so that it looks just like your image above, but I don’t see that css code listed above. Any help you could give would be appreciated!
Hi,
Just visited your blog.. i didn’t see any big space between your blog post title and navigation menu..
would you mind to clear me your problem again?
Regards
Om
When you go to my blog, there is a space between the bottom of the menu and the top of the word NR5Q. The space is approximately 4 times the height of the NR5Q. I want to remove that.
Thank you for answering so quickly! I didn’t know you had answered my post. I didn’t receive any kind of notification and just happened to look at your page in order to check something else. Wonder why?
Thanks for your time!
Hi,
Not sure why you didn’t get notification of comments..are you talking about your blog http://nr5q.wordpress.com/ ? i didn’t see any large gap…
would you mind to clear?
Regards
Om
Is there a way to send you a picture? I don’t know how else to explain.
HI brother,
sorry for the late in reply..
yes..send me the image at om2000_cuet@yahoo.com
Regards
Om
I found the solution! Here’s the spot:
.content article {
background: url(images/ornament.png) center bottom no-repeat;
margin: 5px 0 70px;
padding-bottom: 50px;
position: relative;
}
I changed the margin to be 5px instead of what it was and it works great. Thanks for being willing to help! Thank you!
Hi,
thanks brother for your comments..
just let me know if you have any problem
Regards
Om
Great theme… but I’m having some trouble. When I used Quintus at WordPress.com, I had several MORE widgets, RSS Link, Follow Blog, Image, & Gravatar. When I moved over to my own domain on Dreamhost, I suddenly have very few widgets and the ones I’ve just listed are the ones I want the most. What happened to them? Can I get them back?
Thanks.
http://www.stephericsson.com
Hi Setphanie
that widgets are wordpress.com’s provided widgets… but in your new hosting i think u have to search for that plugins from plugins directory..
Regards
Om
Hi Ruben..
sorry for the late…
would u mind to clarify the squiggle? i didnt understand ur requirements..
Om
Hello. How can I hide the page header on just one specific page? On the ‘About’ page, i wasnt to get rid of the big ‘About’ header:
http://www.oomska.co.uk/about/
Hi john carvill
sorry for the late reply
would u mind to try the following code?
#post-3329 .entry-title {
display: none;
}
Om
When I started with WordPress, I spend days searching for a theme. I found Quintus and loved it: simple widget layout mixed with text and images, etc. I was especially enamored with the archaic color. The tone of my religious blog—anabundanceofjoy.com—was set. Before I went custom domain, I was assured by two different WordPress support people that there would be no problem using Quintus. When it didn’t work, I got this reply “I have taken a look at the Quintus theme, and this seems to be an exclusive WordPress.com theme that will not work on WordPress.org blogs. This means that as you are using a custom URL anabundanceofjoy.com and a WordPress.org blog on this URL, you will be unable to use the Quintus theme, unless you can find a download of it.” Is there any chance of me being happy again?
Hi wayne bartelt
I think u want to download the quintus theme..here is the link..would u mind to check?
http://wordpress.org/extend/themes/download/quintus.1.0.1.zip?nostats=1
Om
I was having the same problem (wanted Quintus but couldn’t find it through the cpanel on my host site, bluehost).
This link worked great for me, and i was able to upload it without difficulty. Thanks!
I want to activate the Leave a Comment feature on the Home (Blog) page.
Hi Wayne..
have u selected to show comments in that page?
Let me know pls
Om
Thanks allaboutbasic,
Your response time is fantastic. No, I didn’t activate the comment section on the first page of Quintus which is designated as Leave a Comment. I saw your notation #24, but it didn’t tell me how to activate the comment section. Reply sections on other pages work well. I am not a geek and frightened of HTML. Afraid of using codes lest I screw something up. Yes, I’d like to enlarge the font, and possibly use color, on the right side bar (and saw your notation in the Style Sheet), but wouldn’t know where to put the code words. I’m 84 and have learned hugely in the last 2 years and am finished learning in preference to doing. Love your Quintus. Get lots of comments from Brazil. Wayne http://anabundanceofjoy.com
Hi,
thats great..nice to know u r doing ur site in ur 84.. really appreciate it..
would u mind to add me in skype pls? om2000_cuet is my id.
Om
Sorry, Early riser, but I don’t have skype. Wayne
Hi,
do u have Yahoo?
let me know …
Om
Hi allaboutbasic or om2000_cuet. I’m on Yahoo Messenger and haven’t an idea how to proceed. Was I supposed to give myself a funny name? i gave my email w.bartelt@sbcglobal.net. i also have a gmail acct. waynebartelt@gmail.com. how do i get to om2000_cuet? or how does om2000_cuet get to me?i got on to facebook and found i have too many friends.
Cool..
ok.. send me mail here om2000_cuet@yahoo.com (send me mail from ur yahoo mail account..)
Om
(not sure if this comment went through…please delete if doubled up)
Hi,
I’m using this blog theme and somhow the magnifying glass symbol in the search box of the navigation bar has gone. Any ideas on what I’ve done and how I can get it back? Help would be much appreciated!
Hello The Married Travellers,
would u mind to share me ur site url to check the Search magnify glass issue
Om
I love Quintus, and use it for most of my sites, but is there a way to remove the funny squiggle from the top line of every post? Sometimes I can get the first line to drop down below it – and then it looks kinda sharp – but usually the thing just sits over the text or graphics: http://matanuskabarns.wordpress.com/
Thanks in advance for any help you can offer!
Hi Helen..
to remove the Squiggle from the top of every post in wordpress Quintus theme
use the following css code
.content article {
background: none no-repeat scroll center bottom transparent !important;
}
let me know it helps or not
Om
Hello,
I am new to blogging and have just set up a Quintus WordPress page. I was wondering if there is any way to put a little picture in place of the date dots on the left side of each post. I would really appreciate your help. Thanks!
Marsha share me the image url
i will check it and let u know
Om
Marsha
i checked..
to use ur small image in theme Quintus check this code
.entry-meta .entry-date {
background: url(“http://2.gravatar.com/avatar/86b84fac28c9049b7e4176dcb5d40c52?s=48&d=identicon&r=G”) repeat scroll 0 0 transparent !important;
color: transparent !important;
}
Om
Hello, again. I tried to put the code into the post but when I test-publish, the written code doesn’t have any effect on the post other than look like gibberish added. I think this must be way beyond my abilities, since I am completely new to this. I’m trying to learn, but don’t really know where to begin. I don’t know if this helps, but my site is called “Pigment of Your Imagination” and the URL is marshagilliam.wordpress.com. Duh, sorry to be so new to this that I can’t even comprehend what to do with your suggestion. I will keep trying. Thank you so much. Marsha
Date: Sun, 24 Feb 2013 23:09:37 +0000 To: marshagilliam@hotmail.com
Hi Marsha
the code i shared is not to add inside post…
u have to add it in ur custom css or style.css portion
if you are using wordpress.com then you need to purchase the custom design feature from wordpress
or if you have your own hosting…then u have to use it in style.css (or custom.css)
Om
When I use the default Quintus color scheme, I am able to change the footer color to whatever I like by updating .blog-footer {background: #000000;}
However, when I switch to the Archaic background scheme, this setting is completely ignored and the footer background is a very dark maroon regardless of what I set the footer color to.
Has anyone else run into this? Any solutions?
Hi Mike Lyter
would u mind to provide me ur site url pls?
Om
Hi,
3 questions:
Is there a way to add an image to the header section?
Can I add images to the right side of the nav bar (above the sidebar)?
How can I decrease that margin gap between the search icon in the nav bar and where the nav bar begins on the left side?
Thank you
Mark
Hi Mark
thans..and sorry for my late response…
yes sure u can use image….
if u have choiceable image..share me the url and i will check
Om
I have a few images in mind that I am currently creating. If you know and can share the url for the original quitnus header background image that would be much appreciated.
Hi
are u using quintus theme ? as i found u r using bueno theme?
what is ur actual site url?
let me know pls
Om
Yes, Quintus:
buildthefire.com
Thanks
Hi
thanks..and sorry for the late …can u share me the image url which u want to use in the header pls?
Om
http://i1277.photobucket.com/albums/y498/booneshakalaka/logo2_zps434585e4.png
Hi
thanks..the image u shared doesnt seem header image..but…try this code
.blog-header {
background: url(“http://i1277.photobucket.com/albums/y498/booneshakalaka/logo2_zps434585e4.png”) repeat scroll 0 0 transparent !important;
}
Regards
Om