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
You can use my shared code and ask question in the comments section.
You can take my personal help in skype : om2000_cuet
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;
}
5.1. To Change Homepage Featured Content Read More Button background color, font family and font size
.call-to-action a.button, #featured .read-more a {
font-size: 24px;
padding: 15px 35px;
background-color: darkred !important;
background-image: -moz-linear-gradient(top, darkred, darkred);
font-family: times new roman !important;
}
5.2. To change Read More Button hover color
.call-to-action a.button:hover, #featured .read-more a:hover {
background-color: blue !important;
background-image: -moz-linear-gradient(top, blue, blue) !important;
}
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 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
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?
LikeLike
Hi Moey
would u mind to share me site url pls?
Om
LikeLike
www dot outstandingwebsitedesign dot com dot au
Obviously I am still learning, but this has me stumped! Thanks for the reply 🙂
LikeLike
Hi
it seems somehow the inner page (full width template) is not getting the font-family properly….
have u implemented/installed the font in ur theme?
let me know
Om
LikeLike
I thought I had? I have added it the stylesheet link into my , On the full-width-page.php it says get_header(); ?> so shouldn’t that still work? The folder is dropped into my root folder and for good measure I dropped it in the responsive file also. But alas, still no joy.
LikeLike
Hi Moey
it would better if i could check the dashboard
can u share me the login details here pls?
http://fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-related-issues
Om
LikeLike
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!!
LikeLike
Hi Aug
pls try this
#logo {
clear: both !important;
}
.site-name {
padding-top: 4px !important;
}
Om
LikeLike
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.
LikeLike
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
LikeLike
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.
LikeLike
Hi Aug
u seems didnt used my code of menu?
LikeLike
Hi,
I did use the following code which you mentioned above –
.menu {
background-color: red !important;
background-image: -moz-linear-gradient(center top , red, darkred) !important;
}
It did not reflect any changes??
LikeLike
HI Aug
instead of “red” can u use the color code of red?
Om
LikeLike
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!!
LikeLike
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
LikeLike
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;
}
LikeLike
Hi there,
Did you receive the link I sent for customising the header menu??
LikeLike
Hi Aug
sorry for the late..was away for hours
would u mind to tell which subheading u want to change pls?
Om
LikeLike
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!!
LikeLike
Hi Aug
basically i use timthumb and some custom modifications to do it
Om
LikeLike
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!
LikeLike
Hi Mike
what is ur site url?
Om
LikeLike
It’s in progress, still a month or two from going live: http://66.147.244.144/~meetingz/?csspreview=true
I’m playing with color combinations right now…
LikeLike
Hi Mike
to change background of homepage Featured portion
.home #featured {
background: olive !important;
}
seems u r searching this
Om
LikeLike
Thanks! I was missing: #featured
LikeLike
🙂
Om
LikeLike
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
LikeLike
Hi Melissa
i think u r searching this
.menu li:last-child form {
margin-bottom: 0px;
margin-top: 6px;
margin-right: 7px;
}
.menu li:last-child {
float: right;
}
Om
LikeLike
That didn’t seem to work for me. Maybe because it is a custom menu? Are you still doing gigs on fiverr? Maybe I could pay you to figure this out for me?
LikeLike
Hi Melissa
the code should work though..
ok..better u purchase my gig and share me login details there…
and yes i am doing fiverr gigs till 🙂
Om
LikeLike
Thank you very much for this template. I added in my blog just now. Your blog is awesome.
LikeLike
Hello my friend, please could you help me quickly…I’m trying to remove the space where the title text usually appears in Responsive theme. I’ve tried everything, but whatever I paste into custom CSS doesn’t seem to make any difference. The space is the 1inch below the menu and before the image show. site is: http://www.insigniawales.co.uk
Thankyou so much!
LikeLike
Hi Seth
to reduce the gap just above the title in responsive theme use this css code
#content {
margin-top: 1px !important;
}
Om
LikeLike
Thanks so much Om for the quick and precise reply, really appreciate it. I couldn’t get it to work – maybe my wordpress dashboard is badly setup? In the Insignia wordpress dashboard I clicked “appearance” / “theme options” then “CSS styles” and in the Custom CSS styles box I pasted in your text above. Then I clicked blue “save options” box. Refreshed the Insignia homepage and nothing changed at all. Please give me some advice… thanks))
LikeLike
HI Seth
i checked http://www.insigniawales.co.uk/about-insignia/ and found my provided css already worked?
please let me know
Om
LikeLike
Hi again Om,
wow that’s bizarre, do you think it’s a problem with my browser? I’ve looked at the Insignia homepage with both Firefox 47.0.2 and Chrome 54.0.2840 and refreshed both and homepage still shows a 2cm whitespace gap below the menu bar and above the slides. I need that gap to be about 2mm. How big is the gap on your browser? (thanks again for the help!!)
LikeLike
HI Seth
here is how it is looking in my end
Om
LikeLike
thanks for the screenshot Om, actually the page I’m editing is the homepage and not the “about us” page. But the problem is pretty similar on both those pages. That gap is unacceptably large and it’s so frustrating that I can’t remove it. When I used to make sites in dreamweaver it was a click of a button to remove such a gap. But WordPress makes it incredibly complicated. I suppose there’s no way it can be don then?((
LikeLike
Hi Seth
here is how the homepage is looking
it is fine now ?
LikeLike
yes it seems ok now,…I’ve semi-fixed the problem with some code I found somewhere:
#content-full {
margin-top: 1px;
}
this has halved the white space, so it’s an acceptable amount now. Though I’m still trying to find a way of changing the other margin to remove the white space completely, but that’s low priority now. Also this fixed only the homepage, other pages still showing big white space. Thanks so much for your time Om!
LikeLike
Hi Seth
yes thats the code i shared to u before 🙂
Om
LikeLike
yeah, it’s great code. Thankyou my friend!
LikeLike
Hello,
im new to WordPress and learning as I go…….I was wondering how do you change the main background of a page to a different color or even a picture maybe……the default color in Responsive is White and I want to go a Charcoal color
LikeLike
I am in the process of trying to get a job working with WordPress and I have to recreate my sites Ive already done using word press and I am in need of some help……can provide pics of the site I am trying to replicate if that would help
LikeLike
you mean you want a career as wordpress site developer?
LikeLike
Hi coachjdykes
please share me your site url to check
Om
LikeLike
I’m currently building the site using Local by Flywheel as the sites are demo sites just to show I can do the work…..I have already built these sites using another web builder in the past….. I’m just not completely aware of how WordPress works completely……
I do have a screen shot of the layout of the site in question I can send you if you tell me how to get it to you I’d gladly get it to you
Yes the job would be as a web designer
LikeLike
Ok share me the screenshot, and you want your site to be like the screenshot using wordpress…..right?
LikeLike
Yes correct i need it to look like the screenshot
how do I share you the screenshot?
LikeLike
can u share me here?
or upload it to dropbox and give me the link?
LikeLike
Absolutely here are the Dropbox links
The site I’m trying to recreate ( the body area of this site ) https://www.dropbox.com/s/hgf9g02uajp6ks3/Sultana-Layout.jpg?dl=0
My current WordPress version https://www.dropbox.com/s/9dhg6mmsbugkl0g/Current-Sultana-Layout-WP.jpg?dl=0
Thank You So Very Much for this I appreciate it more than you’ll ever know
LikeLike
THanks
sorry for the late response
** i have checked your needed layout
what you need is to show left sidebar with your mentioned background color
and right side content section (excerpt ) with mentioned background
so…if u able to show left sidebar and right content section..i can help
or if you need me develop it for you..then please contact me in my fiverr profile
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
Om
LikeLike
Thank you again for your reply……I would love for you to develop it for me at this time but then two things happen…… One I don’t learn how to do it and I don’t have any money and I’m sure it isn’t free…
I will enable those things you said to do and try to figure it out….. If not I’ll send you another dropbox pic of where my progress is….. Thank you for all your help….. I’ll be in touch soon
LikeLike
yes
i prefer you try it first 🙂
and if you need any help feel free to let me know
Om
LikeLike
Thank You Again for you help…….here is where I am at this point not sure if it is right yet….Im still very confused
You wouldn’t be interested in just walking me through how to do the front page say over the phone or something like that would you…….I’m really lost right now…….and don’t even know how to research what it is I’m trying to do
LikeLike
actually i cant teach you..i could share u code..but you need to analyze it
sorry for that
Om
LikeLike
That would be grrrrrrreeeeaaaaat……I just want to learn…..I have got to be able to do this but I’m so stuck it is driving me crazy…. Do you charge money to teach me this?…. If not how do we start?….. I’m ready when you are
LikeLike
Hi
i prefer you communicate with me here first
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
LikeLike
Did you get the links?….I sent them in my last message……. Thank you again for your help I deeply appreciate it
LikeLike