Download as
Browse Code »

Commit ce2d243c40e09735622e23b9b9c8ffae99cb1c88

Authored by Aurélio A. Heckert
1 parent 7eedf8a1
Exists in master and in 26 other branches 1.2+SPB2, 2_split_by_role, add_fields_in_api, api_fixies, api_pagination, api_private_token, api_tasks, article_hit_count, blog_page_bug, checkbox_to_user_can_edit_page, communities_ratings, communities_ratings_moderation, community_ratings_rebase, fix_cloned_article_parent, fix_gallery_image_url, fix_javascript_categories, fix_suggest_article, fix_user_email_validation, highlight_block_fix, notification_plugin, notification_plugin_rebase, script_to_update, split_by_role, temp_ratings, tests, tests_fixies

Add HACKING.themes.md

Showing 1 changed file with 48 additions and 0 deletions   Show diff stats
HACKING.themes.md 0 → 100644
  Diff comments   View file @ce2d243
... ... @@ -0,0 +1,48 @@
  1 +Noosfero Instructions for Theme Developers
  2 +==========================================
  3 +
  4 +To build Noosfero themes you must to know HTML and CSS. You may also get some advantages with Ruby and Noosfero hacking knowledge because all customizable pieces of the theme's HTML structure are [erb](http://en.wikipedia.org/wiki/ERuby) files.
  5 +
  6 +Organization Basics
  7 +-------------------
  8 +
  9 +A theme is a directory and must inside `noosfero/public/designs/themes`, and you will find tis themes in a fresh installation:
  10 +`noosfero`, `aluminium`, `base`, `butter`, `chameleon`, `chocolate`, `orange`, `plum`, `scarletred` and `skyblue`. The `default` is only a link to `noosfero` and you can change this link to any other.
  11 +
  12 +`noosfero` is the default theme with a big header. All other are colored themes with a thin header. That colored ones can be used as additional themes for any environment, as they will search for `/images/thin-logo.png` inside the current environment.theme, to use as top left logo.
  13 +
  14 +Inside a theme we can found:
  15 +* `theme.yml` — Theme description with some nice configuration options.
  16 +* `preview.png` — A 100x100 screenshot of this theme to the theme selection UI.
  17 +* `style.css` — The main file. The magic happens here.
  18 +* `errors.css` — Change the error page look. (only if this theme is linked by `defaut`)
  19 +* `favicon.ico` — The identifier icon for your web site.
  20 +* `images` — Another name can be found by your CSS, but will not allow to reuse the logo.
  21 + * `thin-logo.png` — The logo to be reused by the colored themes.
  22 + * *many images...*
  23 +* `site_title.html.erb` — A nice place to put your logo, any code here will be placed inside `h1#site-title`.
  24 +* `header.html.erb` — That goes inside `div#theme-header`.
  25 +* `navigation.html.erb` — That goes inside `div#navigation ul`, so use `<li>`s.
  26 +* `footer.html.erb` — That goes inside `div#theme-footer`.
  27 +
  28 +You can add more files like javascript and modularized CSS, but you must to refer that by the described files above.
  29 +
  30 +To refer one of this files trough the web the path is `<domain>/designs/themes/<thistheme>/<somefile>`.
  31 +
  32 +theme.yml
  33 +---------
  34 +
  35 +A simple definition file. See this example:
  36 +```yml
  37 +name: "My Cool Theme"
  38 +layout: "application-ng"
  39 +jquery_theme: "smoothness"
  40 +icon_theme: [default, pidgin]
  41 +gravatar: "retro"
  42 +```
  43 +
  44 +About non obvious:
  45 +* `layout` is about the theme structure to use. The `application-ng` is enough for 99.97358% use cases. If you want to use another structure, you must add a new `*.html.erb` file at `app/views/layouts/`.
  46 +* `icon_theme` point to something inside `public/designs/icons/`.
  47 +* `gravatar` set the default gravatar *(avatar picture)* for people without picture.
  48 +
... ...