Jump to:

1383 Posts in 492 Topics by 521 members

Themes

SilverStripe Forums » Themes » Modifying Themes Versus Building Them

Discuss SilverStripe Themes.

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

Page: 1 2 3
Go to End
Author Topic: 3848 Views
  • effectwebdesign
    Avatar
    Community Member
    16 Posts

    Modifying Themes Versus Building Them Link to this post

    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.

  • one2gamble
    Avatar
    Community Member
    30 Posts

    Re: Modifying Themes Versus Building Them Link to this post

    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.

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: Modifying Themes Versus Building Them Link to this post

    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

  • flyingHstudios
    Avatar
    Community Member
    3 Posts

    Re: Modifying Themes Versus Building Them Link to this post

    "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.

  • Liam
    Avatar
    Community Member
    470 Posts

    Re: Modifying Themes Versus Building Them Link to this post

    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.

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Modifying Themes Versus Building Them Link to this post

    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

  • Cem
    Avatar
    Community Member
    31 Posts

    Re: Modifying Themes Versus Building Them Link to this post

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

  • pace obed
    Avatar
    Community Member
    6 Posts

    Re: Modifying Themes Versus Building Them Link to this post

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

    @Aram,
    nice share. thanks

    3848 Views
Page: 1 2 3
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.