[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
TinaMay
Registered User
Posts: 11
Joined: Thu Jun 26, 2008 4:14 pm

Re: [How To] Modify prosilver's header

Post by TinaMay » Thu Jun 26, 2008 6:15 pm

I see someone said they were able to "delete the top margin right above the header." Right now in my forum, there is why space before any of the text starts - that is before the header logos etc.

I am wondering how the top margin above the header is deleted??

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech » Thu Jun 26, 2008 8:24 pm

In 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: 12px 0;
}
Replace with:

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-bottom: 12px;
}
Then refresh your theme - ACP => Styles => Style Components => Themes.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

hazu
Registered User
Posts: 2
Joined: Thu Jun 26, 2008 9:52 pm

Re: [How To] Modify prosilver's header

Post by hazu » Thu Jun 26, 2008 9:59 pm

Because of this thread I now know how to remover the margin above the header bar. However, I would like also to remove the margins to the left and right of the header bar. If possible, I would like to do it for the header only, and thus not changing the left and right margins for the forum itself.

What I want to achieve is that the header of my forum (http://www.cemarking.net/forum/) looks the same as for this website: http://www.alura-xl.com

Regards,
Han

inayan
Registered User
Posts: 41
Joined: Fri Apr 13, 2007 9:25 pm
Location: Knoxville, TN

Re: [How To] Modify prosilver's header

Post by inayan » Sun Jun 29, 2008 3:37 am

I applied the new header with these instructions and I think everything worked out well. Thank you very much!

One issue though. Everything looks great on my browser of choice (Safari) and also Firefox but apparently on some version of Internet Explorer (on Windows) the new header graphic on my forums repeats itself just a little to the right.

Any suggestions?

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech » Sun Jun 29, 2008 7:58 am

inayan wrote:However, I would like also to remove the margins to the left and right of the header bar.
In overall_header.html, find and remove:

Code: Select all

<div id="wrap">
Find:

Code: Select all

<div class="navbar">
Before, add:

Code: Select all

<div id="wrap">
Then refresh your template - ACP => Styles => Style Components => Templates.
inayan wrote:Everything looks great on my browser of choice (Safari) and also Firefox but apparently on some version of Internet Explorer (on Windows) the new header graphic on my forums repeats itself just a little to the right.
In common.css, find:

Code: Select all

.headerbar {
   background: #ebebeb none repeat-x 0 0;
Replace with:

Code: Select all

.headerbar {
   background: #ebebeb none no-repeat 0 0;
Then refresh your theme - ACP => Styles => Style Components => Themes.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

inayan
Registered User
Posts: 41
Joined: Fri Apr 13, 2007 9:25 pm
Location: Knoxville, TN

Re: [How To] Modify prosilver's header

Post by inayan » Sun Jun 29, 2008 4:50 pm

prototech -

Thanks VERY much!

User avatar
rosdi
Registered User
Posts: 166
Joined: Wed May 14, 2008 10:26 am
Contact:

Re: [How To] Modify prosilver's header

Post by rosdi » Mon Jun 30, 2008 6:05 am

I'm using both themes: subsilver base for main and prosilver for mod calendar. I have 2 questions:

1. How can I center the Site Name and Site Description in prosilver
2. How can I set to auto size the Site Logo image in prosilver

I want to set the prosilver to follow subsilver.

Thanks.

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [How To] Modify prosilver's header

Post by Raimon » Mon Jun 30, 2008 10:10 am

rosdi wrote:I'm using both themes: subsilver base for main and prosilver for mod calendar. I have 2 questions:

1. How can I center the Site Name and Site Description in prosilver
open overall_header.html

search:

Code: Select all

<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
replace with:

Code: Select all

<div style="text-align: center;">
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
</div>
2. How can I set to auto size the Site Logo image in prosilver
on the file styles/prosilver/imageset/imageset.cfg

search:

Code: Select all

img_site_logo = site_logo.gif*52*139
change the size you like , after that refresh your imageset ( acp -> styles -> imageset -> refresh )
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

inayan
Registered User
Posts: 41
Joined: Fri Apr 13, 2007 9:25 pm
Location: Knoxville, TN

Re: [How To] Modify prosilver's header

Post by inayan » Mon Jun 30, 2008 3:37 pm

prototech or Raimon -

I have searched around and not found any threads that I believe can answer my question fully. If this is too off topic for this thread I apologize.

I am using a fixed width Progray and want to add a border much like this site has. Can you help me here or direct me to a thread I have missed somewhere?

Thanks much as always!

( http://www.inayan.com/forums )

User avatar
rosdi
Registered User
Posts: 166
Joined: Wed May 14, 2008 10:26 am
Contact:

Re: [How To] Modify prosilver's header

Post by rosdi » Mon Jun 30, 2008 3:57 pm

Raimon wrote:
rosdi wrote:I'm using both themes: subsilver base for main and prosilver for mod calendar. I have 2 questions:

1. How can I center the Site Name and Site Description in prosilver
open overall_header.html

search:

Code: Select all

<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
replace with:

Code: Select all

<div style="text-align: center;">
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
</div>
2. How can I set to auto size the Site Logo image in prosilver
on the file styles/prosilver/imageset/imageset.cfg

search:

Code: Select all

img_site_logo = site_logo.gif*52*139
change the size you like , after that refresh your imageset ( acp -> styles -> imageset -> refresh )
Thank you bro. It is working. :D

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech » Tue Jul 01, 2008 7:41 pm

inayan wrote:I am using a fixed width Progray and want to add a border much like this site has. Can you help me here or direct me to a thread I have missed somewhere?
Take a look at this topic: http://www.phpbb.com/community/viewtopi ... 4&t=546765
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

#Darren
Registered User
Posts: 206
Joined: Mon Jun 05, 2006 5:18 pm

Re: [How To] Modify prosilver's header

Post by #Darren » Fri Jul 04, 2008 11:11 am

prototech wrote:I'll add another two tutorials that will explain how to replace the "Change font size" icon with the search box and how to add a link to the search similar to what phpbb.com has.
Prototech, did you do these tutorials? I haven't been around for a while and might have missed them :)

inayan
Registered User
Posts: 41
Joined: Fri Apr 13, 2007 9:25 pm
Location: Knoxville, TN

Re: [How To] Modify prosilver's header

Post by inayan » Sun Jul 06, 2008 5:18 pm

I am still getting some color under my banner image that I would prefer not be there. Any ideas how to get rid of it?

aquaman
Registered User
Posts: 20
Joined: Sat May 24, 2008 7:52 am

Re: [How To] Modify prosilver's header

Post by aquaman » Mon Jul 07, 2008 1:33 am

Hi,
thank you for this tutorial - great work!

First I did
* Add a Custom Header Image
then I moved on with
* Add a Random Header Image

Both work for me - except on the search page.
There is a line that shouldn´t be there and the Banner has no rounded corners on the bottom.
Here is the link: hxxp://forum.aquarienfotografie.net (please replace xx through tt)

Anyone able to help?

User avatar
jtryptophan
Registered User
Posts: 299
Joined: Wed Apr 09, 2008 5:38 pm
Location: Baltimore, MD
Contact:

Re: [How To] Modify prosilver's header

Post by jtryptophan » Mon Jul 07, 2008 7:35 pm

Many thanks to prototech for starting this gem of a topic. I have a problem with my header. Users logged out will see a flash logo, logged in users get the less distracting static banner. My code is working except I have a slight problem with the flash logo being off center to the right and down and is overlapping the static image. Any help with this?

Image

Code: Select all

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

<div style="height: 90px ;">
         <div id="site-description">           
                 <!-- IF S_USER_LOGGED_IN -->
            <a href="{U_INDEX}" title="{L_INDEX}" id="header-link">Index</a>
         <!-- ENDIF -->
         <!-- IF not S_USER_LOGGED_IN -->
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="610" height="100">
                    <param name="movie" value="styles/prosilver/theme/images/MW_Banner.swf">
                    <param name="quality" value="high">

                    <embed src="styles/prosilver/theme/images/MW_Banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="610" height="100"></embed></object> 
         <!-- ENDIF -->
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>

Locked

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