Style "Blue Turtle" Online Ribbon

[Alfred]

Hallo,

beim "Blue Turtle" Style ist in den Beiträgen der kleine Online-Banner neben dem Profil (Bild) nur auf den hellen (ersten) Beiträgen zu sehen.
Kann mir jemand dabei behilflich sein, dass das online_ribbon auch auf den dunklen (zweiten) Beiträgen zu sehen ist?

phpBB 3.1.7-pl1/3.1.8

Ich danke für die Mühe
Alfred

[Lehrling]

Hallo,
im Stylesheet blue_turtle.css findest du in den Zeilen 216 - 219 folgende Anweisung:

Code: Alles auswählen

ul.forums, .bg1, .panel-container .panel {
	background-color: rgba(255, 255, 255, 0.45);
   background-image: none;
}

Nimm mal an der Stelle dieses background-image: none; raus.

[Alfred]

Hallo Lehrling,
habe ich gemacht und funktioniert, aber wie bei allen Änderungen, die ich z.Zt. am Programm vornehme, bleibt ein fader Nachgeschmack, den Pfuschen so mit sich bringt. Ist das so richtig und sauber?

blue_turtle.css (Zeile 200-226)/FORUMS & POSTS

Code: Alles auswählen

.forumbg {
    background-color: rgba(0, 102, 153, 0.55);
    background-image: none;
}
.bg1 {
    background-color: rgba(255, 255, 255, 0.45);
}
.bg2 {
    background-color: rgba(255, 255, 255, 0.65);
}
.bg3 {
    background-color: rgba(0, 102, 153, 0.75);
}
.bg3 h2, .panel-container h3, #cp-main h2 span a, .panel-container hr, #cp-menu hr, #navigation a, #navigation a:hover, label, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
    color: #fff;
}
ul.forums, .panel-container .panel {
    background-color: rgba(255, 255, 255, 0.45);
    background-image: none;
}
li.row {
    border-color: #053754;
    border-top-color: #ffffff;
}
li.row:hover {
    background-color: rgba(255, 255, 204, 0.25);
} 

Danke dir
Alfred

[Talk19zehn]

Hi, ich denke der "bittere Nachgeschmack" rührt aus der Tatsache, dass du in jener Zeile:

ul.forums, .bg1, .panel-container .panel {

.bg1 versehentlich unterwegs verloren hast.... (ungetestet, nur anhand der Codierung gedanklich umgesetzt).

LG

[Alfred]

Hi Talk19zehn,
.bg1 herausgenommen, ein paar Zeile höher (zwischen .forumbg u. .bg2) gestellt und den background-image entfernt. Sieht auch gut aus, aber bin ich richtig vorgegangen und ist das Ergebnis sauber (gehört z.B. .bg1 woanders hin)?

Gruß Alfred

edit:
Und noch ein Schmankerl bei diesem Style habe ich entdeckt, bei dem ich mich ebenfalls freue, dass ich den Namen kenne: Responsive Design. So ist bei einem Smartphone auf der Hälfte der Anzeige der Hintergrund zu sehen, weil sich die overall_header und die overall_footer nicht responsive Verhalten. Wie kann man sie dazu überreden, es doch zu tun? Hier habe ich noch nicht mal einen Ansatz ...

[Talk19zehn]

Hi Alfred, .bg1 wurde also verlegt. Wenn es dir gefällt, ich kann darin so auf die Schnelle keinen Fehler entdecken. Falls Lehrling noch eine andere Idee hat oder einen Fehler findet ....
Auf meiner Testseite habe ich das Design (Angabe laut style.cfg: style_version = 1.0.1, phpbb_version = 3.1.7), jetzt mal hochgeladen. Dieser CSS-Quelltext jenes Styles sieht ja grauenhaft aus. Es scheinen weitere Fehler in der mobilen Ansicht vorzuliegen, als ggf. angedacht. Aber egal, das Design ist ja auf der Mutterseite validiert. Evtl. gibt es ja Gründe für das CSS-Konstrukt in der vorliegenden Form?

Versuche entsprechend deiner Frage folgende Änderungen: Ohne Gewähr, da ich das Design nicht in allen Variationen (Templates) angeschaut und auch nicht in den zahlreichen Browsern getestet habe.

blue_turtle.css: Bitte suchen und ersetzen

Code: Alles auswählen

.navbar {
	background-color: transparent;
	background-image: none;
	border-color: #053754;
	color:#fff;
	max-width: 98%;
	margin: 0 auto;
}

Code: Alles auswählen

/* Lower Navbar 
-----------------*/
#page-footer .navbar {
	background-color: rgba(0, 102, 153, 0.55);
	background-image: none;
	border-color: #053754;
	color: #fff;
	max-width: 98%;
	margin: 0 auto;
}

Am Ende bitte testweise hinzufügen:

Code: Alles auswählen

/* responsive design
---------------------------------------------------------------------*/
@media only screen and (max-width: 875px), only screen and (max-device-width: 875px) {
	html, body {
	background-color: #D6E6E9;
	background-image: none;
	padding: 2px;
	margin: 0 auto;
}

LG

[Alfred]

Hi Talk19zehn,
ich finde, alle die nun unser Forum mit dem Handy besuchen, sollten dir zu Füßen liegen . Jetzt ist das Design auch auf diesen Geräten ansehnlich.
Mit den Abschnitt für Testzwecke habe ich solange rumgespielt, bis mir klar wurde, dass langsam die Zeit gekommen ist, mich an der Installation einer lokalen Testumgebung zu versuchen (die Suche zeigt in erster Linie ältere Beiträge, hoffe XAMPP ist noch aktuell).

Lehrling, Talk19zehn, vielen Dank für eure Hilfe!

Dankbarer Alfred

[Talk19zehn]

Hi Alfred, gern geschehen, das freut mich, wenn ich momentan Abhilfe schaffen konnte. Und in Sachen XAMPP hat Lehrling m.W. auch Video-Tutorials am Lager (siehe ihre Signatur), falls Bedarf besteht ...
LG