Ask your WordPress questions! Pay money and get answers fast! (more info)

Theme color change WordPress

  • SOLVED

Here's what I need to do: [[LINK href="https://www.evernote.com/shard/s9/sh/f70b1cf2-76ac-4c44-8603-8cc5e14d0cf0/fee34883200b360ea3a211f3dd48ac93"]]Screenshot[[/LINK]]

I am using a theme called Muzak that has a set of pre-defined theme color options ([[LINK href="https://www.evernote.com/shard/s9/sh/8e548778-93b6-45d9-9d24-43d16fefaebf/a0126e5c94ffc117f38b29b6a14c191b"]]screenshot[[/LINK]]).

HERE are the developer's instructions to add a new color option.

I followed his instructions to a T for [[LINK href="http://lullwatermusic.com"]]Lullwatermusic.com[[/LINK]], but it didn't work.

Here's what I have:

[[LINK href="https://www.evernote.com/shard/s9/sh/63ec56c4-9dcc-4334-b972-9785decf8dce/7bef56cae5b533e21fe15892104598be"]]Screenshot[[/LINK]] of "yellow.css" in my FTP client.
[[LINK href="http://pastebin.com/2nfiTJFR"]]yellow.css file[[/LINK]]
[[LINK href="http://pastebin.com/DAchU27z"]]color_options.php file[[/LINK]]
[[LINK href="http://pastebin.com/katfBiTE"]]functions.php file[[/LINK]]


Thanks for any help!

Answers (5)

2012-12-22

Arnav Joy answers:

Hello Ant ,

It is not necessary that all the colors are defined there where you have changed it , but some time it may be at different place , so look for other files as well.


Ant Lively comments:

Hi Arnav,

Just a heads-up that I updated/re-explained my issue above. Either I didn't explain clearly enough yesterday or didn't provide enough info, because no one was able to help..

Thanks!


Arnav Joy comments:

you have to change following at

themes/wp_muzak/colors/yellow.css

line 148
.post-intro h2 a {
background: none repeat scroll 0 0 rgba(206, 157, 92, 0.9);
}

line 195

.tour-date {
background: url("../images/colors/cream/bg_tour_date.png") repeat-x scroll 0 0 #786434;
}


line 124
.action-btn.buy, .action-btn.view {
background: url("../images/bg_btn.png") repeat-x scroll 0 -225px transparent;
}

all these places will go with backgroud-color:#F6C76F


Ant Lively comments:

Thanks Arnav! That got me on the right track!

I'll award you the prize. But before I close this thread, I just need to change the main slider text from white to black like the rest of the news items.. [[LINK href="https://www.evernote.com/shard/s9/sh/7e46ba20-a3bf-4765-bb06-f817d8099913/82cecae7c700b490fa0263a4c537359e"]]Here's what I tried[[/LINK]] but it didn't work..?

Here's the updated file:
http://pastebin.com/iUXpFcPX

2012-12-22

phppoet answers:

This kind of option can be easily add to theme . but one needs to check the structure of theme options page . This is a premium theme therefore i can't download and check it .






phppoet comments:

You should also look into functions.php file code . most of the developers use functions.php file to store theme options.


Ant Lively comments:

Hi phppoet,

Just a heads-up that I updated/re-explained my issue above, and added the functions.php file along with the color_options.php & yellow.css files. Either I didn't explain clearly enough yesterday or didn't provide enough info, because no one was able to help..

Thanks!


phppoet comments:

problem looks resolved now . whats the issue now ?


Ant Lively comments:

No, actually I just switched from the default-pink preset color to another one of the [[LINK href="https://www.evernote.com/shard/s9/sh/20b13625-3f6f-46d9-a928-1b6509e64634/33f640b8482f62a088da00802abe023a"]]preset colors[[/LINK]]: "cream" (#ce9d5c). It's closer the the yellow I want, but it's not the #f6c76f yellow I need.

I created [[LINK href="https://www.evernote.com/shard/s9/sh/4936a0f9-763f-4a8c-9bb5-f04f9abc28a7/25666054773aac1f9d197659acfe1404"]]this[[/LINK]] file by making a duplicate of [[LINK href="https://www.evernote.com/shard/s9/sh/02c433dc-3315-42a6-8dc5-94ebfccf5c74/a76b8e1ee84a0af027099aaccba78c36"]]this[[/LINK]] file and then replacing all of the #ce9d5c (cream) with #f6c76f (yellow). I named it "yellow.css". (view code here)

I then added [[LINK href="https://www.evernote.com/shard/s9/sh/8ca8ebbc-352a-4e92-aa82-12b212bcc126/9c4313f86a27d2004e4bec9edba113ff"]]this[[/LINK]] line of code in the color_options.php file in order to get [[LINK href="https://www.evernote.com/shard/s9/sh/047b079d-c2ad-452d-92a7-fb3e6490506b/741b5414db2d70beab7726ecc71d5a03"]]this[[/LINK]].

But when I select "yellow" from the theme options panel, I still get the "cream" color that you see displayed there now. ? Can't figure out what I'm missing!


phppoet comments:

adding option doesn't neccessorily include the file you want . You need to find out the function which includes color css file when particular option is selected . Just like when you select red theme includes red.css . creating just option and renaming file and changing color code alone will not work .

just look into some other files which includes color css file if particular option is red , green etc.

once you done this , you should change colors of containers from cream to yellow . Don't replace every cream with yellow . Using google chrome will help a lot . Take cursor on element which you want to change and then right click and select inspect element and find the name of that element and search for code of that element into yellow.css and replace cream with yellow .


just like .post-intro h2 is one element . just change color of such a elements .

2012-12-22

Agus Setiawan answers:

on default.php,

find #wrap, then add
background-color : #F6C76F;

hope that helps

thanks


Ant Lively comments:

Hi Agus,

Just a heads-up that I updated/re-explained my issue above. Either I didn't explain clearly enough yesterday or didn't provide enough info, because no one was able to help..

Thanks!

2012-12-22

Kiet Luong answers:

try to add it to default.css :

#wrap {
background: url("../images/colors/default/bg.png") no-repeat scroll center top #F6C76F !important;
}


you can replace this default background image with your own image.

http://www.lullwatermusic.com/wp-content/themes/wp_muzak/images/colors/default/bg.png


Ant Lively comments:

Hi Kiet,

Just a heads-up that I updated/re-explained my issue above. Either I didn't explain clearly enough yesterday or didn't provide enough info, because no one was able to help..

Thanks!

2012-12-22

Ellah Alzona answers:

Try to refresh your browsers thoroughly or empty your cache ...


Ellah Alzona comments:

Wow looks better now I guess :)