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
There you should create a folder for your own theme. For example
You can use the folder
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
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.html.erb or header.html.erb), 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:
In the files footer.html.erb and header.html.erb you can define the elements which are permanent on top or rather at the bottom. For example you can define in the header.html.erb that a banner will be displayed on top of your site.
The file navigation.html.erb
In the navigation.html.erb 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"
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
Start the console with the command:
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
>> e = Environment.default
>> e.theme = "mytheme"
Close the console with:
Don't forget to style!
Checklist of items to be checked for each theme:
- All blocks
- Notification message ("flash")
- Article pages
- Image gallery
- Image view page —
- Directory listing —
- Search results
- Profile page (information, wall, activity) —
- Profile conf (information, wall, activity) —