|
|
|
|
Kontakte
| Eigene Designs erstellen auf Clanguru.de |
Clanguru erlaubt eigene HTML Designs, es sind nur ein paar Befehle wie
JavaScript oder iframes nicht erlaubt.
Eigene Designs kann man nur erstellen und verwenden, wenn man Premium für die
Page hat.
Design erstellen:
So jetzt zeigen wir euch wie man ein Design erstellt.
Zuerst müsst ihr euch auf
http://www.clanguru.de einloggen, danach folgt ihr der
Schrittreihenfolge
-> Meine Clanpages (oben rechts im KundenLogin) -> Eigne Designs -> Design
erstellen
Jetzt braucht ihr ein Namen für euer Design, das ist nur für euch um später das
Design auszuwählen. Game ist nicht so wichtig, jedoch kann es später für euch
ein Vorteil sein wenn jemand eine Suche startet.
Design einfügen:
Ab jetzt braucht man HTML Kentnisse
http://de.selfhtml.org, oder man verwendet ein wysiwyg editor wie z.B.
http://nvu.softonic.de. Es sind einzelne BBcodes erlaubt da sie von uns in HTML
gesperrt wurden, wie z.B. YouTube.
Habt ihr ein eigene Design, so müsst ihr nur noch die Blöcke hinzüfgen, die
Blöcke werden mit :blockname: in den HTML Code includet.
Blocks:
:title: = <title></title> ersetzen durch :title:
<div id="content" align="center"><div
id="slider">:stylecontent:</div></div> = Content (der
Inhalt der Seiten)
:footer: = Copyright und Impressum
:mainnavigation:
:clannavigation:
:adminnavigation:
:counter:
:kalender:
:nextwars:
:clanwars:
:shoutbox:
:vote4us:
:teamspeak:
YouTube BBcode: [youtube]YouTubeID[/youtube]
YouTube Link: http://www.youtube.com/watch?v=QBtciu6Onnc
Die YouTubeID wird durch die den rot markierten Teil im YouTube Link ersetzt.
Bilder:
Die Bilder oder Hintergrundbilder müssen den kompletten Link haben z.B.
http://www.deine_domain.de/link_zu_den_bildern/Bild.jpg.
Wo kann ich Bilder uploaden? Es gibt sehr viele Free Webspace Hoster, einfach
bei Google suchen registrieren und Bilder hochladen und in deinem Design
verlinken.
Stylesheet CSS:
Wie schaut CSS aus?
<style = "text/css">
body {background-color: #ff0000}
h1 {font-family: Arial,sans-serif}
</style>
Das sagt dem Browser folgendes: es folgt eine Style-Anweisung in CSS, er soll
den Body mit einem roten Hintergrund versehen und alle Überschriften erster
Ordnung in der Schriftart Arial (alternativ in der serifenlosen
Standardschriftart, wenn Arial nicht installiert ist) darstellen. Innerhalb von
<style>…</style> kann man das nun für alle HTML-Tags machen.
Clanguru CSS Einstellungen:
<style = "text/css">
/* Allgemeine Links die keine sonstige Style Definition haben */
/* Texte die verlinkt sind */
html a:link {
text-decoration: none; color: #E18A3B;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Texte die verlinkt sind und besucht wurden */
html a:visited {
text-decoration: none; color: #E18A3B;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Texte die verlinkt sind und gerade angeklickt werden */
html a:active {
text-decoration: none; color: #E18A3B;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Texte die verlinkt sind und wenn man mit der Maus über den Link geht */
html a:hover {
text-decoration: none; color: #E18A3B;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Andere Definition der html Link - Browserabhängig */
a:link, a:visited, a:active, a:hover
{
text-decoration: none;
color: #E18A3B;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Allgemeine Links die keine sonstige Style Definition haben */
/* ------------------------------------------------------------------------ */
/* Style für Tabellenheader */
.head {
color:#ffffff;
font-size: 10px;
background-color: #004100;
font-weight:bold;
text-align:left;
linkcolor: #fff;
height: 20px;
font-size:medium;
padding:2px; font-family: "Courier New", Courier, monospace;
}
.head a:link {
text-decoration: none; color: #fff;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.head a:visited {
text-decoration: none; color: #fff;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.head a:active {
text-decoration: none; color: #fff;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.head a:hover {
text-decoration: none; color: #fff;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Style für Tabellenheader */
/* ------------------------------------------------------------------------ */
/* Style für kleinen Kalender Mo - So */
.calendersmallhead {
color:#8A0808;
padding:3px;
font-size: 12px;
text-align:left;
font-family: verdana, arial, helvetica, serif;
background: #000000;
border-style: dotted;
border-width: 1px 1px 1px 1px;
}
/* Style für kleinen Kalender Mo - So */
/* ------------------------------------------------------------------------ */
/* Style für kleinen Kalender Tage */
.calendersmall {
color:#ffffff;
padding:3px;
font-size: 12px;
text-align:left;
font-family: verdana, arial, helvetica, serif;
border-style: dotted;
border-width: 1px 1px 1px 1px;
}
/* Style für kleinen Kalender Tage */
/* ------------------------------------------------------------------------ */
/* Style für Texte im Content. Tabelleninhalte usw. */
.text {
color:#000000;
background-color: #F2F2F2;
padding:3px;
font-size: 12px;
text-align:left;
font-family: verdana, arial, helvetica, serif;
border-bottom: 0px ridge #999999;
}
.text a:link {
text-decoration: none; color: #000;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.text a:visited {
text-decoration: none; color: #000;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.text a:active {
text-decoration: none; color: #000;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.text a:hover {
text-decoration: none; color: #000;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Style für Texte im Content. Tabelleninhalte usw. */
/* ------------------------------------------------------------------------ */
/* Style für Texte im Menü. Main Navigation, Clan Navigation, Counter usw. */
.menu {
color:#0995CA;
padding:3px;
font-size: 12px;
text-align:left;
font-family: verdana, arial, helvetica, serif;
border-bottom: 0px ridge #999999;
}
.menu a:link {
text-decoration: none; color: #0995CA;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.menu a:visited {
text-decoration: none; color: #0995CA;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.menu a:active {
text-decoration: none; color: #0995CA;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.menu a:hover {
text-decoration: none; color: #0995CA;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Style für Texte im Menü. Main Navigation, Clan Navigation, Counter usw. */
/* ------------------------------------------------------------------------ */
/* Style für untere Tabellenzeile bei den News. Da wo [x Kommentare] steht. */
.textnewskommentare {
color:#000000;
background-color: #E6E6E6;
padding:3px;
font-size: 12px;
text-align:left;
font-family: verdana, arial, helvetica, serif;
border-bottom: 0px ridge #999999;
}
.textnewskommentare a:link {
text-decoration: none; color: #000;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.textnewskommentare a:visited {
text-decoration: none; color: #000;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.textnewskommentare a:active {
text-decoration: none; color: #000;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
.textnewskommentare a:hover {
text-decoration: none; color: #000;
font-size: 12px;
font-family: verdana, arial, helvetica, serif;
}
/* Style für untere Tabellenzeile bei den News. Da wo [x Kommentare] steht. */
/* ------------------------------------------------------------------------ */
/* Breite des Contents */
#content {
width: 580px;
overflow-x: auto;
margin: auto;
}
/* Breite des Contents */
</style>
Dein Design verwenden:
Um das Design zu verwenden folgt einfach der Schrittreihenfolge
-> Meine Clanpages -> Einstellungen + Designauswahl -> Eigene Styles (Dropdown
auf Eigene Designs einschalten) -> Dein Design auswählen und unten auf Page
editieren
Jetzt ist es Live auf deiner Page zu sehen.
|
|
|
|
|
