Allgemeine Fragen und Antworten zum persönlichen Seitenlayout und dem Einsatz von CSS + SASS

Hier kannst Du Vorschläge für Grafikänderungen sowie alternative Layouts machen.

Allgemeine Fragen und Antworten zum persönlichen Seitenlayout und dem Einsatz von CSS + SASS

Avatar: Vendel
Admin
Themenstarter#1
Stellt hier bitte eure Fragen bezüglich dem persönlichen Seitenlayout. Gern versuche ich auf Fragen und Wünsche einzugehen.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
Themenstarter#2
Ich nutze mal die Gelegenheit auf eine externe Frage hier einzugehen.
klose91Wäre es möglich, dass die "Tooltips" für den Genres auf der Anime/Manga-Seiten 'ne CSS-Klasse bekommen, damit man die Hintergrundfarbe und den Textfarbe ändern kann?

<a data-title="<h1>Komödie</h1>Soll den Zuschauer bzw. Leser zum Lachen bringen." class="gg" href="anime/index/?char=all&amp;sort=stars&amp;order=desc&amp;genre_include=4" rel="ugc nofollow">Komödie</a>

Ich komm leider nicht an den data-title-Kram heran, der wahrscheinlich mit jQuery beim Hover hinzugefügt wird? Problem ist bei mir, dass ich die Tag-Farben geändert habe und der Tooltip nicht mit dem übereinstimmt, außerdem habe ich als Standardschriftfarbe weiß, was sich bei dem hellen Tooltips schlecht lesen lässt. Und ich wüsste derzeit nicht, wie man an das Element sonst herankommen könnte, von dem JavaScript bin ich auch nicht wirklich schlauer geworden (ist ja mega obfuscated...).

Diese Klasse existiert bereits und findest du in dem Seitenlayouts wenn du diese importierst unter:
Farbschema Vorlage
/***** TOOLTIP *****/

.ui-tooltip {
color: $COLOR_D;
background-color: $COLOR_A;
border-color: $COLOR_A;
}
.tooltip-g, .tooltip-c, .tooltip-t, .tooltip-h, .tooltip-o {
background-color: #C5E7F7;
@include box-shadow(2px 2px 6px #666);
}
.tooltip-c {
background-color: #B8E7BA;
}
.tooltip-t {
background-color: #EEDEA1;
}
.tooltip-h {
background-color: #F0D6DA;
}
.tooltip-o {
background-color: silver;
}

.tooltip-g => Hauptgenre
.tooltip-c => Nebengenre
.tooltip-t => Tags
.tooltip-h => Hentai-Tags
.tooltip-o => Zielgruppe


P.S. Der JavaScript-Code ist nicht künstlich "obfuscated"(unleserlich), sondern wie von Google und SEO verlangt "minimiert". Das selbe gilt für CSS.
    • ×2
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: クロキュー#3
Danke, sieht jetzt viel vernünftiger aus. ^^

P.S.: Ist cool, dass du das mit dem SASS eingebaut hast, spart viel Arbeit. Ist echt mega gut (kannte das vorher noch nicht). ^^
Beitrag wurde zuletzt am 31.03.2016 14:04 geändert.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Yukki#4
Wenn ich im Index (Liste) auf einen Titel fahre, dann erscheint davon das Cover. Um das Cover ist ein brauner Rand. Hat jemand den Code von diesem Rand?
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: aniSearchler
aniSearchler
#5
@Yukki
Ich bin mir nicht sicher welchen Hover du meinst, aber das müsste eigentlich der "Rand" sein:

Quelle .ui-widget-content {
border: 1px solid #FARBCODE;
}

Der Code wirkt sich aber gleichzeitig auf den Hover der Forumkategorien in der Sidebar und die Suche aus.
Beitrag wurde zuletzt am 31.03.2016 16:05 geändert.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: Yukki#6
EinsZweiDrei@Yukki
Ich bin mir nicht sicher welchen Hover du meinst, aber das müsste eigentlich der "Rand" sein:

Ich meine alles braune um das Cover
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: aniSearchler
aniSearchler
#7
Dann meinen wir eigentlich dasselbe.
Wie schon angedeutet, der Code wirkt sich nicht nur auf diesen Bereich aus, sondern auch auf die "Pop-Ups" der letzten Beiträge in den Foren-Kategorien in der Sidebar und auch auf die Suche. Versuch mal diesen Code:

Quelle .ui-widget-content {
background-color: #FARBCODE;
border: 1px solid #FARBCODE;
color: #FARBCODE;
}

Überprüf dannach, vor allem, die Suche, ob da dann noch was geändert werden muss.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: クロキュー#8
Über .ui-tooltip müsste sich das regeln lassen (hätte auch Auswirkungen auf die Tooltips der Genre-Tags usw., aber nicht auf mehr).

Ich weiß leider nicht, wie das bei mir jetzt funktioniert. ich greife bei den Covern aber nicht auf die .ui-Sachen zu, vielleicht wird an anderer Stelle irgendwas überschrieben, wovon ich noch nix weiß.
Beitrag wurde zuletzt am 31.03.2016 16:47 geändert.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Yukki#9
EinsZweiDrei
Quelle .ui-widget-content {
background-color: #FARBCODE;
border: 1px solid #FARBCODE;
color: #FARBCODE;
}
Hat geklappt, allerdings sieht die Suche jetzt so aus und das sieht nicht gerade toll aus 
klose91Über .ui-tooltip müsste sich das regeln lassen (hätte auch Auswirkungen auf die Tooltips der Genre-Tags usw)
Was meinst du mit Tooltips bei den Genre-Tags?
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: aniSearchler
aniSearchler
#10
Wenn du die Suche noch weiter anpassen möchtest, kannst du diesen Code verwenden:

Quelle .ui-menu .ui-menu-item {
border-bottom: 1px solid #FARBCODE; /*Die Trennlinien zwischen den einzelnen Einträgen*/
}
.ui-menu .ui-menu-item > span.black {
color: #FARBCODE; /*Der untere Rand "Weitere Ergebnisse" Schriftfarbe*/
background-color: #FARBCODE; /*Der untere Rand "Weitere Ergebnisse" Hintergrundfarbe*/
}
.ui-menu-item.ui-state-focus, .ui-menu-item.ui-state-active {
background-color: #FARBCODE; /*Die Hintergrundfarbe des Hover der einzelnen Einträge*/
}

Einen Code bei dem du nur die "Pop-Ups" der Indexe veränderst, kenn ich leider nicht.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Yukki#11
Einzige was gerade stört ist die Hintergrundfarbe der Suche
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: aniSearchler
aniSearchler
#12
Deshalb hab ich dir auch vorher gesagt, dass dieser Code auch die Suche verändert.
Vielleicht fällt Klose (er hat ja schon einen Lösungsansatz) oder jemand anderem noch was dazu ein.
Beitrag wurde zuletzt am 31.03.2016 17:23 geändert.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: TaZ
DB-Helfer
#13
Vielleicht kann mir hier wer helfen.
Seite um die es geht: https://www.anisearch.com/usercp/input

Wie es aussehen soll:



Wenn da nur ein paar Bereiche stehen, soll es alles auf eine Zeile, wenn noch ein Freischalterhinweis dazukommt, aber wieder wie gewohnt auf die nächste Zeile.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (2)

Zeige alle Kommentare
Avatar: Yukki#14
Vielen Dank Klose. Das hat geholfen 
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
Themenstarter#15
@Yukki
Ihr macht das ja echt mega kompliziert. ;)
In meiner Antwort auf klose91 steht bereits die Lösung.
#post195593 .ui-tooltip {
color: $COLOR_D;
background-color: $COLOR_A;
border-color: $COLOR_A;
}

Das ist der Code für das Standard-Tooltip.
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0