Welcome, Guest. Please login or register.
Did you miss your activation email?
May 26, 2012, 11:48:08 PM

Login with username, password and session length
Search:     Advanced search
Interested in joining the WebsiteBaker team?
For more Information read here or on our new website.
155556 Posts in 21715 Topics by 7737 Members
Latest Member: gx-world
* Home Help Search Login Register
Pages: [1]   Go Down
Print
Author Topic: Change color template different css  (Read 1072 times)
Re-Mi

Offline Offline

Posts: 87
« 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:
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:
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

 
Logged
Tez Oner

Offline Offline

Posts: 50



WWW
« 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
Logged
Tez | vanAllerlei
--------------------------------
Media • Design • Strategy
Ruud
WebsiteBaker Org e.V.

Offline Offline

Posts: 2298



WWW
« Reply #2 on: December 06, 2011, 05:23:49 PM »
3 different approaches to play

Code:
<?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:
<?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:
<body>
<div class="page-<?php echo PAGE_ID; ?>">
......
</div>
</body>
« Last Edit: December 06, 2011, 05:25:25 PM by Ruud » Logged
Professional WebsiteBaker Solutions
Re-Mi

Offline Offline

Posts: 87
« 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
Logged
Vincent

Offline Offline

Posts: 360


WWW
« 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
« Last Edit: December 12, 2011, 02:27:18 PM by Vincent » Logged
Ruud
WebsiteBaker Org e.V.

Offline Offline

Posts: 2298



WWW
« 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:
<?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;
?>
Logged
Professional WebsiteBaker Solutions
Vincent

Offline Offline

Posts: 360


WWW
« Reply #6 on: December 12, 2011, 02:36:08 PM »
Super, thanks.
Logged
sky writer

Offline Offline

Posts: 285
« Reply #7 on: April 03, 2012, 02: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:
<?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.
Logged
Ruud
WebsiteBaker Org e.V.

Offline Offline

Posts: 2298



WWW
« Reply #8 on: April 03, 2012, 08: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.
Logged
Professional WebsiteBaker Solutions
sky writer

Offline Offline

Posts: 285
« Reply #9 on: April 03, 2012, 09:16:39 PM »
Thanks for your reply, but I'm doing something wrong.

When I add your code to my head section:
Code:
<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?
Logged
Ruud
WebsiteBaker Org e.V.

Offline Offline

Posts: 2298



WWW
« Reply #10 on: April 03, 2012, 09:53:21 PM »
There are some typo's in the examples above  embarassed

Code:
<?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 /
Logged
Professional WebsiteBaker Solutions
sky writer

Offline Offline

Posts: 285
« Reply #11 on: April 03, 2012, 11:36:50 PM »
Sorry to be a bother, but this just prints:
Code:
http://www.website.com/templates/background/dark.css
at the top of the web page.  It doesn't use the dark.css
Logged
Tez Oner

Offline Offline

Posts: 50



WWW
« Reply #12 on: April 04, 2012, 01: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...) Wink


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

Cheerz,

Tez
Logged
Tez | vanAllerlei
--------------------------------
Media • Design • Strategy
sky writer

Offline Offline

Posts: 285
« Reply #13 on: April 04, 2012, 01: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!
Logged
Ruud
WebsiteBaker Org e.V.

Offline Offline

Posts: 2298



WWW
« Reply #14 on: April 04, 2012, 08: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 ..... ?>" />
Logged
Professional WebsiteBaker Solutions
sky writer

Offline Offline

Posts: 285
« Reply #15 on: April 04, 2012, 09: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:
<?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 } ?>
Logged
sky writer

Offline Offline

Posts: 285
« Reply #16 on: April 04, 2012, 09:34:38 PM »
Thank you for pushing me in the right direction.  Finally got it.

Code:
<?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" />
Logged
Ruud
WebsiteBaker Org e.V.

Offline Offline

Posts: 2298



WWW
« Reply #17 on: April 04, 2012, 09:53:34 PM »
Quote from: sky writer on April 04, 2012, 09: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  smiley

I am really happy you shared your final working solution(s) with the community. An example for all of us.
Logged
Professional WebsiteBaker Solutions
Tez Oner

Offline Offline

Posts: 50



WWW
« Reply #18 on: April 06, 2012, 09: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... Wink

and @ruud... For a left handed...
Quote
Tez is a little bit right.

sounds quite funny lol,

Cheerz,

Tez
Logged
Tez | vanAllerlei
--------------------------------
Media • Design • Strategy
Pages: [1]   Go Up
Print
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.16 | SMF © 2011, Simple Machines Valid XHTML 1.0! Valid CSS!
Impressum & Datenschutz | powered by WebsiteBaker. ©2004–2010 by Website Baker Org e.V. , all rights reserved | Legal Notice & Privacy Policy