Author Topic: Change color template different css (Read 16458 times)

Re-Mi · « **on:** December 06, 2011, 04:07:38 PM »

Hello All,

I'm making a website, and i want some pages to be different color. To get this working i created a template styled pure on css, and separated the colors in a different css file.

Like this

Code: [Select]

index.php
css/template.css
css/color.css

I know i could upload the same template with different colors in the css. But is there a way i could make it work with 1 template and different color css files.

Like this

Code: [Select]

index.php
css/template.css
css/blue.css
css/green.css
css/red.css

The first thing that came in mind was a droplet that would call the right css file added to each page. But i can't seem to find the code for that. Do you guys of girls know an other or better way to accomplish the thing i want ? Or know the code i have to apply ?

Greetz,

Michel

Tez Oner · « **Reply #1 on:** December 06, 2011, 05:00:35 PM »

Maybe linking/importing a css file from a WYSIWYG or Code module section could do the job:

Just paste <style url="etc......"> in the 'code-view" of WYSISWYG, then the style sheet is loaded only for that particular page

Cheerz,

Tez

Ruud · « **Reply #2 on:** December 06, 2011, 05:23:49 PM »

3 different approaches to play

Code: [Select]

<?php 
$css = "red.css"; //default
if (PAGE_ID==1} $css = "blue.css";
if (PAGE_ID==2} $css = "yellow.css";
if (PAGE_ID==382} $css = "brown.css";
echo TEMPLATE_DIR.$css;
?>

or

Code: [Select]

<?php
// generates stylesheet names like home.css / about_us.css
$css = MENU_TITLE.".css";
echo TEMPLATE_DIR.$css;
?>

or just one stylesheet with a unique selector for each page.
You will get extra selectors like
.page-12 { color: #f00; }

Code: [Select]

<body>
<div class="page-<?php echo PAGE_ID; ?>">
......
</div>
</body>

Re-Mi · « **Reply #3 on:** December 06, 2011, 07:06:13 PM »

Thank you both,

I will experiment the options until i find the best method for me.

Greetz,

Michel

Vincent · « **Reply #4 on:** December 12, 2011, 02:25:01 PM »

Could we also modify Ruuds first approach in a way that all children of let's say PAGE_ID=5 inherit the same stylesheet as PAGE_ID=5, being a different one than the default style sheet?

Would be nice! And handy!
Vincent

Ruud · « **Reply #5 on:** December 12, 2011, 02:31:46 PM »

For just one level it is not that hard.
WB has a variable PARENT too. This one has the PAGE_ID of the parent of the current page.

Code: [Select]

<?php 
$css = "red.css"; //default
if (PAGE_ID==1} $css = "blue.css";
if (PARENT==1} $css = "blue.css";

if (PAGE_ID==2} $css = "yellow.css";
if (PARENT==2} $css = "yellow.css";

if (PAGE_ID==382} $css = "brown.css";
if (PARENT==382} $css = "brown.css";

echo TEMPLATE_DIR.$css;
?>

Vincent · « **Reply #6 on:** December 12, 2011, 02:36:08 PM »

Super, thanks.

sky writer · « **Reply #7 on:** April 03, 2012, 03:47:16 AM »

I suddenly require this "shortcut" functionality, as I have a client who wants me to show them their website with all sorts of different colour schemes on different hidden pages.

I was trying to implement Ruud's first suggested work-flow, but I don't know where I am supposed to put the code. I assumed it would go in the template index.php file, but then I don't know what to do with the present code:

Code: [Select]

<?php 
	// automatically include optional WB module files (frontend.css, frontend.js)
	if (function_exists('register_frontend_modfiles')) {
		register_frontend_modfiles('css');
		register_frontend_modfiles('js');
	} ?>

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/style.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/print.css" media="print" />

And direction would be greatly appreciated.

Ruud · « **Reply #8 on:** April 03, 2012, 09:50:24 AM »

Correct, this should be generated somewhere in the <head> section of the template.

If you use the color stylesheets just to override the default layout/colors put it after your normal style.css lines.
The rest of your current template should not be changed.

sky writer · « **Reply #9 on:** April 03, 2012, 10:16:39 PM »

Thanks for your reply, but I'm doing something wrong.

When I add your code to my head section:

Code: [Select]

<head>
<?php simplepagehead('/', 1, 1, 1, 0); ?>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />

	<?php 
	// automatically include optional WB module files (frontend.css, frontend.js)
	if (function_exists('register_frontend_modfiles')) {
		register_frontend_modfiles('css');
		register_frontend_modfiles('js');
	} ?>

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/style.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/print.css" media="print" />
<link rel="Shortcut Icon" type="image/x-icon" href="<?php echo WB_URL; ?>/favicon.ico" />

<?php 
$css = "style.css"; //default
if (PAGE_ID==21} $css = "dark.css";
echo TEMPLATE_DIR.$css;
?>

</head>

Every pages loads as blank. Any thoughts?

Ruud · « **Reply #10 on:** April 03, 2012, 10:53:21 PM »

There are some typo's in the examples above

Code: [Select]

<?php 
$css = "/style.css"; //default
if (PAGE_ID==21) $css = "/dark.css";
echo TEMPLATE_DIR.$css;
?>

Note the } that should be ) (causing the blank screen)
Also the $css variable with the filename to use should start with a /

sky writer · « **Reply #11 on:** April 04, 2012, 12:36:50 AM »

Sorry to be a bother, but this just prints:

Code: [Select]

http://www.website.com/templates/background/dark.css at the top of the web page. It doesn't use the dark.css

Tez Oner · « **Reply #12 on:** April 04, 2012, 02:08:17 AM »

Eeey,

it's not that sophisticated as all the php-code above... but why not adding for example:

<link rel="stylesheet" type="text/css" href="/wb/templates/css/dark.css" media="screen,projection" />

in the WYSIWYG module of a page (paste in code-view....) and on the other child-pages duplicate the (dark-css)
module-section with the section-picker module... do the same with the other css (color) files...
so another WYSIWYG-section on a other page etc etc... this work... no matter what code... and takes
maybe 15 minutes (without a cup of coffee...)

or check out my Template Framework 3 Lite (demosite.vanallerle i.com) (it uses another technique) with handeling Css files and Vars,

Cheerz,

Tez

sky writer · « **Reply #13 on:** April 04, 2012, 02:19:33 AM »

Hi Tez,

Thank you for the alternate solution, but I like the idea of just a few lines of code in one location, as opposed to multiple sections on various pages. The main reason is that this will all be temporary. My client just wants to see a bunch of pages with different themes, so she can click through them and compare side to side. Then she will pick one overall theme for her website.

Your Framework looks impressive, but is more than I need for this already established website.

Cheers!

Ruud · « **Reply #14 on:** April 04, 2012, 09:38:33 AM »

Tez is a little bit right.
Now you have the url of your template.
You will need to put that in a <link> to be seen as command for the browser to load the stylesheet.

something like
<link rel="stylesheet" type="text/css" href="<?php ..... ?>" />

sky writer · « **Reply #15 on:** April 04, 2012, 10:12:30 PM »

Both of you are above me in ability, and so I ended up doing it (probably) the hard way, but for now it is working...

Code: [Select]

<?php
if (PAGE_ID==21) { ?>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/dark.css" media="screen,projection" />
<?php } ?>
<?php
if (PAGE_ID==22) { ?>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/light.css" media="screen,projection" />
<?php } ?>

sky writer · « **Reply #16 on:** April 04, 2012, 10:34:38 PM »

Thank you for pushing me in the right direction. Finally got it.

Code: [Select]

<?php 
$css = "/style.css"; //default
if (PAGE_ID==21) $css = "/dark.css";
if (PAGE_ID==22) $css = "/light.css";
?>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR.$css; ?>" media="screen,projection" />

Ruud · « **Reply #17 on:** April 04, 2012, 10:53:34 PM »

Quote from: sky writer on April 04, 2012, 10:34:38 PM

Thank you for pushing me in the right direction. Finally got it.

There are so many ways to do these things.. This is a good one

I am really happy you shared your final working solution(s) with the community. An example for all of us.

Tez Oner · « **Reply #18 on:** April 06, 2012, 10:17:05 PM »

Quote

I am really happy you shared your final working solution(s) with the community. An example for all of us.

Cooking with Website Baker just needs the right ingredients to be shared...

and @ruud... For a left handed...

Quote

Tez is a little bit right.

sounds quite funny lol,

Cheerz,

Tez

mdemaree99 · « **Reply #19 on:** June 13, 2012, 02:27:56 PM »

Since it will be temporary and showing customer different colors...

Put all code in one CSS.
Make a droplet that will have a pull down menu or radio buttons for each color.
Put the droplet in the Website header or footer section in the General settings under Settings.
This would let you show the customer how each page would look with a certain color.

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: Change color template different css (Read 16458 times)