Creating Noosfero Themes

Creating themes is a easy way to match the design and some basic elements of noosfero with own requirements. Some elementary Elements like the CSS-Style, Images but also the links on the top menu and the footer can be modified.

Themes are disposed in an own folder in /public/designs/themes

There you should create a folder for your own theme. For example mytheme You can use the folder base as an example.

Edit your theme

In your theme folder you will find/place some files or folders. By means of this files and folders you can adapt the design and some basic elements on your noosfero site.

The folder icons

In this folder you should put all the icons that your theme uses and that aren't in the pack of themes that you are using. You should organize your themes by it's size (dimensional size).

The folder imgs

The folder imgs included the images which you can use in your css (relevant files: errors.css and style.css). You can upload some own images. It is important that you set the correct rights for the access to this files.

You can refer with url(imgs/your_image) to your images in the css code.

The file errors.css

In this file you can define the css style for the pop-ups with system messages.

The file style.css

This file provides the main css style of your noosfero site. If you insert some new elements (for example with the footer.rhtml or header.rhtml), you should insert there the css-style for this elements. Apart from that you can adapt the style of noosfero. If you have a problem to find the elements in the css code it is recommend to use some tools. For example:

• Firebug
• Web developer

The files footer.rhtml and header.rhtml

In the files footer.rhtml and header.rhtml you can define the elements which are permanent on top or rather at the bottom. For example you can define in the header.rhtml that a banner will be displayed on top of your site.

The file navigation.rhtml

In the navigation.rhtml you can change the entries and links of the top menu.

The file theme.yml

In this file you can define some configurations about your theme. Here is an example of the configuration of the default theme of Noosfero:

 
theme: "Noosfero default theme"
layout: "application-ng"
jquery_theme: "smoothness_mod"
icon_theme: [default, pidgin]

In this case, we define the theme name, the layout it's using, the jquery default theme and the icons theme.

Switch to your theme

You can set witch theme noosfero will use with the Console.

Start the terminal and change to the directory where Noosfero is installed. For example, if noosfero is installed in /home/you/noosfero:

cd /home/you/noosfero

Start the console with the command:

./script/console

Define some variable with the environment in which you want to set your new theme and set the theme for it (in this example, the folder with your theme is named with mytheme ):

>> e = Environment.default
>> e.theme = "mytheme"
>> e.save
=> true

Close the console with:

quit

Don't forget to style!

Checklist of items to be checked for each theme:

• All blocks
• Notification message ("flash")
• Blog
• Article pages
• Image gallery
• Image view page — http://noosfero.xyz/some-profile/gallery-dir/image?view=true
• Directory listing — http://noosfero.xyz/some-profile/some-dir
• Search results
• Profile page (information, wall, activity) — http://noosfero.xyz/profile/some-profile
• Profile conf (information, wall, activity) — http://noosfero.xyz/myprofile/some-profile