Customising your ocPortal website’s design
Depending on how knowledgeable you are in CSS and HTML will determine how detailed a customisation you will want to make. This post aims to make it easier to find your way around the files you need to.
The Theme Wizard
I will start in the most sensible place to begin and that is with the theme wizard which is built in to ocPortal. After logging in to the adminzone, go to the Style screen and choose the Themes option. Once you arrive on the page you should see a table of options for the default theme and if you haven’t made any theme changes yet this should be the only theme installed.
Scroll down the page a little and click the theme wizard link. Your first task will be to give your theme a name and then choose the seed color for the theme. The seed color determines all of the colors on your basic theme from the color of menus to the color of links. This doesn’t mean everything will be that color but will be a variation of that base color which compliments the theme.
To do this you can either use the sliders which are available or input a HTML color code which will look something like #232246. The next options you have to choose between equations or HSV Shift. This is a choice between setting the colors for each element and setting a color variant from the default theme.
Next you choose whether you are making a dark based theme or not. By this I mean whether you intend to have the main body of your site using a dark color and light colored text on top of it.
The final option on this page is a choice whether to edit the main CSS files or create smaller versions which overwrite certain elements. By creating one main set of CSS, it will be easier to find the elements to change. However, a smaller set which overwrites the original elements will be easier to modify when the software is upgraded.
After you click proceed you will be taken to a preview of your site with the new colors and you can either choose to return back to the color seed selection screen to make changes to the seed color or accept the changes. If you choose to proceed you can then use the theme on all zones. In many cases you will choose this, but if you are working on a new design while your site is live you will want to un-tick this option.
Main theme options
When you return to the themes page you will find yourself looking at both the original default theme and a set of options for your new theme as shown in the screenshot below.
The first part of this table includes information about your new theme such as its name and the seed color you have used. There are other options for seeing previews of your site and previews of each template used in the site. These previews allow you to easily see how each element of your website make-up will look before making them live. You can also export your theme from here if you plan to allow others to use the theme
The next section icon leads you to the edit theme screen which allows you to make changes to the theme name, the code name of the theme and other options relating to your overall theme. This section also houses the ability to turn on dynamic mobile pages for individual sections of your website.
The third cell is the link to edit the CSS of your theme. Behind this option is a list of all the CSS files which are used within your theme which can be edited. The most common choice here will be global.css as this houses the most commonly used CSS elements. To help you find the correct element on your live theme there is an option in the admin dropdown box at the bottom of the standard theme called a contextual CSS editor. Once this is chosen a new window will open up and as you hover over elements on your live site each CSS element will be highlighted on the new screen.
This feature is completely unique to ocPortal and offers an extremely powerful theming tool. By using this tool you can quickly see what areas you need to edit to make your site appear just as you want it to. An extra benefit is you can also see which other areas of the site your changes might affect. Obviously I can’t tell you exactly what to change as you will want your site to be representative of you. I would like to see your ocPortal theme creations so please feel free to share them with me. There are a range of themes already created and uploaded to the ocPortal themes directory which other software users have shared.
The next cell relates to the editing the templates of your website theme. Like the CSS page, you will be presented with a list menu of all of the templates which are used with your site. Some of these will affect just one content block and others will affect large portions of your sites structure.
The final section relates to all of the images which make up your theme. These are separated in to sections such as logo images and general images e.g the favicon and apple icon. From here you can quickly edit and update the various theme images which make up your site.
From the above you can see ocPortal’s themes are incredibly complex, but Chris Graham and the ocProducts teams have spent time making and refining really powerful theme design features which you won’t find in any other Open Source CMS. If you just want a different color and a few minor changes to the default theme then ocPortal offers you the theme wizard to achieve this in a matter of seconds. If you want to make a massive conversion of the software you have all of the tools at your disposal to be able to efficiently find the individual elements you need to change.