WordPress Tricks

WordPress Oscar Update and Default Twenty Thirteen Theme modifications, support,documentation and customization

allaboutbasic

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;

}

twenty thirteen theme header menus modification

/*********************Home Page Contents**********************/

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

twenty-thirteen-theme-home-page-contents-modification

/********************************************************/
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 you have any issue feel free to ask me question here in comments section

OR

You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

56 thoughts on “WordPress Oscar Update and Default Twenty Thirteen Theme modifications, support,documentation and customization”

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

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

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

    Steve

    Like

    Reply

    1. Found it: .nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
      color: #888888;
      }

      Like

      Reply

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

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

      2. I managed to change the background colour by copying this .paging-navigation {
        background-color: #e8e5ce;
        padding: 40px 0;
        }

        from my style.css into my Child Themes style.css.

        Now still looking for a way to adjust the styling of the arrows (older vs. newer posts) and the search results page

        Like

      6. Actually I would like to adjust the background colour of the strip. Now it is brownish, and I would like to make it white. Would you know where I can find this element so I can edit the CSS styling?

        Like

      8. Hi,

        I think I found my way by using this code:

        .page-header and I adjusted the style.css in my Child theme.

        Appears to be fine now.

        Thanks for the help, sorry for asking so many questions.

        Like

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

    Like

    Reply

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

    Like

    Reply

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

      Like

      Reply

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

        Like

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

        Like

  16. What a great post! But I didn’t find the solution I am looking for. So I am posting it here. I have recently added a background image on my twenty thirteen theme and the text doesn’t show up properly. I want to add a white background/ transparent so that both image and text shows up. If you want to check: http://wentworthcondocorporation.ca/
    I hope you have solution for this one.

    Like

    Reply

    1. HI Sulabh
      thanks
      would u mind to try this ( transparent background color to show background image too)

      .home article {
      background: rgba(255,255,255, 0.8) !important;
      }

      is that something you are asking?

      Om

      Like

      Reply

  17. Many years later and this excellent post is still helping people. I’m redoing a few of my olde sites and decided to use Twenty Thirteen as my basis. Great blog theme and still gets updated!!

    I’ve played with a few of your suggestions (I assume you know you have two number 4’s?) and they have been helpful. Been ages since I did any CSS so this is a nice refresher.

    What I would really like to do is move the meta (Date, Categories, Tags etc) under the Post content rather than before it? Is there a simple way to do this? Perhaps even keep Date on top and rest under?

    Much love.

    https://doublepepperoni.com as an example site

    Like

    Reply

Leave a comment