[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Locked
User avatar
TheSnake
Registered User
Posts: 483
Joined: Wed Aug 09, 2006 10:36 pm
Location: Staffordshire, England, UK
Contact:

Re: [How To] Modify prosilver's header

Post by TheSnake »

I noticed on the homepage of the site, you have a background image, do you want to use that for the forum as well?

MAKE A BACKUP COPY of ALL FILES before you do any edits, & backup your Database.

To add your navigation bar to the forum pages, you need to:
Open: styles/prosilver/template/overall_header.html

Find:

Code: Select all

			<div id="site-description">
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
Add after:

Code: Select all

Your Nav bar code
Open: styles/prosilver/theme/colours.css

Find:

Code: Select all

.forumbg {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}
Add after:

Code: Select all

Your Nav bar CSS Style colour/background code (if any).
Open: styles/prosilver/theme/common.css

Find:

Code: Select all

ul.rightside {
	float: right;
	margin-left: 5px;
	margin-right: -5px;
	text-align: right;
}
Add after:

Code: Select all

Your Nav bar CSS Style code.
Once you've done that, upload all the edited files to your website, purge the Template & Theme Cache, as well as the Forum Cache.

ACP -> General -> Purge the cache. Refresh. Yes to confirm.
ACP -> Styles -> Style components -> Templates -> prosilver -> Refresh. Yes to confirm.
ACP -> Styles -> Style components -> Themes ->prosilver -> Refresh. Yes to confirm.

MAKE A BACKUP COPY of ALL FILES before you do any edits, & backup your Database.
fusion1
Registered User
Posts: 4
Joined: Thu Dec 07, 2006 1:03 pm

Re: [How To] Modify prosilver's header

Post by fusion1 »

Just done the random header image and it only changes when you click refresh on the whole page or press f5

i want the header image to keep changing when a user mouse clicks on any links

can anyone help? ive been search for ages and cant find a simple soloution to this.
User avatar
TheSnake
Registered User
Posts: 483
Joined: Wed Aug 09, 2006 10:36 pm
Location: Staffordshire, England, UK
Contact:

Re: [How To] Modify prosilver's header

Post by TheSnake »

fusion1 Website URL?
fusion1
Registered User
Posts: 4
Joined: Thu Dec 07, 2006 1:03 pm

Re: [How To] Modify prosilver's header

Post by fusion1 »

TheSnake wrote:fusion1 Website URL?
Sorry, URL is: http://www.britishmods.com/
User avatar
TheSnake
Registered User
Posts: 483
Joined: Wed Aug 09, 2006 10:36 pm
Location: Staffordshire, England, UK
Contact:

Re: [How To] Modify prosilver's header

Post by TheSnake »

I see your using Prosilver Special Edition, am unsure if that style handles the header differently. Did you implement the code edits for the random header as listed on the first page of this topic? I use a self-modified prosilver style & every link causes a new image to load.
fusion1
Registered User
Posts: 4
Joined: Thu Dec 07, 2006 1:03 pm

Re: [How To] Modify prosilver's header

Post by fusion1 »

TheSnake wrote:I see your using Prosilver Special Edition, am unsure if that style handles the header differently. Did you implement the code edits for the random header as listed on the first page of this topic? I use a self-modified prosilver style & every link causes a new image to load.
Yes, ive done the changes exactly how listed.

i thought maybe it was just my browser but it happens on IE/FF/CHROME and also for other members on the forum as well it only changes if you hard refresh rather than just clicking links
User avatar
muggins
Registered User
Posts: 1183
Joined: Fri Feb 22, 2008 5:12 pm
Location: Texas
Name: Donovan
Contact:

Re: [How To] Modify prosilver's header

Post by muggins »

TheSanke wrote:I use a self-modified prosilver style & every link causes a new image to load.
Share with us your snippet, O hissing one. :mrgreen:
Muggins
User avatar
TheSnake
Registered User
Posts: 483
Joined: Wed Aug 09, 2006 10:36 pm
Location: Staffordshire, England, UK
Contact:

Re: [How To] Modify prosilver's header

Post by TheSnake »

muggins wrote:Share with us your snippet, O hissing one. :mrgreen:
I'm gonna have to try & figure out what I've screwed up first. :? I was making some style edits this afternoon, & had the fun of suffering a power outtage, since we got power back, I can't seem to get any ruddy images to change, either by clicking links, or by forced browser refresh (there is over 20 images). Can only get a new image to load when I manually restart the browser each time. :cry:
LSquared
Registered User
Posts: 8
Joined: Tue Mar 01, 2011 3:48 pm

Re: [How To] Modify prosilver's header

Post by LSquared »

I'm working on an adult forum so I'm sure I can't just link to it but I'll be glad to via PM if anyone can help and hopefully this screenshot is enough to clue someone in on what's going on, you can see that the header is now lined up correctly but it's like it shrunk the rest of the width or border from below the header so everything goes right to the edge of the white space...

Image
User avatar
TheSnake
Registered User
Posts: 483
Joined: Wed Aug 09, 2006 10:36 pm
Location: Staffordshire, England, UK
Contact:

Re: [How To] Modify prosilver's header

Post by TheSnake »

I remember having some form of similar issue when I first started changing the styling for my site. You will need to edit styles/prosilver/theme/common.css, find body { & add to it width: [b]???[/b]px; on a new line right before the line starting padding:.

Note: "???px;" being how wide, in pixels, your forum is. Depending on how wide your forum is, it might take a couple of attempts to get the width in pixels correct to the correct value.

As it looks like it is a centered & fixed width forum board, it is best to also change the line margin: 0; to margin: 0 auto;.
LSquared
Registered User
Posts: 8
Joined: Tue Mar 01, 2011 3:48 pm

Re: [How To] Modify prosilver's header

Post by LSquared »

Thanks so much for the reply Snake! I tried that even taking the width all the way up to 1000px and adding the "auto" to margin and it didn't change anything

I also just noticed that my images for PostReply and "Quote" and stuff like that are missing too?
User avatar
TheSnake
Registered User
Posts: 483
Joined: Wed Aug 09, 2006 10:36 pm
Location: Staffordshire, England, UK
Contact:

Re: [How To] Modify prosilver's header

Post by TheSnake »

After making the edits, did you purge the style cache, & the forum board cache (and your browser cache) ?

Without a link, I can't tell what could be wrong with teh images not showing, or fixing the margins.
LSquared
Registered User
Posts: 8
Joined: Tue Mar 01, 2011 3:48 pm

Re: [How To] Modify prosilver's header

Post by LSquared »

TheSnake wrote:After making the edits, did you purge the style cache, & the forum board cache (and your browser cache) ?

Without a link, I can't tell what could be wrong with teh images not showing, or fixing the margins.
Don't know if I'm allowed to post link here and it won't let me PM you but name is "lelulove" and forums link is under Contests/Requests, content is mature 18+only
User avatar
TheSnake
Registered User
Posts: 483
Joined: Wed Aug 09, 2006 10:36 pm
Location: Staffordshire, England, UK
Contact:

Re: [How To] Modify prosilver's header

Post by TheSnake »

Not sure why it won't allow you to PM me the details, my PM is available. Anyway, I've got the URL, so no problem there.

While looking at your CSS file, it looks like you've set the width & margin auto in the wrong place.

The section body { is where the margin & width are supposed to be set, but it is not present. However, the only place I can find the margin: 0 auto; etc, is in section #wrap {.

Before you do any file edits, MAKE A BACKUP COPY OF ALL FILES. & make a backup of your Database.

OK, if you go back into your code editor, this should fix it.

Open: styles/prosilver_se/theme/common.css

Find:

Code: Select all

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 27px 0;
}
Find this specific line:

Code: Select all

	margin: 0;
Replace with:

Code: Select all

	margin: 0 auto;
	width: 900px;
I've not used the Prosilver SE Style, so can't say for certain, but you might want to change the following section back to whatever it was previously.

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;
	width: 900px;
	margin: 0 auto;
}
Once you've done that, save all edited files, upload all edited files to the correct folders on your website.

Next, login to your Forum ACP, purge the Theme Cache, as well as the Forum Board Cache.

Code: Select all

ACP -> Styles -> Style components -> Themes -> Prosilver Special Edition -> Refresh. Yes to confirm.
ACP -> General -> Purge the cache. Run now. Yes to confirm.
Empty the Cache from your Browser.

Code: Select all

CTRL/Shift + F5 in your Browser to see the changes have taken effect.
Before you do any file edits, MAKE A BACKUP COPY OF ALL FILES, & make a backup of your Database.
LSquared
Registered User
Posts: 8
Joined: Tue Mar 01, 2011 3:48 pm

Re: [How To] Modify prosilver's header

Post by LSquared »

Forgot to mention I had made those changes when you suggested them but they didn't fix it, so I removed them. I added them back in now just to make sure, but still same result... Any other ideas?
Locked

Return to “[3.0.x] Styles Support & Discussion”