Joomla 1.6 - Button Icon für Link Text anzeigen CSS

knuffiwuffi · 02.08.2010

Hallo,

ich teste grad Joomla 1.6 beta 6 und überlege mir nun wie ich die Standard Links wie Prev und Next etc. durch Buttons ersetzen kann. Mein Versuch alles über CSS zu lösen stöß an seine Grenzen.

Bei den Links für E-Mail oder Print kann ich ja die Buttons aus dem Standard Template einfach ersetzen. Für Font Size im beez Template habe ich den Klassen ein Hintergrund Bild per CSS verpasst und font size auf 0 gesetzt. Zusätzlich hat die Klasse ein min-height und min-width bekommen.

Probleme bestehen nun bei z.B. den "Prev" und "Next" Links. Hier ist der Text verlinkt und ein Hintergrundbild bei font size 0 hat somit keine Funktion. Den Link der Hintergrundfarbe anzupassen ist auch nicht die Lösung, da der Link ja immer noch über dem Bild liegt. Einzige Lösung in meinen Augen währe tatsächlich den Text durch ein img zu ersetzen und dieses dann zu verlinken. Das geht dann aber nur im Core Code und läßt sich nicht über CSS lösen. CSS währe fein, da ich somit alle relevanten Änderungen in einer styles.css hätte, die ich zusätzlich laden lasse und eben sicher in meinem eigenen Template liegen würde.

Aktuell möchte ich nicht zu viel am Core Code ändern, da Joomla ja noch in der beta ist und ich die arbeiten nicht immer doppelt erledigen möchte, bei jedem neuen release. Ein weiterer Grund den Link Text nicht völlig zu eliminieren währe sicher auch die Lesbarkeit bei Sprachprogrammen (auch wenn man den Bildern eine Beschreibung schenken kann).

Vielleicht hat jemand von euch einen Tip, wie man diese Änderungen nach Möglichkeit über CSS angehen könnte.

sokie · 02.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

die Möglichkeit inhalte auszuwechseln (hier text gegen Bild) bietet css nicht. Das wäre dann ein fall für javascript.

knuffiwuffi · 02.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

Schade...dann muss ich wohl tatsächlich an den Core Code und den Text durch ein Bild ersetzen...vielen Dank!

knuffiwuffi · 02.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

Wieder zu einfach gedacht...die Texte sind ja Textvariablen die in den .ini der jeweiligen Sprachen im Administrator Ordner liegen. Also kann ich praktisch nur die Variablen durch ein Bild ersetzen und muss auf den Text verzichten...oder ich lasse den Text rechts und links neben den zusätzlich eingefügten Button stehen...

Samuelll · 02.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

Die Texte müssten doch alle in einer Div-Box oder dergleichen liegen.

Was ist denn mit Text-Indent via CSS und dann dem Bild als Hintergrund ?

knuffiwuffi · 02.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

Hallo...genau das habe ich jetzt gemacht.

Ursprünglich war aber vorgesehen dem Bild auch die Link Funktion mitzugeben und den eigentlichen Text unberührt und unsichtbar dahinter zu lassen.

Ich habe den Text aber nun jeweils links und rechts als nutzbare Links neben den buttons belassen und alles per CSS und Hintergrundbild gelößt. Nun haben die Buttons zwar nur eine optische Bedeutung, aber so passt es erstmal. Im Grunde wollte ich auch mal hören wie andere das so lösen...man möchte sich ja weiter entwickeln, viel ausprobieren und dazu lernen

Code:

.pagenav_prev {
    background-image: url(../images/icon_set_luna_grey/24x24/back.png);
    background-repeat: no-repeat;
    background-position: right center;
    text-align: left;
    width: 6em;
    height: 2em;
}

.pagenav_next {
    background-image: url(../images/icon_set_luna_grey/24x24/next.png);
    background-repeat: no-repeat;
    background-position: left center;
    text-align: right;
    width: 6em;
    height: 2em;
}

Samuelll · 02.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

knuffiwuffi schrieb:
Hallo...genau das habe ich jetzt gemacht.

Ursprünglich war aber vorgesehen dem Bild auch die Link Funktion mitzugeben und den eigentlichen Text unberührt und unsichtbar dahinter zu lassen.
}[/code]

Genau das kannst du mit text-indent erreichen.

Du spichst einfach den gewünschten Link ander mit der Klasse pagenav_XXX zutun hat und sagst ihm :

height : 30px; width : 80px;
background : url(image/image.jpg)
text-indent : -99999;

Dann wird der Text aus dem sichtbaren Bereich heraus gerückt, dass Bild ist nur noch zu sehen und du kannst ähnlich mit dem Hover verfahren.

Ein "rein" grafischer Link is also geschaffen.

Einziger Nachteil ist, dass User die Images ausschalten auch keinen Text bekommen.
Allerdings wär ein hardcodiertes Image auch nicht besser, da hier nur ein Alt-Tag stehen würde.

knuffiwuffi · 02.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

Diese Technik hatte ich soweit auch verstanden und probiert...nur Hovert bei den next und prev Links ausschließlich der Text und die Hintergrundbilder haben somit keine Link Funktion im Div. Ich sehe also nur noch das Hintergrundbild und dieses fungiert nicht als Link...

sokie · 02.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

das a element muss schon auch eine Höhe und eine Breite haben und dispay:block. dann sollte es mit dem klicken auch funktionieren.

knuffiwuffi · 03.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

Na sauber...vielen lieben Dank für eure Tips. Jetzt habe ich es so wie es sein sollte. Natürlich braucht die Klasse und auch ihr a element eine feste Größe, wenn der Link Text auf font-size 0 gesetzt wird. So fungiert die Grafik dann als Link. Hier meine Lösung um NEXT und PREV button in Joomla 1.6 beta 6 über CSS anstelle der Text Links einzubauen. Da diese CSS Anweisungen in einer zusätzlichen styles.ccs liegen, überfahre ich die eigentlichen Anweisungen des Templates an diesen Stellen mit !important:

Code:

.pagenav_prev {
    background-image: url(../images/icon_set_luna_grey/24x24/back.png); /* button or icon to replace text link */
    background-repeat: no-repeat;
    background-position: right center;
    width: 24px;
    height: 24px;
    font-size: 0px; /* hide link text */
}

.pagenav_prev a {
    width: 24px; /* width of image */
    height: 24px; /* height of image */
    display: block; /* show image as link */
}

.pagenav_prev a:hover,
.pagenav_prev a:active,
.pagenav_prev a:focus {
    background-image: url(../images/icon_set_luna_grey/24x24/back.png) !important;
    background-color:#FFF !important;
    /* image or background color still showing on hover, active and focus */
}

.pagenav_next {
    background-image: url(../images/icon_set_luna_grey/24x24/next.png); /* button or icon to replace text link */
    background-repeat: no-repeat;
    background-position: left center;
    width: 24px;
    height: 24px;
    font-size: 0px; /* hide link text */
}

.pagenav_next a {
    width: 24px; /* width of image */
    height: 24px; /* height of image */
    display: block; /* show image as link */
}

.pagenav_next a:hover,
.pagenav_next a:active,
.pagenav_next a:focus {
    background-image: url(../images/icon_set_luna_grey/24x24/next.png) !important;
    background-color:#FFF !important;
    /* image or background color still showing on hover, active and focus */
}

Samuelll · 04.08.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

Statt font-size : 0;

wäre text-indent : -9999;

ggf. eine gute Sache gewesen.

knuffiwuffi · 07.10.2010

AW: Joomla 1.6 - Button Icon für Link Text anzeigen CSS

hat sich erledigt...so ersetzt man prev und next text link durch icons in Joomla 1.6 beta 11 mit beez_20 template. Der override (alles was !important hat) wirkt sich auf die layout.css aus und verpasst den Button per css ein Hintergrundbild (alles was unter include steht wurde ergänzt und ist so nicht in der layout.css)...der Textlink wird mit fontsize 0 einfach ausgeblendet:

Code:

#main ul.pagenav {
    list-style-type:none;
    padding:0;
    overflow:hidden
}
ul.pagenav li
{
    display:inline-block;
    padding:0px;
    margin:0;
}
#main ul.pagenav li 
{
    line-height:2em;
}
ul.pagenav li a
{
    border:solid 0px #ccc !important; 
    display:inline-block !important; 
    background:none !important; 
    padding:2px; 
    text-decoration:none;
}
ul.pagenav li.pagenav_prev {
    float:left;
}
ul.pagenav li.pagenav_next {
    float:right;
}

/* include */
.pagenav_prev {
    width: 24px; /* width of image */
    height: 24px; /* height of image */
    display: block; /* show image as link */
    font-size: 0px; /* hide link text */
    background-image: url(../images/icon_set_luna_grey/24x24/back.png); /* button or icon to replace text link */
    background-repeat: no-repeat;
    background-position: left center;
}
.pagenav_prev  a {
    width: 24px; /* width of image */
    height: 24px; /* height of image */
    display: block; /* show image as link */
    font-size: 0px; /* hide link text */
    background-image: url(../images/icon_set_luna_grey/24x24/back.png); /* button or icon to replace text link */
    background-repeat: no-repeat;
    background-position: left center;
}
.pagenav_prev a:hover,
.pagenav_prev a:active,
.pagenav_prev a:focus {
    background-image: url(../images/icon_set_luna_grey/24x24/back.png) !important;
    background-color:#FFF !important;
    /* image or background color still showing on hover, active and focus */
}
.pagenav_next {
    width: 24px; /* width of image */
    height: 24px; /* height of image */
    display: block; /* show image as link */
    font-size: 0px; /* hide link text */
    background-image: url(../images/icon_set_luna_grey/24x24/next.png); /* button or icon to replace text link */
    background-repeat: no-repeat;
    background-position: right center;
}
.pagenav_next  a {
    width: 24px; /* width of image */
    height: 24px; /* height of image */
    display: block; /* show image as link */
    font-size: 0px; /* hide link text */
    background-image: url(../images/icon_set_luna_grey/24x24/next.png); /* button or icon to replace text link */
    background-repeat: no-repeat;
    background-position: right center;
}
.pagenav_next a:hover,
.pagenav_next a:active,
.pagenav_next a:focus {
    background-image: url(../images/icon_set_luna_grey/24x24/next.png) !important;
    background-color:#FFF !important;
    /* image or background color still visible on hover, active and focus */
}