WordPress Tricks

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

allaboutbasic

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

You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

56 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

    Reply

      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

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

    Reply

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

    Reply

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

    Reply

      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

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

    Reply

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

    Reply

    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

      Reply

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

    Reply

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

      Reply

      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

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

    Reply

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

    Reply

      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

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

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

    Reply

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

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

    Reply

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

        Like

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

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

    Like

    Reply

Leave a comment