[gelöst]Link im Header, farben und Schrift ändern

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
BoZA
Mitglied
Beiträge: 9
Registriert: 13.02.2008 00:05

[gelöst]Link im Header, farben und Schrift ändern

Beitrag von BoZA »

Hi ich hoffe ihr könnt mir helfen!?

Ich habe im Header ein Link eingebaut. Leider weiß ich nicht, wie ich den farblich ändern kann bzw. auch die Schriftart festlegen kann, sowie die Position kann ich nur nach unten bestimmen.

overall_header.html

Code: Alles auswählen

<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<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>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
			  <form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
            <!-- Der Gallery Link -->
            <div id="Gallery-box">
              <a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a>
            </div>
		<!-- ENDIF -->
common.css

Code: Alles auswählen

#Gallery-box {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	color: #FFFFFF;
	margin-top: 60px;
	
}
Hier ein kleines Bild des Headers
[ externes Bild ]


Danke für Eure Hilfe im Voraus!!!
Zuletzt geändert von BoZA am 15.02.2008 16:07, insgesamt 1-mal geändert.
Benutzeravatar
Shuichi
Mitglied
Beiträge: 130
Registriert: 07.12.2006 13:48

Beitrag von Shuichi »

Es geht hier drum?

Code: Alles auswählen

<a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a> 
Ich denke du musst es so machen:

Code: Alles auswählen

<a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}" class="muster">{L_GALLERY}</a> 
Also eine class für diesen Link definieren; entweder benutzt du eine bestehende aus der CSS oder erstellst gegebenenfalls eine neue.
BoZA
Mitglied
Beiträge: 9
Registriert: 13.02.2008 00:05

Beitrag von BoZA »

Shuichi hat geschrieben:Es geht hier drum?

Code: Alles auswählen

<a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a> 
Ich denke du musst es so machen:

Code: Alles auswählen

<a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}" class="muster">{L_GALLERY}</a> 
Also eine class für diesen Link definieren; entweder benutzt du eine bestehende aus der CSS oder erstellst gegebenenfalls eine neue.
Ah cool, genau das meine ich!!

Und wie kann ich sie in der common.css ansprechen??

Code: Alles auswählen

.muster {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 20px;
	color: #FFFFFF;
}
edit:/ Super das Klappt, jedoch kann ich die Position nicht verändern, sowie die Schriftfarbe! Muss ich das evtl. in einer anderen CSS Datei machen`?
BoZA
Mitglied
Beiträge: 9
Registriert: 13.02.2008 00:05

Beitrag von BoZA »

Ich erneuer mal mneine Frage!

Ich habe nun geschafft den Link zu setzen. Allerdings wie o. beschrieben konnte ich weder Farbe noch Schriftart sowie Position verändern.

Nun habe ich mich entschieden den Link einfach durch ein Bild zu ersetzen!!
Also ein weiteres Bild in der Headerbar bestimmen...

Wie tu ich dies nun. Habe versucht in der Online Doku von phpbb3 mich schlau zu lesen doch leider ohne erfolg.

der Links zu der seite ist "klick mich"

Danke euch für eure Hilfe im Voraus.

MfG Bo
Benutzeravatar
Shuichi
Mitglied
Beiträge: 130
Registriert: 07.12.2006 13:48

Beitrag von Shuichi »

Was die Farbe angeht:

Code: Alles auswählen

.muster {
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 20px;
   color: #FFFFFF;
}
Das ist dein Code - wenn du genau hinsiehst hast du zweimal "color" definiert und er nimmt logischerweise die untere Bezeichnung; also es bleibt immer weiß, egal, wie du die obere Definierung änderst. Also änder es in:

Code: Alles auswählen

.muster {
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 20px;
}
Dann geht das schonmal.

Was die Position angeht: Wie bzw. wo genau willst du es denn positionieren? Was stellst du dir da vor?
BoZA
Mitglied
Beiträge: 9
Registriert: 13.02.2008 00:05

Beitrag von BoZA »

Shuichi hat geschrieben:
Dann geht das schonmal.

Was die Position angeht: Wie bzw. wo genau willst du es denn positionieren? Was stellst du dir da vor?
Naja, sagen wir mal so. Ich habe mich jetzt dazu entschieden für den Link ein Bild einzufügen, aber auch da stoss ich auf meine Unkentnis bzgl XHTML und CSS.

overall_header.html

Code: Alles auswählen

<div id="Gallery-box">
              <a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN} class="gallery">{GALLERY_IMG}</a>
            </div>
common.css

Code: Alles auswählen

.gallery {
	background-image: url("{T_THEME_PATH}/imageset/gallery.png");
	float: right;
	width: auto;
	padding: 10px 13px 0 10px;
}

/*und*/

#Gallery-box {
	background-image: url("{T_THEME_PATH}/imageset/gallery.png");
	float: right;
	width: auto;
	padding: 10px 13px 0 10px;
}
Ich packe[/quote] es einfach nicht...
Benutzeravatar
Dr.Death
Moderator
Moderator
Beiträge: 17473
Registriert: 23.04.2003 08:22
Wohnort: Xanten
Kontaktdaten:

Beitrag von Dr.Death »

Du hast noch einen SYNTAX Error:

Code: Alles auswählen

<a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN} class="gallery">{GALLERY_IMG}</a>
Sollte eher:

Code: Alles auswählen

<a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}" class="gallery">{GALLERY_IMG}</a>
heissen.

Und unter:

http://www.steinhaus-berlin.de/Forum/st ... allery.png

existiert kein Bild...daher kann es auch nicht angezeigt werden.
BoZA
Mitglied
Beiträge: 9
Registriert: 13.02.2008 00:05

Beitrag von BoZA »

Ah super!

Tausen Dank das Bild ist jetzt richtig Positioniert!

Nur ich hab noch ein Problem!
Ich bekomme das Bild nich verlinkt!

overall_header.html

Code: Alles auswählen

 <div id="Gallery-box">
              <a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}" class="gallery">{GALLERY_IMG}</a>
            </div>
common.css

Code: Alles auswählen

.gallery {
  /*Muss ich hier evtl noch was reinschrieben um das Bild
  	richtig zu verlinken? */
}

#Gallery-box {
	background: no-repeat;
	background-image: url("{T_THEME_PATH}/images/gallery.png");
	width: auto;
	height: 25px;
	margin-top: 60px;
	margin-left: 530px;
}
Danke Dr.Death! Den Syntax Error hätte ich niemals entdeckt!
Benutzeravatar
Shuichi
Mitglied
Beiträge: 130
Registriert: 07.12.2006 13:48

Beitrag von Shuichi »

Dein Bild ist ein Backgroundbild - diese kann man, meines Wissens, nicht verlinken.

Du müsstest das Bild via <img src=""> definieren und bei

Code: Alles auswählen

{GALLERY_IMG}
einfügen.
BoZA
Mitglied
Beiträge: 9
Registriert: 13.02.2008 00:05

Beitrag von BoZA »

Shuichi hat geschrieben:Dein Bild ist ein Backgroundbild - diese kann man, meines Wissens, nicht verlinken.

Du müsstest das Bild via <img src=""> definieren und bei

Code: Alles auswählen

{GALLERY_IMG}
einfügen.
Super hat perfekt geklappt!

Ich bedanke mich nochmal bei all denen die mir so super geholfen haben!

Danke schön!
Antworten

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