WordPress Tricks

WordPress Theme Quintus by Automattic :CSS Style sheet modification of Header,footer,site title,blog content,sidebar and more.

Theme Quintus by AutomatticTheme 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;
}

 

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

 

Please make some donations

54 thoughts on “WordPress Theme Quintus by Automattic :CSS Style sheet modification of Header,footer,site title,blog content,sidebar and more.”

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

    Like

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

        Like

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

    Like

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

    Like

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

    Like

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

        Like

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

        Like

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

    Like

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

    Like

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

      Like

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

    Like

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

      Like

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

        Like

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

        Like

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

    Like

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

    Like

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

        Like

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

        Like

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

    Like

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

        Like

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

    Like

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

        Like

Leave a Reply to john carvill Cancel 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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s