Theme: Chunk by Automattic CSS and Style Sheet Modification : Modify and Change Site Title,Post Title, Post font, colors,font size,widgets ,Comments,links and more


theme chunk by automattic

Theme Chunk is another nice theme of Automattic. Here i am sharing you some modification techniques of css which you can use to beautify your theme design.

So,if you have wordpress.com or wordpress.org blog and if you are willing to use Chunk Theme by Automattic then this modification will help u a lot to give it a new look.


If you have any question feel free to ask me in Comments section.

You may also like the followings :

1. Show Adsense in individual Posts but not in Homepage.
2. Show Blog Post with image upto Read More in Home Page keeping all html formatting intact.
3. iTheme2 CSS Style Sheet Modification.
4. Theme Nuntius CSS Modifications


1. If u want to change Site Title’s font color,font size and font family

#site-title a {
color: #000000;
font-family: georgia;
font-size: 34px;
letter-spacing: 1px;
text-decoration: none;
}

2. If you want to remove the space above the Header Site Title of Chunk theme by Automattic.

#header {
min-height: 167px;
padding-top: 0;
width: 800px;
}

3. If you dont want to show Site Title as all Captial Letters please try this

#site-title {
text-transform: none;
}

4. If u want to change font size,font color and font type of site Description of Chunk theme

#site-description {
color: red;
display: inline-block;
font-family: times New Roman;
font-size: 14px;
font-weight: 300;
}

5. If you want to change the font color, font size and font family of navigation menu

#menu ul li.current_page_item > a, #menu ul li.current_page_ancestor > a, #menu ul li.current-menu-item > a {
color: blue;
}
#menu a {
color: blue;
font-family: times New Roman;
font-size: 18px;
margin: 0 10px;
padding: 10px 0;
text-decoration: none;
text-transform: uppercase;
}

6. IF you want to change the hover color of the menu item

#menu a:hover,#menu li:hover>a {
color: red!important;
}

7. If you want to change the Child menu items hover color

#menu ul ul li:hover>a {
color: black !important;
}

8. If you don’t want to show site description

#site-description {
display: none;
}

9. If you want to use header Image instead of Site Title follow the following steps

**** Remove the Site Title text (if u have)

and paste the following code

#header {
background-image: url(“http://christensen.everythingregarding.com/wp-content/themes/socrates/header-images/uploads/defaultheader.jpg”);
background-repeat: no-repeat;
margin-top: 8px;
min-height: 180px;
padding-top: 0;
width: 800px;
}

10.If you want to change the Date’s font color,font size and font family try the following code

.hentry .entry-meta .date a {
color: red;
font-family: times New Roman;
font-size: 17px;
font-weight: normal;
}

11. If you want to change the Left side’s “Leave a comment” font size, font family and color– try the following code

.hentry .entry-meta .comments a {
color: #36BCAB;
font-family: georgia;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}

12. If you want to change font size,font type and color of Post Title

.entry-title a {
color: #666666;
font-family: cursive;
font-size: 18px;
text-decoration: none;
}

13. If you want to change font color, font size and font family of Home page Posts

.hentry .main {
color: black;
font-family: cursive;
line-height: 19px;
text-align: left;
}

14.If you want to change image Border color of the posts

.entry-content a img {
border: 10px solid pink;
}

15. If you want to change the border color of the image in Hover

.entry-content a:hover img {
border: 10px solid red !important;
}

16. If you dont want to show Categories at the left hand side of the post

.hentry .entry-meta .cat-links {
display: none;
}

17. If you dont want to show comments in the left side of the post

.hentry .entry-meta .comments a {
color: #36BCAB;
display: none;
}

18. If you want to change the font size,font type and color “leave a reply” located at the bottom of each post page

#respond #reply-title {
color: red;
font-family: times New Roman;
font-size: 26px;
margin-bottom: 2px;
}

19. If you want to change the blockquote or quotation’s text background and colors try this code

blockquote {
background: none repeat scroll 0 0 #EEEEEE;
border-left: 10px solid #36BCAB;
color: #000000;
font-family: Georgia,Arial,Helvetica,sans-serif;
font-size: 15px;
padding: 10px;
text-align: justify;
}

20. If you want to change the font color, font size and font family of “Continue Reading”

a.more-link {
color: red;
font-size: 15px;
font-weight: bold;
font-family: times New Roman;
}

21. If you dont want to show Tags at the bottom of the post

span.tag-links {
display: none;
}

22. If you want to change Blackish Grey background color of Comments Title at the bottom of individual post

#comments #comments-title {
background: none repeat scroll 0 0 green;
border-radius: 3px 3px 3px 3px;
color: white;
display: block;
font-size: 20px;
font-weight: normal;
padding: 5px 20px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

23. If you want to change comment’s author/admin’s font size,font color and font family

.comment .comment-author cite {
color: red;
font-family: times New Roman;
font-size: 18px;
font-style: normal;
font-weight: bold;
}

24. If you want to change Comment’s author (non admin) font size,font color and font family

.comment .comment-author cite a {
color: red !important;
font-family: times New Roman;
font-size: 18px;
font-style: normal;
font-weight: bold;
}

25. If you want to change Comment’s body text font size,font color and font family

.comment p, .reblog p {
color: black;
font-family: cursive;
font-size: 15px;
line-height: 20px;
}

26. If you want to change sticky Post’s background color

.sticky .main {
background: none repeat scroll 0 0 lightBlue;
}

27. If you want to change Blog Post Title’s background color

.entry-title {
background-color: darkRed;

}
.entry-title a {
color: white;
padding-left: 3px;
}

28. If you want to change Footer side widget’s font color,font size and font family

.widget-title {
color: red;
font-family: ‘Oswald’,Helvetica,Arial,sans-serif;
font-size: 16px;
margin: 0 0 12px;
text-transform: uppercase;
}

29. If you want to change footer Widget’s links hover color

.widget a:hover {
color: blue;
}

30. If you want to change widget’s links font color , font size and font family

.widget a {
color: blue;
font-family: tahoma;
font-size: 15px;
text-decoration: none;
}



Want me to help you personally. You can hire me in fiverr ..


Click the Image below

About these ads

26 Responses to Theme: Chunk by Automattic CSS and Style Sheet Modification : Modify and Change Site Title,Post Title, Post font, colors,font size,widgets ,Comments,links and more

  1. os1 says:

    Excellent article! Extremely well written; concise and informative.
    I’d like to get in touch with you. Please send me an email if possible!

  2. hi! super helpful stuff!

    just a couple quick questions..

    1 – is there a way to change the background colour of the description box?
    2 – if i’m going to have numerous pages (in the menu section, i have home, about, etc), is there a way to ensure that the title of the posts on the other pages are uniform with the home page?

    • sorry, for #2 – that the title FONT/size etc of the posts on the other pages..

    • Hi Emma Robertson

      If you want to change the description background color of theme Chunk pls try the following code

      #site-description {
      background: -moz-linear-gradient(red, green) repeat scroll 0 0 #F1F1F1 !important;
      color: white !important;
      }

      Regardig question 2..

      Font is same everywhere ..u need any changes?

      pls let me know..

      Om

      • hi!

        thanks! but the code you gave me doesn’t seem to be working, nothing has changed.

        as for the fonts…not sure, if you look on little-city.ca, on the about page, the entry title is still in the default font from the chunk theme. how can i change it so that it’s the same as the home page?

  3. scratch that – got the code working for the description box! thank you so much!

  4. Hi Om,
    Do you know if I can place the menu in the left sidebar? Or any other widget?
    Greetings, Rena

  5. imveryape says:

    Hi Om,
    Is there any way to have background images on the left and right side of the posts like other blogs? Not sure if chunk theme can do this.
    Here is an example with the Illogical Computer site of the images to the left and right that I am talking about – http://illogicalcomputer.com/

    • Hi Imveryape
      yes..it will be possible …but the background image u used is problematic to make it look like the illogicalcomputer….

      Om

      • imveryape says:

        I could easily replace the image. I am just wondering whether or not I could set it up like that. Where the center is where the content goes, and the sides are borders that can be filled in with images.
        Thanks in advance, your help is very much appreciated!

      • Hi imveryape
        just for example….use the following code

        body.home {
        background-attachment: fixed;
        background-image: url(“http://illogicalcomputer.files.wordpress.com/2013/01/11_illogicalcomputerbackground1.jpg”) !important;
        background-position: center top;
        background-repeat: repeat-y;

        }

        #container {
        background: none repeat scroll 0 0 black !important;
        }

        Om

  6. imveryape says:

    I’ll give that a try. And I am assuming the “illogical computer” jpg is what I could replace with my own image, right?
    And could I change the #container color by just writing “white” instead of “black”?

  7. jenbackman says:

    Hi Om,

    Do you know if it is possible to add a facebook like button at the top of this theme? perhaps beside or under this site title?

    Jen.

  8. I need to change “Leave a comment” to just “comment” and cannot find the place to properly edit this for the whole site. The “inspect element” route didn’t work either. Help?

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 306 other followers

%d bloggers like this: