Print, E-mail & Editor Icons
Be sure to read the "Read this first" section first and apply all the CSS that is discussed. We are now going to continue applying the Joomla content and component styles on our example website.
Print screen without applying any additional CSS
Structure with classes and id's
Print en E-mail button ---------------------- ul.actions li.print-icon a img li.email-icon a img Editor button ------------- ul.actions li.edit-icon span.hasTip a img
CSS.
/* -----------------------------
PRINT, EMAIL en EDITOR Button
------------------------------ */
ul.actions {
list-style: none;
padding: 0;
float: right;
text-align: right;
}
/* Alle buttons hebben dezelfde stijl */
ul.actions li {
display: inline;
}
ul.actions li a img {
border: 1px #999 solid;
}
ul.actions li a:hover img {
border: 1px #333 solid;
}
Print screen after applying CSS
The icons are not yet in the right place. We want the icons and the title of the page on one line. We do this by styling the title of the article (Featured / Category blog).