Schlagschatten und Farbverlauf hinter Text und Bildern

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten � Schlagschatten und Farbverlauf hinter Text und Bildern

Seite 1 von 2 � Seite 1 2 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Schlagschatten und Farbverlauf hinter Text und Bildern datum

24.08.2015 02:55 (zuletzt bearbeitet: 22.08.2016 10:11)

Halli Hallo, ich bins schon wieder :D

So...da ihr mir jetzt schon so oft unglaublich geholfen habt, wollte ich einfach noch mal danke sagen
Ihr habt mich jetzt mehrmals schon aus der Sch***e gezogen und hoffentlich könnt ihr das jetzt noch ein Mal.

Ich würde gerne wissen, wie ich folgendes in mein Forum einbauen kann:

Schlie�en

Ich möchte in meiner Iconbar eine Funktion mit der ich hinter meinen Text oder meinen Bildern einen Schatten/Verlauf einbauen kann.
->Er sollte abgeschlossen sein, d.h. wirklich nur für den Text oder das Bild gelten, das/den ich in dem Code mit einbinde.
->Darüber hinaus bräuchte ich beide, die auf dem Bild zusehen sind. Also einmal mit dem Verlauf nach links und rechts und nur nach unten hin.
->Wunderschön wäre es, wenn man die Farbe selbst mit den gängigen Farbcodes verändern könnte und ich nicht für jede gewünschte Farbe einen neuen Button anlegen muss. Ist es anders nicht möglich, dann würde ich selbstverständlich auch das tun. Praktischer ist allerdings das erste :D
->Die Breite sollte dem Platz entsprechen, der auch vorhanden ist. De facto sollte es nicht unbedingt neben dem Profilbild so aussehen --->

Schlie�en

So... das war meine seeehr umfangreiche Frage. Ich hoffe wirklich, dass ihr mir helfen könnt. Das würde mein Forum komplett machen, was den ästhetischen Aspekt angeht XD

Noch einmal liebe Nachtschwämer-Grüße
Jule

Wolfgang findet das Top!

Antworten

#2 | Schlagschatten und Farb-Verlauf in der Iconbar Teil 1 datum

25.08.2015 21:35 (zuletzt bearbeitet: 06.05.2023 23:34)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3200
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1113

Schlagschatten in der Iconbar Teil 1
Aktualisiert 06.05.23

Hallo Jule,
der Schlagschatten hatte mich schon immer interessiert. War bereits unter "Format & Hintergrund" in der Iconbar zu finden.
Im "Internet Explorer" funktioniert er allerdings erst ab Version 9!
Damit auch bei älteren Browserversionen eine Umrandung dargestellt wird, ist es ratsam, ein nicht so auffälligen, der Schattenfarbe entsprechenden Rand ("border:1px solid #AFAFFF") hinzuzufügen.

Schlagschatten:

In der folgenden Installation kann folgendes für den Schatten eingestellt werden:

Abstand zum Rand
Schriftfarbe
Farbe des Schattens
Breite des Schattens

Hier einige Beispiele und Möglichkeiten:

Schlagschatten fürs Forum

Foren-Code: [schatten= 50%;20px;#888888;10px;25px 0px 0px 25px;border:1px solid #888888;]Schlagschatten fürs Forum[/schatten]

Schlagschatten fürs Forum

Foren-Code: [schatten= 200px;10px;#888888;10px;0px;border:1px solid #888888;]Schlagschatten fürs Forum[/schatten]

Schlagschatten fürs Forum

Foren-Code: [schatten= 300px;10px;#8888FF;10px;15px 15px 0px 0px;border:1px solid #8888FF;][center]Schlagschatten fürs Forum[/center][/schatten]

Schatten

Foren-Code: [schatten=44px;24px 20px 20px 4px;#FFE628;30px;100px;border:1px solid #FFE628;][b]Schatten[/b][/schatten]

Schlagschatten fürs Forum

Foren-Code: [schatten=180px;10px;#FF8400;100px;25px;border:1px solid #FF8400;][i]Schlagschatten fürs Forum[/i][/schatten]

Schlie�en

Foren-Code:
[schatten=100px;0px;#8888ff;10px;0px;border:1px solid #8888ff;][img=100px]https://files.homepagemodules.de/b104774/a_541_913f58de.png[/img][/schatten]

Foren-Code:
[schatten=100px;0px;#FF8400;100px;25px;border:1px solid #FF8400;][img=100px]https://files.homepagemodules.de/b104774/a_541_913f58de.png[/img][/schatten]

Schlie�en

Installation Schlagschatten!

1
2
3
4
5
 

<div style="width: 200px; padding: 10px; box-shadow:1px 1px 10px 3px #888888 !important; border-radius: 2px;border:1px solid #888888;">
Text mit Schlagschatten
</div>
 
 

Schlie�en

Foren-Code umsetzen:

Der Foren-Code wird unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter 'Foren-Code' " eingetragen.
Es ist darauf zu achten, dass der erweiterte Foren-Code eingeblendet ist.
Eintragung erfolgt in "Ersetze:" und "Mit:"
Der zusätzliche Rand ("border: ....") braucht in der Code-Umsetzung nicht extra berücksichtigt zu werden

Ersetze:

1
2
3
 
[schatten={{breite}};{{abstand}};{{color}};{{sbreite}};{{sradius}};]
...
[/schatten]
 

Mit:

1
2
3
 
<div style="width:{{breite}};padding:{{abstand}};box-shadow:1px 1px {{sbreite}} 3px {{color}} !important;border-radius:{{sradius}};">
...
</div>
 

Der Foren-Code sieht dann so aus:
Die Werte sind von links nach recht aufgelistet und durch ein Semikolon getrennt: Die Breite der Box; Abstand zum Schatten; Schattenfarbe; Schattenstärke und Rundung der Ecken;

Breite in % oder Pixel - 100% enspricht gesamte Breite der Beiträge
Der Abstand zum Schatten kann auch aufgeteilt werden (10px 20px 10px 20px / top, right, bottom, left)
Die Radien der Ecken können auch aufgeteilt werden (10px 0px 0px 10px / links-oben, rechts-oben, rechts-unten, links-unten)
Der Rand kann im Foren-Code einfach hinzugefügt werden und sollte die Farbe des Schatten aufweisen

[schatten=200px;10px;#888888;10px;2px;border:1px solid #888888;] ... [/schatten]

Schlie�en

  • Unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter HTML" und "HTML" den folgenden Code einsetzen.
  • Unter "Name" einen Namen vergeben.
  • Fertig!

Jetzt braucht nur noch der Text oder das Bild markiert zu werden und mit einem Klick auf die Grafik, wird der Foren-Code in den Beitrag eingefügt!

Schlie�en

  • DropDown-Menü unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter HTML" anlegen.
  • Unter "Name" Namen vergeben, z.B. "Schlagschatten".
  • Unter " Iconbar bearbeiten > Reiter HTML" und "HTML" den folgenden Code eintragen.
  • Oder Zeile 4 in ein vorhandenes DropDown-Menü kopieren.
  • Fertig!

1
2
3
4
5
6
 
<select name="format" onchange="top.location = this.options[this.selectedIndex].value;this.options[0].selected = true;">
<option value="#" selected="selected">Format</option>
<optgroup label="Schatten"> <!-- Überschrift - nicht unbedingt notwendig -->
<option value="javascript:insert('[schatten=200px;10px;#888888;10px;2px;[orange]border:1px solid #888888[/orange];]','[/schatten]')">Schlagschatten</option> 
</optgroup>
</select>
 

Jetzt braucht nur noch der Text oder das Bild markiert zu werden und mit einem Klick auf die Zeile im Auswahlmenü, wird der Foren-Code in den Beitrag eingefügt!

Schlie�en

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

Link im Forum:
Schlagschatten für alle Button im Forum

Wolfgang

Antworten

#3 | Schlagschatten und Farb-Verlauf in der Iconbar Teil 2 datum

27.08.2015 19:15 (zuletzt bearbeitet: 05.12.2018 23:54)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3200
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1113

Farb-Verlauf in der Iconbar Teil 2
Aktualisiert 05.12.18

Hallo Jule,
jetzt ist der Farb-Verlauf dran.
Mit dem "CSS Gradient" kann ein Verlauf rein auf der Basis von HTML und CSS erzeugt werden.
Den Farb-Verlauf habe ich bereits unter "Format und Hintergrund" in die Iconbar zum Testen eingebaut!
Da der Farbverlauf als CSS in ältere Browser noch nicht funktioniert, ist es gut und einfach, eine Hintergrundfarbe zu setzen.

Farb-Verlauf:
In der Installation kann für den Farb-Verlauf folgendes eingestellt werden:

Farb-Verlauf in allen Richtungen
Unterschiedliche Farben für den Verlauf
Farbstop für die jeweils einzelne Farbe
Abstand zur Rand
Breite des gesamten Farbverlaufs

Hier einige Beispiele und Möglichkeiten:

Farb-Verlauf

Forum-Code: [verlauf=0deg,#011451, #243F9A 90%;200px;20px;#ffffff;background-color:#011451;]Farb-Verlauf[/verlauf]

Farb-Verlauf

Forum-Code: [verlauf=90deg,#011451 5%, #243F9A 50%, #011451 95%;200px;20px;#ffffff;background-color:#011451;]Farb-Verlauf[/verlauf]

Farb-Verlauf

Forum-Code: [verlauf=45deg,#011451 10%, #243F9A, #011451 90%;200px;20px;#ffffff;background-color:#011451;]Farb-Verlauf[/verlauf]

Farb-Verlauf

Forum-Code: [verlauf=90deg,#011451, #243F9A ;200px;20px;#ffffff;background-color:#011451;]Farb-Verlauf[/verlauf]

Farb-Verlauf

Forum-Code: [verlauf=0deg,#011451 5%, #243F9A 50%, #011451 95%;200px;20px;#ffffff;background-color:#011451;]Farb-Verlauf[/verlauf]

Schlie�en

Installation Farb-Verlauf!

Der Farbverlauf als CSS funktioniert im "Internet Explorer" erst ab "Version 10". Deswegen ist es gut und einfach, eine Hintergrundfarbe, auch für alle anderen ältere Browser zu setzen.
Mit "background-color:#011451" und der ersten Gradienten-Farbe (hier #011451) ist das Problem gelöst.

1
2
3
4
 
<div style="background-image: linear-gradient(180deg, #011451, #243F9A 50%, #011451); width:200px; padding:30px; color:#ffffff;background-color:#011451;">
<b>Text mit Farbverlauf</b>
</div>
 
 

Schlie�en

Forencode umsetzen:
  • Der Forencode wird unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter 'Foren-Code' " eingetragen.
  • "background-color" braucht in der Umsetzung nicht berücksichtigt werden, da es ihn als BB_Code schon gibt!
  • Es ist darauf zu achten, dass der erweiterte Foren-Code eingeblendet ist.
  • Eintragung erfolgt in "Ersetze:" und "Mit:"

Ersetze:

1
2
3
 
[verlauf={{verlauf}};{{vbreite}};{{abstand}};]
...
[/verlauf]
 

Mit:

1
2
3
 
<div style="background-image: linear-gradient({{verlauf}});width:{{vbreite}};padding:{{abstand}};color:{{fontfarbe}});">
...
</div>
 

Der Forencode sieht dann so aus:
Die Werte werden von links nach recht aufgelistet und durch ein Semkolon, "Gradient-Werte" durch ein Komma getrennt.

Reihenfolge Foren-Code: Werte des "Gradient-Verlaufs"; Breite des Farbverlaufs; Abstand zum Rand; Schriftfarbe;

Es ist möglich beliebig viele Farben einzutragen
Jede Farbe kann mit einem Farbstopp (in %) versehen werden und bestimmt dadurch die Verlauflänge der einzelnen Farbe.
Der Kreiswinkel am Anfang bestimmt die Richtung des Farbverlaufs.
Breite in % oder Pixel - 100% enspricht gesamte Breite der Beiträge
Der Abstand zum Rand kann auch aufgeteilt werden (10px 20px 10px 20px / top, right, bottom, left)

[verlauf=180deg,#011451, #243F9A 50%, #011451;400px;30px;#DDDDDD;background-color:#011451;] ... [/verlauf]

Schlie�en

  • Unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter 'HTML' " den folgenden Code einsetzen.
  • Unter "Name" eine Bezeichnung eintragen.
  • Fertig!

Jetzt braucht nur noch der Text markiert zu werden und mit einem Klick auf die Grafik wird der Forum-Code in den Beitrag eingefügt!

Schlie�en

  • DropDown-Menü unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter 'HTML' " anlegen.
  • Namen vergeben z.B. "Verlauf".
  • Unter " Iconbar bearbeiten > Reiter 'HTML' " den folgenden Code eintragen.
  • Oder Zeile 4 in ein vorhandenes DropDown-Menü kopieren.
  • Fertig!

1
2
3
4
5
6
 
<select name="format" onchange="top.location = this.options[this.selectedIndex].value;this.options[0].selected = true;">
<option value="#" selected="selected">Format</option>
<optgroup label="Farb-Verlauf"> <!-- Überschrift - nicht unbedingt notwendig -->
<option value="javascript:insert('[verlauf=180deg,#011451, #243F9A 50%, #011451;400px;30px;#DDDDDD;background-color:#011451;]','[/verlauf]')">Farb-Verlauf</option> 
</optgroup>
</select>
 

Jetzt braucht nur noch der Text markiert zu werden und mit einem Klick auf die Zeile im Auswahlmenü wird der Forum-Code in den Beitrag eingefügt!

Schlie�en

Um diesen Beitrag zu lesen, m�ssen Sie sich anmelden!

Ein kleines Dankesch�n f�r meine Arbeit!

Wissenswerte zum Farbverlauf mit CSS - Gradient:
CSS Gradient � Verlauf als Hintergrundbild
CSS Gradient Generator auf {CSS} Portal

Wolfgang

Antworten

#4 | RE: Schlagschatten und Farb-Verlauf in der Iconbar Teil 2 datum

28.08.2015 09:53

DJ-Frechdax

Informationen anzeigen

Beitr�ge:	29
Registriert seit:	19.07.2015

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	4

ich nutze für meine boxheader folgenden verlauf

und würde diesen gerne als admin so wie du das hier hast als hintergrund nutzen

bekomme es aber einfach nicht gebacken und habs wieder ausgebaut
wie du weist nutze ich deine super ICONbar allerdings fehlt da die lupe und mousehover

1
2
3
4
5
6
7
8
9
10
11
12
 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f3e2c7+0,c19e67+50,b68d4c+51,e9d4b3+100;L+Brown+3D */
background: rgb(243,226,199); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmM2UyYzciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjMTllNjciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNiNjhkNGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTlkNGIzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)!important;
background: -moz-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%)!important; /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)))!important; /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 )!important; /* IE6-8 fallback on horizontal gradient */
 
 

Schlie�en

MFG DJ-Frechdax

Antworten

#5 | Farb-Verlauf nur für den Admin datum

29.08.2015 15:48 (zuletzt bearbeitet: 09.07.2016 11:45)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3200
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1113

Farb-Verlauf nur für den Admin

Hallo DJ,
Du hast da ja einen riesigen Eintrag für den Hintergrund genutzt.
Ich frage mich, ob man wirklich so weit mit den Browser-Version zurückgehen muss.

Folgendes ist zu beachten!

Für Deinen Fall muss der CSS-Eintrag abgespeckt werden!
Ich habe Zeile 1-5 und die Kommentare herausgenommen
Die CSS, wenn sie mit "style" umgesetzt wird, muss ohne Absatz, als eine Zeile eingetragen werden!

Forencode umsetzen:
  • Der Forencode wird unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter 'Foren-Code' " eingetragen.
  • Es ist darauf zu achten, dass der erweiterte Foren-Code eingeblendet ist.
  • Eintragung erfolgt in "Ersetze:" und "Mit:"

Ersetze:

1
2
3
 
[bg_admin]
...
[/bg_admin]
 

Mit:

1
2
3
 
<div style="background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)))!important; background: -webkit-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; background: -o-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; background: -ms-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; background: radial-gradient(ellipse at center,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 )!important;">
...
</div>
 

Der Forencode sieht dann so aus:

[bg_admin] ... [/bg_admin]

Schlie�en

  • DropDown-Menü unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter 'HTML' " anlegen.
  • Namen vergeben z.B. "Admin-BG".
  • Unter " Iconbar bearbeiten > Reiter 'HTML' " den folgenden Code eintragen.
  • Oder Zeile 4 in ein vorhandenes DropDown-Menü kopieren.
  • class="admin" macht den Eintrag nur für den Admin sichtbar!
  • Fertig!

1
2
3
4
5
6
 
<select name="format" onchange="top.location = this.options[this.selectedIndex].value;this.options[0].selected = true;">
<option value="#" selected="selected">Format</option>
<optgroup class="admin" label="Admin-BG"> <!-- Überschrift - nicht unbedingt notwendig -->
<option class="admin"  value="javascript:insert('[bg_admin]','[/bg_admin]')">Admin-BG</option> 
</optgroup>
</select>
 

Jetzt braucht nur noch der Text markiert zu werden und mit einem Klick auf die Zeile im Auswahlmenü wird der Forum-Code in den Beitrag eingefügt!

Schlie�en

Wenn nur der Admin das Hintergrundbild nutzen darf, ist noch der folgender Eintrag notwendig.

Die CSS-Eintragungen funktionieren nur im Template und nicht in "Eigenen CSS Code"
Obere Leiste unter "Admin > Template Entwicklung > [edit] > Obere Leiste" öffnen
Folgende Eintragungen im Bereich "<head> & </head>" eintragen
Die Klasse ".admin" macht den Eintrag nur für den Admin sichtbar!

1
2
3
4
5
6
7
8
9
10
11
 
<style type="text/css">
{{user_admin==true.start}}
.admin {
display: block;
}
{{user_admin==true.else}}
.admin {
display: none;
}
{{user_admin==true.end}}
</style>
 

Schlie�en

Wichtige Links aus dem Forum:
Verschiedene Benutzergruppen in der Symbolbar

Wolfgang

DJ-Frechdax findet das Top!

Antworten

#6 | RE: Farb-Verlauf nur für den Admin datum

29.08.2015 21:35 (zuletzt bearbeitet: 29.08.2015 21:57)

DJ-Frechdax

Informationen anzeigen

Beitr�ge:	29
Registriert seit:	19.07.2015

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	4

erst mal vielen lieben dank für deine mühe das gefällt mir sehr gut
den code dafür hatte ich hier her

https://www.colorzilla.com/gradient-editor/

ne frage zum css eintrag
c nutze deine baustelle dort gibt es ja 2elemente die eingefügt werden sollten im PI
dort gibts nen eintrag Obere Leiste
da befindet sich auch so was wie z.b.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<style type="text/css">
	{{user_admin==true.start}}
	.admin {
		display: block !important;
	}
	.baustellenschild {
		width: {{plugin_beitragbaustelle_config_schildheight}}px !important;
	}
	
	{{user_admin==true.else}}
	.admin {
		display: none !important;
	}
	
	{{user_admin==true.end}}
	
	.baustellenhinweis {
		background-color:{{plugin_baustelle_config_balkenfarbe}} !important;
		padding:2px !important;
		border:2px solid {{plugin_baustelle_config_borderfarbe}} !important;
		color:{{plugin_baustelle_config_txtcolor}} !important;
		border-radius:8px !important;
		margin-top: 5px !important;
	}
		
  
  
  
   
</style>
 

Schlie�en

bekomme ich da keine probleme damit?

EDIT:

Habe die classe in adminbg umbenannt und in ein PI gesteckt
foben_footer

klappt perfekto

kann ich den text irgendwie mit css noch ändern als der dann da drauf liegt
z.B.
zentriert...farbe schwarz..dicke schrift uw?

MFG DJ-Frechdax

Antworten

#7 | Farb-Verlauf für den Admin mit eigener CSS datum

29.08.2015 23:10 (zuletzt bearbeitet: 05.12.2018 23:55)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3200
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1113

Farb-Verlauf für den Admin mit eigener CSS

Hallo DJ,
es gibt 2 Lösungen!

Lösungen 1:
Du kannst "style" erweitern, musst aber noch den Eintrag "background: ..." weiter abspecken.
Am besten den Filter-Eintrag. Ich denke der IE 8 hätte noch andere schwerwiegende Korrekturen notwendig.
Ich habe jetzt noch "Farbe, Größe und den gewünschten Rand hinzu gegeben.

1
2
3
 
[bg_admin]
...
[/bg_admin]
 

Mit:

1
2
3
4
 
<div style="color:#734b0a;font-size:15px;border:1px solid  #300706;padding:9px;background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)))!important; background: -webkit-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; background: -o-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; background: -ms-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; background: radial-gradient(ellipse at center,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important;">
...
</div>
 
 

Schlie�en

Lösung 2:

Du kannst auch eine neue Klasse aufstellen, z.B. class="admin_form" und hier alles hineinfügen.
".admin_form" kann in "Eigener CSS Code" platziert werden!
Ganz wichtig! Da in der Iconbar sich noch ein Fehler versteckt, zur Sicherheit unter "Reihenfolge" eine "0" eintragen.

1
2
3
 
[bg_admin]
...
[/bg_admin]
 

Mit:

1
2
3
4
 
<div class="admin_form">
...
</div>
 
 

Reihenfolge:

1
2
 
Weitere Einstellungen
Reihenfolge: 0
 

CSS in "Eigener CSS Code":

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.admin_form {
border-radius: 12px ;
box-shadow: 5px 3px 10px grey;
color:#734b0a;
font-size:15px;
border:1px solid  #300706;
padding:19px;
 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)))!important; 
background: -webkit-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; 
background: -o-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; 
background: -ms-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; 
background: radial-gradient(ellipse at center,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important;
}
 

Schlie�en

Wolfgang

DJ-Frechdax findet das Top!

Antworten

#8 | RE: Farb-Verlauf nur für den Admin datum

30.08.2015 00:18 (zuletzt bearbeitet: 30.08.2015 01:27)

DJ-Frechdax

Informationen anzeigen

Beitr�ge:	29
Registriert seit:	19.07.2015

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	4

die 2te lösung ist für mich die bessere

genau so wollte ich es

habe gleich noch mehr css dazu gepackt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<style type="text/css">
{{user_admin==true.start}}
.adminbg {
display: block;
}
{{user_admin==true.else}}
.adminbg {
display: none;
}
{{user_admin==true.end}}
  
  
.admin_form {
    color:#000000;
    max-width: 600px;
    font-size:18px;
    border:2px solid  #300706;
    text-align: center;
    font-weight: bold;
    padding: 9px;
    border-radius: 12px 12px 12px 12px !important;
    text-shadow:  2px  1px 1px grey;
    box-shadow: 5px 3px 10px grey !important;
     -moz-box-shadow: 10px 10px 10px grey !important;
     -o-box-shadow: 10px 10px 10px grey !important;
     -webkit-box-shadow: 10px 10px 10px grey !important;
     -khtml-box-shadow: 10px 10px 10px grey !important;
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)))!important; 
background: -webkit-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; 
background: -o-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; 
background: -ms-radial-gradient(center, ellipse cover,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important; 
background: radial-gradient(ellipse at center,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%)!important;
}
</style>
 

Schlie�en

MFG DJ-Frechdax

Wolfgang findet das Top!

Antworten

#9 | RE: Farb-Verlauf nur für den Admin datum

31.08.2015 16:25

Alles klar XD

Schon mal ganz lieben Dank, für die vielen und ausführlichen Antworten. Hatte in letzter Zeit aber kaum Zeit an meinem Forum zu arbeiten und werde es wohl erst die Tage schaffen.
Werde aber, wenn ich mich wieder dran gesetzt habe, noch mal ein ausführliches FeedBack geben ^-^

LG
Julchen

Wolfgang findet das Top!

Antworten

#10 | Schlagschatten und Farb-Verlauf in der Iconbar aktualisiert! datum

29.09.2015 10:45 (zuletzt bearbeitet: 05.12.2018 23:55)

Schlagschatten und Farb-Verlauf in der Iconbar aktualisiert!

Habe die Beiträge für den Schlagschatten (Teil 1) und den Farbverlauf (Teil 2) mit einer einfachen Variante so aktualisiert, das ältere Browser auch etwas anzeigen!

Beim Schlagschatten wird einfach der Schattenfarbe entsprechen ein Rand (z.B.: border: 1px solid #888888) hinzugefügt. Fällt kaum auf und stört so gut wie garnicht den Schlagschatten.
Beim Verlauf kommt einfach ein Hintergrundfarbe (z.B.: background-Color:#2222AA) hinzu. wird der Verlauf nicht angezeigt tritt wie bei einem anderen Bild die Hintergrundfarbe in den Vordergrund! h

Bis dann

Wolfgang

Antworten

Kuriositäten mit Forum-Links � � @Wolfgang "Newsticker"

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Positionierung von Farbverläufen und Scrollboxen?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Babs0212 4 17.04.2022 16:10
Babs0212 • Zugriffe: 303
Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 17 05.06.2022 11:39
844er • Zugriffe: 6229

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang

29.08.2020 19:05
von

Wolfgang • Zugriffe: 2111

Farbverlauf - Ich brauche Hilfe bei der Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Denis Wolf 4 18.08.2017 11:08
Wolfgang • Zugriffe: 1378

Transparenz-Effekte - Text und Bilder auf transparenten Hintergrundbildern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

01.04.2023 18:04
von

Kipper-Spedition • Zugriffe: 1924

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 19799

Texte, Sätze und Bilder mit einem Klick aus- und einblenden!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

26.05.2018 00:56
von

Wolfgang • Zugriffe: 2005

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

103%