Änderung der Forenüberschriften (index)

saen

Hallo ihr lieben,

ich hoffe ihr versteht jetzt was ich meine. großes Grinsen

Also ich möchte gerne auf meiner Indexseite die Forenüberschrfiten wie zum Beispiel "Der Kerker" auf der Indexseite anders darstellen. Ich weiß, dass ich da mit CSS arbeiten kann. Aber das alleine reicht bestimmt nicht oder? Ich muss bestimmt auch noch irgendwo etwas in einer TPL. Datei ändern oder?

Ich will z.B. "Der Kerker" in einer anderen Schriftart und größe Darstellen als die normalschrift.

Liebe Grüße

Bibini

Doch, das kannst du ohne Hackeinbauten problemlos regeln

In deiner Kategorie lässt du das oberste Feld frei..

[attach]34663[/attach]

dafür schreibst du in den Beschreibungstext folgendes:

code:
1:	<div class="Testkategorie">Meine kunterbunte Kategorie</div>

dann gehst du in deinen Designpack und gibst unten im zusätzlichen CSS sowas hier ein:

code:
1:	.Testkategorie { font-family:verdana, sans-serif; color: pink; font-size: large; }

dann kannst du in jeder Kategorie ein anderes "div" angeben.. zb. statt "Testkategorie" halt "Testkategorie2" usw..
und dementsprechend sprichst du das dann halt im CSS auch wieder an ..

mit .Testkategorie2 {

etc...

so kannst du in jeder Kat, andersfarbige Schrift machen, ohne gross Umbauten machen zu müssen..

Ergebnis:

[attach]34662[/attach]

Verschiedene Tips, was du alles mit dem CSS bei der Schrift machen kannst.. findest du hier: www.css4you.de

Viel Spass und Erfolg

(Edit: P.S. das CSS musst du dann natürlich in jedem Designpack reinpacken und farblich dann an deinen jeweiligen Style anpassen)

saen

Das ist doch jetzt für die Kategorien wie zum Beispiel Willkommen oder? Aber das meinte ich nicht, ich hab Kat-Bilder eingebaut die wären ja dann damit weg.

Ich meinte wenn ich jetzt so einen Aufbau vom Forum habe:

Kat: Welcome
Forum: Regeln
Beschreibung vom Forum
Subforum: Grafikregeln

Ich will das Forum "Regeln" anders darstellen.
Zum Beispiel habe ich Die Beschreibung hab ich jetzt im CSS zum Beispiel so geregelt:
.fobe {
background-color: #331526;
color: #9798a2;
border-bottom: 2px solid #72747f;
padding: 5px;
text-align: justify;
}
und auch in der Beschreibung vom Forum im ACp das eingegeben:
<div class="fobe">Meine Beschreibung</div>

Nur das kann ich ja nicht genauso mit meinem Forumstitel "Regeln" machen oder kann ich das auch mit <div class="fobe1">Regeln</div> oben bei Forumstitel eingeben? fobe1 hab ich auch schon per css definiert.

Oder hab ich dich da jetzt falsch verstanden gehabt? großes Grinsen

Bibini

probiers doch einfach aus Augenzwinkern

normal müsste das mit den Foren auch funktonieren, habs selbst noch nicht getestet ..

saen

funktioniert schon aber dann hab ich einen abstand zwischen der Beschreibung und dem Titel und der nervt großes Grinsen

Naja muss ich ma schauen

Schrimm

Zitat:

Original von saen
funktioniert schon aber dann hab ich einen abstand zwischen der Beschreibung und dem Titel und der nervt großes Grinsen

Naja muss ich ma schauen

Hallo,

Könntest du mal einen Screenshot anhängen, was du mit "Abstand" meinst und wie es ohne aussieht?

Dankeschön.

JiShi

Ich würde das alles gar nicht über das ACP (Foren bearbeiten) anpassen, sondern über das Template direkt.

Beispiel (index_boardbit1.tpl):

code:
1:	<a href="board.php?boardid=$boards[boardid]&sid=$session[hash]"><b>$boards[title]</b></a>

Hier kannst du die Verlinkung mit Hilfe von CSS definieren - also a =

code:
1:	<a class="foka" href="board.php?boardid=$boards[boardid]&sid=$session[hash]"><b>$boards[title]</b></a>

Im CSS:

code:
1: 2: 3: 4: 5: 6: 7: 8:	A:link.foka, A:visited.foka, A:active.foka { blablabla: blabla; usw: usw; } a:hover.foka { blablabla: blabla; usw: usw; }

Ebenso die Forenbeschreibung:

code:
1:	$boards[description]$subboards

code:
1:	<div class="fobe" $boards[description]$subboards</div>

..und wenn du dann noch im Template von der Forenbeschreibung den Zeilenumbruch rausnimmst, dann hast du auch keine Leerzeile mehr drin ;-) und natürlich müssten auch alle anderen boardbit angepasst werden.

saen

Ja genau mit dem Code das hab ich gemeint

Also die Forenbeschreibung hat super funktioniert. Nur bei der Überschrift will es nicht so. Ich hab jetzt im CSS das so definiert:

code:

1:
2:
3:
4:
5:
6:

A:link.foka, A:visited.foka, A:active.foka { COLOR: #fffff9; TEXT-DECORATION: none; font-family: 'Lobster Two', cursive; font-size:25px;}

a:hover.foka {
COLOR: #fffff9; TEXT-DECORATION: none; font-family: 'Lobster Two', cursive; font-size:25px;opacity: 0.6;
}

und in den templates siehts so aus:

code:
1:	<a class="foka" href="board.php?boardid=$boards[boardid]&sid=$session[hash]"><b>$boards[title]</b></a>

Nur übernimmt der das irgendwie nicht, hab ich was falsch gemacht?

JiShi

Wer ist 'er'? Und was übernimmt dieser 'er' nicht? großes Grinsen

Irgendwie ist da immer sehr ungenau!?
Mit Bild, Link oder ähnlichem ist das immer leichter zu ermitteln ;-)

saen

naja also ich hab alles so eingesetzt wie du es geschrieben hast, hab das css angepasst. ABER irgendwie übernimmt der code das nicht, was ich beim CSS eingebaut habe großes Grinsen

link zum forum

JiShi

Im CSS wurde nicht eingetragen?!

saen

hä? doch?

das is meine css:

code:

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:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:

BODY {
  BACKGROUND-IMAGE: url(http://i135.photobucket.com/albums/q134/raven_feather/bg2_zpsc7ec8b8c.png);
  background-attachment: fixed;
  background-position: left;
}
.clsCursor {  cursor: crosshair}

{ SCROLLBAR-BASE-COLOR: #0B6295; SCROLLBAR-ARROW-COLOR: #FFFFFF; }
SELECT {
 font-size: 9px;
 text-transform: uppercase; 
 font-family: Verdana;
 font-weight: bold;
 COLOR: #000000;
 BACKGROUND-COLOR: #cfcfcf;}

TEXTAREA {
 FONT-SIZE: 12px;
 FONT-FAMILY: Tahoma,Helvetica;
 COLOR: #000000;
 BACKGROUND-COLOR: #cfcfcf;}

.input {
 FONT-SIZE: 12px;
 FONT-FAMILY: Tahoma,Helvetica;
 COLOR: #000000;
 BACKGROUND-COLOR: #CFCFCF;
 
 border-top-width : 1px;
 border-right-width : 1px;
 border-bottom-width : 1px;
 border-left-width : 1px;
 text-indent : 2px;
}
.topnavi {
padding-right: 5px;
padding-bottom: 18px;
padding-left: 5px;
}

#bg A:link, #bg A:visited { COLOR: 72747f; text-decoration: none; font-size: 10px; font-weight:bold; letter-spacing: 0.2px; font-family: tahoma; text-transform: uppercase; }
#bg A:hover, #bg A:active { COLOR: #e3e8ff; text-decoration: none; letter-spacing: 0px }

A:link.foka, A:visited.foka, A:active.foka { COLOR: #fffff9; TEXT-DECORATION: none; font-family: 'Lobster Two', cursive; font-size:25px;}

A:hover.foka {
COLOR: #fffff9; TEXT-DECORATION: none; font-family: 'Lobster Two', cursive; font-size:25px;opacity: 0.6;
}

#tablea A:link, #tablea A:visited  { COLOR: 72747f; text-decoration: none; font-size: 10px; font-weight:bold; letter-spacing: 0.2px; font-family: tahoma; text-transform: uppercase; }
#tablea A:hover, #tablea A:active { COLOR: #e3e8ff; text-decoration: none; letter-spacing: 0px }

#tableb A:link, #tableb A:visited  { TEXT-DECORATION: none; }
#tableb A:hover, #tableb A:active { TEXT-DECORATION: none; }

#tablecat A:link, #tablecat A:visited,  { TEXT-DECORATION: none; }
#tablecat A:hover, #tablecat A:active  { TEXT-DECORATION: none; }


#tabletitle A:link, #tabletitle A:visited, { TEXT-DECORATION: none; }
#tabletitle A:hover, #tabletitle A:active { TEXT-DECORATION: none; }


i {
        font-family: georgia;
        color: #a29ba5;
        font-size: 10px;
        font-weight: italic;
        text-transform: none; }

b {
        font-family:verdana;
        color: #c3c3c3;
        font-size: 10px;
        font-weight: italic;
        text-transform: uppercase; }

u {
        font-family:Verdana;
        color: #85778a;
        font-size: 10px;
        line-height: 10px;
        text-decoration: none;
        border-bottom: solid 1px #999999;
        text-transform: uppercase }

s, strike { font-size: 10px;
        font-family: georgia;
        color: #85778a;
        text-transform: lowercase;}

h1 { font-family: Lobster Two; 
        font-size: 25px; 
        letter-spacing:2px;
        text-transform:lowercase;
        text-align:center;}

h2 {    font-size:8px; 
        font-family: verdana;
        text-transform:uppercase;
        text-align:center;
 color:#000000;
 margin:0px 0px;
        letter-spacing:2px;
 font-weight:bold;
        background-color: #e3e8ff;
        margin: 0px;
        padding: 4px;     }

h3 {  font-family: Yanone Kaffeesatz; 
        font-size: 20px; 
        letter-spacing:2px;
        text-transform:lowercase;
        text-align:center;   }

.headertab { background-image: url(http://i135.photobucket.com/albums/q134/raven_feather/bannerunten_zps3f934bff.png); margin-top: 0px; color: #ffffff;}

.fobe {
background-color: #331526;
color: #9798a2;
border-bottom: 2px solid #72747f;
padding: 5px;
text-align: justify;

}

.fobe1 {
font-family: 'Lobster Two', cursive;
font-size:25px;
text-transform:lowercase;
text-shadow:#331526 1px 1px 1px;
color:#fffff9;
opacity:.6;
}


.navi {
font-family: 'Lobster Two', cursive;
font-size:30px;
text-transform:lowercase;
text-shadow:#331526 1px 1px 1px;
color:#fffff9;
}

#navi2 {
    font-family: 'Lobster Two',cursive;
    font-size: 30px;
    text-transform: lowercase;
    text-shadow: 1px 1px 1px #331526;
    color: #FFFFF9;
}


ul.navigation{ font-size:15px;text-transform:uppercase; margin-bottom:-30px;padding:10px 4;letter-spacing:1px;text-align:center; }

ul.navigation li {background-color:#ffffff; list-style-type: none; padding: 5px 20px;display:inline; opacity:.8;}

JiShi

Da war vorhin noch etwas anderes zu sehen ;-)
Aber egal wie.. räum doch da mal auf und gucke dir selbst jeden Abschnitt genau an..

Ich hab hier aufgehört:

code:
1:	.clsCursor { cursor: crosshair} { SCROLLBAR-BASE-COLOR: #0B6295; SCROLLBAR-ARROW-COLOR: #FFFFFF; }

;-)

Auch interessant (in der header.tpl)

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
<div id="topheader">
<ul class="linkheader">
<li><a href="register.php?sid="><img src="images/top_register.gif" border=0 alt="Registrierung"></a>
 </li>
<li><a href="team.php">Team</a></li>
<li><a href="memberslist.php">Mitglieder</a></li>
<li><a href="search.php">Suche</a></li>
<li></li>
</ul></div></tr></td>

saen

die header is ja noch nich fertig, da häng ich ja noch.

ich wollte erst ma alles andere machen

hm.. ähm ich hab das alles so von eine übernommen. Ich weiß nich wie ich da wo aufräumen soll?

JiShi

Na in deinem CSS...
Bezeichnung; Klammer öffnen; Inhalt; Klammer schließen....Beispiel habe ich dir oben gezeigt?

saen

Also ich hab das jetzt alles geändert. aber irgendwie übernimmt der das doch nicht. also der hat mir am anfang meine überschrift angezeigt, aber jetzt nicht mehr unglücklich

Hier noch ma jetzt die CSS:

BODY {
SCROLLBAR-BASE-COLOR:#0B6295;
SCROLLBAR-ARRWO-COLOR:#ffffff;
Background-image: url(http://i135.photobucket.com/albums/q134/...zpsc7ec8b8c.png);
Background-attachment:fixed;
}

SELECT {
font-size:8pt;
text-transform: uppercase;
font-family: Verdana;
font-weight: bold;
color:#000000;
background-color: #cfcfcf;
}

TEXTAREA {
font-size: 10pt;
font-family: Tahoma;
color:#000000;
background-color:#cfcfcf;
}

#bg A:link, #bg A:visited {
color: #72747F;
text-decoration: none;
font-size: 10px;
font-weight: bold;
letter-spacing: 0.2px;
font-family: tahoma;
text-transform: uppercase;
}

b {
font-family: verdana;
color: #C3C3C3;
font-size: 10px;
text-transform: uppercase;
}

.input {
font-size: 12px;
font-family: Tahoma;
color: #000000;
background-color: #cfcfcf;
border: 1px solid;
}

h1 {
font-family: 'Lobster Two';
font-size: 25px;
letter-spacing: 2px;
text-transform: lowercase;
text-align: center;
}

h2 {
font-size: 8px;
font-family: verdana;
text-transform: uppercase;
text-align: center;
color: #000;
letter-spacing: 2px;
font-weight: bold;
background-color: #E3E8FF;
margin: 0px;
padding: 4px;
}

h3 {
font-family: 'Yanone Kaffeesatz';
font-size: 20px;
letter-spacing: 2px;
text-transform: lowercase;
text-align: center;
}

A:link, A:visited, A:active {
color: #72747F;
text-decoration: none;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz';
font-size: 10px;
}

A:hover {
color: #7a5438
text-decoration: none;
text-transform: uppercase;
font-family: Tahoma;
font-size: 8pt;
font-decoration: underline;
}

.clsCursor{
Cursor:crosshair
}

.normalfont {
font-family: Tahoma;
font-size: 9.5pt;
color:# 201f1f;
}

.headfont {
font-family: Tahoma;
font-size: 8.5pt;
color: c49582;
}

A:link.subs; A:visited.subs, A:active.subs {
color: #9c625c;
text-transform: uppercase;
font-family: Tahoma;
font-size: 7pt;
}

A:hover.subs {
color: #7a5438;
text-transform: uppercase;
font-family: Tahoma;
font-size: 7pt;
}

foka {
color: #a49c9d; text-decoration: none; font-size:25px; font-family: 'Lobster Two', cursive; text-transform: lowercase; letter-spacing: 2px; }

.fobe {
background-color: #331526;
color: #9798a2;
border-bottom: 2px solid #72747f;
padding: 5px;
text-align: justify;
}

.fobe1 {
font-family:'Lobster Two', cursive;
font-size: 25px;
text-transform: lowercase;
text-shadow: #331526 1px 1px 1px;
color: #fffff9;
opacity: .6;
}

.navi {
font-family: 'Lobster Two', cursive;
font-size: 30px;
text-transform: lowercase;
text-shadow: #331526 1px 1px 1px;
color: #fffff9;
}

#navi2 {
font-family: 'Lobster Two', cursive;
font-size: 30px;
text-transform: lowercase;
text-shadow: #331526 1px 1px 1px;
color: #fffff9;
}

ul.navigation { font-size:15px; text-transform: uppercase; margin-bottom: -35px; padding: 10px 4; letter-spacing: 1px; text-align:center; }

ul.navigation li { background-color:#ffffff; list-style-type: none; padding: 5px 20px; display: inline; opacity:.8;

Forensoftware: Burning Board, entwickelt von WoltLab GmbH