Hilfe Anpassung Helix Ultimate Template

DennisMenger · 12. Februar 2021

Hallo zusammen.

Ich bin dabei unsere Seite vom Verein neu aufzubauen. Dabei nutze ich das Helix Ultimate Template. Ich bin gerade dabei einige Dinge anzupassen. Dabei möchte 3 Module mit einem grauen Rahmen als Hintergrund darstellen. Das klappt soweit auch schon. Allerdings wird irgendwie noch ein weiterer Rahmen mit dargestellt.

Für den Rahmen habe ich eine eigene Klasse "rahmenmodul" angelegt. Der dazugehörige Code habe ich im benutzerdefinierten CSS-Bereich untergebracht.

Code

.rahmenmodul
{
margin:10px;
padding: 5px;
background: #E6E6E6;
border-radius:6px;
height: 100px;
}

Kann mir jemand helfen und sagen wo dieser weitere Rahmen herkommt? Beziehungsweise wie ich den wegbekomme? Mit css habe ich noch nicht so viel gearbeitet.

Die Seite liegt hier: http://www.neu.tennisfreunde-kollow.de/

Vielen Dank

Gruß

Dennis

Indigo66 · 12. Februar 2021

Deine Klasse "rahmenmodul" ist 2x vergeben.

Einmal im DIV <div class="sp-module rahmenmodul"> und dann im UL <ul class="latestnews rahmenmodul">.

Wenn Du es nur im äußeren DIV haben willst, musst Du es genauer eingrenzen.

CSS

.sp-module.rahmenmodul {
    margin: 10px;
    padding: 5px;
    background: #E6E6E6;
    border-radius: 6px;
    height: 100px;
}

DennisMenger · 12. Februar 2021

Perfekt. Vielen Dank für die schnelle Hilfe.

Mir fallen bestimmt noch mehr Dinge ein.

Hallo.

Könntet ihr mir noch einmal helfen?

Ich möchte um ein Modul ein Rahmen haben. Auf der Internetseite unter folgendem Link das rechte Modul.

http://www.neu.tennisfreunde-kollow.de

Der Rahmen soll aber genauso groß sein wie die Module links daneben. Geht das?

Folgenden Code habe ich.

Code

.sp-module.rahmenmodul2 {
    margin: 5px;
    padding: 5px;
    border-radius: 6px;
    border-color: #009846;
    border-style: solid;
    border-width: 2px
    border-height: 150px;
}

Danke für eure Hilfe.

Gruß

Dennis

christine2 · 21. März 2021

Hallo Dennis,

ein bisschen Kosmetik

beim: border-width: 2px; > fehlt das rote.

Dafür kann man (muss nicht) in der letzten Zeile das: ";" weglassen.

Es geht aber kürzer:

border: 2px solid;

-----------------

statt:

Code

border-height: 150px;

das hier:

Code

height: 150px;

Hast Du keine custom.css?

Liebe Grüße

Christine

christine2 · 22. März 2021

Hallo Dennis,

den border hast Du gestern reingemacht. Hatte dann abgewartet.

Es ist aber immer noch so, dass deswegen die Höhe nicht angesprochen wird:

Siehe das durchgestrichene. (vom System, da falsch).

Also:

Code

.sp-module.rahmenmodul2 {
    margin: 5px;
    padding: 5px;
    /*background: #009846; */
    border-radius: 6px;
    border-color: #009846;
    border-style: solid;
    height: 150px
}

Liebe Grüße

Christine

DennisMenger · 22. März 2021

Hallo.

Vielen Dank.

Bisher habe ich keine custom.css. Das Template gibt die Möglichkeit benutzerdefiniertes css anzugeben. Bisher reicht mir das. Es kann natürlich sein, dass da irgendwann noch mehr kommt.

Danke dir bis hier.

Gruß

Dennis

DennisMenger · 29. März 2021

Hallo ich wieder.

Es geht noch mal um die 3 Module, die nebeneinander angezeigt werden.

Wie kann ich die Linkfarben nur für diese 3 Module anpassen?

http://www.neu.tennisfreunde-kollow.de/

Danke für weitere Hilfe.

Indigo66 · 29. März 2021

Mite einer eigenen CSS fpr die Rahmenmodule.

Der Selektor sieht so aus .sp-module.rahmenmodul a

DennisMenger · 30. März 2021

Danke für die Antwort.

Und das baue ich dann in meine css ein?

Mein Code sieht aktuell so aus. Leider bisher keine Veränderungen im Design.

Code

.sp-module.rahmenmodul a {
   a:link { color: white; 
}
   a:visited { color: white; 
}
   a:focus { color: white; 
}
   a:hover { color: white; 
}
   a:active { color: white; 
}

Alles anzeigen

Elwood · 30. März 2021

Zitat von DennisMenger

Und das baue ich dann in meine css ein?

In den Template-Optionen gibt es ein extra Feld custom.css.

Danach noch Joomla- und Browsercache leeren.

DennisMenger · 30. März 2021

Den Code habe ich in meinen Template-Optionen eingefügt. Cache in Joomla und Browser gelöscht, leider keine Veränderungen bei den Links. Lediglich das Gesamtdesign wird zerschossen. Alle Schriftgrößen werden größer dargestellt als sonst.

Ist da irgendwo ein Fehler im Code bezüglich den Links?

christine2 · 30. März 2021

Hallo Dennis,

Du hast in der Zeile 3 mit } (schließende Klammer) den Code beendet. Danach gibt es nur die Anweisungen.

Das ganze löschen und probiers mit:

Code

.sp-module.rahmenmodul a:link, a:visited, a:hover, a:active {
   color: white; 
}

Liebe Grüße

Christine

christine2 · 30. März 2021

Hab's gesehen, dass es gewirkt hat. Aber leider zu viel.

Hatte mit den Codes nur das Augenmerk auf dieses .sp-module.rahmenmodul gelegt gehabt.

Schau mal auf die unteren Links, Weiterlesen usw. die sind jetzt beim drüber hovern, auch weiß. Daher a: hover löschen.

Code

.sp-module.rahmenmodul a:link, a:visited, a:active {
   color: white; 
}

Liebe Grüße

Christine

DennisMenger · 31. März 2021

Danke dir.

Jetzt fehlt nur noch jeweils der erste Eintrag im Modul Aktuelle Ausschreibunge und im Modul Corona. Da bleibt der Eintrag schwarz. Warum auch immer. Auch die besuchten Links habe ich ja auf weiß gestellt.

Kannst du hier bitte noch einmal helfen? Vielen Dank.

christine2 · 31. März 2021

Man sieht den Eintrag #13, im Seitenquelltext als Inline.

Krieg das jetzt für diese 2 schwarzen Einträge nur "dirty" hin:

CSS

.sp-module.rahmenmodul a:link, a:visited, a:active {
   color: white !important; 
}

Liebe Grüße

Christine

christine2 · 31. März 2021

Hab gesehen, dass diese 2 schwarzen Links ul li haben. Also: "Jugend Doppel .... & " Anpassung ...."

Deswegen wird es wohl nicht gewirkt haben.

Näher geschaut, durch den Hinweis "a" von Indigo66 #8

Nächster Versuch:

Code

.sp-module.rahmenmodul ul > li > a {
    color: white;
}
.sp-module.rahmenmodul ul > li > a:hover {
    color: white;
}

Liebe Grüße

Christine

DennisMenger · 31. März 2021

Vielen Dank Christine. Das war es.

Aber warum haben jeweils die ersten Einträge die Klasse ul li und die jeweils nachfolgenden Links nicht? Ich möchte es verstehen für spätere Anpassungen.

christine2 · 1. April 2021

Hallo Dennis,

Puh - Weiß nicht, ob ich es richtig erklären kann - suche ja auch selber immer

Das "Hauptmodul" ist ja: .sp-module.rahmenmodul. Diese hattest Du ja formatiert.

Jetzt gibt es aber auch noch andere Modülchen, welche auch ich erst später gesehen habe.

1) Hab da versucht, was zu malen - ist jetzt aber nur so ca. beispielhaft:

Da könnte man z.B. die "latestnews" umformatieren (man sieht auch diese ul li im Bild):

CSS

ul.latestnews.rahmenmodul > li > a  {
color: lightgreen!important;  
}

OT: Musste ein !important; nehmen, da Inline (voriges Post) ja schon formatiert.

2) "Extra" Formatierungen (nur Beispiel):

Code

ul.category-module.rahmenmodul.mod-list > li > a {
color: lightgreen;  
}

Man muss aber auch schauen, ob es wo anders Auswirkungen hat, so wie es in #13 passiert war.

Liebe Grüße & Gute Nacht,

Christine

DennisMenger · 1. April 2021

Ok danke für die Erklärung. Das heißt es kann also sein, dass innerhalb eines Moduls verschiedene Klassen zum tragen kommen.

Indigo66 · 2. April 2021

Zitat von DennisMenger

Das heißt es kann also sein, dass innerhalb eines Moduls verschiedene Klassen zum tragen kommen.

Ja, erst recht wenn ein Pagebuilder eingesetzt wird. Dein Ansatz mit einem eigenen Modulklassen-Suffix war schon richtig. Nur blöd, dass durch das Templateframework in einer Elternklasse oder -ID schon ein anderer Wert vergeben war, der dadurch eine höhere Priorität hat.
Christines Vorgehensweise mit einem !important war dann schon ok, um die Prio des neuen Eintrags zu erhöhen.

Tags