× This category is read only

How to style output with CSS

More
11 years 3 months ago - 11 years 3 months ago #2428 by Dirk
How to style output with CSS was created by Dirk

preliminary note
This is jut a brief introduction into the possibilities to style the JooDB output using CSS. You need basic knowledge "about Cascading Style" Sheets to understand.


In /components/com_joodb/assets/ you will find a css style sheet called joodb.css. This file is included by JooDB and contents basic style information for JooDB.

Normally it is save to change this file directly, because it will not be overwritten by updates. But a good choice can be also to clear the styles in joodb.css and use the frontend-template css to define the output.

JooDB uses container-classes for the different views
  • .database-list for catalog view
  • .database-article for single entry view
  • .database-form for form and edit view

So if you want to change elements in the views take the container classes as selector
For example
.database-article h3 { font-size: 18px; margin: 0 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px solid #ccc; }
This sets the header H3 tags in single entry view to 18px with a thin line at the bottom.

Every form element get the ID jform_{FIELDNAME}. With this you can style each input separately.
For example
#jform_title { font-size: 16px; background: blue; color: white: }

Extract of joodb.css content
#joodbForm input.inputbox, #joodbForm  select.inputbox, #joodbForm  textarea.inputbox, #searchForm .inputbox  {
    border: 1px solid #A9A9A9;
    background-color: #fff;
    box-shadow: inset 4px 4px 10px 0 #E5E5E5;
    border-radius: 3px;
    width: 350px;
}
....
/* Definition Lists */
.database-form dl, .database-article dl { display: block; margin: 0 0 10px 0; overflow: hidden; border: 1px solid #e3e3e3; line-height: 1.4em; padding: 10px 0;  background: #f4f4f4;border-radius: 4px; }
.database-form dt, .database-article dt { clear:left; float:left; width: 18%; padding: 3px 5px; color: #666; font-style: italic; margin-bottom: 5px;  min-height: 1.4em; }
.database-form dd, .database-article dd {  float:left; padding: 3px 5px; width: 78%; margin: 0 5px 0 0; min-height: 1.4em; }
.database-form dd p { padding: 0; margin: 0 0 0.4em 0;  line-height: 1.4em;}

CSS is relatively easy to understand but it can be complex if you want to use the complete power.

Some good tutorials
www.w3schools.com/css/ (medium difficulty)
developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started (advanced difficulty)
learn.shayhowe.com/html-css/ (for beginners)
Last edit: 11 years 3 months ago by Dirk.
The following user(s) said Thank You: MichaS., dirk.leibing

Please Log in to join the conversation.