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   4085 Views

Avatar
effectwebdesign

Community Member, 16 Posts

24 December 2008 at 5:19am

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

Community Member, 30 Posts

24 December 2008 at 9:40am

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

Community Member, 400 Posts

28 December 2008 at 5:41am

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

Community Member, 3 Posts

9 January 2009 at 6:27am

Edited: 09/01/2009 6:31am

"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

Community Member, 470 Posts

9 January 2009 at 7:53am

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

Community Member, 598 Posts

9 January 2009 at 11:28pm

Edited: 10/01/2009 6:59am

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

Community Member, 31 Posts

17 March 2009 at 7:27pm

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

Avatar
pace obed

Community Member, 6 Posts

18 March 2009 at 3:36am

Edited: 18/03/2009 3:38am

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

@Aram,
nice share. thanks

Go to Top