17 December 2009, 14:44

Hi guys,

I just started picking up the work on readjusting our themes for Mahara 1.2. Our language select / user search box was always located in the site logo container. Unfortunately I don't quite get how CSS, HTML and Template Engine work together. Obviously styles.css defines the look of the different objects (size, padding, etc.) Therefore I can e.g. move the search box to the left hand side. But how do I place it in another container?

 Same question for the navigation: The navbar consists of a number of buttons. I am able to change their look by altering styles.css. But I cannot alter the width of the whole navigation bar. I want to achieve a look very similiar to the one on the official mahara site (whole navbar in grey color).

 thx a lot

Alex

20 December 2009, 8:56

20 December 2009, 16:44

Some things, like placing the search box in a different container, you won't be able to do with css -- you'll have to edit the templates and output the html for the search box somewhere else.  The header template has changed so that now the language selector and user search are output using the topright.tpl template, and this template is included inside header.tpl.  Hopefully you can go into header.tpl, and just move the include command for topright.tpl to the place you want it.

I would have thought you could make the navbar full width just by editing your css files and leaving the templates alone. I'm not familiar with how mahara.org does it, but you could take a look at the html & css for this page.  Unfortunately this site is still on Mahara 1.1, and you won't be able to just copy the css here (the element ids and classes will be different to yours).  But it should give you an idea.

21 December 2009, 7:11

Hi Richard,

thx for pointing me in the right direction. Unfortunately I can't figure out where to include the topright.tpl to move the search box over the toplogo.

The html output looks like this. Somehow there is a <div> tag added which adds a break placing the search box in the next line. Seems to come from the pieforms...

 This is the html output:

<h1 id="site-logo">

<a href="http://www.uni.de/de/index.htm">

I also tried including the topright.tpl within the <h1> </h1> tags.  I guess I need to spend some time learning my css vocabulary :(

thx a lot

Alex

21 December 2009, 8:14

This is a screenshot of our home site. Stupid language selection box should be on the blue logo!

19 February 2010, 23:48

24 June 2011, 8:59

Can I ask whether a theme created for Mahara 1.2.6 would work on 1.4.0?  I created a theme for 1.2.6.  We have installed 1.4.0 but I didn;t copy the theme across yet, just in case....

Will it work?

Cheers

Dave

24 June 2011, 9:42

I think the best answer is "it depends".

We had issues bringing our 1.2.6 themes over to 1.3.x because the developer who created them had built them using the Smarty engine, rather than Dwoo.  It *mostly* worked, except for the frustrating pieces that didn't work. 

If your themes were built using Dwoo rather than Smarty, it should be fine.  If not, it's likely you'll have to do some editing to bring them in line.  We scrapped and rebuilt a new theme, since we'd had some usability issues with the existing theme anyways. 

24 June 2011, 9:44

Dave,

depending on how sophisticated you theme is, it's likely that you will encounter some differences when you apply your old theme to the new site, especially since you're going up a couple of versions.

There will be new CSS selectors in the latest version that didn't exist in 1.2.6. In this situation, I always like to start from the Default theme and copy in styles/images from my old theme to make sure i'm not missing out on anything. The core developers might give you some advice on the specifics of what to look out for.

27 June 2011, 6:28

Thanks for your responses guys.

I've never heard of Dwoo or Smarty - I used DreamWeaver and FireFox to work out the CSS.

What would make a lot of sense is if a map/diagram etc of the CSS could be produced to help theme building.