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, 6:40 PM
Submitted by Jean	Marker 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, 3:50 PM
Submitted by Chris Graham	Marker 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, 3:50 PM
Submitted by Chris Graham	Marker 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	Marker How to make all the standard-boxes curved.


	Posted 16 August 2011, 10:59 AM
Submitted by Chris Graham	Marker 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	Marker Here's a little template change to make sound play on each click: Attachment » Download: JAVASCRIPT_CUSTOM_GLOBALS.tpl (614 Bytes, 77 downloads so far) (liable to drive your users crazy though! )

Keyboard shortcuts

Mozilla, you screwed upWhat we do with feedbackAn online booking engineHow to debug an infinite recursionIt's good to be challenged

Privacy · Feedback · Web Hosting Services provided by eLief

Visual customisation

Code

Code