Skip to content

Customising your TwentyEleven WordPress theme

October 2, 2011

Recently i tried to customize the Twenty Eleven WordPress Theme for KodeLearn’s blog..So was googling for some few tricks and tips..I found some basic customization which most of the users will need on WordPress theme..So just thought of posting some few here.

1. If you want to Header Site Title Font color,font size, font type of your Twenty Eleven theme

#site-title a {
color: red;
font-family: times New Roman;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}

2. If you want to change the Site Title’s mouse over (hover) font color of Twenty Eleven

#site-title a:hover, #site-title a:focus, #site-title a:active {
color: #1982D1;
}

3. If you want to remove the Blank space from the upper side of the Site Title

#site-title {
margin-right: 270px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 1.65625em;
}

4. If you want to remove the Blank space just from the footer side of Site Title of Twenty Eleven

#site-description {
color: #7A7A7A;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

5. If you want to change the Site Description’s font color, font size and font family of theme twenty eleven

#site-description {
color: blue;
font-family: tahoma;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

6. If you want to change the Height of Header Image of twenty eleven

#branding img {
height: 100px;
margin-bottom: -7px;
width: 100%;
}

7. If you don’t want to show the search from the top

#branding #searchform {
display: none;
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
}

8. If you want to change the background color of navigation Menu in Twenty Eleven theme

#access {
background-image: -moz-linear-gradient(#252525, red);
}

9. If you want to change the Post Title’s font color, font type and font size (In Homepage)

.entry-title, .entry-title a {
color: red;
font-family: tahoma;
font-size: 1.2em;
text-decoration: none;
}

// for individual blog post Try this one

.singular .entry-title {
color: #000000;
font-size: 36px;
font-weight: bold;
line-height: 48px;
}

10. If you want to change Blog Post Titl’e Hover font color

.entry-title a:hover, .entry-title a:focus, .entry-title a:active {
color: #1982D1;
}

11. If you don’t want to show “Posted On” or Blog Post date (entry meta)

It will also help you to hide the Footer side entry meta.

.entry-meta {
clear: both;
color: #666666;
display: none;
font-size: 12px;
line-height: 18px;
}

12. If you want to change blog Posts font color, size and font type.

.entry-content p {
font-family: times New Roman;
color: red;
font-size: 1.1em;
}

13. If you want to change Right SideBar widget Title’s font color, size and font type


.widget-title {
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}

14. If you want to change right side bar widget’s Links color, font size,font type of Twenty Eleven

.widget a {
color: black;
font-family: times New Roman;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

15. If you want to add additional widget titles colored background in Theme twenty eleven

.widget-title {
background-color: gold;
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
padding-left: 37px;
text-transform: uppercase;
}

16. If you want to change or Increase the width of Right Sidebar

#primary {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-right: -26.4%;
margin-top: 0;
width: 90%;
}

#secondary {
float: right;
margin-right: 7.6%;
width: 24.8%;
}

17.If you dont want to show or dont want your user to comments in your blog

#comments {
display: none;
}

18.If you want to change the comments font color,size and font type

.comment-content p {
color: red;
font-family: times New Roman;
font-size: 16px;
}

19. If you want to change the font color of Navigation menu

#access a {
color: red;
display: block;
line-height: 3.333em;
padding-bottom: 0;
padding-left: 1.2125em;
padding-right: 1.2125em;
padding-top: 0;
text-decoration: none;
}

20. If you want to change the font size,font type of Comments Author Name and Date

.comment-meta {
font-size: 16px;
line-height: 2.2em;
}

21. If you don’t want to show footer side Tag in twenty eleven

.entry-meta {
clear: both;
color: #666666;
display: none;
font-size: 12px;
line-height: 18px;
}

22. If you want to change the body background color of twenty eleven

body {
background-color: red;
}

23. If you want to change HomePage Blog Posts summary background color

#page {
background-color: yellow;
}

24. If you want to change blog post Title’s Background color of Twenty Eleven

.entry-title, .entry-title a {
background-color: gray;
color: #222222;
text-decoration: none;
}

25. If you dont want to show Comments Bubble (Number of image) in the right side of Post Title

.entry-header .comments-link a {
display: none;
}

26.If you only want to change HomePage Blog Post’s Background Color

#content {
background-color: gold;
margin-bottom: 0;
margin-left: 7.6%;
margin-right: 34%;
margin-top: 0;
width: 58.4%;
}

27. If you want to remove the complete Header portion ( Site Title, Site Description and search box)

#branding hgroup {
display: none;
margin: 0 7.6%;
}

28. If you want to change the space between the Navigation Menu Of theme Twenty Eleven try the following CSS

#access a {
color: black;
display: block;
font-size: 14px;
line-height: 3.333em;
padding: 0 0.6em;
text-decoration: none;
}

29. If you want to reduce the padding between my pictures and text Of theme Twenty Eleven try the following CSS

p {
margin-bottom: 1.625em;
}

img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 0;
}

30. If you want to align your blog post, site title and Navigation menu left aligned in Twenty Eleven THeme try the following CSS

#branding hgroup {
margin: 0 0.6%;
}
#access div {
margin: 0 0.6%;
}
#content {
margin: 0 34% 0 0.6%;
width: 58.4%;
}

31. If you want to add a border in the right side of blog post content in Twenty Eleven THeme try the following CSS

#content {
border-right: 1px dotted;
margin: 0 34% 0 0.6%;
padding-right: 11px;
width: 61.4%;
}

32. If you don’t want to show the bullet in the link of rightbar of Twenty Eleven THeme try the following CSS

.widget ul li {
color: #777777;
font-size: 13px;
list-style: none outside none;
}

33. If you want to show border after the widgets of rightbar of Twenty Eleven THeme try the following CSS

.widget {
border-bottom: 1px dotted grey;
clear: both;
padding: 15px 0 20px;
}

34. If you want to change the hover color of the Navigation Menu of Twenty Eleven THeme try the following CSS

Note : change the color code as your choice.and paste the code at the bottom of style.css of your main (parent theme)

#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}

Thanks to the site AllAboutBasic.com for this awesome stuff…

P.S:- Comments from Web Designers & programmers are valuable :) Moreover u can let me know if u have some tweaks & tricks too :)

About these ads

From → Web Designing

4 Comments
  1. Hi Jigar,
    I have tried the following task on my site but it does not work.

    8. If you want to change the background color of navigation Menu in Twenty Eleven theme
    #access {
    background-image: -moz-linear-gradient(#252525, red);
    }

    Do I need to replace it or just add it? Would appreciate if u have a solution to the same.

    Thanks,
    Navin

    • U have to change the color from the above code and replace it with the same code which will already be present in your stylesheet.. Also the #access refers to the complete navigation bar..
      You can revert me back if your problem still doesnt gets solved..I would freely help you :)

  2. Thank you for great CSS info. How do I remove the footer “Theme: Twenty Eleven | Blog at WordPress.com. Fonts on this blog.”

    • Removing Footer is simple.. All you have to do is open the footer.php file and and ‘comment’ the entire html code..I didnt understood what u mean by removing fonts..If u mean changing the font style of the content then u can change it from stylesheet.. Incase if u still require help, be free to post it here.

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.

%d bloggers like this: