[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Mongbean
Registered User
Posts: 41
Joined: Mon Feb 18, 2013 11:10 am

Re: [How To] Modify prosilver's header

Post by Mongbean » Sun Apr 21, 2013 8:54 am

I corrected it now,

http://thecommunityfishbowl.com/index.p ... 7a8a5579c0

I want to stretch the banner so it covers the whole header, are you able to help me with this?

User avatar
Sinom
Translator
Posts: 1682
Joined: Thu Oct 28, 2010 9:53 am
Contact:

Re: [How To] Modify prosilver's header

Post by Sinom » Sun Apr 21, 2013 8:58 am

What do you mean "stretch"?

What you need to do is have a background in the header, and a logo in the center to create this.

You can try changing the width of your current logo to 100% to see how it would look.

Did you create that image yourself?

- Sinom

Mongbean
Registered User
Posts: 41
Joined: Mon Feb 18, 2013 11:10 am

Re: [How To] Modify prosilver's header

Post by Mongbean » Sun Apr 21, 2013 9:08 am

No I ran a comp on my fish forum and one of the members created it and it was voted the best of the bunch.

But I want it the maximum size it can be, I'm sorry to ask you but how do I increase the size of the banner?

on the site where the white is around the border I want to increase it to that size.

I think I know how to match the colour of the header to the background but I want to make sure the logo is at it's largest.

User avatar
Sinom
Translator
Posts: 1682
Joined: Thu Oct 28, 2010 9:53 am
Contact:

Re: [How To] Modify prosilver's header

Post by Sinom » Sun Apr 21, 2013 10:23 am

Well I wouldn't change the size of the logo, as it wouldn't help much.

You will need to go to /styles/prosilver/theme/ and open common.css

Find:

Code: Select all

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
	height: 100px;
}
Change ebebeb to something that fits your logo better. For example 66AAFF

- Sinom

Mongbean
Registered User
Posts: 41
Joined: Mon Feb 18, 2013 11:10 am

Re: [How To] Modify prosilver's header

Post by Mongbean » Sun Apr 21, 2013 10:47 am

Thanks Simon,

What exactly did that do?

http://thecommunityfishbowl.com/index.php

User avatar
Sinom
Translator
Posts: 1682
Joined: Thu Oct 28, 2010 9:53 am
Contact:

Re: [How To] Modify prosilver's header

Post by Sinom » Sun Apr 21, 2013 2:19 pm

I meant to create something like the following:
Image

To achive this, you'll need to first remove the white border on your logo.
Then change the background color to something like the image above.

To create something with a little more flow you'll need to create your logo transparent, and add an background image to the header bar.

Something like:
Image

- Sinom

Mongbean
Registered User
Posts: 41
Joined: Mon Feb 18, 2013 11:10 am

Re: [How To] Modify prosilver's header

Post by Mongbean » Thu Apr 25, 2013 8:51 am

Thanks for this! that's really awesome!

Big_Red_777
Registered User
Posts: 79
Joined: Mon Jul 16, 2012 8:45 pm

Re: [How To] Modify prosilver's header

Post by Big_Red_777 » Thu Jun 06, 2013 6:01 pm

Protech, I appreciate all your explanations. Thank you.

I am having a small issue with my newly installed search box. As you can see at the picture below, it does not goes across on the same line, but drops down to the next line, making the entire area bigger then it needs to be. Is there anyway to get it all on the same line?
SEARCH.JPG
SEARCH.JPG (18.22 KiB) Viewed 1058 times
And here is part of the code for my header page. Maybe you will see something in there:

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<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>
				
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		
			<span class="corners-bottom"><span></span></span></div>
		</div>

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

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
				            <li class="rightside" style="font-size: 1em;">
          <!-- 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 />
                    {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
             </div>
          <!-- ENDIF -->
        </li>

User avatar
pit-PL
Registered User
Posts: 3086
Joined: Sat Nov 21, 2009 12:24 pm

Re: [How To] Modify prosilver's header

Post by pit-PL » Thu Jun 06, 2013 6:41 pm

In common.css find

Code: Select all

#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 30px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}
remove margin-top: 30px;

Big_Red_777
Registered User
Posts: 79
Joined: Mon Jul 16, 2012 8:45 pm

Re: [How To] Modify prosilver's header

Post by Big_Red_777 » Thu Jun 06, 2013 6:48 pm

pit-PL, it worked! Your help is very much appreciated, thank you! :D

User avatar
rmharrison
Registered User
Posts: 21
Joined: Mon Feb 11, 2013 11:20 am
Location: Hampshire, UK
Name: Rich
Contact:

Re: [How To] Modify prosilver's header

Post by rmharrison » Sun Jul 07, 2013 3:31 am

Hello,

Not sure what is going wrong, i keep editing the Colour.css file but when i upload and then refresh nothing is happening, what am i doing wrong?

It worked before when i changed the colours :?: doing exactly the same, so confused

https://www.wyverns.co.uk/forum

Regards

RMHarrison

User avatar
Lumpy Burgertushie
Registered User
Posts: 66861
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How To] Modify prosilver's header

Post by Lumpy Burgertushie » Sun Jul 07, 2013 3:50 am

here is that file of yours:
https://www.wyverns.co.uk/forum/styles/ ... olours.css
note that it is named colours.css not Colour.css

check that and see if your changes are showing up.

if not, you need to go to the admin panel styles tab and refresh the theme for the prosilver style.

then you need to refresh your browser.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
rmharrison
Registered User
Posts: 21
Joined: Mon Feb 11, 2013 11:20 am
Location: Hampshire, UK
Name: Rich
Contact:

Re: [How To] Modify prosilver's header

Post by rmharrison » Sun Jul 07, 2013 10:52 am

Lumpy Burgertushie wrote:here is that file of yours:
https://www.wyverns.co.uk/forum/styles/ ... olours.css
note that it is named colours.css not Colour.css

check that and see if your changes are showing up.

if not, you need to go to the admin panel styles tab and refresh the theme for the prosilver style.

then you need to refresh your browser.


robert
Hello Robert and thank you for your reply,

I had a look at that file and yes the changes are there the main one being the background colour to Black #000000.

I refreshed all theme and template data withing PHPbb and Deleted all Catch data and History data from my browser, and still no changes.

I have also used another web browser aswell to try and see the changes, but nothing, this is very strange, last time the changes just worked straight away :?

Thanks

RMHarrison
Last edited by rmharrison on Sun Jul 07, 2013 11:11 am, edited 1 time in total.

User avatar
pit-PL
Registered User
Posts: 3086
Joined: Sat Nov 21, 2009 12:24 pm

Re: [How To] Modify prosilver's header

Post by pit-PL » Sun Jul 07, 2013 11:10 am

Make your changes in stylesheet.css below Colours and backgrounds for common.css.

User avatar
Lumpy Burgertushie
Registered User
Posts: 66861
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How To] Modify prosilver's header

Post by Lumpy Burgertushie » Sun Jul 07, 2013 1:52 pm

I have never seen prosilver/theme/stylesheet.css have all of the css for the board in it before. It normally only has the import lines.
how does it know to use that file instead of the separate css files when they are all present?


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

Locked

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