This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

Different templates for different pages.

Page 11
(current)
2
Next 10 entries

10 Posts 5118 Views

Iain_vdw

Community Member, 22 Posts

29 October 2008 at 9:28pm

Edited: 29/10/2008 9:50pm

Hi there,

I'm creating a site for a client which has the request that each page has a different color theme for each main navigation page.

I've got eight main navigation links, with some of them having subnavigation items. So what I want to do is create eight different CSS files that are loaded on the corresponding page.

Something like this:

Home ---> 1.css (green)
Link 2 ---> 2.css (red)
Link 3 ---> 3.css (blue)
Link 3.1 ---> 3.css (blue)
Link 3.2 ---> 3.css (blue
Link 4 ---> 4.css (yellow)

Each CSS file loads a new background image and color theme then.

What's the best way of implementing this? Do I need to create a php script or can I let Silverstripe select it automagically via "<% if LinkOrSection = section %>" or something?

Also, there's an image in the template that needs to change the same way as the css. It's not a background image, it's content. Can i add a variable in the url to the image to change it with the page accordingly?

Edit:
Maybe this is another (cleaner) solution:
Using <body id="$URLSegment"> and then specifying eight different body styles in the css file? But i figure this would only work for the specified items and not for the subnavigation...?

Liam

Community Member, 470 Posts

30 October 2008 at 4:10am

Look at tutorial 2 for extending a site. It shows you how to add an image to a page. That way you could upload the image for each page right in the CMS and then display it using a variable wherever you need.

$URLSegement usually works for what you're after, but if you want sub pages you could look at using InSection() if you don't want to write a css id/class for each.

Do something like <% if InSection(page-url) id="whatever" %> in the body tag. This would include all child pages of the section. So do all the top level pages. The drawback to this, would be you'd have to hardcode in the css stuff, and adding new top level pages would require updated CSS.

Iain_vdw

Community Member, 22 Posts

30 October 2008 at 5:04am

Wouldn't that become somewhat messy as i've got to specify eight different sections in my Page.ss template? I would like to keep the template as clean as possible.

Isn't there anything in Silverstripe that recognizes the top section the current page is in? If that's possible, then i could use that variable in the link to the image so it becomes:

<img src="images/ <top section name> .jpg">

Get what i mean?

bummzack

Community Member, 904 Posts

30 October 2008 at 1:59pm

I would link the css directly in the init method of the controller, using the Requirements class.
Something like this:

// in your Page Controller class.
function init(){
   $cssFile = 'default.css';
   switch($this->URLSegment){
       case 'test': $cssFile = '1.css'; break;
       case 'contact': $cssFile = '2.css'; break;
       // etc.
   }

   Requirements::css($cssFile);
}

Of course the hard-coding of URL-Segments is hackish at best. I'd probably create a page that allows to select the "theme" using a dropdown in the CMS. This selection is then used in combination with Requirements::css(xy). Of course every page would inherit it's parent value.
The same approach can be used for your image problem.

Iain_vdw

Community Member, 22 Posts

30 October 2008 at 8:55pm

Well, that might work, though it's not an optimal solution. What i'm actually looking for is something like a variable i can insert into an URL which returns the section name of the page you're viewing.

Is there any variable that returns the top section name as plain text? That way i can insert it into my body and photoholder div as an id. Then in my css file i can make the required changes to make it work. Keeps the template clean and all :)

NathanB

Community Member, 2 Posts

31 October 2008 at 7:45am

Edited: 31/10/2008 8:30am

I'm a bit of a SilverStripe newbie, so please forgive me if what I'm saying won't help you out.

I was looking over this question earlier today-- SHOCKED to find it's being discussed RIGHT NOW-- and believe I came up with the answer earlier.

Did you see this page on Page-Controls?
One of the most interesting ones that may help you here, is the "Controlling Certain Pages" section. It mentions that you can get access to the levels leading up to the current page you're on.

EG: Level(1) would return the top level of the section you are currently in.
I doubt that it will return a string. If it does, it could return a string with a space in it-- horrible for CSS. I believe it'll return an OBJECT of use to you.

If it returns an object, you can probably call Level(1).URLSegment (or is it Level(1)->URLSegment ? I'm a bit of a n00b, here.. ). If that works, you can use the URL segment as your ID/Class.

I hope slashes in IDs/Classes won't screw up CSS.

Let us know the solution you discover to your problem! I'd appreciate it, personally. 8) If I helped, so much the better.

EDIT ONE:
So it looks like you can't call $Level(2) like a variable. Maybe this'd be useful in future versions of SilverStripe?

Regardless, the following code DOES work, and IS tested. The above code (calling it) will cause your template files to be invalid, and you will have to clear them out of where they are. (EG: In your PHP temp folder. )

This code works:

<a href="<% control Level(1) %>$URLSegment">$URLSegment<% end_control %></a>

It prints out:

<a href="about-us">about-us</a>

Best of luck.

Let us know if this works!

~Nathan B

Web Design by Polar Design

Hamish

Community Member, 712 Posts

31 October 2008 at 10:41am

Welcome aboard :)

bummzack

Community Member, 904 Posts

31 October 2008 at 11:25am

@Flowz0r: you can simply use the $URLSegment as your "section-name". It is the URL part you enter in the cms and is unique. You should be aware, that a user can change this URLSegment in the cms and therefore break the functionality of your system.
I'm not sure why you're against the solution i posted. So far it seems to be the most flexible and stable approach and it doesn't add anything that clutters your template. Everything is taken care of in the Controller (php code, not template).

Page 11
(current)
2
Next 10 entries

Return to top