WordPress Oscar Update and Default Twenty Thirteen Theme modifications: Header, Footer, Fonts, Menus,Contents,Sidebar using css.

Twenty Thirteen Theme Modification

As you know WordPress has released version 3.6 with the name “Oscar” and they selected Twenty Thirteen theme its default theme. Here i have shared some css modifications hope it will help you to give your Twenty Thirteen theme a new look.

1.If you want to change the Top Header Font size,font color,font family in Twenty Thirteen theme use the following css

#masthead .site-title {
color: blue;
font-family: georgia;
font-size: 42px;
font-weight: bold;
}

2. If you want to change the Site Description Font size,font family and color in Twenty Thirteen theme use this code

.site-description {
color: #000000 !important;
font: italic 300 16px georgia !important;
}

***** If you want to remove the Site Description text use this

.site-description {
display: none;
}

3. If you want to change the Top Header Background image of Twenty Thirteen Theme

*** You can do it from “Appearance–>Header”

but here i am sharing you the css to do it directly

.site-header {
background: url(“http://s1.wp.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png “) no-repeat scroll center top / 1600px auto transparent !important;
}

*** change the image url using your one

the default header image of WordPress Twenty Thirteen theme is 3200px in width and 460px in height

4. If you want to reduce the height of Header portion use this

.site-header .home-link {
min-height: 133px !important;
}

4. If you want to use a background color behind the Navigation menu in twenty thirteen theme

.navbar {
background-color: pink !important;
}

5. If you want to change the hover background color of the menu in twenty thirteen theme

.nav-menu li a:hover {
background: red !important;
color: white !important;
}

6. If you want to change Sub Menu or children menu’s background color

.nav-menu .sub-menu, .nav-menu .children {
background-color: green !important;
}

7. If you want to change menu’s font color,font size,font family in twenty thirteen theme

.nav-menu li a {
color: #141412;
font-family: georgia;
font-size: 15px;

}

8. If you want to change home page posts (when all posts are showing in homepage) title,font size and font family in twenty thirteen theme

.entry-title a {
color: olive;
font-family: cursive;
font-size: 34px;
}

9. If you want to remove the Homepage Posts meta Date,category lists and tags under post title

.entry-meta {
display: none;
}

10. If you want to remove either date or Category meta from under post

***** if you want to remove only category links

.entry-meta .categories-links {
display: none;
}

*** If you want to remove only date meta

.entry-meta .date {
display: none;
}

11. If you want to change the footer brownish background color of Twenty Thirteen theme

.site-footer .sidebar-container {
background-color: black;
}

12. If you want to change the footer widget’s link color,font family and font size of Twenty Thirteen Theme

.site-footer .widget a {
color: white;
font-family: cursive;
font-size: 13px;
}

13. If you want to change sidebar widget’s link color,font size and font family of twenty thirteen theme

.widget a {
color: blue;
font-family: cursive;
font-size: 13px;
}

14. If you want to change Sidebar Widget Title font color, Title Background, font size etc

.widget .widget-title {
background: none repeat scroll 0 0 red;
color: white;
font: italic 300 20px cursive;
margin: 0 0 10px;
text-align: center;
}

15. If you want to change the font size,color and font family of “Continue Reading” of Home page posts

.entry-content a, .comment-content a {
clear: both;
color: blue;
display: block;
font-family: cursive;
font-size: 19px;
}

16. If you don’t want to show “Leave a comment” from the bottom of each post of homepage

.format-standard footer.entry-meta {
display: none;

}

17. For pages, if you want to change the color,font size and font family of Page Title of Twenty Thirteen theme

.page .entry-title {
color: gold;
font-family: cursive;
font-size: 35px;
font-weight: normal;
margin: 0 0 5px;
}

18. If you want to change font size and font family of Pages content of Twenty Thirteen theme

.entry-content {
font-family: cursive;
font-size: 14px;
}

19. If you don’t want to remove comments facility from Pages of twenty thirteen theme

#comments {
display: none;
}

20. If you want to remove the Featured Image just above the sticky post of Twenty thirteen them

.sticky .entry-thumbnail {
display: none;
}

21. If you want to change Homepage Sticky Posts font family and font size

.sticky .entry-content {
font-family: times new roman;
font-size: 18px;
}

22. if you want to remove the Featured image from the top of single post page

.single-post .entry-thumbnail {
display: none;
}

23. If you want to change single post page Title font color, font size etc

.single-post .entry-title {
color: red;
font-size: 34px;
}

24. If you want to change font color, size and font family of Next and Previous post title (bottom of single post page)

.post-navigation .nav-links a {
color: darkred;
font-size: 18px;
font-family: cursive;
}

If this CSS Modification seems helpful to you? You can donate $1 to support my site :)

Please make some donations


Want me to help you personally for CSS Issue? You can purchase gig from me in fiverr ..


Click the Image below

About these ads

50 Responses to WordPress Oscar Update and Default Twenty Thirteen Theme modifications: Header, Footer, Fonts, Menus,Contents,Sidebar using css.

  1. Steve Heap says:

    I posted this question on your 2012 theme – sorry!

    How to amend the content width in the Twenty Thirteen theme? I’ve managed to do that a bit in my site, but although it looks OK on the PC screen, it is not good at all on an iPad. Is it as simple as the CSS changes you outline for Twenty Twelve?

    Steve

  2. Steve Heap says:

    Second question – related in a way as this search button overlaps the menu when using an iPad – how can I remove the search icon/function from the menu bar?

    Steve

  3. Steve Heap says:

    Great – both of your suggestions worked! Donation on its way….

    Steve

  4. Steve Heap says:

    Om

    A related question if I may. I’ve got a couple of pages where I didn’t want the sidebar to appear and so I created a new file called no-sidebar.php (I think based on page.php) and added:

    To the code in that page. That works fine. But what I really wanted to do was for the content (a calendar and a forum) to expand across the page to fill the area that the sidebar used to occupy. How do I do that?

    Steve

  5. Steve Heap says:

    I tried that – no change to the forum page, So I tried on the calendar page instead (http://www.mwcc-photo.org/calendar/) but again no effect that I could detect.

    Steve

  6. Steve Heap says:

    Sorry – I waited a little time (thought that holding CTRL and refreshing the window reloaded CSS…) but now it works

    Steve

  7. Frank Bauer says:

    Hi – can you tell me how to change the color of the active menue item please?

  8. Frank Bauer says:

    Hello again :) Can you tell me how to center the menue? Big Ups in advance – Frank

  9. 3reesthrees says:

    IHi,

    I just want to remove the tags:
    The following does not work

    .tag-links {
    display: none;
    }

    Any suggestion?

    PS. I’m inserting these in a child style.css file

  10. 3reesthrees says:

    It worked! I’ve googled for more than 4 hrs until I got here.
    Thanks a million.
    It seems “!important” is important :)

    Just a quick question. Any idea how I can add “read more” link to the end of the excerpt on the front page? I don’t like using thing because I prefer the excerpt box. I found the following tutorial, the thumnail thing worked, but not the “continue reading/read more” thing:

    http://www.orclage.com/wordpress-twenty-thirteen-theme-post-excerpts/

    Thanks in advance.

  11. filipek88 says:

    Dear Sir,

    I would like to change the colour of the background strip at the bottom wherein ‘older posts’ and ‘newer posts’ are displayed.

    I would also like to change the text of ‘older posts’ and the font, size etc.

    I am using a Child Theme and my level of expertise is intermediate. Could I include some code into style.css to adjust these values? Or is there another way for me to change this?

    Thanks.

    Best Regards,

    Filip

  12. freshprintz says:

    Hi,
    Just found your site and think it is great. I am helping a friend with her company’s site and need some help. I want to make some CSS changes to the 2013 theme, but was wondering do I need to create a child theme first?

    I would like to change things like–nav menu hover color, nav menu background color, nav menu text color.

    here is the site:http://hallmarkemblems.com/

    TIA,

    Angie

  13. Nick Little says:

    Hi Om, I messaged before but comments are gone? There are a few things I need a hand with and happy to donate. dev.admireflorist.co.nz make the header responsive and not cut off, change footer text from white to something else, remove the gap between nav bar and header. Cheers!

    • Hi Nick
      thanks..not sure what happened..just got ur comments

      would u mind to try this

      For site header

      .site-header {
      background: url(“http://dev.admireflorist.co.nz/wp-content/uploads/2013/09/cropped-dsfghh1.jpg”) no-repeat scroll center top / 100% auto transparent !important;
      }

      for footer font

      pls check this

      footer .widget,footer .widget h3 {
      color: black !important;
      }

      pls let me know is that something u r asking?

      Om

      • Nick Little says:

        Thanks Om! Footer text is great. I had to remove the ” ” around the bg URL as it was encoding it weird and not finding the image. Works now! Responsive. But now, there’s a huge gap between bottom of header and top of nav bar? Have you got much experience with facebook plugins? I having issues with my photo galleries on that site. Can you view it ok? Cheers

      • Hi Nick
        pls check this to remove the gap

        .site-header .home-link {
        height: 194px !important;
        min-height: 194px !important;
        }

        and..would u mind to clarify

        1. what plugins issue u r facing
        2. what type of map line up u want?

        i will inform u in my evening

        Om

      • Nick Little says:

        Also how to make the map and contact form line up more evenly?

  14. Karsten says:

    Hi,
    nice CSS tweaks – but where do I put these? At the end of style.css?
    Greetz, K

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: