WordPress Theme Responsive by ThemeID or CyberChimps CSS Style sheet Modification: Modify Headers,Footers,Links,Titles, Widgets and more

ThemeResponsive

Theme Responsive by ThemeID or CyberChimps is a responsive theme which you can use free in wordpress.com and also in wordpress.org Here i am going to share you some css tricks and codes which you can use to give the responsive theme a better or new look


1. If you want to change the site title font color, font size, font family of Responsive theme by ThemeID or CyberChimps use the following css


.site-name a {
color: red;
font-family: times New Roman;
font-size: 1.3em;
font-weight: 700;
}

2. IF you want to change the font color,font size and font family of site description of Responsive Theme by ThemeID or CyberChimps


.site-description {
color: blue;
display: block;
font-family: cursive;
font-size: 1em;
margin: 10px 0;
}

3. IF you dont want to show or remove the full header portion of (i.e Title & description) of Responsive theme use the following css

#header {
display: none ;
}

4. If you want to change Featured Post Title font color,font size and font family of Homepage Template in Responsive theme by ThemeID or CyberChimps

#featured h1.featured-title {
color: red;
font-family: cursive;
font-size: 44px;
}

5. If you want to change Featured Post content’s text color, size and font family use the following css

#featured p {
color: blue;
font-family: arial !important;
font-size: 16px;
padding: 0 40px;
text-align: center;
}

6. If you want to change the Navigation menu’s background color to different one use the following css


**** Please change the color code to your favorite one then use it

.menu {
background-color: #585858;
background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
background-image: -o-linear-gradient(top, #585858, #3d3d3d);
background-image: linear-gradient(top, #585858, #3d3d3d);
clear: both;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
margin: 0 auto;
}

7. If you want to change Hove color of the menu items in Theme Responsive by ThemeID or CyberChimps use this

**** Please change the color code to your favorite one then use it


.menu a:hover {
background-color: #808080;
background-image: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#363636));
background-image: -webkit-linear-gradient(top, #808080, #363636);
background-image: -moz-linear-gradient(top, #808080, #363636);
background-image: -ms-linear-gradient(top, #808080, #363636);
background-image: -o-linear-gradient(top, #808080, #363636);
background-image: linear-gradient(top, #808080, #363636);
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080, endColorstr=#363636);
}

8. If you want to change selected menu background color


.menu .current_page_item a, .menu .current-menu-item a {
background-color: red;
}


9. If you want to change Page Title’s font color, font size and font family use the following css code

h1.post-title {
color: red;
font-size: 36px;
font-family: times New Roman;
}

10. IF you dont want to show BreadCrumb above the Page title in single page of Responsive theme by ThemeID or CyberChimps use the following css


.breadcrumb-list {
display: none;
}


11. If you want to change the page content’s font size , font family and color use the following css

.post-entry {
clear: both;
color: blue;
font-family: cursive;
font-size: 15px !important;
}

12. If you want to change Home page Widget’s (middle section widgets) Titles font color,font size and font family of Responsive theme by ThemeID or CyberChimps

.home .home-widgets h3 {
color: red;
font-family: tahoma;
border-bottom: 1px solid black;
font-size: 20px;
}

13. If you want to change home page widgets links font color,font family,text decoration and font size use the following code

.home .home-widgets li a {
color: darkRed;
font-family: cursive;
text-decoration: underline !important;
font-size: 16px !important;
}

14. For single post page if you want to change Post title’s font color,font size,font family of Responsive theme by ThemeID or CyberChimps use the following css


.single-post h1.post-title {
color: blue;
font-size: 28px;
font-family: cursive;
}

15.If you want to remove post me (posted on….) from single post page of Responsive theme use the following css


.single-post .post-meta {
display: none;
}

16. If you want to remove the breadcrumb from Single Post page of Responsive Theme by ThemeID or CyberChimps use the code

.single-post .breadcrumb-list {
display: none;
}

17. If you want to change whole Responsive theme’s body background color use the following code

body {
background: none repeat scroll 0 0 darkRed;
}

18. If you want to change Sidebar widget’s background color,border radious use the following code


**** applicable for pages and posts

.widget-wrapper {
background-color: grey;
border: 1px solid #E5E5E5;
border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

19. If you want to change sidebar widget’s links font color,font family and font size use the following

#widgets ul li a {
color: darkRed;
display: inline;
font-family: cursive;
font-size: 16px;
text-decoration: none;
}

20. If you want to sidebar Title’s font color,font size,font family, border in Responsive Theme by ThemeID or CyberChimps use this

*** applicable for only sidebar widgets…not for footer widgets


#widgets .widget-title {
border-bottom: 1px solid blue;
color: darkRed;
font-family: cursive;
font-size: 25px;
}

21. If you want to remove the Post Tags and categories from footer of single post use this code

.post-data {
display: none;
}

22. If you want to remove the author meta (author box) from the footer side of single post use the following css

#author-meta {
display: none;
}

23. IF you want to remove the post navigation (previous or next post link) from the footer side of single post use the following

.navigation {
display: none;
}

24. Or…if you want to make the footer post navigation (previous or next post link) more stand out by changing the font color, size etc

.navigation a {
color: black;
font-size: 15px;
font-weight: bold;
padding: 4px 10px;
}

.navigation .previous, .navigation .next {
color: black;
float: left;
font-size: 18px;
font-weight: bold;
}


25. If you want to change drop down menu’s background color of Theme Responsive by ThemeID or CyberChimps


.menu li li a {
background: none repeat scroll 0 0 DARkRed;
color: WHIte;
}


26. If you don’t want to show the Like/Share button in the Homepage Featured Section use the following code


.home .sharedaddy {
display: none;
}

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

32 Responses to WordPress Theme Responsive by ThemeID or CyberChimps CSS Style sheet Modification: Modify Headers,Footers,Links,Titles, Widgets and more

  1. Moey says:

    Thanks for the info! I am trying to change the font-family in the menu bar and it works on the home page but if I click through to other pages it doesn’t work. Why do you think that is happening?

  2. Aug says:

    Hi,

    I have just increased the font size of my site title and the font size of tag line. But the title and description is not aligned to left can you tell me how to do that?
    Site name – www dot psychologytips dot com

    Thanks in advance buddy!!

    • Hi Aug
      pls try this

      #logo {
      clear: both !important;
      }
      .site-name {
      padding-top: 4px !important;
      }

      Om

      • Aug says:

        Hi Om,

        Great!! This worked, thanks a ton buddy. Another help –
        (1) I want to change the background colour of my header menu (the one with sample page etc.) and the colour of its font too. I have already tried the code that you have suggested somewhere but it never worked. Can you tell me how to do that?
        (2) How to reduce the gap between the site name and the description line a little bit?

        Thanks.

      • Hi Aug
        to change the Menu background color of Theme Responsive try this

        .menu {
        background-color: red !important;
        background-image: -moz-linear-gradient(center top , red, darkred) !important;
        }

        To Reduce the gap/space between the Site Title and Site Description try this

        .site-description {
        margin-top: 0 !important;
        }

        .site-name {
        line-height: 49px !important;
        }

        Regards
        Om

  3. Aug says:

    Hi Om,

    The code to reduce the gap worked, but the code for background color did not work. What else can we do to change the menu background color and the menu font color?

    Your help is much appreciated.

    Thanks.

  4. Aug says:

    Hi Om,

    Ultimately I found the required code to do the customization and was able to do it. Thanks for your help. By the way I need to change the h1 and h2 title font sizes on the articles, how do I do that, any suggestions.

    Thanks in advance buddy!!

    • Hi Aug
      for the H2 (site title in home) try this

      .entry-title,.entry-title a {
      color: red !important;
      }

      Also
      which code u used for the Menu?

      let me know pls

      Om

      • Aug says:

        Hi om,
        Ya, your code for post title worked, but how to change the font size of sub headings in posts/pages.

        Here is the code that I used for customizing the header menu –

        .menu {
        background-color: #585858;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
        background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
        background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
        background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
        background-image: -o-linear-gradient(top, #585858, #3d3d3d);
        background-image: linear-gradient(top, #585858, #3d3d3d);
        clear: both;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
        margin: 0 auto;
        }
        /* Menu items */
        .menu a {
        border-left: 1px solid #585858;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        height: 45px;
        line-height: 45px;
        padding: 0 0.9em;
        }
        /* Menu item hover */
        .menu a:hover {
        background-color: #808080;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#363636));
        background-image: -webkit-linear-gradient(top, #808080, #363636);
        background-image: -moz-linear-gradient(top, #808080, #363636);
        background-image: -ms-linear-gradient(top, #808080, #363636);
        background-image: -o-linear-gradient(top, #808080, #363636);
        background-image: linear-gradient(top, #808080, #363636);
        color: #fff;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080, endColorstr=#363636);
        }
        /* Current page */
        .menu .current_page_item a,
        .menu .current-menu-item a {
        background-color: #343434;
        }
        /* Menu dropdown */
        .menu li li {
        background: #fff;
        background-image: none;
        border: 1px solid #e5e5e5;
        color: #444;
        filter: none;
        margin: -1px 0 1px 0;
        width: auto;
        }
        /* Menu dropdown hover */
        .menu li li a:hover {
        background: #f5f5f5 !important;
        background-image: none;
        border: none;
        color: #444;
        filter: none;
        }

  5. Aug says:

    Hi there,
    Did you receive the link I sent for customising the header menu??

  6. Aug says:

    Hi, Om how are you doing? Can you tell me some good plugin to display thumbnail with excerpts on the home page. I am using responsive theme and am not able to display excerpts on the home page.
    Thanks in advance buddy!!

  7. Mike O says:

    Great tip for adding background color to the widget boxes. And, WP Responsive makes it easy to change the overall background color. But, how can I change the background color of the main content box on the home page? Thanks for any assistance!

  8. Hi Om,

    Do you know what I need to do to make the default search box sit in the navigation bar and be aligned to the right side of the page? I’ve not been having luck getting it in the right place so far.

    Here you can see it: http://greatfastcheap.com/test1/contact/

    Thank you for any direction you can offer me!
    Melissa

  9. sakil mahmud says:

    Thank you very much for this template. I added in my blog just now. Your blog is awesome.

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 309 other followers

%d bloggers like this: