To customize recolorable themes such as the Garland and themes distributed at this site, there are things you should know in advance. This article explains about the things you should know to customize the style sheet (style.css) for recolorable themes (themes that supports color module).
First of all, you should select the default color scheme (the first color set in the color set list). If you use non default color scheme or custom colors, the change you make to the style.css in the theme directory will not take effect immediately by reloading the current page by the web browser.
This is because non-default color schemes do not use the style.css in the theme directory. Only the default color scheme directly use the style.css in the theme directory. If you select non-default color scheme (or custom color), a new directory named "themename-XXXXX" is created under the files/color directory everytime you press the "Save Settings" button at the theme settings page. (XXXXX represents some random numbers).
In this files/color/themename-XXXXX directory, you will find all the images and style.css which are generated by the color module. Then this files/color/themename-XXXX/style.css is used instead of the original style.css in the theme directory. That's why your change to the original style.css does not take effect immediately.
If you still want to work on the non-default color scheme, you need to do the "Save Settings" at theme settings page everytime you make changes to the style.css in the theme directory. With this "Save Settings" operation, a new files/color/themename-YYYY directory and the contents including style.css are generated based on the latest style.css you have created. With this extra step, you can work on non-default color scheme, but this is not a smart (and easy) way to change style.css. I recommend that you stick with the default color scheme if you make any changes to the style.css of the recolorable theme.
Besides, if you select the default color scheme, the directory files/color/themename-XXXX and contents are deleted. Do not worry about this. The original images and style.css in the theme directory are used instead of the one generated by the color module.
Different BG-Header Image in Pixture Theme
Is it possible to change the background header image and save it as a PNG with the proper color scheme and make it recolorable as well? I love your background header, but need something just slightly different for my site (stripes). Is this possible??
Thank you!! Love this theme, btw.
Shauna
Changing header image
In order to change the header image, you need to change the base.png in the color directory. As long as you stick with the same width, height of the header image, base.png is the only one you need to change. If not, then you need to change the color.inc file too. preview.png is optional. Change it if you want to make your change appeared at the preview.
base.png is a PNG file with 8bit alpha channel for the transparency. So keep this format and change this file as you like.
theme issue - maybe
When I view the themed pages with teasers, I see the border with the rounded corners. However, when I view an individual node - or a panel page with nodes, I don't see the left and right border or the curved corners - i only see the top and bottom such as here: http://linux10.nshosts.com/ecovenant/node/8
Ideas?
I looked at the node.tpl.php and the style.css and saw teaser-node and node as relates to the borders but no obvious problem areas.
update
ok, I've added the images for the round corners and it turns out there is a line at the bottom of the node. Idea for where I can remove that?
never mind, I've got
never mind, I've got it....
node { /* full node */
margin: 0;
margin-bottom: 15px;
background: #ffffff;
padding: 0px;
border-bottom: solid 0px #aaaaaa;
i just expected the default css settings to be more thematically close.
If you still want to work on
If you still want to work on the non-default color scheme, you need to do the "Save Settings" at theme settings page everytime you make changes to the style.css in mirc indir the theme directory. With this "Save Settings" operation, a new files/color/themename-YYYY directory and the contents including style.css are generated based on the latest style.css you have created. With this extra step, you can work on non-default color scheme, but this is not a smart forum (and easy) way to change style.css. I recommend that you stick with the default color scheme if you make any changes to the style.css of the recolorable theme.
how to center website in
how to center website in diffrent resolutions in css?
Super helpful
Also if you are color retarted as I am, a great online color wheel to help you finding matching colors - http://www.wellstyled.com/tools/colorscheme2/index-en.html
Cheers.
Good Instructions
Though a little hard to follow for me!( I is a bit thick)
But I am gonna give it some more tries , thanks for the show and tell .
Vector
Dynamic Color Change
I have been working with .net for development and know about themes selection and master pages option, where you can give multiple color schemes to your web design, however never try this with php. Is there any possibility that instead of the back end working I give the user this facility to dynamically change the color from front end.
Channel, Thanks for posting
Channel,
Thanks for posting the link for color blinded people. I have a friend that is also colorblind and I think could benefit from that link.
I'm still learning some CSS but that this helpful for changing the colors on one of my websites even without my CSS experience.
Recolorable themes are great.
Recolorable themes are great. Thanks a lot.
its very good
very nice article thank you very much....
I recommend that you stick
I recommend that you stick with the default color scheme if you make any changes to the style of the recolor able theme. Regards,
Post new comment