Menütitel farbig

friren · 25. Oktober 2020

Hallo,

ich mochte einen Titel, in diesem Fall Corona farbig unterlegen oder die Überschrift selbst farbig hervorheben. Viele Tipps gelesen, aber wenig verstanden.

Möglicherweise hat jemand einen Tipp, wie das am einfachsten zu machen ist.

JoomlaWunder · 25. Oktober 2020

"Corona" scheint ein Menüpunkt zu sein. Versuche mal direkt im Menüpunkt unter "Linktyp" -> "CSS-Klasse für Link" eine eigene CSS-Klasse hinzuzufügen, beispielsweise meineklasse. (Leerzeichen davor setzen!)

In der custom.css gibst du dann die gewünschte Formatierung für den Menüpunkt an:

.meineklasse {

background-color:#7c3b2c;

}

oder was auch immer.....

Dann alle Caches leeren! Wenn es nicht funktioniert, dann der Formatierung mal ein !important geben.

Hatten wir das Thema nicht schon vor kurzem?

christine2 · 25. Oktober 2020

Hallo friren,

Na geh, jetzt bist bei uns schon so lange. Einen screenshot kann man nicht untersuchen

Na gut, hier ist Deine Seite: http://www.ttc-fritzdorf.de/index.php

Wie am einfachsten? Hmm. Würde mir da spontan einfallen: Linktyp > CSS Style für Link einen Suffix usw.

Aber das lasse ich mal in Moment.

Vielleicht probiers mal so (custom.css):

CSS

li.item223 a {
background: orange;    
}
li.item223 a:hover {
background: orange;
color: #000 !important;    
}

Div. Kosmetik kann man immer noch machen.

Liebe Grüße

Christine

Edit: Oh: JoomlaWunder hat auch gerade geschrieben. Erst jetzt entdeckt.

JoomlaWunder · 25. Oktober 2020

Zitat von christine2

Edit: Oh: JoomlaWunder hat auch gerade geschrieben. Erst jetzt entdeckt.

Eine Lösung sollte doch nun durchführbar sein.

suederland · 25. Oktober 2020

Aller guten Dinge sind 3 (Lösunsgvorschläge)

Ich habe mich zum gleichen Thema hier im Forum schlau gefragt und in der user.css (nicht in template.css !!) die Standardeinstellungen in Protostar /* Zeilennummer*/ überschrieben:

CSS

/*2900*/ /*mainmenu*/
.nav {
/*background-color: #00deff !important;*/ /*komplette navbar*/
/*background-color: rgba(255,0,0,0.5)!important;*/
}
.nav > li {
/*background-color: #00deff !important;*/ /*bestückte navbar*/
/*background-color: rgba(0,255,0,0.5)!important;*/
}
.nav > li a {
/*background-color: #003399 !important;*/ /*alle nav-Buttons*/
/*background-color: rgb(0, 51, 153, 0.5) !important;*/ /*= #003399, alle nav-Buttons*/
}
.nav > li > a:hover,
.nav > li > a:focus{
text-decoration: none; /*underline;*/ /*underline overline;*/ /*none;*/
/*background-color: #FF3300;*/ /*wirkungslos wg. !important*/
}

/*3013*/ /*mainmenu, default+hover*/
.nav-pills > li > a {
padding: 8px;
margin: 2px 5px 2px 5px;
-webkit-border-radius: 0px; /*5px;*/
-moz-border-radius:  0px; /*5px;*/
border-radius: 0px; /*5px;*/
font-weight: normal; /*400;*/ /*bold;*/ /*normal;*/
color: #333; /*Schriftfarbe in mainmenu*/
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
font-weight: normal; /*700;*/ /*normal;*/ /*bold;*/
color: #fff; /*Schriftfarbe im Button mainmenu, aktiv*/
/*background-color: #f00;*/ /*wirkungslos bei !important, Hintergrund mainmenu*/
}

/*7344*/ /* Submenü Rahmen */
.navigation .nav-child {  
position: absolute;
top: 95%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 0px; /*6px;*/
-moz-border-radius: 0px; /*6px;*/
border-radius: 0px; /*6px;*/
-webkit-box-shadow: none; /*0 5px 10px rgba(0,0,0,0.2);*/
-moz-box-shadow: none; /*0 5px 10px rgba(0,0,0,0.2);*/
box-shadow: none; /*0 5px 10px rgba(0,0,0,0.2);*/
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}

/*7383*/ /*Submenu Elemente */
.navigation .nav-child a {
display: block;
padding: 8px; /*3px 20px;*/
margin-bottom: 2px;
-webkit-border-radius: 0px; /*5px;*/
-moz-border-radius: 0px; /*5px;*/
border-radius: 0px; /*5px;*/
clear: both;
font-size: 13px;
font-weight: normal; /*400;*/ /*bold;*/ /*normal;*/
line-height: 15px; /*Höhe submenu*/
color: #333; /*Schriftfarbe im Button submainmenu*/
white-space: nowrap;
}

/*7454*/ /*submenu*/
.navigation .nav-child li > a:hover,
.navigation .nav-child li > a:focus,
.navigation .nav-child:hover > a {
text-decoration: none; /*underline;*/ /*underline overline;*/ /*none;*/
color: #fff; /*Schriftfarbe im Button submainmenu, hover*/
background-color: #666; /*Hintergrund submenu, wirkungslos bei !important*/
}

Alles anzeigen

Vieles habe ich auskommentiert für eine spätere Verwendung.

Kannst du vielleicht irgendwann mal alles ausprobieren.

vG

JoomlaWunder · 25. Oktober 2020

Zitat von suederland

Aller guten Dinge sind 3 (Lösunsgvorschläge)

Ich habe mich zum gleichen Thema hier im Forum schlau gefragt und in der user.css (nicht in template.css !!) die Standardeinstellungen in Protostar /* Zeilennummer*/ überschrieben:

Die user.css wird in Protostar verwendet, korrekt. Die Template-Anbieter sehen in aller Regel eine custom.css vor, so wie in diesem Fall.

Auch soll hier nur 1 Menüpunkt geändert werden und nicht alle.

Elwood · 25. Oktober 2020

Aber er nutzt ja nicht Protostar sondern das Eximium.

Dort wäre die custom.css richtig, kann er bei den Template-Optionen ja direkt eingeben:

Elwood · 25. Oktober 2020

Nö, in der custom.css steht nichts drin (Code von christine2?).

Klicke auf deinem Bildschirm mit der rechten Maustaste und dann auf 'Element untersuchen'

Dann auf 'Stilbearbeitung'

Dann links auf custom.css.

Bei mir steht da nicht der Code.

Wenn ich den von christine2 einfüge, klappt es:

Joomla- und Browsercache würde ich trotzdem immer leeren.

JoomlaWunder · 25. Oktober 2020

Wir können das nicht wirklich nachprüfen, da wir nicht wissen, ob es wirklich die Seite vom TTC Fritzdorf ist und/oder ob du diese lokal auf einer Testebene bearbeitest?

Elwood · 25. Oktober 2020

Warum löscht du deinen Beitrag?:

Jetzt fehlt der Zusammenhang zu meinen Antworten vorher und nachher!

christine2 · 25. Oktober 2020

Sehe da jetzt:

Code

.meineklasse {
  background-color:#7c3b2c;
}

Müsstest noch Schriftfarbe dazugeben:

CSS

    color:#fff !important;

Aber: JoomlaWunder schrieb:

Zitat

"Linktyp" -> "CSS-Klasse für Link" eine eigene CSS-Klasse hinzuzufügen, beispielsweise meineklasse. (Leerzeichen davor setzen!)

Du hast dort einen Punkt davor gesetzt:

.meineklasse statt:

meineklasse (Leerzeichen davor)

Liebe Grüße

Christine

friren · 25. Oktober 2020

sorry, versehentlich. Es ist die Seite von TTC Fritzdorf. Habe nun noch einmal den Eintrag von joomlaWunder genommen

mit dem Eintrag von Christine hat es jetzt auch bei mir funktioniert.

Probiere den Eintrag von joomlaWunder mit Colour und Leerzeichen bei einem anderen Menüpunkt.

Danke allen.

Elwood · 25. Oktober 2020

Zitat von friren

mit dem Eintrag von Christine hat es jetzt auch bei mir funktioniert.

Kannst du mir einen Link geben, wo es funktioniert?

Ich sehe es auf deiner Seite immer noch nicht!?

friren · 25. Oktober 2020

http://www.ttc-fritzdorf.de/ mit Firefox und Chrome. Mit Edge sieht man merkwürdigerweise nichts.

Elwood · 25. Oktober 2020

Glückwunsch!

Mit dem FF sehe ich immer noch nichts:

Aber wenn es bei dir passt, ist es gut.

christine2 · 25. Oktober 2020

Doch, doch man kann es sehen. Auch mit dem Edge.

Kollege, leer doch mal, Du weißt schon

Aber: Was mir nicht gefällt ist, dass es so "hüpft". Glaube, es hängt mit SEF Urls (url-rewrite) zusammen.

Weil davor ist ja: /index.php. Und: SSL Certificate fehlt auch. Ist aber anderes Thema.

Liebe Grüße

Christine

friren · 25. Oktober 2020

Geht jetzt auch mit Edge. Einen habe ich aber noch: Wie kann ich den Menüpunkt finden für die CSS. Mit ID oder z.B. li.item223 a

sorry, hat sich erledigt

christine2 · 25. Oktober 2020

Musst halt schauen, welche ID Nummer das gewünschte Menü hat. Oder hier:

Liebe Grüße

Christine

christine2 · 25. Oktober 2020

Zitat von friren

sorry, hat sich erledigt

Wieso hast Du schon wieder einen Beitrag gelöscht, auf den ich vorhin geantwortet habe?

Hat sich für mich jetzt ne Weile auch erledigt.

friren · 25. Oktober 2020

Tut mir leid, aber ich habe aus Versehen nur einen Beitrag gelöscht u. sonst keinen. Dieses "sorry hat sich erledigt" hatte ich vor Deiner Antwort verfasst