[SOLVED] How would I use Smarty to use an array of colours

[CapereSpiritum]

Hi

I want to sent an array of different colours (6 or 7) for divs containing parent links in the main menu of a new website.

My knowledge of smarty is pretty low.

I'm pretty sure I've seen exactly what I'm trying to do here or on the smarty website quite a while ago.

Kinda thinking I've to use the cycle function as below:

Code: Select all

<div bgcolor="{cycle values="#eeeeee,#dddddd"}"></div>

Can anyone point/show me the right direction?

[JohnnyB]

You can use cycle, but maybe use CSS classes or inline CSS styles instead. When using classes, you can manage it in your stylesheet.

Code: Select all

<div style="background-color:{cycle values='#eeeeee,#d0d0d0,#aaa'}">

OR

Code: Select all

<div class="{cycle values='classname1,classname2,classname3'}">

But, that doesn't give you much option to assign a specific div style to a specific parent link. Really, it sounds like you want to assign a color to a blocks of content based upon the actual content inside of them (using a parent link as the unique item).

Can you post, an example of your HTML structure, etc.? There is an easy way to do it depending upon what has to happen.

[CapereSpiritum]

Hi JohnnyB

I've managed using CSS.

I added a class 'menu' to the cssmenu.tpl and then used the following css

Code: Select all

.menu #primary-nav a {color:#fff; font-size: 1.3em; margin-top:10px; max-width: 95px; height: 40px; padding:18px 10px 21px; line-height: 16px; border-radius:15px 15px 0 0; background:#eea631; -webkit-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; display:block}
.menu #primary-nav li+li a {background:#ec4848}
.menu #primary-nav li+li+li a {background:#ed5086}
.menu #primary-nav li+li+li+li a {background:#b57af1}
.menu #primary-nav li+li+li+li+li a {background:#966bef}
.menu #primary-nav li+li+li+li+li+li a {background:#4e7bea}
.menu #primary-nav li+li+li+li+li+li+li a {background:#38c9a2}
.menu #primary-nav li+li+li+li+li+li+li+li a {background:#9dd636}
.menu #primary-nav li+li+li+li+li+li+li+li+li a {background:#be0505}
.menu #primary-nav li+li+li+li+li+li+li+li+li+li a {background:#fac570}

And a similar set to the above for the children

Here's the outcome so far

Still working on layouts so no content yet.

Many thanks for your reply.

[JohnnyB]

I really applaud your use of CSS to do that. Here's another approach to consider for next time.

If you are using the menu manager, you can set an unique class for each LI by using {$node->alias}

Code: Select all

<li><a class="{$node->alias}" .... 

Then your HTML will be something like:

Code: Select all

<li><a class="Foil-Balloons" ....
<li><a class="Boxed-Balloons: ....

Then in your CSS:

#primary-nav li a.Foil-Balloons {background:#whatever}
#primary-nav li a.Boxed-Balloons {background:#whatever}

If your not using the menu manager and have your menu hand-coded in the template, you can apply the same principle.

[CapereSpiritum]

Hi JohnnyB

That looks pretty straight forward.

I'll bear that in mind.

Ordinarily, I would not need so many colours for a li/div in a menu, it was just the very nature of ther site that merited it.

Thanks again.