Creating a theme
Tired of looking at the same colors in your BioCoRE project? Confused
about which project you're currently on because they all look alike
at first glance? Then create a new theme! Themes in BioCoRE help
distinguish the looks of projects, allowing you to easily recognize
which project is currently being displayed, and gives a unique look and
feel to each project. Adding Themes requires access to files on the
BioCoRE server.
Step 1: Necessary Files
In the web/themes directory, create a new directory with the name
of your theme. Let's call ours "newTheme". You will then need to make
the necessary files for the theme. The easiest way to start is to copy
all the files from another directory in the web/themes folder
(such as midnight) to the new directory. The files are:
- colors.css: This is the Cascading Style Sheet that defines all the colors, fonts and styles used in the web pages.
- divLeftTextEdge.gif: This is the icon for the left edge of tab headers in the Summary Page.
- divNonTextBG.gif: This is the icon that makes the background for the line separators of tab headers in the Summary Page.
- divRightTextEdge.gif: This is the icon for the right edge of tab headers in the Summary Page.
- divTextBG.gif: This is the icon that makes the background for the tab headers that have text in the Summary Page.
- max.gif: The "Maximize" icon in Summary Page tab headers.
- shade.gif: The "Minimize" icon in the Summary Page tab headers.
- thumbnail.gif: A thumbnail representation of the Theme, so users can see a preview of what it may look like when selecting themes.
- X.gif The "X" icon in the Summary Page tab headers, for deleting an element from the Summary Page.
Icons for the 'darkGreen' theme
|
|
|
|
|
|
|
|
divLeftTextEdge.gif
|
divNonTextBG.gif
|
divRightTextEdge.gif
|
divTextBG.gif
|
max.gif
|
shade.gif
|
X.gif
|
How the images are used in the Summary Page item header
 |
You can use these as a starting point for creating your own icons, and
edit them in a program like Photoshop or Gimp, or create your own from
scratch, or even reuse the same icons if you like.
-> Step 2: Colors