[3.2] Style nutzung für desktop und handy option

[chris1278]

Also ich weis jetzt nicht ob das Thema so passend ist aber mir fiel leider nichts besseres ein.

So zu meinem Anliegen.

Ich habe ein Forum und dort Zwei Styles

1. Prosilver original und unverändert)
2. Eigenen Style

Der eigene Style basiert auf Prosilver ist ein Tochter Style und über eine Coustom.css farblich angepasst.

Jetzt soll das so Funktionieren das der eigene Style eigentlich für alle Benutzer Standard ist und nicht überschrieben werden Kann. Dies an für sich ist kein Problem da man das in "Board-Einstellungen" Einstellen Kann.

Aber jetzt kommt das woran mir gelegen ist.

Ist es Möglich das man das Forum so einstellen kann dass bei Ansicht auf Mobilgeräten Nur der Prosilver Style läuft.

Der Hintergrund ist der.

Der eigene Style Läuft mit einem logo mit ausmasse 1200*268 Pixel. Die Ansicht ist auch alles über diese coustom.css prima eingestellt. Im Desktop Ansicht auf Laptop bzw. Pc läuft ohne Probleme. Nur mit mobilen Geräten da sprengt es die Ansicht und schießt Rechts über die Forums Wrap Container Hinaus. Ich gehe Dahingehend davon aus das das Logo nicht an die Responsive Ansicht anpasst. Vermutlich weil es Die grösse Mass-geblich aus der Logo Datei selber zieht.

Da her würde ich gerne das so lösen sofern Möglich ist das der Eigene Style nur auf Laptop oder PC also ohne Responsive Auflösung läuft und das Forum Wenn Responsiv gefragt ist das Prosilver Template Nutzt.

Ich weis auch noch nicht mal ob das so geht oder nicht. Daher die Frage. Ob ja und wenn Wie.

[Lehrling]

Standardmäßig wird das Logo ausgeblendet, wenn der Bildschirm schmaler als 700px ist. Wäre das eine Option für dich? Wenn nicht, könntest du auch ein kleineres Logo erstellen und das anzeigen lassen.
Vielleicht hilft dir das weiter:
https://www.youtube.com/watch?v=jz_HuRL ... s&index=16
https://www.youtube.com/watch?v=g5RbSq8 ... s&index=18

[chris1278]

Lehrling das Problem bei dem Eigenem Style ist ja das das Logo also die Datei selber ein gif ist welches ich ich via Online Tool Vergrössert habe. Da es sich nicht automatisch an die Grösse ausgedehnt hatte.

Ich meine Bei Respnsiven Aufrufen das Logo ausblenden wäre ja schon mal eine Option. Sofern man das über eine css regeln könnte. Ich werde mir die Videos aber mal anschauen evtl. Hilft das ja schon.

Ich denke Mal das hier Das Problem darliegt das ich in der Overall_header. html In dem Logo Lik die id und Class Logo Heraus genommen habe.

Ziel War es ein Logo Bild im Header einzufügen was über die Ganze breite des Forums also Logo auch anklickbar ist. Und erst als ich die id und Class eintrag entfernt hatte gab es den gewünschten effekt. Wobei das nicht die Final Version ist.

Ich hab hier jetzt Versucht so wenig Wie möglich an der Overall_header rum zuschrauben und das meiste auch in Coustom.css eingefügt. Allerdings hat es erst den gewünschten erfold als ich das in dem Link entfernt hatte.

Hier mal meine coustom.css

Code: Alles auswählen

html, body {
	color: #a3c6dc;
	background-color: #812b2b;
	background-image: url("./images/background.jpg");
}

.wrap {
	background-color: #fef0f0;
	border-color: #f80809;
	box-shadow: 0 0 1px 1px #6e6e6e;
	border-radius: 5px 5px 5px 5px;
	border-style: solid;
	border-width: 5px;
	margin: 0 auto;
	max-width: 1200px;
	padding: 5px 14px 5px 12px;
}

.headerbar, .forumbg {
	background-color: #a51c15;
	background-image: -webkit-linear-gradient(top, #a51c15 0%, #a51c15 2px, #a51c15 92px, #a51c15 100%);
	background-image: linear-gradient(to bottom, #a51c15 0%,#a51c15 2px,#a51c15 92px,#a51c15 100%);
	background-repeat: repeat-x;
}

.forumbg,.forabg {
	background-color: #f80809;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

ul.forums {
	background-color: #EEF5F9; /* Old browsers */ /* FF3.6+ */
	background-image: -webkit-linear-gradient(top, #fdd7d6	0%, #fdd7d6 100%);
	background-image: linear-gradient(to bottom, #fdd7d6 0%,#fdd7d6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2E0EB', endColorstr='#EEF5F9',GradientType=0 ); /* IE6-9 */
}

.navbar {
	background-color: #fdd7d6;
}
.headerbar {
	margin-bottom: 4px;
	padding: 0px;
	border-radius: 5px;
    width: 1200px;
	height: 268px;
}

Was ich im Overall-Header.html geändert habe ist folgendes:

Original:

Code: Alles auswählen

<a id="logo" class="logo"   href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>

geändert:

Code: Alles auswählen

<a  href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>

Dort habe ich dieses id="logo" class="logo" entfernt. Reultat ist eigentlich so gewünscht allerdings im handy naja das oben genannte Problem.

Edit: Hat sich erledigt habe den Fehler gefunden. In meiner Coustom.css habe ich bei der Headerbar die Gösse also höhe und Breite angegeben als ich diesen Raus genommen hatte hats auch in der responsiven Ansicht geladen wie es sollte.

Habe aber Das Problem So gelöst das ichs jetzt mit der Site logo Responsive extension von Kirk hin bekommen habe. Die css anpasssungen über coustom.css und die kerndateien alle unberührt. iund Erfolg.

[Melmac]

Warum willst Du denn unbedingt auch noch den Code der Headerbar verändern, wenn Du doch ohnehin diese Extension einsetzen wirst?
Die Extension macht genau das, was Du erreichen willst, ohne dass Du hierfür die Headerbar selbst antasten musst ...
Es sei denn, Deine Edits dienen einem ganz anderen Zweck, der hier nicht genannt wurde.

[chris1278]

Melmac hatte doch geschrieben dass das über dieses Extension gelöst wurde ich hatte davor das mit der HTML-Datei versucht das hat aber nicht ganz funktioniert ich habe dieses jetzt so wie du es beschrieben hast mit der Extension gemacht