CMS Made Simple Forums

Posted: **Fri Dec 30, 2011 12:49 pm**

Hi there!

I'm currently struggeling with my homepage and my design ideas. First of all: I did my best to use google and the web to find an answer, because i can't imagine I'm the only one who has problems implementing such behaviour. However, i did not find an answer, that's why i ask here.

Now my problem is the following: I want my page to be seperated into different kind-of "categories". Each first-level menu element shall create a new "category" for its child elements. On my webpage, each category shall have another color that appears in several ways (headlines, navigation buttons, links and so on shall have the category's color).
An example: So imagine the page "home" in blue color. And imagine a page "photographs" in red color. All child pages of these two shall be in the same color as their first-level-parent. So: "home > news" shall also be blue, "photographs > nature" and "photographs > portraits" shall both be red.
(I hope you can understand my idea - if not please ask me)

What i want to achieve: I need an option in the backend that allows me to apply a color to each first-level-page. All sub-pages should simply inherit the color, without additional editing in the backend. Thus it's easy to add a new "category" to my website.

There is the well-knows but pretty unflexible way with css-classes.
I could create a separate class for each category in my css-stylesheet. Then i would need to add the matching class somewhere in my template.
Problem: very unfelxible. Once I define a new first-level-page (thus defining a new category with it's own color) i also need to make several defines in my stylesheet.
This is very unhandy.

So I tried it with Smarty (which is a great thing in general!). However, here is where the problems begin: I somehow need to add some extra data to each first-level-page to specify the color for all the child elements. And then, in the template i need to find out, which color i need to show (which color the first-level-parent of the page has attached).

I really don't know, what to do here.
Do you have an idea? Thanks for any support,

Bääääär

PS: I tried to specify a color for each page using the "smarty-field" in the options tab of my pages. I wrote something like this in there: {assign var="pagecolor" value="#eca610"}
This way i can define a color for each page (still not the category-behaviour but at least a good point to start). However, when i insert this smarty-variable into my stylesheet, it won't work - the stylesheet is chached and won't update every time, i load a page.

Posted: **Fri Dec 30, 2011 4:03 pm**

Here's my attempt at addressing your issue - frankly mostly opinions than solutions, but here goes anyway...

The "right" approach here is one that you've already considered and rejected, which is using unique classes in your CSS to define the styles for each "category" and assigning those classes within the template based on parent page. This is an effective way if there is more than just one thing that is different between the styling for the categories - in your case I think you are saying that the only unique aspect is this"pagecolor" - is that right?

As you found out the hard way, caching of the stylesheet causes problems with run-time substitution of an assigned smarty variable. One way around this is to have the custom portion of your stylesheet inside the <head> tags of your template. This will allow you to use smarty logic for processing of the pagecolor value. The downside is that now you will have style definitions in more than one place.

In terms on "inheriting" the page color from the parent, you can use a function built into the CGSimpleSmarty module to read parameters from other pages, including the parent page. Unfortunately (AFAIK) you can only read content block values.

Given all that, here is one way I'd approach the problem.

Assuming both your parent and child pages use the same template...

1. I'd add the following content block into the template:

Code: Select all

{content block="page_color" assign="my_page_color"}

2. I'd put the following code into a GCB:

Code: Select all

{if $my_page_color == ''}
	{$cgsimple->get_parent_alias($page_alias,"my_parent")}
	{$cgsimple->get_page_content($my_parent,'my_page_color','my_page_color')}
	{if $my_page_color == ''}
		{assign var="my_page_color" value="#some default color"}
	{/if}
{/if}
<style>
/* Insert custom style definitions here based on value of $my_page_color, example below */
body {ldelim}background-color:{$my_page_color};{rdelim}
</style>

(replace "#some default color" with the default color in case page color was not defined anywhere)

3. Then I'd fill the value for the my_page_color content block for the parent pages and leave it blank for the child pages. (Although with the above example you can provide overrides for the child pages if necessary)

That should work... in theory. The code above is an outline of where I'd start - I have not tested it myself.

Hope this helps.
-S

Posted: **Mon Jan 02, 2012 6:05 am**

You could use friendly position as a class...

</__body class='style{$friendly_position|truncate:1:"" == ""}'>

This will give you style1, style2, style3, style4 depending on which page you are on/under, 1 being home page, look at the numbers next to pages, 2.2 becomes 2...

CMS Made Simple Forums

Individual colors for each page - a smarty problem

Individual colors for each page - a smarty problem

Re: Individual colors for each page - a smarty problem

Re: Individual colors for each page - a smarty problem