Styling von Textwidgets

Hi,

Anderen Hintergrundfarben, Hintergrundbilder etc. sollte man ohne Probleme nutzen können, da man ja auch HTML in den Textwidgets verwenden kann.

http://de.selfhtml.org/css/eigenschaften/index.htm

Ob es dann auch den gewünschten Effekt erzielt, hängt aber trotzdem im Endeffekt vom gewähltem Theme ab, da das Aussehen der Sidebar ja auch über die im Theme enthaltene CSS-Datei definiert wird.

Wenn dort, mal recht übertrieben ausgedrückt, eine dicke Pinkfarbene Umrandung definiert ist und du dann mit Grellgrünem Hintergrund ankommst, kann man sich ja vorstellen, dass dieses eventuell nicht so prickelnd ist, falls du verstehst, worauf ich hinaus will. ;)

Richtig. ;)

Hi,

Ich habe da mal etwas vorbereitet. ;)

Für die Hintergrundfarbe habe ich diesen Code verwendet;

<style type="text/css">.hintergrund { background-color:#20e20e }</style />
<p class="hintergrund">[B]Testeintrag<br />Um mal zu schauen, wie so etwas aussieht.[/B]

Das fettgedruckte ist der Bereich, wo der Textinhalt eingetragen wird, der im Textwidget angezeigt werden soll.

Für eine Hintergrundgrafik habe ich diesen Code verwendet;

<div style="background-image:url(http://www.google.de/logos/2011/pierre_de_fermat-2011-hp.jpg); margin:0px; padding:10px" />
<p>[B]Der Text<br />ist aber jetzt nicht so gut zu sehen, also dann besser eine andere Grafik.[/B]</div />

Beim oberen Code wird eine CSS Klasse mit der Bezeichnung hintergrund angelegt und dort dann die Hintergrundfarbe durch den mit der # versehenen Sechs Stelligen Hexcode vergeben.
Es gehen auch 3 Stellen, wie zum Beispiel #fff für Weiß, aber ich kann jetzt nicht genau sagen, ob dies auch für Zwischentöne geht, da müsste man mal nach Farbtabellen suchen.
Du musst bei den Klassenbezeichnungen eigentlich nur eine Regel beachten.
Keine Klassenbezeichnung darf doppelt vergeben werden.

Und so sieht das ganze dann in Aktion bei meiner Lokalen Installation aus;
http://imageshack.us/photo/my-images/705/textwidgets.jpg/

Ich hoffe ich habe es jetzt nicht zu kompliziert gemacht und konnte dir ein wenig weiterhelfen. ;)

Hi,

nachdem die Gewitterfront mal so langsam weiterzieht, kann man auch mal wieder etwas besser nachdenken. ;)

Mir ist aufgefallen, dass du zwar für die Links eine Klasse erstellt hattest, diese aber nicht angewendet hast.

Laut diverser Tutorials, die ich zu diesem Thema gefunden habe, müsste die Definition auch ein klein wenig anders aufgebaut werden.

Ich habe das ganze unter Berücksichtigung der Tutorials mal so versucht und es hat in meinem Testblog hingehauen.
Die Änderungen habe ich mal hervorgehoben.

<style type="text/css">.hintergrund { background-color:#fff673} 
[B][COLOR=Red]a.datev:link[/COLOR][/B]  {
    color: #FF0000;
    text-decoration: underline !important;
}
[B][COLOR=Red]a.datev:active[/COLOR][/B] {
    color: #FF0000;
    text-decoration: underline !important;
}
</style >
<p class="hintergrund">BlaBlaBla
 <a  href="http://www.xy.ab" [COLOR=Red][B]class="datev"[/B][/COLOR]>Link1</a>
<a href="http://www.xy.ab" [B][COLOR=Red]class="datev"[/COLOR][/B]>Link2</a>
</p>

Hi Sabiene,

Was hattest du denn in Sachen Darstellung bei den Links genau geplant?

Möglich ist ja (fast) alles. ;)