Visual customisation

CEDI home » Visual customisation

Use this space to share information relating to visual customisation

In addition to the community-editable documentation above, we have the following official tutorials:

How to create a fixed-width layout
A very practical tutorial showing how to created a fixed-width layout, and how to change the site header.
Intro to XHTML, CSS and Javascript
This tutorial is an introduction to the main standard web technologies that ocPortal is built upon.
Introduction to web design
This tutorial is an introduction to the artistic side of web design.
Themeing your site
Our key themeing tutorial - how to re-theme your site, by changing CSS, templates, and theme images.
Tempcode programming
You'll be shocked at how much themeing control you can muster using Tempcode. Learn all about it…
Specific templates and CSS classes
This tutorial details some of the templates and CSS classes used by ocPortal. Learn how things work from these examples.
Helping improve site accessibility
We discuss how to ensure your website remains accessible to people with disabilities (ocPortal meets WCAG out-of-the-box).
Favicons, Web fonts, Media files
This tutorial will explain and detail some of the features of web technologies that are often forgotten.
Releasing a theme
A short tutorial explaining how to share a theme with other ocPortal webmasters, by exporting it as an addon.

There are no pages beneath this page

	Posted 06 March 2010, 5:40 PM
Submitted by Jean	Basic CSS Map of a typical ocPortal Front page Cascading Style Sheets (CSS) control most visual aspects of your website Anyone can easily find this information with the Firebug add-on to the Firefox browser, as its CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can even make "virtual" changes and see them take effect instantly. Firebug can be your eyes as it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you. However, I wanted to have a visual representation of the space allocated by the most important CSS Classes on a typical ocPortal front page and be able to refer to it at anytime without having to "fire up"Firebug ; some kind of a "CSS Map". So here is my compilation: There is a whole lot going on the top and bottom tiers to make it difficult to capture the elements in an uncluttered visual, so I've limited the discovery to the most important classes. Each class can have several elements of style with multiple properties and values. It is also important to note that they are layered (cascading) on the page; the last ones could blot out some of the real-estate of the top ones like so: .re_body .global_top .global_zones .menu_type__zone .logo .global_banner .global_side "panel_left" .global_side "panel_right" .global_middle .float_surrounder .global_copyright .global_minilinks I will address these Properties: background, border, display, position, height, width, font, list-style, margin, padding, bottom, left, right, top, color, text-align, text-decoration, text-indent in subsequent mapping exercises. I'm hoping that this first attempt might be useful to gain a better understanding of ocPortal's basic webpage. Jean

	Posted 11 March 2010, 2:50 PM
Submitted by Chris Graham	A basic theme modification tutorial by {{Islander-aua}}: ocPortal.com - View topic: Basic Theme Modifications - Part 1 ocPortal.com - View topic: Basic Theme Modifications - Part 2 ocPortal.com - View topic: Basic Theme Modifications - Part 3

	Posted 11 March 2010, 2:50 PM
Submitted by Chris Graham	A themeing tutorial by Chris Graham: ocPortal.com - View topic: Example theme: Spring Bloom

	Posted 15 April 2011, 9:30 PM
Submitted by Chris Graham	How to make all the standard-boxes curved.

	Posted 16 August 2011, 10:59 AM
Submitted by Chris Graham	To make every box curved… Add this to global.css: Code .standardbox_wrap_panel, .standardbox_wrap_classic, .lightborder, .medborder { border-radius: 10px; margin: 0.5em 0; } .standardbox_t_panel, .standardbox_classic, ul.ocf_profile_friends li, .ocf_profile_column { border-radius: 10px; } .standardbox_title_panel, .standardbox_title_classic, .standardbox_title_med, .standardbox_title_light { border-top-left-radius: 9px; border-top-right-radius: 9px; } .menu_type__dropdown ul.nlevel { border-radius: 10px; } .menu_type__dropdown ul.nlevel li:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; } .menu_type__dropdown ul.nlevel li:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .boxes_together + .boxes_together { border-top: 1px solid #7C4D09; } .dottedborder { border-radius: 10px; } .index_page_fancier_page_entries { margin-left: 0; } + override STANDARDBOX_curved.tpl to simply be… Code `{+START,INCLUDE,STANDARDBOX_classic}{+END}`

	Posted 16 August 2011, 11:02 AM
Submitted by Chris Graham	Here's a little template change to make sound play on each click: Attachment » Download: JAVASCRIPT_CUSTOM_GLOBALS.tpl (614 Bytes, 95 downloads so far) (liable to drive your users crazy though! )

	Posted 29 February 2012, 6:41 AM
Submitted by Chris Graham	You may notice only panel boxes have the expand/contract feature (and only then if you have it enabled in the configuration). This is by design. The expand/contract is quite a stylistic imposition so we only have it on for panels (as often people put a lot on panels but space there is limited). This is all controlled in templates, so ultimately you can do edits to meet your needs. The defaults are just there for the average user. Edit the `BLOCK_SIDE_RSS`template and change Code `{+START,BOX,{TITLE},,{$?,{$GET,in_panel},panel,classic},tray_open}` to… Code `{+START,BOX,{TITLE},,{$?,{$GET,in_panel},panel,classic},tray_open,,,1}` The need for this change is that by default only panel boxes show the expand/contract. The extra 1 I put in there changes that default and makes it use the tray_open as the initial state. Alternatively If you want most non-panel boxes to support expand/contract, edit the `STANDARDBOX_classic`template and change… Code {+START,IF,{EXPAND}}{+START,IF,{$JS_ON}}{+START,IF_IN_ARRAY,tray_open,OPTIONS}<a class="standardbox_tray hide_button" href="#" onclick="SetCookie('tray_{TITLE\|}',(get_elements_by_class_name(this.parentNode.parentNode,'hide_tag')[0].style.display=='none')?'open':'closed'); hideTag(this.parentNode.parentNode); return false;"><img alt="{!CONTRACT}: {$STRIP_TAGS,{TITLE}}" title="{!CONTRACT}" src="{$IMG,contract}" /></a>{+END}{+START,IF_IN_ARRAY,tray_closed,OPTIONS}<a class="standardbox_tray hide_button" href="#" onclick="SetCookie('tray_{TITLE\|}',(get_elements_by_class_name(this.parentNode.parentNode,'hide_tag')[0].style.display=='none')?'open':'closed'); hideTag(this.parentNode.parentNode); return false;"><img alt="{!EXPAND}: {$STRIP_TAGS,{TITLE}}" title="{!EXPAND}" src="{$IMG,expand}" /></a>{+END}{+END}{+END} to Code {+START,IF,{$JS_ON}}{+START,IF_IN_ARRAY,tray_open,OPTIONS}<a class="standardbox_tray hide_button" href="#" onclick="SetCookie('tray_{TITLE\|}',(get_elements_by_class_name(this.parentNode.parentNode,'hide_tag')[0].style.display=='none')?'open':'closed'); hideTag(this.parentNode.parentNode); return false;"><img alt="{!CONTRACT}: {$STRIP_TAGS,{TITLE}}" title="{!CONTRACT}" src="{$IMG,contract}" /></a>{+END}{+START,IF_IN_ARRAY,tray_closed,OPTIONS}<a class="standardbox_tray hide_button" href="#" onclick="SetCookie('tray_{TITLE\|}',(get_elements_by_class_name(this.parentNode.parentNode,'hide_tag')[0].style.display=='none')?'open':'closed'); hideTag(this.parentNode.parentNode); return false;"><img alt="{!EXPAND}: {$STRIP_TAGS,{TITLE}}" title="{!EXPAND}" src="{$IMG,expand}" /></a>{+END}{+END} (which removes the check for expansion, effectively making the classic boxes work the same as the panel boxes)

Visual customisation

Code

Code

Code

Code

Alternatively

Code

Code