[How To] Modify prosilver's header

[Sinom]

Hello lesadale!

Your image has the dimensions: 940x150px
And your wrap only has the width of: 872px

As well as your headerbarhas the padding on each side of 5px.

Go to /styles/prosilver/theme/ and open common.css

Find:

Code: Select all

#wrap {
       padding: 0 20px;
       min-width: 650px;
             width: 872px;
             margin: 0 auto;
             border: 5px solid #FF9933;

Change the width accordingly.

Hugs

[lesadale]

Thanks so much. I also changed my padding in both my wrap and headerbar.

[havealookhere]

Hello,

I try to add the random header image to my forum ..

I got some questions because i cant get it working.

Do the images have to be a specific size?

I did the changings but the bleu bar above will not change into pictures.

Can you help me?

Regards Jasper

[Sinom]

Hello heavenlookhere!

Did you refresh your style in the ACP?

Go to - ACP >> Styles > Templates/Themes/Imagesets > YourStyle - Refresh

Do the images have to be a specific size?

If you're adding an image as your banner, then image should have the appropriate size to your forums width.

For instance, if your forum has the width 900px, your image should have the same.

Hugs

[havealookhere]

Hello,

Yeah i refreshed them all several times.

Uhm this is something weird but i cant find the widht of the forum and not the hight.

Probally i am looking wrong but do you know the standard size of a fresh instalation?

Or is it only the width of the picture important.

regards Jasper

[Sinom]

Either you have a fixed width (like phpBB.com) where the width of the forum is a constant.

This can easily be done on prosilver by going to \styles\prosilver\theme and opening common.css

Find:

Code: Select all

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

Replace with:

Code: Select all

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

With that change, your forum will always be displayed with 1100px width. Whereas your custom header image should be with the same width.

Or if you want your forum to have fluid width, as prosilver does by default, you can place your background in the middle.
By adding: background-position:center;

Hugs

[richbouchard]

Hello,

I have a custom horizontal list in my header that works as a navigation menu to integrate my forum with the rest of my site. I'd like to insert an extra list item conditionally based on whether or not a user belongs to a certain group.

Is there something in the template variables like IF U_IN_GROUP N that I could use here?

I think I can see a way to do it by editing includes/functions.php to assign a global template variable flag dependent on group membership, but I'd rather avoid code customisations if I can and just do it in the template. Is it possible?

Alternatively, I can give the users a custom profile field rather than assign them to a special group to differentiate them. The important point is, regular logged in users shouldn't see the list item in the header nav menu and these "special" users (who aren't mods or admins) should. Can anyone suggest the best approach here?

Supplemental question: the nav bar is fixed width and normally displays 7 list item nav buttons of equal width (set in CSS). Once I insert this conditional 8th list item, all the items in the nav bar need to be 1/7th narrower to make room. Is there a way to make the width of each list item automatic rather than fixed? (I realise this is more of a CSS issue so I'll investigate elsewhere, just thought an expert here might have a quick answer).

Many thanks,

Rich

[Peter77sx]

Can someone please demonstrate how we can add social icons to our Prosilver header? Just like here on phpbb.com I know enough that I'll need to place them on a div or something..

[Sinom]

Hello richbouchard!

Please see - http://www.phpbb.com/community/viewtopi ... 5#p8675775

Regarding the 8th item on your menu. You can change the width of your menu links to a % of 100%, where as if you add another item the others would shrink.

@Peter

Go to \styles\prosilver\theme\images and create a new folder in that called social
Place your images inside that folder. As a test I used images from here.

Next, open colours.css and add at the bottom of the file:

Code: Select all

#social_bar {
	height: 20px;
	margin: 0 auto;
	position: relative;
	right: 10px;
	top: -53px;
}
#social_buttons {
	float: right;
}

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

Find:

Code: Select all

<div class="navbar">

Add on a new line before:

Code: Select all

<div id="social_bar">
				<div id="social_buttons">
					<a href="Link to your feeds"><img alt="RSS" src="{T_THEME_PATH}/images/social/social_rss.png"></a>
					<a href="http://www.facebook.com/"><img alt="Facebook" src="{T_THEME_PATH}/images/social/social_facebook.png"></a>
					<a href="http://www.twitter.com/"><img alt="Twitter" src="{T_THEME_PATH}/images/social/social_Twitter.png"></a>
				</div>
</div>

Don't forget to refresh your style in the ACP.

This should result with:



Hugs

[Peter77sx]

Sinom, excellent! worked like a charm. thank you it's much appreciated

[richbouchard]

Hello richbouchard!

Please see - http://www.phpbb.com/community/viewtopi ... 5#p8675775

Wow. I searched ages for that before posting but obviously didn't find the right keywords.

Regarding the 8th item on your menu. You can change the width of your menu links to a % of 100%, where as if you add another item the others would shrink.

Didn't know that. So I can just make them 100/7 % wide by default and then, conditionally, add the 8th list item with 100/8 % width and it will just resize the others to fit?! I thought it would flow onto a new line (which wouldn't be good!)

Thanks for your quick and friendly help.

Rich

[havealookhere]

Hey it is working.

Ty TY ty ty ty ty ty ty ty ty

Hugs

jap

[ixtril]

I changed the widht of my header but i have a problem, i can't center the header.



how can i do it?

[Sinom]

Hello ixtril!

Did you change anything other than the width of the header? (The wrap perhaps)

Mind providing a link to your forum?

@richbouchard

I missed your reply, did you solve this issue?

Hugs

[ixtril]

Hello ixtril!

Did you change anything other than the width of the header? (The wrap perhaps)

Mind providing a link to your forum?

@richbouchard

I missed your reply, did you solve this issue?

Hugs

I changed the ".wrap" to change the width of my forum, and too the ".headerbar" to change the widht of my header, but i don't know how to put the header in the center.

The line black that you can see in the picture is the blue header deafult, but i changed the size and color.

I don't have my forum in a server, i use a localhost.

thank you!