Thread

G’day EE peoples,

For far too long I’ve been running a very old and crappy design that was hacked together years ago - “just good enough for now” kind of stuff.

I’m currently modifying and adapting the following Open Source CSS template (Multi-Flex 3.9 from http://www.1234.info/webtemplates/) - and very happy with the results so far.

My current issue is trying to have masthead images that are conditional on “URL segment”.

I do this now easily because the current masthead image is set using HTML.

In multiflex 3.9 it’s part of a CSS stylesheet - like this:

.header-middle {width:915px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

Any ideas on how I can “conditionally” choose images for the masthead when it is set this way?

Many thanks,

Thomas

Maybe you could have different classes for the different ones.  Let’s just say you have three segments you’re testing for (we’ll say you’re testing segment_2) and you have classes “masthead-1”, “masthead-2”, “masthead-3”  Your masthead code could be like this:

<div class="header-middle{if segment_2 == "one"} masthead-1{if:elseif segment_2 == "two"} masthead-2{if:elseif segment_2 == "three"} masthead-3{/if}">
Masthead stuff…
</div>

And you’d specify the image in each of the masthead-* classes.  Does that make sense?

Actually, thinking more, there’s an even easier way.  Just create your classes based on what the segment value you’re looking for.  So, just do this:

<div class="header-middle {segment_2}">content</div>

So, if the url had a segment_2 value of “one” the div would have “one” as a class.

G’day Kyle,

YES! of course, what a simple solution!  I’m full of dumb questions. =)

Thanks for your reply mate.

Thomas