WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: 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
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
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
-
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
-
3 different approaches to play
<?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
<?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; }
<body>
<div class="page-<?php echo PAGE_ID; ?>">
......
</div>
</body>
-
Thank you both,
I will experiment the options until i find the best method for me.
Greetz,
Michel
-
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
-
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.
<?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;
?>
-
Super, thanks.
-
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:
<?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.
-
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.
-
Thanks for your reply, but I'm doing something wrong.
When I add your code to my head section:
<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?
-
There are some typo's in the examples above :oops:
<?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 /
-
Sorry to be a bother, but this just prints:
http://www.website.com/templates/background/dark.css at the top of the web page. It doesn't use the dark.css
-
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
-
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!
-
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 ..... ?>" />
-
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...
<?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 } ?>
-
Thank you for pushing me in the right direction. Finally got it.
<?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" />
-
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.
-
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... Tez is a little bit right.
sounds quite funny lol,
Cheerz,
Tez
-
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.