×
This category is read only
How to style output with CSS
- Dirk
- Topic Author
- Offline
Less
More
- Posts: 1222
- Thank you received: 226
11 years 1 month ago - 11 years 1 month ago #2428
by Dirk
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
So if you want to change elements in the views take the container classes as selector
For exampleThis 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
Extract of joodb.css content
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)
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; }
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 1 month ago by Dirk.
The following user(s) said Thank You: MichaS., dirk.leibing
Please Log in to join the conversation.