ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

How to structure EE so a user can easily change main template colours?

March 22, 2011 1:26pm

Subscribe [2]
  • #1 / Mar 22, 2011 1:26pm

    Pagemakers

    11 posts

    HI all,

    Take this as a simple EE website structure:

    1. Home
    2. About
    3. Work
      1. print
      2. web
    4. Contact

    Say you want pages 1-4 to have a colour like red, green, yellow or blue defined (sub pages 3.1 and 3.2 share their parents theme) how would you set this up in EE so that a basic EE user can select a page and set it’s theme colour from a drop-down menu?

    At the moment I can set this as a string value in an Embedded Variable. But this is not user friendly and it kinda needs a Fisher-Price wrapper around it! 😊

    Any guidance would be great.

    Thanks, Ben

  • #2 / Mar 22, 2011 3:51pm

    Rob Allen

    3118 posts

    One often used method is to add an ID and/or class to the BODY tag, then add required styles to your CSS file.

    Eg for your About pages…

    <body id="about">

    Then for CSS just assign variations based on the BODY ID, eg…

    #about h1 { color: purple; }
    #work h1 { color: red; }
    #contact h1 { color: purple; }
  • #3 / Mar 22, 2011 4:05pm

    Pagemakers

    11 posts

    Hey bluedreamer thanks for the response.

    Maybe I should have clarified, I have no issue with the CSS/XHTML, that’s all working fine just like you have suggested.

    What I am interested in is how you go about setting up EE to allow users to modify which section is which colour using a simplified control system.

    Essentially I am looking to setup a relationship that stores each pages (perhaps an id) and matches it to a colour setting.

    So a use-case for EE (the backend system).

    1. basic user logs in
    2. users selects page data eg: About
    3. user selects from a drop-down (or radio i suppose) the colour they wish the page to be
    4. user click submit
    5. we have a nice colour themed page!

    What is not clear to me is how one goes about setting a system like this up in EE. Effectively creating a simplified system that requires no coding by the user.

    I know how to go about such a thing in a standard LAMP build, but the reason for moving to EE is to try to stop re-creating the wheel each time we need a CMS.

    Cheers, Ben

  • #4 / Mar 22, 2011 4:52pm

    Elemento, Inc.

    57 posts

    What about this:

    <body {if fieldname}style=“background-color: {fieldname}”{/if}>

    Just make sure the whole template is inside the {exp:channel:entries}

  • #5 / Mar 22, 2011 5:10pm

    Rob Allen

    3118 posts

    There’s a Colour Picker fieldtype that could be used to assign a custom colour or two on an entry by entry basis - http://devot-ee.com/add-ons/color-picker-field/

    Alternatively if you wanted the colour choices outside the normal Channel>Entry relationship you could use something like http://loweblog.com/software/low-variables/ and set up some global fields for each instance you needed (this addon should work with the Colour Picker addon above).

  • #6 / Mar 24, 2011 2:08pm

    Pagemakers

    11 posts

    Thanks for the pointers.

    Ok, here’s how I have implemented this… views most appreciated. (btw: I am using the Structure add-on)

    {!-- embeds body tag and passes structures' root node page name --}
    {embed="embeds/.body_tag_open" bpb_root_page_title="{structure:top:title}"}

    Then in my include I have used php (which I may hook-up to a mysql db) to retrieve the colour value of the page.

    <?php
    // pull from db?
    $colour_array[ 'home' ] = "yellow";
    $colour_array[ 'about' ] = "green";
    // get lowercase page structure root node name
    $page_title = strtolower( "{embed:bpb_root_page_title}" );
    // get colour value from array @todo check for null…
    $bpb_colour_theme = $colour_array[$page_title];
    ?>
    <body id="theme_<?php echo $bpb_colour_theme; ?>">
    <div id="wrapper">

    So basically this allows me to dynamically set the template colour from any page and subpage using just one template.

    This works, but is not totally ideal as I would have liked it to be controlled from within EE itself, with a drop-down menu for example. I did look into categories and relationships a little, but failed to see how this could achieve what I was after, but works for now though.

    Please let us know if there is a better way to do this.

    Ta! B

    ps: the css styles “yellow”, “green” go based off of a colour so that in the future if (when) section names change they still make sense!

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases