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

Offline Re-Mi

  • Posts: 97
Change color template different css
« 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

 

Offline Tez Oner

  • Posts: 257
  • "...it's possible..."
    • VA-MDS / MMO | communications
Re: Change color template different css
« 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
Tez | VA-MDS / MMO | communications
--------------------------------------------
info@va-mds.com / http://va-mds.com

Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Change color template different css
« 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>
« Last Edit: December 06, 2011, 05:25:25 PM by Ruud »

Offline Re-Mi

  • Posts: 97
Re: Change color template different css
« 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

Offline Vincent

  • Posts: 376
  • Gender: Male
    • websites voor ondernemers
Re: Change color template different css
« 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 »

Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Change color template different css
« 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;
?>

Offline Vincent

  • Posts: 376
  • Gender: Male
    • websites voor ondernemers
Re: Change color template different css
« Reply #6 on: December 12, 2011, 02:36:08 PM »
Super, thanks.

Offline sky writer

  • Posts: 926
Re: Change color template different css
« 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.

Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Change color template different css
« 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.

Offline sky writer

  • Posts: 926
Re: Change color template different css
« 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('/'1110); ?>
<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?

Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Change color template different css
« Reply #10 on: April 03, 2012, 10:53:21 PM »
There are some typo's in the examples above  :oops:

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 /

Offline sky writer

  • Posts: 926
Re: Change color template different css
« 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

Offline Tez Oner

  • Posts: 257
  • "...it's possible..."
    • VA-MDS / MMO | communications
Re: Change color template different css
« 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

Tez | VA-MDS / MMO | communications
--------------------------------------------
info@va-mds.com / http://va-mds.com

Offline sky writer

  • Posts: 926
Re: Change color template different css
« 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!

Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Change color template different css
« 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 ..... ?>" />

Offline sky writer

  • Posts: 926
Re: Change color template different css
« 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 ?>

Offline sky writer

  • Posts: 926
Re: Change color template different css
« 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" />

Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Change color template different css
« Reply #17 on: April 04, 2012, 10:53:34 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.

Offline Tez Oner

  • Posts: 257
  • "...it's possible..."
    • VA-MDS / MMO | communications
Re: Change color template different css
« 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

Tez | VA-MDS / MMO | communications
--------------------------------------------
info@va-mds.com / http://va-mds.com

Offline mdemaree99

  • Posts: 102
Re: Change color template different css
« 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.