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

You can take my personal help in skype : om2000_cuet