Writing Your Own CSS

Overview

To be able to design templates for the SubHub platform you will need to have a excellent working knowledge of CSS (Cascading Style Sheets) and HTML code. Unlike other publishing platforms you might of used before (such as Drupal or Wordpress), you do not have access to edit the HTML source code of the SubHub platform, so you will need to be aware of the tags that are available to you when writing your CSS code.

NOTE: Even though it is not essential we would always recommend developing your template using Mozilla Firefox and the Web Developer Toolbar which is avaliable from the Add-Ons section of the Mozilla Firefox website.

SubHub CSS Files

If you were to view the CSS (Ctrl + Shift + C) of any page on your SubHub website you will notice that the website is built from 4 different CSS files.

The Custom StyleSheet

The custom style-sheet (custom.css) is the file you will be working with to create your template. The way the custom.css file works is that it will over write the other system stylesheets.

NOTE: Please do not copy the contents of the other three system stylesheets into your custom.css file as this will not work and will cause issues with the website.

So if you were to add the following line in to the custom.css file;

#visual-portal-wrapper { width: 1000px; }

It would overwrite the default width setting in the SubHub.css stylesheet as shown below.

#visual-portal-wrapper { width: 732px; }

Using the Reference Tags and Examples below you should build up your custom.css file with the elements you wish to change.

Available Reference Tags

If you are new to creating templates for the SubHub platform then the best way to learn how to build them is through trial and error. I would reccommend looking at the source code of the homepage and seeing what id's and class's make up the HTML structure of the SubHub frame work and are avaliable for you to use in your custom.css file.

We have provided some reference tags below for you to get you started but there are many more within the source code for you to use to style elements as you wish. Please spend some time getting familiar with the source code, because the better you know it the easier it is to create your template.

If you have installed the Web Developer Toolbar and are using Firefox you can press (Ctrl + Shift + Y). This will allow you to click on any element of your SubHub website and it will give you the id or class of that element, plus it will also show what CSS is currently assigned to that element. I would highly reccommend using this feature as it will allow you to get familiar with the elements of the SubHub platform alot quicker.

We will begin by going through the main parts of the SubHub frame work and the elements you will use the most.

The elements listed below appear on every page unless otherwise stated.

Outer Frame Work Elements

There are 3 elements wrap around the entire page on the SubHub platform, these can be used to control the width of the website and contain differnet background images. If your website had a repeating header across the top of the page, you should apply this to the outer_wrap element and NOT the body element.

The 3 elements are as follows and appear in this order.

#outer_wrap
#wrap
#visual-portal-wrapper

Header Elements

The header of every SubHub website is built up of the following elements.

The portal-logo is the outer header wrap that usually contains the website header image on most SubHub websites.

h1#portal-logo

The headerhomelink is a default link that returns users back to the homepage of the website. The width and height of this element should match your portal-logo element.

h1#portal-logo a#headerhomelink

The next 2 elements are what contain the website header and tagline text.

#template_header_text 
#template_tagline_text 

Top and Bottom Navigation

The horizontal navigation bars at the top and bottom of the website are as follows. Both of these elements always show regardless of whether the website has the top or bottom nav switched off within the CMS.

#topnav
#bottomnav

Sidebar Elements

The SubHub platform is built up from a 3 column layout with the main content in the center and a left and right hand sidebar either side of the content. These elements are as follows with the left column being column-one and the right column being column-two.

#portal-column-one
#portal-column-two

Sidebar Portlet Elements

Within each of the sidebars are elements called portlets which hold differnet pieces of content such as navigation, profiles, event calendars and bespoke HTML content. Each of these portlets have a number of class's applied to them depending on what type of portlet it is.

Every portlet has the following elements

.portlet
.portletBody

Each portlet then has a class assigned to the porlet element depending on its type. This will allow you to style each portlet differently depending on its type.

.menu_block
.search_block
.newsletter_block
.html_block
.eventsportlet
.profile_block

Main Content Elements

All of the content within the center column of the platform is contained within the documentContent element. This element should be used to style the format of how the text and images display on the content pages.

.documentContent

Footer Elements

At the bottom of every page on the SubHub platform is the footer element. The footer element contains links to static pages that are built into the SubHub platform.

#portal-footer

Other Elements

Even though we have gone through the main elements that you will always use when creating templates for the SubHub platform there a loads more within the platform to help you create the design you require.

To get a true understanding of all the elements that make up the SubHub platform we would recommend spending some time having a look at the source code of the platform and getting to know what elements are avaliable for you to use.

Example Style-sheet

Below is an complete example stylesheet that was used to create a template on the SubHub platform that you can use for reference purposes.

Please be aware that this is an example stylesheet, all of the elements referenced in this stylesheet may not have to be in your custom.css file and there are many others that aren't referenced that you may need to use, so please do not just copy this code and paste it in your custom.css file.

/* Custom CSS Start */

/* BODY : Body */
body { font-family: Verdana, Arial !important; background: #CCC; }

body a { color: #6E7EBC; }

body a:visited { color: #6E7EBC; }


/* div : Visual Portal Wrapper */
#visual-portal-wrapper { position: relative; width: 940px; border: 5px solid #FFF; margin: 10px auto; background: #FFF; }


/* h2 : Portal Logo */
h1#portal-logo { position: relative; height: 295px; border: none; background: url(header_bg.jpg) no-repeat 0px 0px; }


/* div : SH Logo / Custom Logo */
#sh_logo { background-position: 0px 0px !important; height: 75px; } 


/* a : Header Home Link */
h1#portal-logo a#headerhomelink { display: block; position: relative; width: 100%; height: 170px; }


/* span : Template Header Text */
#template_header_text { font-family: 'Lucida Sans Unicode','Lucida Sans', Verdana; position: absolute; top: 8px; left: 170px; font-size: 140%; color: #6E7EBC; }


/* span : Temmplate Tagline Text */
#template_tagline_text { font-family: 'Lucida Sans Unicode','Lucida Sans', Verdana; position: absolute; top: 38px; left: 170px; font-size: 110%; color: #6E7EBC; }


/* ul : Top Nav / Portal Nav 1 */
#portal-nav-1 { background: #6E7EBC; border: none; padding: 0; text-align: center; margin: 0; }

#portal-nav-1 li { line-height: 3em; }

#portal-nav-1 li a { border-right: 1px solid #FFF; padding: 5px 10px; font-weight: normal; color: #FFF; }

#portal-nav-1 li .last { border-bottom: none; }

#portal-nav-1 li a:hover { text-decoration: underline; }


/* ul : Top Nav / Portal Nav 2 */
#portal-nav-2 { background: #6E7EBC; border: none; padding: 0; margin: 0; }

#portal-nav-2 li { line-height: 3em; }

#portal-nav-2 a { font-weight: normal; color: #FFF; padding: 5px 10px; }

#portal-nav-2 a:hover { text-decoration: underline; }


/* div : Columns Wrapper */
#columnswrapper { margin: 5px 0 35px 0; }


/* table : Portal Columns */
table#portal-columns { border: none; }


/* td : Middle Columns */
table#portal-columns #midcol { border: none; }


/* div : Portal Breadcrumbs */
#portal-breadcrumbs { text-transform: capitalize; }

#portal-breadcrumbs a { color: #6E7EBC; }


/* td : Portal Columns One */
table#portal-columns #portal-column-one { padding: 0 10px 0 0; border: none; }


/* td : Portal Columns Two */
table#portal-columns #portal-column-two { border: none; border: none; padding: 0 0 10px 0; }


/* h2 : All Content Headers */
.documentContent h1, .documentContent h2 { font-family: 'Lucida Sans Unicode','Lucida Sans', Verdana; border-bottom: 1px dashed #6E7EBC; padding: 3px 0; color: #000; margin: 0 0 10px 0; }

.documentContent #pubdate { color: #000; }

.documentContent #pubdate span { color: #6E7EBC; }

.documentContent #articlesummary { margin: 20px 0; border: 1px dashed #6E7EBC; }

.documentContent #articlesummary .related-articles-container { border: none; }

.documentContent .calendar ul, .documentContent .calendar ol { list-style: none; }


/* div : Region Content */
#region-content { border: none; }


/* div : Related Articles Container */
.related-articles-container { border: 1px solid #6E7EBC; }


/* div : Portlets */
.portlet { margin: 0 0 15px 0; }

.portlet img { margin: 10px 0; padding: 1px; border: 1px solid #CCC; }

div.portlet h5, div.portlet a h5 { font-family: 'Lucida Sans Unicode','Lucida Sans', Verdana; font-size: 120%; font-weight: normal; background: #6E7EBC; border: none; padding: 8px 0 8px 10px; margin: 0; color: #FFF; width: auto; }

.portlet .portletBody, .portlet .portletBodyHTML, .portlet .portletBodyProfiles { border: 1px solid #6E7EBC; width: auto; }

.portlet .portletBody .nav-category { padding: 5px 10px; }

.portlet .portletBody .nav-category a { text-decoration: none; color: #6E7EBC; font-size: 110%; font-weight: normal !important; }

.portlet .portletBody .nav-category a:hover { text-decoration: underline; }

.portlet .portletBody #forgotton { margin: 10px 0; }

.portlet .portletBody #forgotton a { color: #6E7EBC; }


/* div : Events Portlets */

.eventsportlet .portletBody { padding: 10px 0; }

.eventsportlet .portletBody .calendar-month a { color: #6E7EBC; }

.eventsportlet .portletBody td { border: none; padding: 1px; margin: 0; border-collapse: collapse; color: #000; }

.eventsportlet .portletBody td a { background: #6E7EBC; color: #FFF; display: block; }


/* div : Feature Panel */
.featurepanel dl { border-bottom: 1px dashed #6E7EBC; padding: 10px; background: none; margin: 0 0 10px 0; }

.featurepanel .admincomment { background: #6E7EBC; }

.featurepanel dl dt { font-weight: normal; }

.featurepanel dl dt br { display: none; } 

.featurepanel dl dt a { color: #6E7EBC; font-weight: bold; }

.featurepanel dl dt .cat-view-article-date { margin: 0; color: #666; }

.featurepanel dl dd { margin: 10px 30px; }


/* div : Portal Footer */
#portal-footer { border: none; border-top: 1px solid #6E7EBC; margin: 5px 0 0 0; padding: 10px 0; color: #000; line-height: 1.25em; }

#portal-footer a { color: #6E7EBC; text-decoration: none; }

#portal-footer a:hover { text-decoration: underline; }
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk