CSS

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
CrunkstyleCan
Mitglied
Beiträge: 14
Registriert: 21.02.2009 22:03

CSS

Beitrag von CrunkstyleCan »

Hallöchen :) Habe einproblem.... unzwar wie baue ich CSS im Forum ein? habe mehrere topics angeschaut aber nicht verstanden... einmal muss ich in die post_body_tpd oder so einfügen...
Das ist der code:

Code: Alles auswählen

<style type="text/css" media="screen">
<!--

/* Allgemeine Einstellungen */
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

/* Dieser Teil ist dafür, die Menüpunkte ohne Listenpunkt darzustellen */
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

/* Hier stellt Ihr ein, wie weit die Schrift vom Menürand entfernt ist. */
li a
{
padding-right: 20px;padding-top: 5px;
}

/* Hier wird das ganze Menü positioniert */
div.menu
{
position: absolute;
z-index: 3;
top: 124px;
left: 50%;
margin-left:-405px;
width:905px;
}

/* Dieser Punkt bestimmt die Menübreite */
.menu li
{
width: 160px;
float: left;
}

/* Hier bestimmt Ihr das Aussehen der Menülinks */
.menu a
{
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF;
}

/* Hier bestimmt Ihr das Aussehen der Hintergründe der Menülinks, wenn Ihr mit der Maus drüber fahrt */
.menu a:hover
{
background-color: #00CCFF;
background-image: url(URL);
}

/* Hier bestimmt Ihr die Größe der Menülinks (Für weitere Menüs, müssen die Punkte entsprechend erweitert werden) */
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 12px;
display: none;
width: 160px;
float: left;
}

/* Hier bestimmt Ihr die Farbe der Menülinks (Für weitere Menüs, müssen die Punkte entsprechend erweitert werden) */
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<!-- Anfang des Scriptes -->

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

<!-- Ende des Scriptes -->

<div class="menu">

<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menupunkt1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

<!-- Menupunkt1 = Überschrift
Menupunkt1.1 und Menupunkt1.2 = Untermenüpunkte
Es können noch weitere Untermenüpunkte nach diesem Schema eingebaut werden:

<li><a href="http://Menupunktx.x.htm">Menupunkt1.2</a></li>

-->

<li><a href="http://Menupunkt1.1.htm">Menupunkt1.1</a></li>
<li><a href="http://Menupunkt1.2.htm">Menupunkt1.2</a></li>

</ul>
</li>

<!-- Hier können weitere Menüs eingefügt werden, einfach den oberen Teil kopieren und anpassen
'smenu1' muss dann entsprechend hochgezählt werden (4x)

<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menupunkt1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://Menupunkt1.1.htm">Menupunkt1.1</a></li>
<li><a href="http://Menupunkt1.2.htm">Menupunkt1.2</a></li>
<li><a href="http://Menupunktx.x.htm">Menupunkt1.2</a></li>

</ul>
</li>

-->

</div>
Kan mir jemand weiterhelfen?

Mit Freundlichen
Grüßen
Can :ugeek:
Benutzeravatar
gsxfan
Mitglied
Beiträge: 562
Registriert: 29.11.2007 11:43
Wohnort: Mittelhessen

Re: CSS

Beitrag von gsxfan »

Hallo,

wieso CSS einbauen? Die Styles der 3er Versionen arbeiten doch schon alle mit CSS.
Das was Du an Code gepostet hast, ist ein Mischmasch aus Anweisungen, die in die dem Style entsprechende CSS-Datei gehört und zwar bis vor </style>. Der ganze Rest gehört in eine HTML-Datei Deines Styles und zwar in die overall_header.html. Allerdings kannst Du jetzt nicht hingehen und das einfach jeweils hineinkopieren, so einfach ist das nicht. Sondern Du musst Dir die bestehenden Anweisungen in der CSS- und der HTML-Datei heraussuchen und entsprechend anpassen.
Woher stammt denn diese Anleitung und wofür ist sie gedacht?
Enduros putzen ist wie Bücher verbrennen.
Das GSX1100G-Forum
CrunkstyleCan
Mitglied
Beiträge: 14
Registriert: 21.02.2009 22:03

Re: CSS

Beitrag von CrunkstyleCan »

Von so einem freund, er hat gesagt das ist die Navigation...
Wie mache ich sone navigation gibts kein [Tutorial] also wo man es entpackt und wie man es benutzt u.s.w?

Mit Freundlichen
Grüßen
Can :ugeek:
Benutzeravatar
gsxfan
Mitglied
Beiträge: 562
Registriert: 29.11.2007 11:43
Wohnort: Mittelhessen

Re: CSS

Beitrag von gsxfan »

Ja da hat Dein Freund auch recht, das ist eine mögliche Navigation. Basierend auf Javascript.
Aber das für den Einbau notwendige Grundwissen in HTML und Gestaltung mit CSS musst Du Dir erst einmal aneignen, da wirst Du nicht drum herumkommen. Und das kann Dir hier auch keiner abnehmen.
In welche Dateien das reingehört, habe ich schon geschrieben. Aber das alleine nutzt Dir erst einmal wenig, denn dazu musst Du wissen, was dazu im Moment in Deinen entsprechenden Dateien drinsteht (Und das ist auch noch Style-abhängig) und die bestehenden Anweisungen entsprechend ändern.
Ohne zu wissen, welchen Style Du verwendest, kann Dir dabei auch keiner helfen.
Enduros putzen ist wie Bücher verbrennen.
Das GSX1100G-Forum
CrunkstyleCan
Mitglied
Beiträge: 14
Registriert: 21.02.2009 22:03

Re: CSS

Beitrag von CrunkstyleCan »

Ich benutze den Style: AeroRed
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“