sidebarCactus

CSS, Cascading Style Sheet, is one method of formatting text, articles and or pages. As the U3A web site develops so does the CSS file. Because it has grown randomly there is no order to naming or within the file. Cascading means the last positioned item over rides any preceding.

Updated April 2016.

Joomla relies on a template to format each page and each page can have a different template. U3A Tauranga consider a consistent design should be on every page with a consistent colour scheme to help link the web site together. Only one template is in use as at April 2016. TThhis template is 'Basetemplate-joomla3'

The following is some of the CSS which can be used as a class within <div>, <p> or <span> tags.


 

This is a normal type sample for comparison. ('roboto', a google font, as at April 2016)

.clearboth is used with a non breaking space in a <p class = "clearboth">&nbsp;</p> to stop following text or images wrapping out of sequence on wide displays.

.nextmeeting aligns text centre, background color #DDDDF7, border 2px blue.
This is a useful format to use as it keeps a consistant look.

.centreAll aligns text centre.

.daysofweek > li > a; This is like a menu table >li relates to the line, >a relates to the link

.underlineText does what it says, limited use as an underline indicates a clickable link.

.bluebgrd puts the colour as a background, color #EEEEF7.

.bgrdbeige puts a coloured background, color #CCFFCC.

.mauvebgrd puts a mauve background, color #F8E8FF with 5px padding and a 2px border, color #E9A4F4.

.set_red makes text within the class red.

.lgtextmauvebgrd Same as mauvebgrd but text is centred. Could have a line to make text a larger size.

.greenborder_bgrd green background, color #CCFFA2 with a 2px border, color #80FF00.

.linkcol1 and .linkcol2 sets each width to 50%, one float left, the other float right, used on the links page

The CSS file will constantly change as the web group meetings discuss and suggest ways to make the web site look better.

Note CSS needs American spelling, center and color so our spelling can be used as class names.

 

An example of how CSS affects an article.

The Next Meeting article is within a <div class = "nextmeeting"> tag.

css article5

 

The Next Meeting article when viiewed in the edit screen appears left justified.

css article (2)

 

The Next Meeting article when viiewed in the front end is now centre justified..

css article (3)

Each title of a short article is prefixed with a number to segment the articles (but not consecutive within the segment so additions can be fitted in).

010 to 099 Principles of Joomla
100 to 149 Design and Colour, Logos etc.
150 to 199 Joomla Front End
200 to 249 Front End when Logged In
250 to 299 ACL Access Control Levels
300 to 349 Global Settings
350 to 399 Categories, Back End
400 to 449 Articles: Back End
450 to 499 Menus and navigation
500 to 549 Images, Media Manager
550 to 599 Modules
600 to 649 Web Hosting
650 to 699 FTP, File Transfer
700 to 799 HTML, CSS, Cascading Style Sheets
800 to 899 Components; Akeeba Backup
900 to 949 Templates
950 to 999 Spare