sidebarCactus

How does the U3A Tauranga website use CSS? Tap or click here.

Thank you Joomla CSS for a very informative website http://www.joomla-css.nl/en/. Part of the text about Bootstrap is reproduced here.

Joomla 3 has integrated the Twitter Bootstrap framework. With the Twitter Bootstrap framework you can build websites with Joomla for desktop computers, but also for mobile devices like mobile smart phones and tablets. You can find the website of Twitter Bootstrap on http://twitter.github.com/bootstrap/.

The Bootstrap files (version 2.3.2) in Joomla 3 are located in the folder media/jui. It is a collection of CSS files, fonts, images and javascript files. The Bootstrap files are not exactly the same files as from the Twitter Bootstrap framework. Some are customized and some files are added to work with Joomla 3. The Bootstrap framework is activated by the template of Joomla.

The Bootstrap framework responds to various screen resolutions of devices. Mobile devices have screen sizes from about 320 pixels (mobile phone) to 1280 pixels (tablets). The Bootstrap CSS uses media queries for various screen sizes to render the website accordingly. This means a much better layout and usability of your website on mobile devices. The Bootstrap framework uses the following media queries.

Up to and including 480 pixels;

Up to and including 767 pixels;

Up to and including 979 pixels;

From 768 pixels up to and including 979 pixels;

From 980 pixels;

From 1200 pixels.

How does the U3A Tauranga website use CSS?

 The Joomla / Twitter Bootstrap files remain untouched. Cascading Style Sheets means the last found entry overrides any prior formating.

This means that a copy and paste that includes any formating will over-ride the CSS in any file, a common cause of the web site losing layout, as well as not retaining the planned consistant look.


 

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