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!
LikeLike
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
LikeLike
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!
LikeLike
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
LikeLike
Is there a way to send you a picture? I don’t know how else to explain.
LikeLike
HI brother,
sorry for the late in reply..
yes..send me the image at om2000_cuet@yahoo.com
Regards
Om
LikeLike
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!
LikeLike
Hi,
thanks brother for your comments..
just let me know if you have any problem
Regards
Om
LikeLike
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
LikeLike
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
LikeLike
Hi Ruben..
sorry for the late…
would u mind to clarify the squiggle? i didnt understand ur requirements..
Om
LikeLike
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/
LikeLike
Hi john carvill
sorry for the late reply
would u mind to try the following code?
#post-3329 .entry-title {
display: none;
}
Om
LikeLike
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?
LikeLike
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
LikeLike
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!
LikeLike
I want to activate the Leave a Comment feature on the Home (Blog) page.
LikeLike
Hi Wayne..
have u selected to show comments in that page?
Let me know pls
Om
LikeLike
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
LikeLike
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
LikeLike
Sorry, Early riser, but I don’t have skype. Wayne
LikeLike
Hi,
do u have Yahoo?
let me know …
Om
LikeLike
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.
LikeLike
Cool..
ok.. send me mail here om2000_cuet@yahoo.com (send me mail from ur yahoo mail account..)
Om
LikeLike
(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!
LikeLike
Hello The Married Travellers,
would u mind to share me ur site url to check the Search magnify glass issue
Om
LikeLike
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!
LikeLike
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
LikeLike
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!
LikeLike
Marsha share me the image url
i will check it and let u know
Om
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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?
LikeLike
Hi Mike Lyter
would u mind to provide me ur site url pls?
Om
LikeLike
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
LikeLike
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
LikeLike
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.
LikeLike
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
LikeLike
Yes, Quintus:
buildthefire.com
Thanks
LikeLike
Hi
thanks..and sorry for the late …can u share me the image url which u want to use in the header pls?
Om
LikeLike
LikeLike
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
LikeLike
Hi OM,
I now have another problem.
I am using the Pages widget at the top of the right hand menu. When viewing the blog or individual Pages the widget is fine. But when I go to an individual Blog Page I am getting the Permalink option appearing between the “Pages” header and the first page in the list.
Is it possible to re-position the permalink?
DRT
LikeLike
hi DRT
share me ur site url pls
Om
LikeLike
http://www.drturnbull.co.uk/portbooks
LikeLike
Hi DRT
u can remove it
.content #nav-above {
display: none !important;
}
Om
LikeLike
I don’t want to remove it, I want to move it to somewhere else.
Under each post there is a line saying “This entry was posted in ” followed by the name of the category the post is in. I want to display the permalink below that line.
Is that possible? If so, please tell me where in the css file (or another file?) I need to make the edit.
Sorry, I am inexperienced at this stuff so need very clear instructions please?
Thanks
Derek
LikeLike
Hi Derek
it can be done..but for this ..i think..the single post php page need to be edited..only css cant help
Om
LikeLike
Hi, This is so useful to me. Thank you so much. Can you please help me remove the right panel in the navigation menu, which says ‘older posts’ the blog home page and ‘bookmark the permalink’ in each post page? This panel does not appear when you load a page. Thank you.
LikeLike
Hi
To Reve the “Older Posts” and “Bookmark the permalink” in Quintus theme
#content #nav-above {
display: none !important;
}
Regards
Om
LikeLike
Many thanks. That takes care of the links. I still see the vertical line in the navigation menu. Can you please let me know what I should to remove that so that the pages list extend across the entire screen? Hope I am clear. Many thanks once again.
LikeLike
Thanks..Try this
#access .menu {
border-right: medium none !important;
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
margin-left: 1px !important;
margin-right: 0 !important;
margin-top: 2px;
padding-right: 10px;
width: 100% !important;
}
Om
LikeLike
That worked like a charm. Thank you so very much.
LikeLike
How do I remove “Bookmark the permalink.”?
How do I remove “This entry was posted in Uncategorized.”?
This strings are shown on the Posts page. Bookmark string at the top right, and This entry string at the end of the Post
LikeLike
Hi
thanks
would you mind to share me your site url to check please?
Regards
Om
LikeLike