Sie sind nicht angemeldet.

Grafik als Kategorielink

  • 1
  • 2

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

21

Freitag, 16. Juli 2010, 15:29

Zitat

Zitat

Mache ich das per html ist die Grafik in allen Styles drin und das will ich nicht.


Mach es doch per HTMl in die beschreibung rein, und blende es in den Stilen, in denen es nicht sichtbar sein soll, mit CSS wieder aus ?!

Sagst du uns auch den code dazu, so das aber der Kateorielink trotz dessen angezeigt wird nur halt das Bild nicht???

SilverSystem

Co-Administrator

  • »SilverSystem« ist männlich

Beiträge: 2 685

Beruf: Student

Forenversion: WBBLite 2.1.x
WBB 3.1.x

  • Nachricht senden

22

Freitag, 16. Juli 2010, 16:05

Zitat von »meru«

Ja und genau das ist es was ich eben nicht will. Ich möchte, falls möglich das Bild NICHT als HTML Code in die Beschreibung einfügen, sondern per CSS. Falls es eben möglich ist, das war meine Frage.
Das ist problemlos möglich. Je nachdem wie du es haben willst musst du auch den CSS Code anpassen.

Die Grundsyntax würde so aussehen:

Cascading Style Sheet

 
1
2
3

.board<boardNumber> {
background-image: url('<Link to image>') !important;
}


Nun musst du in den Quellcode schauen und dir dort die passenden .board Klassen herausholen. Du hast nun z.B.: die Kategorie "Support" und möchstest hier eine eigene Hintergrundgrafik einfügen. Der Quellcode würde im Wbblite 2.1.0 Beta so :

HTML

 
1

<div class="containerHead boardlistInner board1">


und im Wbblite 2.0.1 so

HTML

 
1

<div class="boardlistInner container-1 board2">


anfangen.

Wichtig ist dabei nur das "board2" bzw. "board1".

Also würde die CSS Klasse demnach in der Praxis so aussehen:

Cascading Style Sheet

 
1
2
3

.board4 {
background-image: url('http://wbblite.com/wcf/images/wbblite2.de/logo.png') !important; 
}

Kontakt | Nutzungsbestimmungen | FAQ | WBBLite.com Team

Kein Support per PM, Skype, Mail, IRC, etc.

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

23

Samstag, 17. Juli 2010, 09:49

Wow danke für die Super Erklärung, werd ich mal ausprobieren...
Nu hab ich aber noch eine andere Frage, wobei ich hoffe das mich die Admins und Mods net steinigen...
Ist es auch möglich per CSS eine Header Tabelle zu realisieren???

Edit: Es klappt zwar soweit aber das Bild wird halb durch ein Forum geschluckt.
Trotz Margin left, right, top, bottom etc. keine änderung... :-(

Hier mal der Code den ich genommen habe...


.board1 {
background-image: url("http://img215.imageshack.us/img215/5343/rundo.png") !important;
margin-left: -42px;
margin-top: -20px;
margin-bottom: -20px,
}

Was zum Teufel läuft da schief??? ;(

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Raven Callahan« (17. Juli 2010, 10:56)

SilverSystem

Co-Administrator

  • »SilverSystem« ist männlich

Beiträge: 2 685

Beruf: Student

Forenversion: WBBLite 2.1.x
WBB 3.1.x

  • Nachricht senden

24

Samstag, 17. Juli 2010, 11:05

Zitat von »Raven Callahan«

Ist es auch möglich per CSS eine Header Tabelle zu realisieren???

8o :D - Ne, sowas kannst du nur mittels Templates machen. Würde ich dir aber nicht empfehlen, da du sonst Probleme mit Plugins bekommen könntest ;)

Zu deinem Problem: Bitte bei solchen Sachen immer einen Screenshoot posten damit ich den fehler genau rekonstruieren kann. Ich weiß nicht: WElche Grafik du benutzt bzw, wie du sie einsetzen möchtest.

Kontakt | Nutzungsbestimmungen | FAQ | WBBLite.com Team

Kein Support per PM, Skype, Mail, IRC, etc.

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

25

Samstag, 17. Juli 2010, 11:21

Zitat von »SilverSystem«

Zitat von »Raven Callahan«

Ist es auch möglich per CSS eine Header Tabelle zu realisieren???

8o :D - Ne, sowas kannst du nur mittels Templates machen. Würde ich dir aber nicht empfehlen, da du sonst Probleme mit Plugins bekommen könntest ;)

Zu deinem Problem: Bitte bei solchen Sachen immer einen Screenshoot posten damit ich den fehler genau rekonstruieren kann. Ich weiß nicht: WElche Grafik du benutzt bzw, wie du sie einsetzen möchtest.
Habe mal 2 Screenis angehangen.
Der erste zeigt das Bild wie es jetzt aussieht, mittels des CSS Codes und das 2. Bild wie es aussehen soll ( da habe ich die HTML Codes noch in den Forenbeschreibungen)
»Raven Callahan« hat folgende Dateien angehängt:

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Raven Callahan« (17. Juli 2010, 11:35)

SilverSystem

Co-Administrator

  • »SilverSystem« ist männlich

Beiträge: 2 685

Beruf: Student

Forenversion: WBBLite 2.1.x
WBB 3.1.x

  • Nachricht senden

26

Samstag, 17. Juli 2010, 12:36

Alles klar - ja, mir Margin kommst du da nicht weit ;)

Versuch's mal mit dieser Möglichkeit (zwecks Vollständigkeit packe ich den gesammten CSS Code noch einmal hinein):

Cascading Style Sheet

 
1
2
3
4
5
6

.board1 {
background-image: url('<Logo Url>') !important;
background-repeat: no-repeat;
background-position: center;
padding: 30px;
}


Dieser Code bewirkt nun, dass sich das Hintergrundbild nicht wiederholt und es mittig ausgerichtet wird. Am wichtigsten für dich ist hier der "padding" (=Innenabstand) Tag. Hier musst du dann natürlich noch mit dem Wert spielen, solange bis er eben passt. ;)

Kontakt | Nutzungsbestimmungen | FAQ | WBBLite.com Team

Kein Support per PM, Skype, Mail, IRC, etc.

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

27

Samstag, 17. Juli 2010, 13:06

Du bist ein Schatz.
Dankäääääääääääää es klappt wunderbar....

meru

Schüler

Beiträge: 30

  • Nachricht senden

28

Samstag, 17. Juli 2010, 13:14

Zitat von »SilverSystem«

Also würde die CSS Klasse demnach in der Praxis so aussehen:

Cascading Style Sheet

 
1
2
3

.board4 {
background-image: url('http://wbblite.com/wcf/images/wbblite2.de/logo.png') !important; 
}
Erstmal Dankeschön für den Code :thumbsup:
Ich habe jetzt bei mir in der CSS folgendes stehen :

Cascading Style Sheet

 
1
2
3

.board8 {
background-image: url('http://i25.tinypic.com/21mww9e.png') !important; 
}


Das sollte die 2. Kategorie hier im Forum sein : http://www.vision-board.de/boards/grafiktempelstyles (Style GT_mod_green)

Aber wie man sieht, sieht man nur einen kleinen Teil der Testgrafik, eigentlich ist sie viel größer?
Hab ich was falsch gemacht? 8|


Edit : Ich war zu langsam....:D
Also muss ich den Code so für mich übernehem und die 30 da nur solange ändern bis es rein passt?

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

29

Samstag, 17. Juli 2010, 13:19

Japps genau..
Ich musste bei mir das center vom Background ändern in top damit auch oben der orangene Streifen verschwand, nun passt es aber...

meru

Schüler

Beiträge: 30

  • Nachricht senden

30

Samstag, 17. Juli 2010, 13:24

Es hat geklappt!
Herrlich! Vielen Dank an euch für die tolle Hilfe!

Mensch, das eröffnet ganz neue Stylemöglichkeiten....

*basteln geh* :D

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

31

Samstag, 17. Juli 2010, 13:29

das sag ich dir...
geh nu auch weiter basteln...

Danke an alle..

SilverSystem

Co-Administrator

  • »SilverSystem« ist männlich

Beiträge: 2 685

Beruf: Student

Forenversion: WBBLite 2.1.x
WBB 3.1.x

  • Nachricht senden

32

Samstag, 17. Juli 2010, 15:28

Gern geschehen ^^

Ja, dank der Barrierefreiheit von Woltlab kannst du mit CSS da unheimlich viel rausholen ohne lästig irgend welche Templates ändern zu müssen

Kontakt | Nutzungsbestimmungen | FAQ | WBBLite.com Team

Kein Support per PM, Skype, Mail, IRC, etc.

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

33

Samstag, 17. Juli 2010, 17:04

Da hast du recht ^^
Nur mit der Tabelle klappts net aber was solls ;-)
Man kann net alles haben... :D

Peace

Schüler

  • »Peace« ist männlich

Beiträge: 109

  • Nachricht senden

34

Montag, 19. Juli 2010, 23:21

Wie mache ich nun eigentlich den Link per CSS klickbar? xD
Ich hab 0 plan von CSS, daher Frage ich ^^

Wie sieht es denn auch aus mit Foren?
Ich bekomm ja auch eine einzellne Grafik per CSS in ein Forum, aber ich bekomme den Link davon nicht weg und auch die Anpassung fällt mir schwer...
Könnte man da von dem Einzellnen Forum auch die Icon Grafik ausblenden lassen per css?

Freue mich über Antwort =)

Lg
Peace

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

35

Dienstag, 20. Juli 2010, 00:23

Ja das kann man.
Ich such morgen mal den Code raus und schick ihm dir...
Werd jetzt ins Bett gehen hatte heute nämlich ne Begegnung mit einer Hummel die hat gleich 3 mal zugestochen -.-

Kaoru Kasuga

Fortgeschrittener

  • »Kaoru Kasuga« ist männlich

Beiträge: 205

Wohnort: Bremen

Beruf: Schüler

Forenversion: WBBLite 2.1.x

  • Nachricht senden

36

Dienstag, 20. Juli 2010, 02:36

Ich schmeiße mein Dankeschön einfach mal in die Runde, hat bei mir alles beim ersten Versuch geklappt und sieht super aus.
Das mit den Verlinkungen würde mich halt noch freuen. =)

Raven Callahan

Schüler

  • »Raven Callahan« ist weiblich

Beiträge: 124

Wohnort: In der Gruft nebenan...

Forenversion: WBBLite 2.1.x

  • Nachricht senden

37

Dienstag, 20. Juli 2010, 08:02

Ich denke mit CSS ist das nicht machbar.
Da muss wohl was in den Templates geändert werden.

Simmyh

Anfänger

Beiträge: 7

Forenversion: WBBLite 2.1.x

  • Nachricht senden

38

Samstag, 4. Februar 2012, 15:48

Hallo ihr Lieben,

ich muss dieses "alte" Thema aufgreifen, weil ich gerade irgendwie ein Brett vor dem Kopf hab.

Zuerst hatte ich in meinem Board einen Style, dort hatte ich in der Kategoriebeschreibeung via < img src > und html erlauben Bilder für die Kategorieüberschriften eingefügt.

Jetzt, da ich einen zweiten Style erstellt habe, möchte ich die Bilder aus Style 1 natürlich ändern - und habe das auch mit folgendem Code versucht:

Quellcode

 
1
2
3
4
5

.board1 {
background-image: url('http://i1052.photobucket.com/albums/s445/21centurycure/kategorie1.jpg') !important;
background-repeat: no-repeat;
background-position: center;
}


Irgendwie klappt das aber einfach nicht. Es bleibt immer die Grafik von Style 1 zu sehen. Ich hab schon eine Ahnung, wo das Problem liegt, aber eine Lösung will mir einfach nicht einfallen *seufz*

Wie kann ich denn den o.g. Code so "hinbiegen", dass er zwischen Style 1 und Style 2 unterscheidet?


Liebe Grüße und Danke für eure Hilfe vorab!


EDIT: Hab grad meinen Denkfehler bemerkt und geh mich mal ne Runde schämen ;( Klappt jetz alles wunderbar!

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Simmyh« (4. Februar 2012, 17:03)

  • 1
  • 2

Ähnliche Themen