Example theme: Spring Bloom

In an effort to inspire and help others, I've created a new ocPortal 4 theme called "Spring Bloom". It is heavily based on a free Open Source "template" of the same name:
Open Source Web Design - Preview - Spring Bloom




I'm actually really pleased with how it turned out. I intentionally started with a really pretty template that wasn't too assumptive about content structure (e.g. didn't have loads of internal columns), then I just started mixing in the code into a new ocPortal theme. Total build time: just 3 hours.

Consider this a beta release, as I haven't tested this theme in anything other than Firefox. I'm hoping the original template I based it off was cross-browser tested, and if it is this in theory should work on different browsers also.

Attachment

The new theme (extract and upload to the 'themes' directory, and remember to set permissions on themes/spring_bloom/templates_cached/EN)
» Download: spring_bloom_beta1.zip (547 Kb, 487 downloads so far)

I'm going to explain how I made this next. I'll be something of a case study .

In this post I'm going to do a bit of a brain dump of how I just made this theme. I would be very happy to answer any questions you have. It's also a good idea for you to look at the templates and CSS within the theme too, it's a great way to get a feel for what I've done.

(I'm not going to mention all the little mistakes I made and corrected during the making of this - I'm human too so sometimes I do things, and change my mind and go back )

Once I'd found Spring Bloom (I've never seen it before today) the first thing I did was run the Theme Wizard, to colour match a new ocPortal theme against the pink/purple tone the template has. Beware of how I'm using the word "template" there – "templates" in this sense are HTML and CSS files that you use as a "template" to build your own site – it's not the same as an ocPortal template.
This was pretty straight forward- I very quickly had a purple theme named "spring_bloom" that I could use for as a base for further editing. I don't want to self-congratulate, but the Theme Wizard is a totally amazing thing: without it, I'd have had to do an enormous job of hand editing 100's of CSS colours and images to match the purple, and that would have taken days.

The next step was for me to copy some templates into my theme that I knew I wanted to override. I should say I personally work in a text editor (specifically I am currently a Mac user, running 'TextMate')- I don't actually use ocPortal's own template editing interface myself, but this is really because as a programmer I am so used to text editors. It's convenient for me to be able to edit PHP and TPL files together should I want to. So this process of copying files is just the way I work- other people might instead choose to override files one-by-one using the ocPortal template editor.
I know from experience what are the common templates to edit. There are 3 obvious ones: HEADER, GLOBAL, and FOOTER. But the other ones are standard box and menu templates. From looking at the design I knew I was going to implement that menu in the header as a 'top' menu, so I overrode the set of 'top' menu templates. I overrode all the standard box templates, as clearly this theme's use of boxes wasn't going to be anything like ocPortal's default themes. This theme is has pretty 'clean' style (this is not a value judgement: style is the operative word here, dependant on taste and situation).

Once I'd overridden the key templates into my new theme, I had to start replicating the XHTML structure of the original Spring Bloom template into my own .tpl files. This is quite a fiddly thing to do, because you're trying to combine two things that have never seen each other before. I used a number of techniques:

• I nuked ocPortal template code I knew I wouldn't need. In particular I nuked the whole top of the default theme out of the HEADER template. I put panel_right to render right underneath panel_left (I know, I know, it's not 'right' anymore ). I removed various div's that were no longer needed.
• I tried to match concepts. For example, Spring Bloom had an ID 'sidebar' and ocPortal's default theme has an ID 'panel_left': so I renamed Spring Bloom's 'sidebar' ID to 'panel_left'. Of course, I needed to change the Spring Bloom CSS to match this naming change.

In parallel to the above XHTML merge, I was merging CSS. I started this process by dumping the whole Spring Bloom CSS into the top of my global.css file. And as I merged concepts, I was using various techniques:

• Ripping out ocPortal CSS that was no longer needed and quite possibly was going to interfere with Spring Bloom. For example, all the 'bottom' stuff, and all the 'global_middle' stuff.
• Adjusting the selectors used in the Spring Bloom CSS to match any adjustments I'd made when merging the XHTML structures. E.g. Changing 'sidebar' to 'panel_left' as mentioned earlier.
• Fixing anything that was going to be really egregious when it came to ocPortal's rendering (I'll explain this next as there is a lot to say).

So what was 'egregious'? One thing was that Spring Bloom had something called a 'CSS reset'. This is a common technique where a web developer will disable default browser styles so that when they write their CSS, they're starting from a clean sheet. That's all fine and good, except we don't want huge swaves of ocPortal, which was not built with a CSS reset, to be affected by all this. Let's get specific, this is what I'm talking about:
This little bit of code turns off margins for everything, including paragraphs. Imagine all ocPortal's paragraphs getting crunched together: not good!
So the solution to this was to take it out, but reapply the removal of margins, borders, and padding, into all the individual Spring Bloom CSS rules as required- achieving the same visual effect, but no longer sweeping over the whole of ocPortal.

Another issue is this template did make some assumptions by applying some pretty liberal selectors in the CSS. For example, all lists in the sidebar were styled in a way only appropriate for "link lists". Sometimes there is a bit of a gulf between the mindset of a CSS developer who works from scratch, and the mindset of someone who is working in a wider system: we, working in a wider system, have to be more modular in our thinking, and can't make assumptions like this. So the solution was to make the selectors more specific; in the case of the example, the "link list" styling was only applied for the lists used in menus (which is great, exactly what we wanted!)

Spring Bloom assumed there would always be a sidebar, and always be a main section. Of course, in ocPortal, sometimes there is no sidebar and thus the main section stretches full width. This is why ocPortal's default theme has a tonne of logic in GLOBAL.tpl that sets margins and widths, according to whether there are panels or not. It was easy to sort out- I just pulled out the width for the main section from the CSS, and made it an inline style in GLOBAL.tpl as per ocPortal's default theme; I used only slightly modified default-theme logic to determine what that width had to be.

Another issue is that the font size is quite small on this theme. That's fine, except ocPortal sometimes uses "smaller" fonts to show what I call "asides". I had to remove every font styling that made small fonts from the CSS files. I just nuked all the lines like "font-size: 0.8em;".

It's also worth me saying that this is a fixed-width theme that works on 800x600. Woohoo, we now have an ocPortal theme that can do that! But it did involve me tweaking some styles to make things more compact. In particular, the member/guest bars at the top of the forum: I had to adjust them so that each "column" in the bar would have wordwrapping, and be less wide.

So, how did I get new theme images in, like the images used in the header? It's really easy, I just copied the image files into the theme's images_custom directory, and referred to them in the CSS as theme images like:
instead of:
This demonstrates how ocPortal is quite clever when it comes to image searching. It does all kinds of magic to allow image overrides to work between themes, and it auto searches for file extensions. You don't need to know that- just dump the file in images_custom and reference it via it's filename (using the IMG symbol, and without the file extension).

To implement my new standard boxes, I nuked most of ocPortal's default standard box CSS, and tied in the Spring Bloom CSS files to point to the CSS class names ocPortal uses for the standard boxes. I only needed two kinds of standard box: the panel type, and everything else. So I hacked up the HTML for the panel and classic box types to meet my needs, and then I set the other box templates to simply link to the classic box type, by putting just this in their templates:

I think I've pretty much explained all the processes I went through now. There were of course more details, but generally it's in the same vein as other things discussed here. One closing note: I am in love with the Firefox Firebug extension (and all other browsers have similar tools now too): it is incredibly handy to be able to inspect different XHTML tags and see where they get their styling from. For example, I often compared what styles applied in ocPortal, to what applied in the demo of the plain Spring Bloom template - to see the origin of rendering differences.

Ok, that's all from me for now. Hopefully this will be a good resource for people wanting to make their own themes!

WTG! "Triffic!" The dogs-thingy's!

A starting point for all would-be 'Themers'.

 

Excellent post Chris, thanx for that! After reading, I dove in head first only to smash my wee brain on the rocks below (read: menus). I've desparately tried to separate the zone menu from the rest with regards to layout, but I'm not having much luck. I have however managed to completely destroy my zone menu working with the formatting on the side menus. I've even gone so far as to clone the side menu for a zone menu, both block.php and template.tpl but no luck. Any tips you could offer with regards to separating the menus from a theming point of view would be great.

TIA!
SD

Ok, let's see what I can explain without yet seeing the specifics of your problem .

The zone menu is a regular ocPortal menu, loaded up by this line in HEADER.tpl:
It's a normal block call in Tempcode syntax, loading up the inbuilt menu named '_zone_menu'. The code here indicates the menu is rendered with the 'zone' menu type.

The first thing I'm going to do is open up all the MENU*zone*.tpl files in my text editor, to see what's in them.

The template file that 'wraps' the contents of the menu is MENU_zone.tpl. This contains:
It's considered good practice to use lists for menus, and ocPortal 4 adheres to that. "nl" here stands for "navigation list", which is pretty standard terminology for the situation. We use "nl" to style our menu and a quick search of the templates reveals that "nl" is only used by the zone menu: so we are safe to change this styling without worrying about side-effects.

Searching global.css for .nl (styling applied to XHTML tags of the "nl" class") reveals just this code:

That styling code doesn't really do very much. Really it just makes the list not look like a list, by disabling default list styles.

Hmm, so ok I actually mis-trod there and didn't find what I was looking for. Looking back in HEADER.tpl I can see actually the menu block is surrounded by a div tag with class name "global_zones". If I look for that in global.css I find a big chunk of code:

In my next post I'll annotate this code.

---

To be honest, I'm not sure how directly helpful this all is to you SD – I can't honestly see how the "zone" menu type would interfere with the styling of another menu type. All they have in common is that they use lists - the set of templates and CSS classes are completely separate.

Fantastic explanation Chris! While imparting a truckload more very useful information, you also solved my issue; I realized that I had been going after the wrong template and hence my dilemma. (MENU_zone.tpl is what I needed) Because the .nl class is both zone menu and side block menus, my mudgery (I don't think that's a word; 'tiz now! ) of the side menus had a negative impact on the zone menu, primarily display: block;. I've now added a "z" to the end of .nl in that template and I now have my zone menu back lol.

Thank you kind sir, I'm diving back in. (I'm hoping to pull off a new theme in one day)

Annotation .

Yay a pink skin. Good job.

a nice starting point.
but how do i upload it. or how?

so far i've
style>>themes>>mangae themes>>> (bottom) import an add on.

I have tried unzipped, no go ('support no turned on for ini)
i have tryed upload zip (The file upload was not a supported addon type.)

Im at a lose… help plz

I have read here
ocPortal.com - ocPortal Tutorial: Themeing your site
but dont see the instructions for "uploading a template."
are they located elsewhere? could you link me to where..

thanks in advance.

It says next to the download in my post. This isn't packaged as a proper addon, just some files zipped up - so you just essentially extract and upload them. We've received your documentation request ticket, which we'll look at later on.

thank you.
sorry, so much to read in so little time.

just some files zipped up - so you just essentially extract and upload them.

kk, Ill start with these in for a base of learning of ocportal template's. then call up this template in ocportal and download (export)it as a themed template. so then to up load at a later date as a 'proper addon' ?

thanks again for the reply.