ProjectPier has the ability to easily switch themes in the settings and lets users customize the CSS in their themes, or create their own new themes. Several themes are included in ProjectPier by default, so you can get a sense of how much is possible by checking them out.
Changing the Active Theme
To change the theme of your ProjectPier installation you need to have administration privileges. Contact the ProjectPier administrator for your site if you are not an admin.
- Go to the Administration menu at the top of the page and choose the "Configuration" tab.
- Go into the "General Configuration" settings and choose a theme from the "theme" pulldown menu
- Save the settings and see how the theme looks.
- Repeat as necessary, ProjectPier comes with several great themes by default.
How to Create a Theme
For creating a ProjectPier theme you need
- a ProjectPier installation (local installation recommended),
- a modern web browser (Firefox recommended)
- the "Firebug" extension for Firefox
- a graphic programm (like the GIMP or GimpShop if you prefer a more Photoshop-like menu behaviour) and/or
- a vector editing program (like Inkscape)
- a text editor with syntax highlighting (gedit or kate on Linux, PSPad or Notepad 2 on Windows)
- a FTP program like FireFTP for Firefox.
You also need some CSS and graphic skills to produce the needed pictures and to change the formatting values in the CSS files. You don't need any programming skills for theming ProjectPier.
The easiest way to get a new theme is to copy on of the theme folders in your PP installation or download a theme from the project page on projectpier.org. Rename that folder and place it in the [installation folder]/public/assets/themes folder.
Start your ProjectPier installation and change the theme under Administration > Configuration > General to your new theme. Then start Firebug by clicking on the little check mark in the lower right corner of the Firefox window. Click "inspect" to start Firebug and hover over an element on your page.
The element will get a blue frame and in the lower right corner you can see the CSS formatting in the various CSS files. Simply open that file (in your newly renamed theme folder) and change the value. After saving the page and reloading the page you should see your changes. Repeat this step until you are confident with your result.
If you're done with your theme and like to share it with the rest of the ProjectPier community, please send it to us and we will post it on the project page.