Page 1 of 1

Prosilver Header

Posted: Fri Nov 18, 2016 2:57 pm
by Paul_M
Hello, I've been asking in a few places for help with this but nobody seems to know or get what I mean.

I'm trying to change the header on Prosilver, the 2 changes are...
1 - Remove the margin/padding/space from the top of the header (green arrows in pic I've added)
2 - Make the header wider so it's like a site wide bar (red arrows in pic)

Image

Basically I want it to look like the bottom image, I've been trying for hours and everytime I get somewhere i notice something else moves with it :oops:

If it's possible - any help would be appreciated , please and thanks :)

Re: Prosilver Header

Posted: Fri Nov 18, 2016 6:24 pm
by Lumpy Burgertushie
you have posted in the 3.0 forum so I assume that is what you are using. therefore;

be sure to refresh your template and theme after making the changes and then your browser.

here is what I did to get what you want:


overall_header.html

find and cut:

Code: Select all

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

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>‹</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 -->
			</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>
find:

Code: Select all

<div id="page-body">
on a new line after, add:

Code: Select all

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

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>‹</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 -->
			</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>

common.css

find:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;
}

#simple-wrap {
	padding: 6px 10px;
}

#page-body {
	margin: 4px 0;
	clear: both;
}
replace with:

Code: Select all

#wrap {
	padding: 0px;
	min-width: 650px;
}

#simple-wrap {
	padding: 6px 10px;
}

#page-body {
	margin: 4px 20px;
	clear: both;
}
robert

Re: Prosilver Header

Posted: Fri Nov 18, 2016 9:07 pm
by Paul_M
Hey thanks Robert,

I'm not sure if i'm doing it wrong but those changes are expanding the navbar and forums as well as the header bar?

The only way i found to get the header bar to widen was to go to the .headerbar and adding:

Code: Select all

	margin-left: -20px;
	margin-right: -20px;
But i'm not sure if margins like that are a good idea?

Re: Prosilver Header

Posted: Sat Nov 19, 2016 3:56 am
by Lumpy Burgertushie
whatever works, works. however, I tested those instructions and on prosilver they work perfectly.

the header bar expands to fill to the sides of the wrap and the rest of the body maintains its 20 pixel padding.


robert

Re: Prosilver Header

Posted: Sat Nov 19, 2016 5:31 pm
by Paul_M
Robert, Thanks again for your help, You were right :oops: i cut the bit you said and pasted the new bit straight over it, if i had read it slower i might have noticed you said add it after div id="page-body" :lol:
All sorted now though.
Thanks again.