[How To] Modify prosilver's header

[Sinom]

You can center the headerbar by adding:

Code: Select all

	margin-left: auto;
	margin-right: auto;

Open common.css and find:

Code: Select all

.headerbar

Hugs

[ixtril]

You can center the headerbar by adding:

Code: Select all

	margin-left: auto;
	margin-right: auto;

Open common.css and find:

Code: Select all

.headerbar

Hugs

Doesn't work, i did it before and now, but nothing

*(I have clean the cache etc..)

[Sinom]

How are you editing your style?

I would recommend the following:

*Download a good text editing program - Such as Notepad++*

• Log in to your server using your FTP-client. Find and download the file you need to edit.
• Save a backup, make the changes you're going to do, and then save your file.
• Re-upload the file to your server, and then head into your forum.
• Log in to the ACP and head to ACP >> Styles > Choose Templates/Themes/Imagesets for your style and click Refresh!
• When you're done, you will have cleared the cache and will be able to see the changes you've done the next time you go to the board and hit F5.

Hugs

[ixtril]

How are you editing your style?

I would recommend the following:

*Download a good text editing program - Such as Notepad++*

• Log in to your server using your FTP-client. Find and download the file you need to edit.
• Save a backup, make the changes you're going to do, and then save your file.
• Re-upload the file to your server, and then head into your forum.
• Log in to the ACP and head to ACP >> Styles > Choose Templates/Themes/Imagesets for your style and click Refresh!
• When you're done, you will have cleared the cache and will be able to see the changes you've done the next time you go to the board and hit F5.

Hugs

Doesn't work! I removed the style, i downloaded and intalled again, I have done all that you said me, and doesn't work , what can i do?

[Sinom]

Can you provide a larger screen shot of your forum?

Or explain in text, what you're trying to accomplish from scratch.

Hugs

[ixtril]

This is my forum

http://img827.imageshack.us/img827/684/screen1nw.jpg

I'm trying to do this (or similar)

http://img821.imageshack.us/img821/1355/screen2gx.jpg

[Sinom]

I would recommend doing it the following way.

Go to \styles\prosilver\template and open overall_header.html

Find:

Code: Select all

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

The entire headerbar div.
Move that to above <div id="wrap">

Next, go to \styles\prosilver\theme and open common.css

Find:

Code: Select all

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

Add your width here, and adjust the wrap to be centered. IE, replace with:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

Hugs

[Karen Eidson]

I am in the process of modifying the header in my new forum. However, when I get to step #4, 1) Open styles/prosilver/template/overall_header.html, I open the file named and it is blank. Nothing is in there to change. What do I do now?

[ixtril]

Thank you, works so well!!

I'd like to know how can i change the size of logo, because when I put a picture as logo, the picture became small.

[Rahber]

I am in the process of modifying the header in my new forum. However, when I get to step #4, 1) Open styles/prosilver/template/overall_header.html, I open the file named and it is blank. Nothing is in there to change. What do I do now?

Looks like you have deleted the content while making some changes before. as phpBB is cached based so the changes are not reflected until the cache is update.
if you dont have any mod installed that involved edit in overall_header.html you need to take the overall_header.html from a vanilla download of phpBB ,copy it to your prosilver folder and then make the edit.

I'd like to know how can i change the size of logo, because when I put a picture as logo, the picture became small.

your site_logo image is controlled by imageset.You will need to make the change in imageset/imageset.cfg
img_site_logo = site_logo.gif*52*139 52 is height and 139 is the width.
You will also need to refresh your imageset from acp for the change to appear.

[bayer04forum]

Fixed the problem.

[Unifier]

I have read through this thread and did not find a reference to prosilver2. Does that mean the techniques provided here for customizing the header, will also apply to prosilver2?

[Lumpy Burgertushie]

I have read through this thread and did not find a reference to prosilver2. Does that mean the techniques provided here for customizing the header, will also apply to prosilver2?

there is no prosilver2 there is a subsilver2 and no, the prosilver methods do not apply because the code is completely different.


robert

[Ghalebi]

Hello,

I have followed the instructions and it worked with me in a localhost installation, picture:


But when I applied it on my website, this was the result:


as you see, it is a little stretched in the next photo, how can I fix this ?

Thanks in advance.

[Ghalebi]

Problem solved! I don't know how the picture was re-sized to a bigger dimensions when I uploaded it. I just re-uploaded it and it worked!

Thanks to Garebooo (phpBBArabia) for the tip