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

About these ads

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

  1. nr5q says:

    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

      • nr5q says:

        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

  2. nr5q says:

    Is there a way to send you a picture? I don’t know how else to explain.

  3. nr5q says:

    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!

  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

    • 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

  5. Hi Ruben..
    sorry for the late…

    would u mind to clarify the squiggle? i didnt understand ur requirements..

    Om

  6. john carvill says:

    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/

  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?

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

  9. Sorry, Early riser, but I don’t have skype. Wayne

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

  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!

  12. Helen says:

    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

  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!

    • 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

  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?

  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

  16. drt1965 says:

    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

  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.

    • Hi
      To Reve the “Older Posts” and “Bookmark the permalink” in Quintus theme

      #content #nav-above {
      display: none !important;
      }

      Regards
      Om

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

      • 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

  18. That worked like a charm. Thank you so very much.

Leave a 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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 313 other followers

%d bloggers like this: