Dreiteiliger Hintergrund - prosilver

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.
FrostAgent
Mitglied
Beiträge: 159
Registriert: 15.12.2007 13:27

Re: Dreiteiliger Hintergrund - prosilver

Beitrag von FrostAgent »

Moin,

den wrap3 habe ich nun komplett aus dem Footer herausgenommen, habe es nun mit der von dir vorgeschlagenen Variante in Angriff genommen, sprich erstmal das Copyright auf den Standard zurückgesetzt und das Footerbild separat eingebunden.

Jetzt kommt es auch nicht mehr zu den unschönen Fehldarstellungen, einzigst der Copyright-Text wird nicht mehr direkt in dem Bild angezeigt, wobei es in der aktuellen Form auch gar nicht mal so schlecht aussieht.

Mittlerweile schon eine Menge geschafft, vor allem dank deiner Unterstützung, danke. :wink:

Edit:

Den Header möchte ich noch etwas "erhöhen" sprich, dass er eine Höhe von rund 120px hat und diese auch dargestellt werden. Folglich habe ihm wrap3 nun einfach mal height auf 120px gesetzt,

Code: Alles auswählen

/* Header*/
#wrap2 {
	width: 100%;
	margin: 0 auto;
	background-image: url("./images/header_fansfrenzy.png");
	background-repeat:no-repeat;
	height: 120px
	
	
}
Dier Headergrafik wird mir nun auch problemlos und "unabgeschnitten" angezeigt, zuvor wurde mir im Portal immer ein Stück abgeschnitten, sah relativ unschön aus.

Das Problem liegt jetzt an folgender Stelle:

Die unbeantworteten Beiträge etc. werden mir nun im Navibereich angezeigt, nicht wie zuvor darunter, außerhalb des blauen Feldes, mit der aktuellen Zeit etc. sieht es genauso aus, ist nach oben gerutscht, bzw der Navbereich ist durch den Header nach unten gerutscht.

Kann ich die Headerhöhe auch ohne diese "Probleme" anpassen? Wahrscheinlich sind auch das die Probleme die du mit meinen eingeschobenen wraps meintest. :oops:
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5044
Registriert: 08.06.2009 12:03

Re: Dreiteiliger Hintergrund - prosilver

Beitrag von Talk19zehn »

Hello, bitteschön und gerne!

Prima!


BTW:
Bastelstube Overall.header_html?
Nun hast du dir jedoch den Kopfbereich irgendwie zerschossen? Header, Navbar und ungelesene Beiträge und so weiter ( kleines Grummel --> nett, freundlich und gut gelaunt gemeint). Schade, wenn neue Baustellen entstehen, wo es eigentlich keine gab. Ich würde das rückabwickeln.... :wink: , weiß zwar nicht genau, was du nun gemacht hast ( muss ich ja auch nicht ).

Offenbar störte dich eine fehlende Hintergrundfarbe für die ungelesenen Beiträge etc.:
Wenn du möchtest, dass die ungelesenen Beiträge etc. eine Hintergrundfarbe haben, suche den Teil der CSS-Notation ( Navbar ) in der du "...transparent..." hinterlegt hast... :wink: und vergib eine Hintergrundfarbe.

Viele Grüße



Edit:
Der vorherige Fußball gefiel mir besser, - er hatte auch so schöne passende Grautöne. Das ist ja nun gediegen --> Da der Fußball nun etwas größer ist, wird die untere Rundung in der Portalansicht einfach abgeschnitten. Merkwürdig, dass die Höhe nicht greift. Ich komme nicht dahinter, - ehrlich. Sonst würde ich dir gerne eine Lösung vorschlagen.

Idee 8) Portalboxen:
Sie ließen sich einheitlich zum Erscheinungsbild gestalten, wenn du in der _block_config.html ( styles/......./template/portal ) die Klasse bg3 durch die Klasse forabg ersetzt. Jedenfalls mache ich das meist so, da mir diese BG-Hintergründe der Boxen in der Portalsansicht meist optisch missfallen. In deinem Falle könnte sich die Ansicht konform anpassen. ( Ohne Gewähr, da ich dein Konstrukt nicht im einzelnen kenne ).

Gruß


Edit2: Headerhöhe - siehe Common.CSS
Versuche in deinem Falle der Klasse Headerbar eine Höhe zu geben und ändere margin-bottom ggf. wieder auf seinen Ursprungswert ( 4px) oder einen gewünschten Wert:

Code: Alles auswählen

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

Sonst wüßte ich momentan nicht, wo ich ansetzen sollte.

.
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren. Meine Tastatur klemmt.
FrostAgent
Mitglied
Beiträge: 159
Registriert: 15.12.2007 13:27

Re: Dreiteiliger Hintergrund - prosilver

Beitrag von FrostAgent »

Moin,

mit Änderung der headerbar funktionierts nun, jetzt wirkt es im Portal auch nicht mehr so abgeschnitten, top.

Den Header müsst ich vielleicht noch etwas ausarbeiten und mir für den Hintergrund etwas einfallen lassen, ansonsten habe ich nun schon eine Meeenge erledigt. 8)
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5044
Registriert: 08.06.2009 12:03

Re: Hintergrund - prosilver

Beitrag von Talk19zehn »

Moin,

hm...., - ich komme heute früh zu dem Ergebnis, dass Teile deiner *overall_header.html nicht korrekt verschachtelt sein mögen.... :oops: und noch immer Teile der eigentlichen navbar fehlen (leftside???)

Zwar ist die Darstellung offenbar in Ordnung. Nur, das "Verrutschen", wie von dir erwähnt:
FrostAgent hat geschrieben:Das Problem liegt jetzt an folgender Stelle:

Die unbeantworteten Beiträge etc. werden mir nun im Navibereich angezeigt, nicht wie zuvor darunter, außerhalb des blauen Feldes, mit der aktuellen Zeit etc. sieht es genauso aus, ist nach oben gerutscht, bzw der Navbereich ist durch den Header nach unten gerutscht.

Kann ich die Headerhöhe auch ohne diese "Probleme" anpassen?
wäre ein Indiz auf einen Fehler in deiner Verschachtelung oder nicht sachgerecht geschlossenen Containern. Denn im Grunde macht es aus meiner Sicht weniger Sinn, die Klasse Headerbar in ihrer Höhe zu beschränken. Diese "Notlösung" von 130px der Höhe in der Klasse Headerbar führt ggf. später zu weiteren Fehlerchen oder mühsamen Rekonstruktion bei etwaigen neuen Einbauten.
Überprüfe bitte die overall_header.html erneut, da ist durch das Hin,- und Herkopieren bzw. der Neuanlage nach dem Parse-Error deinerseits etwas "verwurschtelt", denke ich gaaanz freundlich.

Ich kann das *Konstrukt nur mühsam mit Firebug bearbeiten, um zu einer Lösung zu gelangen.
Eigentlich hätte ich persönlich Wrap2 direkt wieder geschlossen und dem Wrap einen Abstand von oben gegeben, ohne die Klasse Headerbar anzutasten. Vgl. darum bitte ggf. noch einmal hiesige Beiträge unter Beachtung deiner eingebauten Modifikationen.... :oops:

Vor Änderung, wie immer überall empfohlen: Sicherungen hast du bestimmt angelegt?
Beste Grüße
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren. Meine Tastatur klemmt.
FrostAgent
Mitglied
Beiträge: 159
Registriert: 15.12.2007 13:27

Re: Dreiteiliger Hintergrund - prosilver

Beitrag von FrostAgent »

Moin,

ich bin soeben nochmal alles abgegangen und habe meine overall_header mit dem Original verglichen, allerdings konnten mir keine Verschachtelungsprobleme auffallen. Es ist auch alles wichtige wie in dem Original enthalte, ebenfalls die leftside der navbar. Vielleicht gibt es Probleme weil die eigentliche class=navbar mit forabg ausgetauscht wurde..?

Code: Alles auswählen

<div id="wrap">
	<div id="wrap2">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><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>
		<!-- ENDIF -->

			<span class="corners-bottom"><span></span></span></div>
		</div>
<!-- IF not $S_IN_PORTAL or S_DISPLAY_PHPBB_MENU -->

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

			<ul class="linklist navlinks">
				<li class="icon-home"><!-- IF U_FOOTBALL --><a href="{U_FOOTBALL}">{S_FOOTBALL_NAME}</a> &#187; <!-- ENDIF --><!-- IF U_PORTAL --><a href="{U_PORTAL}">{L_PORTAL}</a> &#187; <!-- ENDIF --><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
				<!-- [+] MOD: phpBB3 Football -->
				<!-- IF U_PRINT_FOOTBALL --><li class="rightside"><a href="{U_PRINT_FOOTBALL}" title="{L_PRINT_FOOTBALL}" accesskey="p" class="print">{L_PRINT_FOOTBALL}</a></li><!-- ENDIF -->
				<!-- [-] MOD: phpBB3 Football -->
			</ul>

			
			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
			
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->

	</div>
	</div>
<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
      <div class="navbar" style="margin-top:5px">
         <div class="inner"><span class="corners-top"><span></span></span>
            <ul class="linklist leftside">
            <!-- IF S_DISPLAY_SEARCH -->
            <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><!-- IF S_USER_LOGGED_IN --> &bull; <a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a> &bull; <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><!-- ENDIF --> &bull; <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a> &bull; <!-- IF U_MCP --><a href="{U_MCP}">{L_MCP}</a><!-- ENDIF --></li>
            <!-- ENDIF -->
            </ul>
               
            <ul class="linklist rightside">
                <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
            <!-- IF not S_IS_BOT and U_MARK_FORUMS -->
                <li class="rightside"><a href="{U_MARK_FORUMS}" accesskey="m">{L_MARK_FORUMS_READ}</a> &nbsp; </li>
                <!-- ENDIF -->
                <!-- ENDIF -->

               <!-- IF not S_IS_BOT and U_MARK_TOPICS -->
               <li class="rightside"><a href="{U_MARK_TOPICS}" accesskey="m">{L_MARK_TOPICS_READ}</a> &nbsp; </li>
               <!-- ENDIF -->
             </ul>           
         <span class="corners-bottom"><span></span></span>
            </div>
      </div>
<!-- ENDIF -->
	<a name="start_here"></a>
	<div id="page-body">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
Im Notfall müsste ich in der overall_header wohl nochmal neustarten. :oops:
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5044
Registriert: 08.06.2009 12:03

Re: Hintergrund - prosilver

Beitrag von Talk19zehn »

Hello,

hm, - Notepad++ und ich sind blind... :lol: Wir haben zwar sommerliche Temperaturen, aber irgendwo ist im QT so eine Art "Glatteis" versteckt. Schaue dir doch bitte deinen Quelltext im Browser an, der etwas anderes aussagt, als das letzte Posting. Kann es sein, dass du gar nicht via ftp sondern nur im ACP arbeitest? Wie sollte dann eine optimale Hilfe gegeben werden, wenn er, sie, es eine "Rutschbahn" ( wegen dem "Glatteis" meine ich ) :lol: vofindet. So erhälst du garantiert Tipps, die nicht der Realität entsprächen.


FTP-Prozedere: Informationen kennst du doch, - :-? oder nicht?

Vorsicht: Nicht, dass du nun versehentlich Teile löschst.
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren. Meine Tastatur klemmt.
FrostAgent
Mitglied
Beiträge: 159
Registriert: 15.12.2007 13:27

Re: Dreiteiliger Hintergrund - prosilver

Beitrag von FrostAgent »

Moin,

nutze ebenfalls notepad++, der Text den ich gepostet habe ist auch original aus meinem overall_header, vielleicht ist der Browser auch einfach doof. :D
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5044
Registriert: 08.06.2009 12:03

Re: Dreiteiliger Hintergrund - prosilver

Beitrag von Talk19zehn »

Moin, moin,

[ot]
:D so etwas gibt´s tatsächlich? Ach was.. :lol: :lol: . [/ot]


Ich wünsche dir jedenfalls viel Glück und erachte es persönlich als wichitg, dass du die overall_header.html nochmals überprüfst. Auch Opera oder der IE *kamen mit vergleichbaren Teilchen, wie Firebug im FF nicht wirklich dahiner, was geschah. Ist ja nicht so tragisch, denn Browser sind nicht fehlerlos. Jedoch sehr intelligent, wie ich meine.

Hauptsache du bist dir deiner Einbauten bewusst und kannst rasch handeln, sofern es in der Klasse Headerbar wegen der 130px mal zu einem Fehler käme. :oops: Wohl ist mir nicht dabei.

Das Grobe ist ja nun vollbracht!!!!

Beste Grüße

*Edit: RS --> ....... :lol: ........ diese G**gle-RS hat nicht gehalten, was sie verspricht. ( Sorry! )
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren. Meine Tastatur klemmt.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5044
Registriert: 08.06.2009 12:03

Re: Dreiteiliger Hintergrund - prosilver

Beitrag von Talk19zehn »

Hello, ich ergänze, da ich den vorherigen Beitrag nicht mehr editieren kann.

Schau doch mal in jenes Thema hinein ----> Änderung der Schriftgröße in der Kategoriebeschreibung und setze es bei Bedarf und Gefallen um??
Effekt vorher:
[ externes Bild ]

Nachher:
[ externes Bild ]
.
Grüße

Großes Edit

Ich habe einen Fehler meinerseits entdeckt und ich kann den Beitrag nicht mehr ändern. Auf der Seite 3 ist eine geschweifte Klammer am Ende der folgenden Notation zuviel:

viewtopic.php?p=1232485#p1232485

Beispiel: Hier hat das Bild eine Höhe von 52px und ich gebe einen obigen Abstand zum Element von 2px hinzu.
CSS

Code: Alles auswählen
.meinfooterbild {
width: 100%;
margin: 2px auto;
height: 52px;
background-color: #CCCCCC;
background: url("{T_THEME_PATH}/images/dasfooterbild.gif") repeat-x;
background-position: top center;
}} <----- hier

Richtig ist:

Code: Alles auswählen

.meinfooterbild {
width: 100%;
margin: 2px auto;
height: 52px;
background-color: #CCCCCC;
background: url("{T_THEME_PATH}/images/dasfooterbild.gif") repeat-x;
background-position: top center;
}
Habe es heute erst bemerkt..... :oops:

LG
Zuletzt geändert von Talk19zehn am 12.05.2011 20:12, insgesamt 2-mal geändert.
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren. Meine Tastatur klemmt.
FrostAgent
Mitglied
Beiträge: 159
Registriert: 15.12.2007 13:27

Re: Dreiteiliger Hintergrund - prosilver

Beitrag von FrostAgent »

Moin,

danke für den Tipp, bei kleineren Auflösungen sieht es nun auch besser aus, zusätzlich ist der Rechtschreibfehler weg, aus FUSSBALL ist jetzt Fußball geworden, klasse. :wink:
Antworten

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