 Joomla button headings css stijlen
Buttonheadings zijn de pdf, print en email iconen (indien geactiveerd) zichtbaar rechts naast de contentheader bij ieder afzonderlijk artikel. Daarnaast is er nog de editor button. Deze is zichtbaar als de gebruiker is ingelogd via het frontend van de website. Met deze button kun je de editor activeren om artikelen aan te passen of nieuwe aritkelen in te voeren. De editor button wordt standaard rechts naast de buttonheadings geplaatst.
Opmerking
Wanneer de editor button (stijl= span.hasTip) samen met de andere iconen (stijl= td.buttonheadings = pdf, print of email buttons) wordt toegepast, neemt de styling van de hasTip afbeelding in een aantal gevallen de stijl aan van de genoemde iconen. Dit heeft te maken met een inconsistentie in de code van Joomla. Het is dus raadzaam om de afbeeldingen van de edit button (hasTip img) altijd hetzelfde te stijlen als de buttonheadings (pdf, print en email buttons). Op deze wijze zullen alle buttons er hetzelfde uitzien, tenzij u dat anders wilt natuurlijk. Voor de voorbeeld website is gekozen voor de volgende stijl.
span.hasTip img {
border: 1px #999 solid;
margin: 0 0 0 5px;
}
td.buttonheading img {
border: 1px #999 solid;
margin: 0 0 0 5px;
}
Na het toepassen van deze stijling zien de buttons op de voorpagina er als volgt uit.
De buttonheading afbeelding is nu hetzelfde gestijld als de hasTip afbeelding.
ToolTip
De tool tip, die zichtbaar wordt als je met de muis over de editor button heengaat, heeft standaard geen achtergrondkleur, waardoor deze soms moeilijk leesbaar is. Je kunt de tooltip stijlen met een achtergrondkleur of zelfs een afbeelding. Voor de voorbeeld website is gekozen voor de volgende stijl.
.tool-tip {
background-color: #fff;
border: 1px #999 solid;
padding: 5px;
font-family: Arial;
font-size: 11px;
}
.tool-title {
font-weight: bold;
}
.tool-text {
font-family: Arial;
font-size: 11px;
}
Het hover effect van de Tooltip ziet er als volgt uit.
|