Styleswitcher einbauen

22.06.2013 22:35
avatar  Demi95
#1 Styleswitcher einbauen
avatar
Mitglied

Wunderschönen guten Abend!

Da komme ich mal wieder mit einer neuen Frage um die Ecke. Also es geht (wie ja bereits im Betreff erwähnt) um einen Styleswitcher den ich gerne in mein Forum einbauen würde. Einfach weil ich jedem gerne die Möglichkeit geben würde sich einen Style auszusuchen der ihm zusagt. Schließlich hat nicht jeder denselben Geschmack! Dass es mit Javascript realisierbar ist, weiß ich bereits. Auch, dass das Thema hier schon öfter aufgekommen ist. Allerdings wurde ich aus den letzteren Beiträgen dieses Thema betreffend nicht so ganz schlau. Zwar findet man auch über Google jede Menge Codes und Möglichkeiten das zu realisieren, aber da ich keine wirklichen Kentnisse mit diesen Dingen habe, ist es beinahe unmöglich da ohne Hilfe durchzusteigen. Bei mir tun sich also folgende Fragen auf:

Wie genau erstelle ich das Layout zum "switchen"?
Soweit ich das verstanden habe, muss das Layout ja auf einen Webspace hochgeladen werden, damit es online ist. Dafür braucht man das Layout wieder als CSS Datei? Aber wie genau funktioniert das mit der Erstellung? Macht man das mit einem Bildbearbeitungsprogramm oder MUSS ich dafür zwingend CSS beherrschen und alles selbst schreiben? Oder kann ich das Layout auch einfach im Forum direkt ändern und komme da irgendwie an den Code den ich brauche? Für Kenner in solchen Dingen sicher eine blöde Frage, aber ein richtiges Tutorial dazu kann ich leider auch nicht finden oder das Suchen muss noch geübt werden.^^

Wo wird was eingefügt?
Das ist immer wieder eine Frage die ich mir stelle. Ich habe gesehen, dass ein Teil des Codes in "Obere Leiste" zwischen <head> und </head> eingefügt werden muss (hoffe das war richtig). Aber ist es dort egal wo genau?

Webspace?
Könnt ihr einen Webspace für sowas empfehlen? Habe mich erst vor kurzem etwas damit beschäftigt und ich weiß nicht, ob ich da auf bestimmte Kreterien die es zu erfüllen gilt achten muss.

Ein paar Infos zu meinem Forum:

Template: Gaia Template (verändert via HTML in "Thread-Flat")
Forum: http://unknown-war.xobor.de/

Ich hoffe jemand kann sich da erbarmen und mir das genauer und vorallem für einen Laie verständlich erklären oder sich mit mir da durch arbeiten. Es wäre wirklich super, wenn das klappen würde. :)

Herzliche Grüße


 Antworten

 Beitrag melden
23.06.2013 00:00
avatar  Olaf
#2 RE: Styleswitcher einbauen
Ol
Mitglied

Ich habe in meinem Forum einen selber geschrieben und kann wohl behaupten,das es ohne CSS Kenntnisse nicht möglich ist,solch ein Style-Switcher selbst aufzubauen.Die CSS Dateien,die Du selber schreiben/ändern mußt,beinhalten die kompletten Styles und nur die werden auf einen externen Server gespeichert.Du kannst sie Dir auch nach Deinen Geschmack von einen anderen Erstellen lassen,ist aber sehr aufwendig.....
Das Javascript,das Du in der Template in den "Head-Bereich" einsetzen mußt,erledigt das setzen der CSS Datei und setzt ein Cookie,damit bei jeden Seitenaufruf immer das ausgesuchte Style beibehalten wird.
Dann kommt noch ein HTML Formular in die Template,das an einen genauen Punkt dort eingesetzt werden muß,damit im Forum ein Auswahlmenü erscheint für die verschiedenen Styles.
Das ist schon Alles.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
03.12.2013 21:22 (zuletzt bearbeitet: 03.12.2013 21:23)
avatar  Romulus
#3 RE: Styleswitcher einbauen
avatar
Mitglied

Nun, diese Sache mit dem Styleswitcher kommt auch noch auf mich zu. Ich möchte mir dann mal einen Button einbauen, mit dem sich zwischen Tag- und Nacht-Farbeinstellungen umschalten lässt. Es ginge da lediglich um ein paar Änderungen, in denen sich die beiden Styles voneinander unterschieden müssten: vor allem sind es die tagsüber sehr vorteilhaften weißen Hintergründe in Beiträgen sowie in der Forum-Übersicht. Diese sollten dann bei nächtlichen Lichtverhältnissen ein wenig abgedunkelt dargestellt werden, was für das lesende Auge natürlich paradiesische Auswirkungen hätte.

@Olaf : Die für mich alles entscheidende Frage ist nun: kann einen solchen Styleswitcher dann jeder Benutzer im Forum für sich eigenständig verwenden, oder ist das Ganze so gemeint, dass ein Umschalten von einem Style auf den anderen dann immer für alle auf einen Schlag gilt, beispielsweise also, wenn das nur für den Admin möglich ist. Ich würde nämlich sehr gerne jedem Benutzer selbst die Wahl überlassen.

EDIT: Im Grunde genommen wäre das ja schon wieder eine sinnvolle Sache für ein Plugin! Der Tag- und Nacht-Schalter

www.neverface.com
Liebhaber des Business Templates

 Antworten

 Beitrag melden
03.12.2013 23:40 (zuletzt bearbeitet: 03.12.2013 23:42)
#4 RE: Styleswitcher einbauen
avatar
Mitglied

Ich bin einem Forum . Dort kann JEDER INDIVIDUELL ein Outfit wählen aus drei verschiedenen Angeboten.

Und in einem anderen konnte man sogar zwischen 10 verschiedenen Möglichkeiten wählen .

Aber deine Idee ,Aaron,die Lichtverhältnisse nach Tageszeit zu ändern habe ich noch nirgends gesehen , Die Idee finde ich - darf ichs auf bayrisch sagen?

sauguad

**********************************
Ich frage nach ,damit ich was lerne

 Antworten

 Beitrag melden
04.12.2013 00:15
#5 RE: Styleswitcher einbauen
avatar
Mitglied

Also falls Ihr es noch nicht wisst,

wir haben Kollegen, welche sich in Ihren Foren mit solchen Dingen beschäftigen. Die möchte ich Euch hier empfehlen:

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

 Antworten

 Beitrag melden
04.12.2013 13:06
#6 RE: Styleswitcher einbauen
avatar
Mitglied

Da ich es mir nicht zutraue, sowas selbst einzubauen und zu warten, wäre ich dafür, dass daraus ein Verbesserungsvorschlag wird :). So einen Styleswitcher hätte ich schon gerne als Möglichkeit. Was dann damit getan wird, ist eine andere Frage.

****************************************************
Bitte nicht anchatten - der Chat ist bei mir ausgeblendet und ich sehe eure Nachrichten teilweise erst 20 Minuten später. Schreibt lieber eine PN.
Bitte außerdem nicht in Themen taggen, in denen ich eh aktiv bin. Ich habe alle Themen, an denen ich mitdiskutiere, aboniert und kriege mit, wenn ihr was schreibt. Danke!

 Antworten

 Beitrag melden
04.12.2013 17:05
avatar  Olaf
#7 RE: Styleswitcher einbauen
Ol
Mitglied

[

Zitat von Romulus im Beitrag #3
@Olaf : Die für mich alles entscheidende Frage ist nun: kann einen solchen Styleswitcher dann jeder Benutzer im Forum für sich eigenständig verwenden, oder ist das Ganze so gemeint, dass ein Umschalten von einem Style auf den anderen dann immer für alle auf einen Schlag gilt, beispielsweise also, wenn das nur für den Admin möglich ist. Ich würde nämlich sehr gerne jedem Benutzer selbst die Wahl überlassen.


Natürlich kann jeder Benutzter sich sein Design selber aussuchen.Die Auswahl wird in ein Cookie geschrieben und wird ja auch bei jeden Benutzer abgespeichert.
Du kannst Dir das in meinem Forum ja mal anschauen.

http://www.das-stuebchen-forum.de/

Und ein Nacht- und Tagdesign ist auch per Javascript möglich,das zu einer bestimmten Zeit automatisch umgeschaltet wird.
Dazu lässt sich der Styleswitcher sehr gut ausnutzen.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
04.12.2013 18:28 (zuletzt bearbeitet: 04.12.2013 18:28)
avatar  Romulus
#8 RE: Styleswitcher einbauen
avatar
Mitglied

Zitat von Olaf im Beitrag #7

Natürlich kann jeder Benutzter sich sein Design selber aussuchen.Die Auswahl wird in ein Cookie geschrieben und wird ja auch bei jeden Benutzer abgespeichert.

Super, in diesem Punkt war ich mir nämlich nicht ganz sicher.

Zitat
Du kannst Dir das in meinem Forum ja mal anschauen.


Habe ich mir nun angesehen. Respekt! Da bietest Du Deinen Benutzern aber ganz schön was an.

Zitat
Und ein Nacht- und Tagdesign ist auch per Javascript möglich,das zu einer bestimmten Zeit automatisch umgeschaltet wird.
Dazu lässt sich der Styleswitcher sehr gut ausnutzen.


Ich würde das mit der automatischen Umschaltung nicht so gerne haben. Auch nachts kann man ja mal in einem sehr hell beleuchteten Zimmer am PC sitzen; da lässt man dann vielleicht doch lieber den Tageslicht-Style an. Wie gesagt: das Ganze macht ja nur Sinn, wenn man, so wie bei mir, die Hintergrundfarbe für den Boxcontent auf Weiß eingestellt hat. Ich bin da zwar um eine Nuance auf den Farbwert #F2F2F2 runtergegangen, doch mit einem Styleswitcher würde ich dann für die Tageslicht-Einstellung wieder auf #FFFFFF zurückkehren und für die zweite Einstellung dann eventuell einen noch etwas dunkleren Wert als jetzt eingeben. Dann wäre es wohl perfekt und sehr angenehm für alle Lichtverhältnisse.

Mal sehen, wann ich das dann mal in Angriff nehmen werde. Aber es ist schon einmal gut zu wissen, dass es ohne großen Aufhebens möglich ist.

Danke!!

Grüße
Aaron

www.neverface.com
Liebhaber des Business Templates

 Antworten

 Beitrag melden
25.03.2014 14:32
avatar  Demi95
#9 RE: Styleswitcher einbauen
avatar
Mitglied

Da ich das Thema ja nun vor einiger Zeit gegründet habe und es nach wie vor um dieses Thema geht, werde ich diesen Thread einfach noch einmal nutzen.
Ich habe mir nun vor einigen Teil einen Styleswitcher im Forum eingebaut, der soweit auch einwandfrei funktioniert. Nur die CSS-Datei bereitet mir nun leichte Kopfschmerzen. >.< Da ich für das zweite Design nicht nur die Farben ändern möchte, sondern auch die Grafiken austauschen will, muss das ja mit in die CSS-Datei, aber wie stelle ich das an? Wenn ich danach google bekomme ich wirklich nichts das mich auch nur ansatzweise weiter bringt. Ich habe es auch schon mit background, background-image, etc. versucht, aber es passiert gar nichts. Die Frage ist also erstens: Wie kann ich eine Grafik konkret ansprechen? Und zweitens: Wie bekomme ich sie mit einer anderen Grafik ersetzt?
Ich hoffe jemand von euch weiß da Rat, denn ich komme wirklich nicht weiter.

Liebe Grüße


 Antworten

 Beitrag melden
25.03.2014 15:22
#10 RE: Styleswitcher einbauen
avatar
Mitglied

Hi Demi.

Wenn deine CSS-Befehle richtig sind, dann erweitere sie um !important.
Das sollte helfen.
z.B. body {background: url(Link) !important;}

Zufälligerweise sind wir gerade an so einem Thema dran.
Mehr wird aber nicht verraten.

Gruß
Frank


Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

 Antworten

 Beitrag melden
25.03.2014 15:35
avatar  Demi95
#11 RE: Styleswitcher einbauen
avatar
Mitglied

Ja, das ganze mit !important zu versuchen ist mir auch schon eingefallen, nur tut sich leider trotzdem nichts.
Und auch habe ich das Problem das ich eben nicht weiß wie ich jedes Bild einzeln ansprechen soll. Sie besitzen ja keine ID oder Class. Zum Beispiel die Kategoriebilder oder allein das Kopfzeilenbild. Es muss ja klar sein welche Grafik genau ersetzt werden soll.
Außerdem frage ich mich noch etwas. Wenn ich das Ganze dann als background angebe, muss ich die eigentliche Grafik dann nicht unsichtbar machen (beispielsweise mit display: none;) damit der 'Hintergrund' überhaupt sichtbar wird? Vielleicht denke ich da aber auch einfach zu kompliziert.^^
Ginge es eigentlich einen Bildlink direkt anzusprechen? So a la:
[Bild-url] { background: url (Bild-Link/Pfad) !important;
und sie so dann auszutauschen?

Und noch eine andere kleine Frage am Rande: Weiß zufällig jemand wie ich die Farben der Linien ändern kann? <_< mit colspan bekomme ich die seitlichen (zwischen Forum und Letzte Beiträge, etc. nicht weg.

Liebe Grüße


 Antworten

 Beitrag melden
25.03.2014 15:44
#12 RE: Styleswitcher einbauen
avatar
Mitglied

Das ganze ist recht komplex.
Mit dem normalen HG geht es per body {...
In der Kopfzeile kommt es darauf an wie es eingebaut ist.
Ist es in der Admin bei Bilder&Hintergründe eingebaut,
so geht es mit .header {...
Ist das Bilder aber in Kopf-Fusszeile eingesetzt. so kommst du so nicht ran.
Dann müsste man schauen auf welche Art und Weise du das Bild eingeetzt hast und ggf. den Code dort etwas abändern.
Dann kannst du es per CSS auch wieder austauschen.

Bildlink gegen Bildlink austauschen geht so nicht.
Dazu müsstest du dir eine Funktion schreiben die deine Seite ausliest und den inhalt dann wieder ersetzt.

Machbar ist das auch wieder etwas einfacher wenn die Bilder z.B. in Div´s o.Ä. gesetzt werden die du direkt ansprechen kannst.
Aber ohne was zu sehen, kann ich nur raten.

Welche Linien meinst du?
In deiner Navi?

Gruß
Frank


Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

 Antworten

 Beitrag melden
25.03.2014 15:55
avatar  Demi95
#13 RE: Styleswitcher einbauen
avatar
Mitglied

Ohje, ohje. Ich sehe schon, ganz so einfach ist das dann doch nicht. Jetzt verstehe ich auch warum mir darauf bis jetzt noch niemand eine Antwort geben konnte.^^
Das mit dem HG ist schon erledigt.
Den Header habe ich natürlich in die Kopfzeile unter Kopf- und Fußzeile eingetragen mit folgendem Link:

1
 
<a href="Link zum Forum"><img src="Bild-URL" width="850px" height="450px" /></a>
 


Was müsste/könnte ich denn da ändern? Dem ganzen vielleicht eine ID oder Class geben?
In Kopf- Fußzeile und den Kategorien wäre das ja noch machbar (wenn das in den Kategorien dann überhaupt greift), aber bei den Bildern in der Navileiste wird das schon wieder ein kleines (oder großes) Problem.

Okay, das mit der Funktion schreiben ist wohl nicht die Option, da mich mich weder mit Javascript noch mit php im geringsten auskenne und ich auch niemanden kenne der gewillt wäre mir so etwas zu zaubern. :)

Wenn es dir helfen würde was zu sehen schicke ich einfach mal den Link zu meinem Testforum mit in dem ich momentan rumprobiere.
http://tvd-test-forum.xobor.de/

Nein, nicht in der Navigation. Auf der Startseite die senkrechten, kurzen Linien (vielleicht siehst du gleich was ich meine :) )


 Antworten

 Beitrag melden
25.03.2014 16:37
#14 RE: Styleswitcher einbauen
avatar
Mitglied

Es gäbe 2 Möglichkeiten die mir einfallen.

1
 
<div class="irgendeinname"><a href="Link zum Forum"><img src="Bild-URL" width="850px" height="450px" /></a></div>
 


1
 
<a class="irgendeinname" href="Link zum Forum"><img src="Bild-URL" width="850px" height="450px" /></a>
 



In beiden Fällen kannst du dann das Bilder per CSS beeinflussen.

1
2
 
. irgendeinname { deine Eigenschaften ;[quote="Demi95"|p7253321]<a href="Link zum Forum"><img src="Bild-URL" width="850px" height="450px" /></a>[/quote]
}
 

Gruß
Frank


Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

 Antworten

 Beitrag melden
25.03.2014 19:20
avatar  Demi95
#15 RE: Styleswitcher einbauen
avatar
Mitglied

Also an sich funktioniert es. Nur wie blende ich die einzelnen Grafken nun aus damit das jeweilige "Hintergrundbild" auf der Oberfläche erscheint? Ich kann zwar alle Bilder über img ausblenden und dann diese alle ersetzen, nur werden dann ja logischer Weise komplett alle Garfiken (Auch Avatare, etc) ausgeblendet. <_< Gibt es da irgendeinen Trick den ich noch nicht bedacht habe?

Liebe Grüße


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!