Startseite - Logo und Spalte - prosilver_se

[Dagobert6]

Hallo Leute

verwende die Version 3.0.2 mit dem prosilver_se style.
Ich möchte zwei Änderungen daran vornehmen.

1.) Im selben Header auf ganzer Breite ein Hintergrundbild einfügen

2.) Dem Forum auf der rechten Seite eine ca 60 px breite Spalte für Information einfügen.

Kenne mich mit Dreamweaver aus und verstehe auch die CSS.
Kannst du mir die html Dateien bzw CSS Datei Namen nennen, wo die Änderungen durchzuführen sind?

Nur der Durchblick der Zusammenhänge fehlt mir komplett. (Setze das Board und phpBB erst seit kurzen ein und muß mich erst damit einleben)

Gibt es wo eine Dateibeschreibung?

LG von Dagobert6

[marc1706]

Zu 1:
Öffne prosilver_se/theme/colours.css
Finde:

Code: Alles auswählen

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

(Es kann sein dass bei prosilver_se das ganze ein bisschen anders aussieht. Dann einfach nach .headerbar suchen.)
Ersetze dann die bg_header.gif mit deinem Hintergrundbild.

Desweiteren öffne noch prosilver_se/theme/common.css
Finde:

Code: Alles auswählen

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}

Falls du nun ein Hintergrundbild hast, das über die ganze Breite geht, ersetze die repeat-x mit no-repeat. Falls du eine feste breite bevorzugst, dann sollte das ganze dann so aussehen:

Code: Alles auswählen

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
        width: 850px;
}

Wobei die 850px durch die gewünschte Breite ersetzt werden sollte.

Danach noch die prosilver_se/template/overall_header.html öffnen.
Finde:

Code: Alles auswählen

<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

Ersetze mit:

Code: Alles auswählen

<div style="height: 140px;" />
			<div id="site-description">
				
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

Bei <div style="height: 140px;" /> muss die mit der Höhe deines Bildes - 10px ausgetauscht werden. Falls du auch den Namen deiner Seite im Logo hast und die Seiten-Beschreibung loshaben willst, tausche das ganze gegen folgendes aus:

Code: Alles auswählen

div style="height: 140px;" />
			<div id="site-description">
				
				
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

[Dagobert6]

Hallo marc1706

Superfein das du mir das so verständlich gelistet hast.

Hat dein Thread durch die Textbeschränkung etwas von deiner Message verschluckt?

Kannst du mir mtteilen in welcher CSS Datei das Feld {SITE_DESCRIPTION} formatiert wird? Das ist der Zusatztext zum Forennamen auf der Hauptseite. Ich habe die <h1>{SITENAME}</h1> aus der overall_header.html entfernt. Jetzt ist die Zeile ganz oben. Möchte diese etwas runter und breiter machen.

Bitte in einem weitern Tread fortfahren. Beginne gleich mit der Umsetzung.

Vielen Dank von
Dagobert6

[marc1706]

Die Positionierung wird nur wie folgt formatiert:

Code: Alles auswählen

#site-description {
	float: left;
	width: 70%;
}

Die Breite wird hier durch "width: 70%;" definiert. Die Größe ist die standardmäßige Schriftgröße, die Schriftfarbe hier definiert:

Code: Alles auswählen

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}

(Also in dem Fall color: #FFFFFF;)

Du könntest die ganze Schrift aber wie folgt verschieben:

Code: Alles auswählen

<div style="height: 140px;" />
         <div id="site-description">
            
          
            <p style="padding-left: 25px; padding-top: 25px;">{SITE_DESCRIPTION}</p>
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>

padding-left verschiebt das ganze auf der x-Achse, also positive Werte verschieben es nach rechts. padding-top verschieben das ganze auf der y-Achse, jedoch verschieben positive Werte das ganze nach unten.

So sollte das ganze dann funktionieren.

Gruß, Marc.

P.S: Ne von meinem Beitrag wurde nichts abgetrennt, ich musste bloß noch wohin und hab das ganze nur schnell runtergeschrieben.

[Dagobert6]

einfach klasse!
DANKE!

Kannst du mir mtteilen in welcher CSS Datei das Feld {SITE_DESCRIPTION} formatiert wird? Das ist der Zusatztext zum Forennamen auf der Hauptseite. Ich habe die <h1>{SITENAME}</h1> aus der overall_header.html entfernt. Jetzt ist die Zeile ganz oben. Möchte diese etwas runter und breiter machen.

Wo kann die größer der Button REPLAY verändert werden? Im Style sind die englischen. Wenn ich diese gegen die deutschen tausche, werden diese abgeschnitten. Klar zuwenig px

Hast du eine Idee für mich?

[marc1706]

Die Positionierung wird nur wie folgt formatiert:

Code: Alles auswählen

#site-description {
	float: left;
	width: 70%;
}

Die Breite wird hier durch "width: 70%;" definiert. Die Größe ist die standardmäßige Schriftgröße, die Schriftfarbe hier definiert:

Code: Alles auswählen

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}

(Also in dem Fall color: #FFFFFF;)

Du könntest die ganze Schrift aber wie folgt verschieben:

Code: Alles auswählen

<div style="height: 140px;" />
         <div id="site-description">
            
          
            <p style="padding-left: 25px; padding-top: 25px;">{SITE_DESCRIPTION}</p>
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>

padding-left verschiebt das ganze auf der x-Achse, also positive Werte verschieben es nach rechts. padding-top verschieben das ganze auf der y-Achse, jedoch verschieben positive Werte das ganze nach unten.

So sollte das ganze dann funktionieren.

Gruß, Marc.

P.S: Ne von meinem Beitrag wurde nichts abgetrennt, ich musste bloß noch wohin und hab das ganze nur schnell runtergeschrieben.

Hallo,
diese Antwort handelt eigentlich vom anpassen der Beschreibung. ({SITE_DESCRIPTION})

Gruß, Marc.

[Dagobert6]

Kannst du mir mtteilen in welcher CSS Datei das Feld {SITE_DESCRIPTION} formatiert wird? Das ist der Zusatztext zum Forennamen auf der Hauptseite. Ich habe die <h1>{SITENAME}</h1> aus der overall_header.html entfernt. Jetzt ist die Zeile ganz oben. Möchte diese etwas runter und breiter machen.

Wo kann die größer der Button REPLAY verändert werden? Im Style sind die englischen. Wenn ich diese gegen die deutschen tausche, werden diese abgeschnitten. Klar zuwenig px

Denke da liegt zur erneuten Frage eine Verwechslung vor! Meinte nun das {SITE_DESCRIPTION} Feld du hast die DIV SITE-DESCRIPTION beschrieben. Da gehts dann um die Größe und Positionierung im CSS für die Zusatztextbeschreibung.

[marc1706]

Ne, da liegt eigentlich keine Verwechslung vor.
{SITE_DESCRIPTION} ist bloß der Text ohne jede Formatierung, also die Seitenbeschreibung die du im Administrations-Bereich eingibst. Das ganze wird erst durch das oben genannte formatiert.

Gruß, Marc.

[Dagobert6]

Mann oh Mann bin ich blind.
Na klar. Jetzt hab ich dich verstanden.

Kanns du mir noch beim Link setzen helfen?
Funktion so wie früher das Logo hatte!

Liebe Grüße sendet dir
Dagobert6

[marc1706]

Öffne prosilver_se/template/overall_header.html

Finde:

Code: Alles auswählen

    <div id="site-description">

Füge danach ein:

Code: Alles auswählen

Select all
    <a href="{U_INDEX}" title="{L_INDEX}" id="header-link">Index</a>

Danach öffne prosilver_se/theme/colours.css
Füge folgendes am Ende der Datei hinzu:

Code: Alles auswählen

Select all
    a#header-link {
      display: block ;
      width: auto ;
      height: 100px ; /* Change according to your needs */
      text-indent: -1000px ;
    }

Die Höhe sollte die gleiche wie die Höhe deines Banners sein.

(Code und Anleitung von prototech auf phpbb.com)