:: ClanSphere :: Free OpenSource Clan CMS :: - Forum - Schriftfarbe und Größe im Forum ändern

Antworten: 15

Seite [1]

capino

Rock the board

Beiträge: 44

# Thema - 06.02.2011 um 22:56 Uhr

Hey,
ich habe fürchterlich lange das Forum nach sämtlichen passenden Posts durchsucht, aber nichts (das funktioniert) gefunden. Ich wollte meinem Forum eine andere Schriftfarbe geben und die Größe auch ändern. In welcher Datei mache ich das und wo genau?

Inaktiv

r4z0r

Try to beat me

Herkunft: Daham
Beiträge: 153

# Antwort: 1 - 06.02.2011 um 23:18 Uhr

Was du dazu zuerst machen musst:
Erstellen von board.html und board.css - wie das funktioniert, wurde im Forum bzw. Wiki bereits erläutert. Danach kannst du die .css Datei nach deinen Belieben anpassen.

Mit Größe meinst du was genau? Meinst du vielleicht folgendes? Ich nutze z.B. im Moment ein 3-Spalten-Template: Menü links - Content Mitte (News, usw.) - Menü rechts (z.B. Last Clanwars, Login/Logout). In der Forumsansicht wirst du sehen, dass die Spalte rechts fehlt und dass das Forum den somit gewonnen Platz nutzt. Aber schaue es dir einfach auf meiner Page mal an: https://www.swl-clan.at/

Wenn du die Größe von Schriftart usw. meinst, so kannst du dementsprechend die .css anpassen. Ein guter Tipp ist jedenfalls, dass du dir die Firebug-Extension für den Firefox holst und somit auch die zu ändernde Seite genau analysieren kannst, wo welche Änderungen vorgenommen werden müssen.

Inaktiv

capino
Thread-Ersteller

Rock the board

Beiträge: 44

# Antwort: 2 - 07.02.2011 um 16:20 Uhr

Lol, habs grad schon mal geschrieben, aber irgendwie stehts nicht da......
Also, ich hatte eigentlich die Schriftfarbe und -größe gemeint, wobei deines auch nicht schlecht klingt

Muss ich da wirklich ne board.css und board.html erstellen? Ich dachte das macht man in der (template).css, aber wo?

Aber, mir ist auch zusätzlich noch ne andere Idee gekommen. Kann man das Forum zweifarbig gestalten, also dass der 1. Post hellgrau ist, der 2. dkl grau, der 3. wieder hellgrau etc.?

Inaktiv

r4z0r

Try to beat me

Herkunft: Daham
Beiträge: 153

# Antwort: 3 - 07.02.2011 um 20:23 Uhr

Wenn ich recht erinnere, nutzt Clansphere global 2 .css (clansphere.css und layout.css; ist zumindest bei dem Template so, welches ich nutzt -> Spectra) Files, die für das Design zuständig sind. Somit greifen alle Module, und somit auch das Forum, auf jene Designfiles zurück. Änderst du somit die Schriftart, ändert sich diese global. Wenn du nun eine eigene board.html und board.css erstellst, kannst du das Board somit an deine Bedürfnisse anpassen, ohne dass sich z.B. an den News etwas ändert.

"Meine" Lösung ist am einfachsten. Du kannst es auch kompliziert machen, indem du für das Board individuelle Variablen erstellst, welche im Template-CSS stehen müssen. Dazu musst du das auch in jedem php bzw html File anpassen. Unsinniger Aufwand, wenn's einfacher geht.

Zweifärbiges Forum geht über meine Kenntnisse hinaus. Ich denke mal, das kannst du sicherlich in den dazugehörigen php-Files machen, wo der Forumspost-Output generiert wird.

Inaktiv

capino
Thread-Ersteller

Rock the board

Beiträge: 44

# Antwort: 4 - 24.02.2011 um 10:05 Uhr

Entschuldige bitte für die sehr späte Antwort, aber ich musste kurzfristig ins Ausland und hatte andere Dinge im Kopf. Nun nochmal zurück zum Thema. Also...
1. Könntest du mir vielleicht mal den Code von deinem Forum geben oder mir erklären, was ich machen muss, um das Forum über die rechte Spalte zu kriegen.
2. Ich habe mich schon dumm und dämlich gesucht, aber zu board.css finde ich gar nichts, zu board.htm versteh ich nix

erstell Dir eine board.php (index.php kopieren und umbenennen), die statt index.htm die board.htm aufruft (einfach mal im Editor Deiner Wahl öffnen, dann siehst Du schon was ich meine). In Deinem Template fügst Du dann als Link-Platzhalter url_board:board_list ein. Der eigentliche Trick dabei ist der platzhalter url_board, der dann eine board.php aufruft.

Ist das das, was ich brauche, um Schriftfarbe usw. nur fürs Forum zu ändern? Ich check das nicht -.-

Inaktiv

r4z0r

Try to beat me

Herkunft: Daham
Beiträge: 153

# Antwort: 5 - 25.02.2011 um 13:07 Uhr

Vorher Backup anlegen!

Ich verwende im Moment das Spectra v2 Template, somit könnten einzelne Files bei anderen Templates anderes heißen.

Erstelle im Template-Ordner 2 neue Files:
x) board.css
x) board.htm

Für den Inhalt der board.css Datei habe ich alles übernommen, was auch in der layout.css, welche du ebenfalls in deinem Template-Ordner finden solltest, enthalten ist - Strg+C > Strrg+V

Meine board.htm beinhaltet das gleiche wie index.htm - Strg+C > Strrg+V
Im <head> Abschnitt der board.htm suche nach

1.	1. / 2. / ... <link href="layout.css" rel="stylesheet" type="text/css" />

und ersetze es mit

1.	1. / 2. / ... <link href="board.css" rel="stylesheet" type="text/css" />

Danach suche nach dem <div> Block, der für die rechte Spalte zuständig ist. In meinem Fall:

1.
2.

1. / 2. / ...

Kommentiere diesen aus:

1.
2.
3.
4.

1. / 2. / ...

Zu guter Letzt öffne noch die index.php, die du im Hauptordner von Clansphere findest und nimm folgende Änderung vor:
Füge unter

1.	1. / 2. / ... $cs_main = array('init_sql' => true, 'init_tpl' => true, 'tpl_file' => 'index.htm');

die Zeile

1.	1. / 2. / ... if(isset($_REQUEST['mod']) AND $_REQUEST['mod'] == 'board') $cs_main['tpl_file'] = 'board.htm';

ein.

Das sollte es gewesen sein, wenn ich recht erinnere. Ist schon über 1 Jahr her, dass ich diese Änderungen vorgenommen habe :O

Was nun das Editieren und Anpassen von Schrift und Farbe angeht, so kannst du das nun über die board.css erreichen. Ich würde dir übrigens anraten, dass du dir dazu CSS Tutorials anschaust

Hier 2 gute Tut's:
x) Selfhtml
x) wc3 Schools CSS

Inaktiv

Sovereign

Beginner

Beiträge: 11

# Antwort: 6 - 30.08.2011 um 21:04 Uhr

Hey,
Ich hab mich jetzt mal an deinen Guide gehalten und das so bearbeitet wie dus empfohlen hast, aber ich habe ein anderes Template.

Das Ergebnis war das meine gesamten subnavis verschwunden waren und nur das Forum in der Mitte zu sehen war.
Ich möchte eigentlich die Nebenmenüs nur nicht in die Definiton der Schriftfarbe aus dem Forum mit einbeziehen.

Geht das irgendwie und wenn ja, welche Dateien muss ich euch dafür bereitstellen?

mfG
Sovereign

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 7 - 30.08.2011 um 23:10 Uhr

Am besten erst mal einen Link zu deiner Seite,
damit wir uns einen Überblick verschaffen können.

------------------

www.iv-gaming.de | www.iv-artwork.de

Inaktiv

Sovereign

Beginner

Beiträge: 11

# Antwort: 8 - 31.08.2011 um 06:57 Uhr

Klar kein Problem:

http://ordendeslichts.square7.ch/

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 9 - 31.08.2011 um 09:42 Uhr

Also du möchtest rechts und links eine andere Schriftfarbe haben, als im Content ?

------------------

www.iv-gaming.de | www.iv-artwork.de

Inaktiv

Sovereign

Beginner

Beiträge: 11

# Antwort: 10 - 31.08.2011 um 14:13 Uhr

So ungefähr....

Bei uns kam der Wunsch auf, dass im Forum der Name des Mitglieds neben dem Post eine andere Farbe erhält, und auch die Schrift unter dem Avatar sich von der Schrift des Inhalts abhebt.

Das Definieren der Schrift war auch bei mir nicht das Problem, aber ich möchte ja nur im Forumsfenster definieren.
Also zum Beispiel, dass der Name rot wird ohne, dass sämtliche andere Links rund um die Seite (News, Gästebuch etc.) auch rot werden.

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 11 - 31.08.2011 um 20:23 Uhr

Dann müsstest du genau diesem Bereich z.B eine Klasse zuordnen
und der dann einen eigenen Link geben.

Ich persönlich würde aber dem Content, also dem gesammten inneren Teil,
der bei klick wechselt, einen Farbton geben und evntl. der linken und rechten Spalte nur eigene Farben zuordnen.
Das hätte den Vorteil, dass du nicht in jeder CS-Datei rumschreiben musst.

------------------

www.iv-gaming.de | www.iv-artwork.de

Inaktiv

Sovereign

Beginner

Beiträge: 11

# Antwort: 12 - 01.09.2011 um 13:45 Uhr

Klingt alles gut, aber ich habe keine Ahnung wie ich das machen muss.

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 13 - 01.09.2011 um 15:19 Uhr

Jeah. Kannste mal bitte deinen index.htm-Code hier posten.
Komme da gerade irgendwie nicht richtig durch.^^

Ich würde den Inhalts-div's der rechten und linken Spalte erstmal eine Klasse zufügen,
die du dann in der xxx.css-Datei definierst. Dann kannste dieser Klasse auch eine seperate Link-Klasse beigeben.
Aber bräuchte erstmal deinen index.htm-Code, dann machen wir das (sofern ich das hin bekomme).

------------------

www.iv-gaming.de | www.iv-artwork.de

Inaktiv

Sovereign

Beginner

Beiträge: 11

# Antwort: 14 - 01.09.2011 um 17:57 Uhr

Jo geht klar.

mehr...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={func:charset}" />
<title>Orden des Lichts</title>

<link href="clansphere.css" rel="stylesheet" type="text/css" />
<script src="witcher.js" type="text/javascript"></script>
<script
language="JavaScript">

</script>
</head>
<body style="height:100%;" onload="subnavi('main')">

<div style="width:1180px; margin:0 auto; height:100%;">

<div style="width:1180px; height:193px; background-image:url(templates/s_g/bilder/header.png);">
</div>

<div style="width:1180px; overflow:auto;">
<div align="left" style="float:left">
<img id="austausch1" src="bilder/button1.png" onclick="subnavi('main')" style="cursor:pointer" onmouseover="austausch1.src='templates/s_g/bilder/button1_.png';"
onmouseout="austausch1.src='templates/s_g/bilder/button1.png';" ><img id="austausch2" src="bilder/button2.png" onclick="subnavi('clan')" style="cursor:pointer" onmouseover="austausch2.src='templates/s_g/bilder/button2_.png';"
onmouseout="austausch2.src='templates/s_g/bilder/button2.png';" ><img id="austausch3" src="bilder/button3.png" onclick="subnavi('media')" style="cursor:pointer" onmouseover="austausch3.src='templates/s_g/bilder/button3_.png';"
onmouseout="austausch3.src='templates/s_g/bilder/button3.png';" ><img src="bilder/button4.png" id="austausch4" onclick="subnavi('contact')" style="cursor:pointer" onmouseover="austausch4.src='templates/s_g/bilder/button4_.png';"
onmouseout="austausch4.src='templates/s_g/bilder/button4.png';" ></div><div align="left" style="float:right">

<div id="subnavi" style="height:27px; width:644px; background-image:url(templates/s_g/bilder/right.png);"></div>

</div>
</div>
<div style="width:1180px; height:95px; background-image:url(templates/s_g/bilder/filler.png);">
</div>

<div style="width:1180px; background-repeat:repeat-y; background-image:url(templates/s_g/bilder/wdh.png); background-position:center; overflow:auto;">

<div align="left" style="float:left">

<div style="margin-left:40px;width:160px;">
{users:navlogin}
</div>

<div style="margin-left:37px; width:173px; height:92px; background-image:url(templates/s_g/bilder/left1.png);">
</div>
<div style="margin-left:40px;width:160px;">
{news:navlist}
</div>

<div style="margin-left:37px; width:173px; height:92px; background-image:url(templates/s_g/bilder/left2.png);">
</div>
<div style="margin-left:40px;width:160px;">
{board:navlist}
</div>

<div style="margin-left:37px; width:173px; height:92px; background-image:url(templates/s_g/bilder/left3.png);">
</div>
<div style="margin-left:40px;width:160px;">
{votes:navlist}
</div>

<div style="margin-left:37px; width:173px; height:92px; background-image:url(templates/s_g/bilder/left4.png);">
</div>
<div style="margin-left:40px;width:160px;">
{users:navonline}
</div>

</div>

<div align="left" style="float:right">

<div style=" margin-left:5px;width:160px;">
{wars:navlist}
</div>

<div style="margin-right:43px; width:173px; height:92px; background-image:url(templates/s_g/bilder/right1.png)">
</div>
<div style=" margin-left:5px;width:160px;">
{wars:navnext}
</div>

<div style="margin-right:43px; width:173px; height:92px; background-image:url(templates/s_g/bilder/right2.png)">
</div>
<div style=" margin-left:5px;width:160px;">
{shoutbox:navlist}
</div>

<div style="margin-right:43px; width:173px; height:92px; background-image:url(templates/s_g/bilder/right3.png)">
</div>
<div align="center" style=" margin-left:5px;width:160px;">
<a href="http://witchers-art.de"><img src="http://witcher.bplaced.de/linkus.gif" width="88px" height="31px"></a><br />
{banners:navlist}
</div>

<div style="margin-right:43px; width:173px; height:92px; background-image:url(templates/s_g/bilder/right4.png)">
</div>
<div style=" margin-left:5px;width:160px;">
Heute: {count:navday}<br />
Gestern: {count:navyes}<br />
Monat: {count:navmon}<br />
Gesamt: {count:navall}<br />
</div>

</div>

<div align="left" style="float:left; margin-left:20px;width:700px;">
{func:show}
</div>

</div>

<div align="center" style="width:1180px; height:80px; background-image:url(templates/s_g/bilder/footer.png);">
<br /><br /><a href="index.php?mod=clansphere&action=about">About Clansphere</a><br />Design © by <a href="http://witchers-art.de">Witchers-Art.de</a>
</div>

</div>
</body>
</html>

Danke schonmal, dass du dich damit beschäftigst.

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 15 - 01.09.2011 um 23:59 Uhr

Dein Template wurde leider nicht in einer CSS-Datei definiert, also habe ich dir das mal ein wenig umgeschrieben.
Ich habe die neue CSS-Datei layout.css genannt und in deine index.htm eingebunden.
Beide Dateien musst du in deinen jetzigen Template-Ordner laden. Die alte index.htm wird überschrieben.
Mach dir vorher mal lieber eine Schutzkopie, da ich diese nicht testen konnte.

Wenn du die Dateien hier mit kopieren&einfügen raus nimmst, diese dann mit Notepad++ öffnest,
speicher die layout ab als css-Datei und die index dann halt als htm-Datei.
Sollte die dann als html gespeichert werdden, so kannst du diese dann über Filezilla in eine htm umnennen.

layout.css

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.

1. / 2. / ...

/* START Links + Rechts */

#left {
  float: left;
}

.innerframe_left {
  width: 160px;
  float: left;
  color: #fff;
  margin: 0 0 0 40px;
}

.innerframe_left a {
  color: #fff;
}

.innerframe_left a:hover {
  color: #555;
}

#headbox_left1, #headbox_left2, #headbox_left3, #headbox_left4 {
  width: 173px;
  height: 92px;
  float: left;
  margin: 0 0 0 37px;
}

#headbox_left1 {
  background-image: url('templates/s_g/bilder/left1.png');
}

#headbox_left2 {
  background-image: url('templates/s_g/bilder/left2.png');
}

#headbox_left3 {
  background-image: url('templates/s_g/bilder/left3.png');
}

#headbox_left4 {
  background-image: url('templates/s_g/bilder/left4.png');
}

#right {
  float: right;
}

.innerframe_right {
  width: 160px;
  float: right;
  color: #fff;
  margin: 0 40px 0 0;
}

.innerframe_right a {
  color: #fff;
}

.innerframe_right a:hover {
  color: #555;
}

.innerframe_right2 {
  width: 160px;
  float: right;
  text-align: center;
  margin: 0 0 0 5px;
}

#headbox_right1, #headbox_right2, #headbox_right3, #headbox_right4 {
  width: 173px;
  height: 92px;
  float: right;
  margin: 0 43px 0 0;
}

#headbox_right1 {
  background-image: url('templates/s_g/bilder/right1.png');
}

#headbox_right2 {
  background-image: url('templates/s_g/bilder/right2.png');
}

#headbox_right3 {
  background-image: url('templates/s_g/bilder/right3.png');
}

#headbox_right4 {
  background-image: url('templates/s_g/bilder/right4.png');
}

/* ENDE Links + Rechts */
/* START Content */

#content {
  width: 700px;
  margin: 0 0 0 20px;
  float: left;
  text-align: left;
}

/* ENDE Content */
/* START Footer */

#footer {
  background-image: url('templates/s_g/bilder/footer.png');
  width: 1180px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}

/* ENDE Footer */

index.htm

1. / 2. / ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset={func:charset}" />
    <title>{func:title}</title>
    {clansphere:navmeta}
    <link href="clansphere.css" rel="stylesheet" type="text/css" />
    <link href="layout.css" rel="stylesheet" type="text/css" />
    <link rel="alternate" type="application/rss+xml" href="uploads/rss/news.xml" />
    <script src="witcher.js" type="text/javascript"></script>
    <script language="JavaScript">
    
    </script>
</head>

<body style="height:100%;" onload="subnavi('main')">

<div style="width:1180px; margin:0 auto; height:100%;">

<div style="width:1180px; height:193px; background-image:url(templates/s_g/bilder/header.png);"></div>

<div style="width:1180px; overflow:auto;">
<div align="left" style="float:left">
<img id="austausch1" src="bilder/button1.png" onclick="subnavi('main')" style="cursor:pointer" onmouseover="austausch1.src='templates/s_g/bilder/button1_.png';"
onmouseout="austausch1.src='templates/s_g/bilder/button1.png';" ><img id="austausch2" src="bilder/button2.png" onclick="subnavi('clan')" style="cursor:pointer" onmouseover="austausch2.src='templates/s_g/bilder/button2_.png';"
onmouseout="austausch2.src='templates/s_g/bilder/button2.png';" ><img id="austausch3" src="bilder/button3.png" onclick="subnavi('media')" style="cursor:pointer" onmouseover="austausch3.src='templates/s_g/bilder/button3_.png';"
onmouseout="austausch3.src='templates/s_g/bilder/button3.png';" ><img src="bilder/button4.png" id="austausch4" onclick="subnavi('contact')" style="cursor:pointer" onmouseover="austausch4.src='templates/s_g/bilder/button4_.png';"
onmouseout="austausch4.src='templates/s_g/bilder/button4.png';" ></div><div align="left" style="float:right">

<div id="subnavi" style="height:27px; width:644px; background-image:url(templates/s_g/bilder/right.png);"></div>

</div>
</div>
<div style="width:1180px; height:95px; background-image:url(templates/s_g/bilder/filler.png);">
</div>

<div style="width:1180px; background-repeat:repeat-y; background-image:url(templates/s_g/bilder/wdh.png); background-position:center; overflow:auto;">

<div id="left">

    <div class="innerframe_left">{users:navlogin}</div>

    <div id="headbox_left1"></div>
    <div class="innerframe_left">{news:navlist}</div>

    <div id="headbox_left2"></div>
    <div class="innerframe_left">{board:navlist}</div>

    <div id="headbox_left3"></div>
    <div class="innerframe_left">{votes:navlist}</div>

    <div id="headbox_left4"></div>
    <div class="innerframe_left">{users:navonline}</div>

</div>

<div id="right">

    <div class="innerframe_right">{wars:navlist}</div>

    <div id="headbox_right1"></div>
    <div class="innerframe_right">{wars:navnext}</div>

    <div id="headbox_right2"></div>
    <div class="innerframe_right">{shoutbox:navlist}</div>

    <div id="headbox_right3"></div>
    <div class="innerframe_right2">
        <a href="http://witchers-art.de"><img src="http://witcher.bplaced.de/linkus.gif" width="88px" height="31px"></a><br />
        {banners:navlist}
    </div>

    <div id="headbox_right4"></div>
    <div class="innerframe_right2">
        Heute: {count:navday}<br />
        Gestern: {count:navyes}<br />
        Monat: {count:navmon}<br />
        Gesamt: {count:navall}<br />
    </div>

</div>

<div id="content">{func:show}</div>

</div>

<div id="footer">
    <br />
    <br />
    <a href="{url:clansphere_about}">About Clansphere</a>
    <br />
    Design © by <a href="http://witchers-art.de">Witchers-Art.de</a>
</div>

</div>

</body>
</html>

Die Farben kannst du nun über die Farbcodes (color) der folgenden Einträge deiner layout.css ändern.

Links:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

1. / 2. / ...

.innerframe_left {
  width: 160px;
  float: left;
  color: #fff;
  margin: 0 0 0 40px;
}

.innerframe_left a {
  color: #fff;
}

.innerframe_left a:hover {
  color: #555;
}

Rechts:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

1. / 2. / ...

.innerframe_right {
  width: 160px;
  float: right;
  color: #fff;
  margin: 0 40px 0 0;
}

.innerframe_right a {
  color: #fff;
}

.innerframe_right a:hover {
  color: #555;
}

------------------

www.iv-gaming.de | www.iv-artwork.de

Zuletzt editiert von Tress13 am 02.09.2011 um 00:00 Uhr (1x Editiert)

Inaktiv

Antworten: 15

Seite [1]

Sie müssen sich registrieren, um zu antworten.

Forum - Thema
Nächstes Thema ->
Forum -> ClanSphere -> Allgemein (ClanSphere) -> Schriftfarbe und Größe im Forum ändern