Different theme colors WordPress
The company I'm working for loves the new Karma theme. Onfortunatly, they are not in love with the colors that come with the theme. I'm faily good in photoshope but I stink at CSS changes. Id like to just substitute and existing directort\sys color files with new ones that I create in photoshop. I need some stright forward directions. Ive looked at the files and they are not intutive to me.
Answers (3)
Luis Abarca answers:
Can you upload a image with the changes and your site URL ?
lchiango comments:
Sorry, I dont understand the question
lchiango comments:
Duncan, thank you for the detail. This is where I get confused the file :
http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/images/karma-silver/bg-header-holder.jpg
is ust a narrow vertical line. Does it get repeated many times ? when others are a bar..
idt answers:
hi,
To help you out, we would need to know which area of the theme you want the color to be changed. Can you perhaps show us a screenshot pointing which part of the theme you wanted to be changed?
Thanks,
idt
idt comments:
I inspected the Demo of Karma theme and I think these are what you need to search in your style.css file and the images they are using:
<blockquote>
#header .rays - using images/_global/rays.png
#main - using images/_global/bg-div-main.jpg ( for the shadow below menu)
.home-bnr-jquery - using images/secondary-teal-grey/bg-jquery-bnr.jpg
#footer - using /images/karma-teal-grey/bg-footer.jpg
.modern_img_frame - using images/_global/image-frame-sprite-2.png
</blockquote>
Hope that helps.
Thanks,
idt
idt comments:
and
#footer_bottom - using images/karma-teal-grey/bg-footer-bottom.jpg
Those are I've mention above are the major components/areas of the theme you might want to change. For specific area, you need to mention them.
Thanks,
idt
lchiango comments:
if you go to the current website (in progress) ec2-50-17-170-200.compute-1.amazonaws.com/. everything that is changed by the altering the theme color in the theme sytle. Have you worke with Karma theme ?
lchiango comments:
correct. I dont want to create new directorys on teh server, I just want to replace the files of one of the colors I wont use
idt comments:
Yes, that's why I gave you the CSS selector you might need to search on your style.css and the images they used. You can modify those images I listed above to match the color you want, upload them to where they are located before(you need to overwrite old image files so be sure to keep backups). As long as you keep the exact size as the old images, you will not have any layout issues.
lchiango comments:
the problem is that they dont make sense to me. the one fo rthe main menue is a small skinny line. perhaps I sould send them to you and you can explain how tey work ?
idt comments:
bg-header-holder.jpg is a skinny image, yes. Using CSS you can repeat a background image using the repeat-x/repeat/repeat-y property. In this case it's using repeat-x so that the image will be displayed repeatedly horizontally. But you can modify / replace that image to use your preferred color, just make sure you retain the size and you'll be fine.
idt comments:
Basically, what you just needed to do, since you only want to change the colors, is to just modify the image to use the colors you want then replace the old one. Just make sure you retain their dimension(height and width) and you should be good.
Duncan O'Neill answers:
Hi Ichiango,
from the url you gave, you seem to be using the karma silver skin. As far as I can see, there are two relevant css files which contain the background images and colors making up that skin's colors.
- [[LINK href="http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/css/karma-silver.css"]]http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/css/karma-silver.css[[/LINK]]
- [[LINK href="http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/css/secondary-silver.css"]]http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/css/secondary-silver.css[[/LINK]]
To update the appearance, you need to do one of two things;
a) edit the style sheet(s) to point to new background images you create in Photoshop.
b) make new background images in Photoshop, and upload these to your server to over-write the existing images.
You seem to prefer to do b).
So you need to look at the two style sheets I've linked to above, and replace the relevant images.
For example, this image;
[[LINK href="http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/images/karma-silver/bg-header-holder.jpg"]]http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/images/karma-silver/bg-header-holder.jpg[[/LINK]] is called from the top of
[[LINK href="http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/css/karma-silver.css"]]http://ec2-50-17-170-200.compute-1.amazonaws.com/wp-content/themes/Karma/css/karma-silver.css[[/LINK]]
So you need to over-write that image.
Basically, you need to replace all of the images referred to in the style sheet similarly to this;
background:#757575 url(../images/karma-silver/bg-header-holder.jpg) 0 0 repeat-x !important;
As far as I can tell, all of the background images for this skin should be in the directory
http://ec2-50-17-170-200.compute-1.amazonaws.com/wp_content/themes/Karma/images/karma-silver/
If you look through the corresponding local directory on your machine, you should see the images you need to replace.
hth,