Skip to main content

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

Themes

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Modifying Themes Versus Building Them


Go to End
Reply

17 Posts   3875 Views

Avatar
effectwebdesign

24 December 2008 at 5:19am Community Member, 16 Posts

Any other designers find it advantageous to just modify existing themes (layout and css) versus building a new one? One challenge I've had with CMS systems like silverstripe and DotNetNuke is that they tend to be very programmer friendly in setup and quite challenging to designers and generalists who often wind up with the task of putting up these sites. Just curious.

The blessing is I can add modules I'd never be able to program myself. The downside is to do some of the simplest things with design I have to do lots of workarounds in unfamiliar code and they still seem unstable across browser types and versions.

Avatar
one2gamble

24 December 2008 at 9:40am Community Member, 30 Posts

Though I havent started from scratch yet with silver stripe, modifying an existing theme and looking at the code it seems like it should be rather simply to wrap silverstripe around almost any layout. I have one that i need to/want to migrate but I havent had the motivation to really dig into yet.

Avatar
Nivanka

28 December 2008 at 5:41am Community Member, 395 Posts

for me I would just code up new themes for websites, I first do the HTMLs and CSS but I make sure to name them as layout.css and the typography.css also I manage to have to directory structure too.

Then after doing my HTML I convert it to a SilverStipe theme, which I believe is much easier than editing one.

Also with this method I am sure of my code, and the CSS :)

Avatar
flyingHstudios

9 January 2009 at 6:27am (Last edited: 9 January 2009 6:31am), Community Member, 3 Posts

"Then after doing my HTML I convert it to a SilverStipe theme, which I believe is much easier than editing one."

When you say "convert" what do you mean? And when you say "also I manage to have to directory structure too" what do you mean? Not being confrontational, just trying to understand so I can learn. Thanks.

Avatar
Liam

9 January 2009 at 7:53am Community Member, 470 Posts

He means taking a html/css coded template page and cutting it up into the template system. I do the same thing.

I code a html/css template of my design from photoshop. From there I would take that working file and work it into the SS template system. I'd make my needed Layout pages and any type of Include template for things like footers/menus etc.

As for directory structure, he just means keep it the same as what SS uses. So a folder 'mysite' or similar, with the needed sub folders. Same goes for the theme directory if you use that as well.

Avatar
Carbon Crayon

9 January 2009 at 11:28pm (Last edited: 10 January 2009 6:59am), Community Member, 598 Posts

In order to make starting a new theme relatively simple I took the blackcandy theme and just turned it in to a generic CSS/HTML framework (i.e. no images just blocks and buttons) which I use at the start of every project. This makes creating a page layout very quick and keeps the same CSS id's and Classes, which means moving code between projects is much easier and also helps to keep things cross browser compatible (as the initial template is x browser). I'd be happy to upload this framework if anyone wants it.

Here is a brief outline of how you convert a static HTML page into a .ss template.
Because .ss files are basically HTML files with <% %> and $ tags placed where we want SS to fill things with the content from the database, it's a relatively simple process.

To start with just make your main Page.ss file, a complete page including some (possibly dummy) content which can be sliced up into separate elements later. So in the <head> we can replace the Links and meta tags with <% base %> and $MetaTags and then instead of an HTML menu which might look like this:

<ul id="menu1">
<li><a href="home">Home</a></li>
<li><a href="home">About</a></li>
<li><a href="home">Gallery</a></li>
<li><a href="home">Contact</a></li>
</ul>

We can replace it with the same SS menu which will look something like this (you can find more on this in tutorial 1):

<ul id=menu1>
<% control Menu(1) %>
<li><a href="$Link">$MenuTitle</a></li>
<% end_control %>
</ul>

This carries on, adding $Content in place of your content text, $Image to instead of an <img> tag etc. etc. until you have a page which looks the same through SS as it does in plain HTML.

Once you have that you can then chop out your <div id="content class="typography"></div> block and put it into /Layout/Page.ss replacing it with $Layout in the main Page.ss file (again more on this in tutorial 1).

Then you can decide what you want to chop out and add as an <% include %>, so you might take out your second level menu block and place that in Includes/Menu2.ss replacing it with <% include Menu2 %> in the templates you want to have a Menu 2.

At this point you should pretty much have a SS theme which you cant then extend as far as you like.

If you are confident with CSS and HTML you should have no trouble building SS templates. It really is one of the most designer friendly templating system I have come across (granted I haven't tried that many, I got hooked on SS ;) ).

And of course if you get stuck you can always come and ask us :)

Avatar
Cem

17 March 2009 at 7:27pm Community Member, 31 Posts

Aram would you be so kind to upload your cleaned up version somewhere?
Thanks in advance
Cheers!

Avatar
pace obed

18 March 2009 at 3:36am (Last edited: 18 March 2009 3:38am), Community Member, 6 Posts

@Nivanka,
Could you explain more detail about convert your HTML to SS. thanks :)

@Aram,
nice share. thanks

Go to Top