[split][How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
User avatar
Shakensoul
Registered User
Posts: 77
Joined: Fri Mar 20, 2009 9:37 am
Location: India
Contact:

[split][How To] Modify prosilver's header

Post by Shakensoul »

I am trying to make my phpbb board header similar to my joomla website. So far I have been successful in creating the header and it looks similar to my website (I think it looks similar :oops: )

Now to complete the look I need to create a menu in my forum header similar to my website as indicated in the picture. I have the menu pictures and the css file of the template if any one requires. Any help and guidance would be appreciated.

My board url is http://www.myfaridabad.in/forum

Website screenshot with menu:

Image

Forum screenshot where menu required:

Image
Last edited by PlanetStyles.net on Sun Oct 17, 2010 10:38 am, edited 1 time in total.
Reason: Topic icon changed
User avatar
PlanetStyles.net
Former Team Member
Posts: 4700
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [How To] Modify prosilver's header

Post by PlanetStyles.net »

All you'd need to do is make a new div for the buttons, put it inside the header-bg container and then use float / margin to position it.

So, open: overall_header.html

Find:

Code: Select all

<div id="header-bg">
	</div>
Replace with:

Code: Select all

<div id="header-bg">
   <div id="header-links">links here</div>
</div>
...and then the CSS you'd use would be something like:

Code: Select all

#header-links {
   float: right;
   margin-right: 100px;
   margin-top: 250px;
}
User avatar
Shakensoul
Registered User
Posts: 77
Joined: Fri Mar 20, 2009 9:37 am
Location: India
Contact:

Re: [split][How To] Modify prosilver's header

Post by Shakensoul »

Thanks for the pointer, much appreciated.

Currently I am experimenting with the FAQ link which I will modify once the alignment has been done.

How do I remove the dot appearing before the icon, how do I align multiple links as horizontal ?

My board url is http://www.myfaridabad.in/forum
User avatar
Shakensoul
Registered User
Posts: 77
Joined: Fri Mar 20, 2009 9:37 am
Location: India
Contact:

Re: [split][How To] Modify prosilver's header

Post by Shakensoul »

A little more pointer needed to remove the dot before the menu and align the image to the text.

Image
User avatar
PlanetStyles.net
Former Team Member
Posts: 4700
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [split][How To] Modify prosilver's header

Post by PlanetStyles.net »

Add this to your CSS :)

Code: Select all

#header-links li {list-style: none;}
#header-links li a {position: relative; top: -4px;}
User avatar
Shakensoul
Registered User
Posts: 77
Joined: Fri Mar 20, 2009 9:37 am
Location: India
Contact:

Re: [split][How To] Modify prosilver's header

Post by Shakensoul »

Christian 2.0 wrote:Add this to your CSS :)

Code: Select all

#header-links li {list-style: none;}
#header-links li a {position: relative; top: -4px;}
Thanks. I am making progress. :)
User avatar
Shakensoul
Registered User
Posts: 77
Joined: Fri Mar 20, 2009 9:37 am
Location: India
Contact:

Re: [split][How To] Modify prosilver's header

Post by Shakensoul »

My board url is http://www.myfaridabad.in/forum and I have modified my forum header to match with my joomla site. Everything is working fine except if the board is viewed in low resolution like 1064x768 or if the browser window size is resized to a small size, the header background breaks away from the wrap body background. Example attached in the screenshot.

Image

I would like the header and body to stay fixed and resize accordingly if the resolution is low or window is resized. Any help would be appreciated.
User avatar
PlanetStyles.net
Former Team Member
Posts: 4700
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [split][How To] Modify prosilver's header

Post by PlanetStyles.net »

I can't seem to access your site, the connection keeps timing out.

Are you currently able to access it?
User avatar
Shakensoul
Registered User
Posts: 77
Joined: Fri Mar 20, 2009 9:37 am
Location: India
Contact:

Re: [split][How To] Modify prosilver's header

Post by Shakensoul »

It is working fine for me, please try again. Thanks.
User avatar
PlanetStyles.net
Former Team Member
Posts: 4700
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [split][How To] Modify prosilver's header

Post by PlanetStyles.net »

Open: /styles/prosilver/theme/common.css

Find:

Code: Select all

#wrap-bg {
	width: 968px;
	margin: auto;
}
Replace with:

Code: Select all

#wrap-bg {
	width: 1160px;
	margin: auto;
}
Then in colours.css, find:

Code: Select all

#wrap-bg {
	background-image: url("{T_THEME_PATH}/images/bg_wrap.png");
	background-repeat: repeat-y;
}
Replace with:

Code: Select all

#wrap-bg {
	background-image: url("{T_THEME_PATH}/images/bg_wrap.png");
	background-repeat: repeat-y;
   background-position: 50% 0;
}
User avatar
Shakensoul
Registered User
Posts: 77
Joined: Fri Mar 20, 2009 9:37 am
Location: India
Contact:

Re: [split][How To] Modify prosilver's header

Post by Shakensoul »

That was superb, worked beautifully. Thanks a ton. :)
User avatar
Shakensoul
Registered User
Posts: 77
Joined: Fri Mar 20, 2009 9:37 am
Location: India
Contact:

Re: [split][How To] Modify prosilver's header

Post by Shakensoul »

A small glitch. The problem is still there in IE6 and sometime the window behaves wierdly. :oops:

I also checked through spoon.net browsers, the IE6 issue is still present. Though it is not much of a concern, wonder why its happening. :?
deepack
Registered User
Posts: 32
Joined: Mon Jan 21, 2008 10:08 am
Location: France

Re: [split][How To] Modify prosilver's header

Post by deepack »

Hey!

I would to do the same thing that the author of this topic.

But I don't know how to integrate the megamenu of joomla purity 2 in my phpbb3 board.

I see that in a board :
http://www.joomlart.com/forums/showthre ... post177341

But I don't know where is the source of the megamenu and how how to "call the megamenu scripts"

Thanks for your help ;)
Locked

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