All About Basic

Home | Need Help? | Archives

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

April 7, 2012 12:01 pm


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.


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

Like this post?

Posted by allaboutbasic

Categories: Web Development & WordPress

Tags:

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. Excellent article! Extremely well written; concise and informative.
    I’d like to get in touch with you. Please send me an email if possible!

    Like

    By os1 on April 9, 2012 at 9:15 pm

    1. Hi,
      thanks a lot bro…

      Prakash

      Like

      By allaboutbasic on April 9, 2012 at 10:12 pm

  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?

    Like

    By emmarobertson89 on April 25, 2012 at 8:18 pm

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

      Like

      By emmarobertson89 on April 25, 2012 at 8:18 pm

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

      Like

      By allaboutbasic on April 25, 2012 at 9:26 pm

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

        Like

        By emmarobertson89 on April 26, 2012 at 12:44 pm

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

    Like

    By emmarobertson89 on April 26, 2012 at 12:48 pm

    1. Hi Emmarobertson89..
      Ok..just let me know if u need any help..

      Om

      Like

      By allaboutbasic on April 26, 2012 at 3:39 pm

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

    Like

    By biodanzafabriek on January 23, 2013 at 5:39 pm

    1. Hi Rena.. Yes u can place menu in the left sidebar… i have modified the theme to
      add a left sidebar in that same place
      check this one

      https://allaboutbasic.com/2012/08/13/wordpress-theme-chunk-with-sidebar-in-homepage/

      Om

      Like

      By allaboutbasic on January 24, 2013 at 9:12 pm

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

    Like

    By imveryape on March 11, 2013 at 4:34 pm

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

      Om

      Like

      By allaboutbasic on March 11, 2013 at 8:33 pm

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

        Like

        By imveryape on March 11, 2013 at 8:37 pm

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

        Like

        By allaboutbasic on March 11, 2013 at 8:52 pm

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

    Like

    By imveryape on March 11, 2013 at 8:56 pm

    1. Hi
      right..u have to change the image url with urs
      it is just for example

      Om

      Like

      By allaboutbasic on March 11, 2013 at 9:02 pm

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

    Like

    By jenbackman on March 12, 2013 at 1:29 am

    1. Hi Jen
      it is only possible if u are using your own hosting except free wordpress.com

      Om

      Like

      By allaboutbasic on March 13, 2013 at 1:16 pm

  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?

    Like

    By cunningkennedy on November 28, 2013 at 4:05 am

    1. Hi
      have u checked “comments.php” in ur theme?

      Like

      By allaboutbasic on November 28, 2013 at 2:05 pm

      1. I can’t find the .php files, in all of the forums I’ve read through they’ve told me to go to “Appearance,” then “Editor,” but Editor isn’t there.

        Like

        By cunningkennedy on November 28, 2013 at 3:31 pm

      2. Oh got the issue
        as u r using wordpress.com free hosted site…u will not be able to do such type of changes….

        sorry for that as cant help for this (wordpress.com will not allow it)

        Om

        Like

        By allaboutbasic on November 28, 2013 at 5:03 pm

      3. nope, its a paid for site on wordpress.com. does that help?

        Like

        By cunningkennedy on November 28, 2013 at 8:40 pm

      4. Hi
        u have paid either for custom design or domain or for theme
        but..that doesnt include to modify php file of the theme

        Om

        Like

        By allaboutbasic on November 28, 2013 at 8:55 pm

      5. how am I able to do that then? I don’t mind paying more for the option as there’s a few changes I really want to make.

        Like

        By cunningkennedy on November 28, 2013 at 8:58 pm

      6. I think u better talk to wordpress.com support regarding this
        and also check this

        http://en.support.wordpress.com/

        Om

        Like

        By allaboutbasic on November 28, 2013 at 9:02 pm

Leave a Reply

Mobile Site | Full Site

Get a free blog at WordPress.com Theme: WordPress Mobile Edition by Alex King.