Rahmen um das komplette Forum

Elvis · Beitrag von **Elvis** » 28.06.2008 13:12

Hallo,
ich habe eine kleine Anleitung geschrieben wie man um das Forum einen Rahmen mit abgerundeten Ecken bekommt.

Da ich es leid bin zig Emails zu beantworten, dachte ich mir mach es öffentlich und Du hast deine Ruhe (Hoffe ich zu mindestens)

zum Artikel (prosilver)

zum Artikel (subsilver2)

powersilie · Beitrag von **powersilie** » 28.06.2008 16:46

Hallo!

Super! Aber so wirklich Ruhe wirst Du noch nicht haben

Wenn ich ganz lieb bitte, geht sowas für subsilver2 auch???

Danke und lg
Powersilie

Elvis · Beitrag von **Elvis** » 28.06.2008 17:22

Therotisch geht das, aber Praxis mäßig mmhh.
wenn ich Ehrlich bin habe ich mir das subsilver2 noch nie vom Code angesehen

da ich gerade mal schnell was Probiert habe kannste ja mal Testen ob das mit <div> klappt, wenn nicht mußte wohl <Table> benutzen.

füge am Ende deiner
styles/subsilver2/theme/stylesheet.css
ein

Code: Alles auswählen

.top-left, .top-right, .bottom-left, .bottom-right {
   background-image: url("./images/rahmen.gif"); /* Pfad und Name des Bildes */
   height: 20px;       	/* hoehe der Ecken --  haelfte der hoehe vom Bild */
   font-size: 2px;		/* Korrektur fuer die hoehe des IE <div>'s */
   }
   
.top-left, .bottom-left {
   margin-right: 20px; /* breite der Ecken */
   }
   
.top-right, .bottom-right {
   margin-left: 20px;  /* Breite der Ecken */
   margin-top: -20px;  /* Hoehe der Ecken - Negativ */
   }
   
.top-right {
   background-position: 100% 0;	/* Positionierung der Ecken - rechts, nur Horizontal */
   }
   
.bottom-left  {
   background-position: 0 -20px;	/* ersetze die zweite Zahl durch die Negative hoehe von einer Ecke */
   }
   
.bottom-right {
   background-position: 100% -20px; /* ersetze die zweite Zahl durch die Negative hoehe von einer Ecke */
   }
   
.inside {
   border-left: 1px solid #0076b1; 	/* Breite, Stil, Farbe - links */
   border-right: 1px solid #0076b1;	/* Breite, Stil, Farbe - rechts */
   background: #FFFFFF;            	/* Hintergrundfarbe - innen */
   color: #394B5F;                 	/* Textfarbe - innen */
   padding-left: 0px;             	/* Text Abstand - links */
   padding-right: 0px;				/* Text Abstand - rechts */	
   padding-top: 0px;             	/* Text Abstand - oben */
   }
   
.notopgap    { margin-top: 0; }

.nobottomgap { margin-bottom: 0; }

.outside {
   margin: 0 auto;
   width : 980px; /* Breite gesamt */
   padding: 10px;
	}

Das Bild muß dann in styles/subsilver2/theme/images/ liegen.

öffne
styles/subsilver2/template/overall_header.html
und finde

Code: Alles auswählen

<body class="{S_CONTENT_DIRECTION}">

füge dadrunter ein

Code: Alles auswählen

<!-- Rahmen 1/4 -->
<div class="outside">
<div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap">
<!-- Rahmen 2/4 -->

öffne
styles/subsilver2/template/overall_footer.html
und finde

Code: Alles auswählen

</body>
</html>

füge davor ein

Code: Alles auswählen

<!-- Rahmen 3/4 -->
</div>
<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
</div>
<!-- Rahmen 4/4 -->

und nicht Vergessen den Cache zu leeren.

powersilie · Beitrag von **powersilie** » 28.06.2008 18:39

Hallo Elvis!

Kommt fast hin, Du bist ganz nah dran

Es wird genauso, wie ich es mit vorgestellt habe!!!!

Im Header ist nur noch ein schmaler weißer Streifen und im Footer kommt die Farbe (hab ich auf #010851 geändert nicht hin und die Breite haut nicht ganz hin.

http://fweb30.ok-webhost06.de/forum/index.php

lg
Powersilie

Elvis · Beitrag von **Elvis** » 28.06.2008 18:49

das kann auch nicht klappen, guck dir mal deine grafik an und dann meine Grafik.

Man beachte die Größe-

Wenn Du die selbe Grafik benutzten willst, mußt die mindestens 980px Breit und 40 px hoch sein, als ein Bild.

powersilie · Beitrag von **powersilie** » 28.06.2008 18:58

Das ist der falsche Style! Das ist der andere...

Hier sind die Screenshots von header und footer::

[ externes Bild ]

[ externes Bild ]

Ist schon fast genauso, wie ich es mir vorgestellt habe!!!

lg
Powersilie

Elvis · Beitrag von **Elvis** » 28.06.2008 19:06

ein anderen Style sehe ich bzw kann ich ja nicht Auswählen.

gib mir mal den Download link vom style dann werde ich mir das mal angucken, denn auf den bilder sieht man nicht viel.

powersilie · Beitrag von **powersilie** » 28.06.2008 19:24

Der blaue Style hat einen Rahmen, das ist SmoothBLUE und der bleibt so

Der weiße ist original subsilver2, den ich mir selbst geändert habe.

Hier nochmal größere Screenshots:

[ externes Bild ]

[ externes Bild ]

lg
Powersilie

Elvis · Beitrag von **Elvis** » 28.06.2008 19:53

Der weiße ist original subsilver2, den ich mir selbst geändert habe.

OK wusste ich ja nicht das Du es selber geändert hast.

dann öffne mal deine styles/subsilver2/theme/stylesheet.css
und suche nach

.outside {
margin: 0 auto;
width : 980px; /* Breite gesamt */
padding: 10px;
}

und da wo margin: 0 auto; steht, änderste die 0 in 10px.

margin: 10px auto;

kann das sein das die Screens mit dem IE gemacht worden sind ?

powersilie · Beitrag von **powersilie** » 28.06.2008 21:45

Hallo!

Sorry, daß ich so spät erst antworte, aber mußte zu meiner Freundin, die hatte gerade einen Epi-Anfall und die Rettung konnte wegen dem Hund nicht rein. Aber wieder alles ok..

So, habe das gemacht und außerdem Dein rand.gif in ein rand.png mit transparentem Hintergrund umgewandelt. Jetzt ist auch der weiße Rand weg.

Nur im Footer gehen die beiden Geraden auf den Seiten runter, anstatt sich mit der Rundung zu verbinden.

[ externes Bild ]

Und: nein, die Screens hab ich mit dem FF gemacht.

Im IE sieht es nicht gut aus. Ich mach Dir morgen einen Testzugang - muß dann ins Bett, ich bin hundemüde.

Vielen, vielen Dank für Deine Hilfe und Deine Tipps, es ist schon zu 99% super

- bis auf den Footer halt.

Liebe Grüße
Powersilie