Header question

For support and discussion related to templates and themes in phpBB 3.3.
scorpio4646
Registered User
Posts: 84
Joined: Wed Dec 30, 2009 5:19 pm

Header question

Post by scorpio4646 »

Hi I have a question which I cannot find the answer to.
Can I add 2 hyperlink (hotspots) to my header as follows

Image(hotspot) -Logo - Image ( same hospot)

Any help would be appreciated

Scorpio4646
.m.
Registered User
Posts: 531
Joined: Wed Nov 04, 2009 8:39 pm

Re: Header question

Post by .m. »

you have to trace logo code in the style's template file "overall_header.html"
and add required 2nd link after the link of the logo

eg. logo code might be similar to below

Code: Select all

<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
after that you can add something like :

Code: Select all

<a id="logo2" class="logo2" href="required-link"><span class="site_logo2"></span></a>
AND you have to add above used style classes into common.css stylesheet with properties.
scorpio4646
Registered User
Posts: 84
Joined: Wed Dec 30, 2009 5:19 pm

Re: Header question

Post by scorpio4646 »

Thanks for your very quick reply

"AND you have to add above used style classes into common.css stylesheet with properties."
not sure what that means.
And where do I place the Hyperlinks. Where the required-link in red ?
scorpio4646
Registered User
Posts: 84
Joined: Wed Dec 30, 2009 5:19 pm

Re: Header question

Post by scorpio4646 »

Code: Select all

<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 style="height: 175px;">

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

		
    </div>
    
This is the only bit of code which contains <a id=
.m.
Registered User
Posts: 531
Joined: Wed Nov 04, 2009 8:39 pm

Re: Header question

Post by .m. »

I understand that you wanted to have 2 logo images side by side at the header
& they should have 2 links. can you confirm this is what you wanted to get ...

if so, you have to find the code related to header part & check code for logo;
accordingly you can use a span element next to existing logo code & add the
code for the second image & its link

can we have your board url so that someone can check
& suggest in a better manner :)
scorpio4646
Registered User
Posts: 84
Joined: Wed Dec 30, 2009 5:19 pm

Re: Header question

Post by scorpio4646 »

I wanted 2 links one either side of the of the main logo

Image(link) -Logo Image - Image ( same link)

URL
http://1club4alltv.com/phpbb/index.php
Last edited by scorpio4646 on Sun Jun 28, 2020 1:40 pm, edited 1 time in total.
scorpio4646
Registered User
Posts: 84
Joined: Wed Dec 30, 2009 5:19 pm

Re: Header question

Post by scorpio4646 »

*links
.m.
Registered User
Posts: 531
Joined: Wed Nov 04, 2009 8:39 pm

Re: Header question

Post by .m. »

your board has the header image defined from :

Code: Select all

<div id="page-header">
		<div class="headerbar">

Code: Select all

.headerbar {
       background-color: #12A3EB;
       background-image: url("./styles/prosilver/theme/images/blogheader.jpg");
           background-repeat:no-repeat;
       color: #FFFFFF;
for your requirement,
perhaps it'd be better to not use background image defined from stylesheet

instead change

Code: Select all

<div class="headerbar">
to something like :

Code: Select all

<span class="header_left"><a href="link 1"><img src="image 1" width="x" height="y" alt="" /></a></span>
<span class="header_right"><a href="link 2"><img src="image 2" width="x" height="y" alt="" /></a></span>
scorpio4646
Registered User
Posts: 84
Joined: Wed Dec 30, 2009 5:19 pm

Re: Header question

Post by scorpio4646 »

thanks for the help,
but that's only 2 images I need one in between those 2 as the main image. and how do I make images I and 3 with hyperlinks

Thanks
.m.
Registered User
Posts: 531
Joined: Wed Nov 04, 2009 8:39 pm

Re: Header question

Post by .m. »

^ your existing header image already fits the screen.
so are you willing to change it to a small image to accommodate 2 more images ?

perhaps like this:

Code: Select all

<span class="header_left"><a href="link 1"><img src="image 1" width="x" height="y" alt="" /></a></span>
<span class="header_middle"><a href="link 2"><img src="image 2" width="x" height="y" alt="" /></a></span>
<span class="header_right"><a href="link 3"><img src="image 3" width="x" height="y" alt="" /></a></span>
scorpio4646
Registered User
Posts: 84
Joined: Wed Dec 30, 2009 5:19 pm

Re: Header question

Post by scorpio4646 »

yes i will have to change my image size. What are the blue sections either side of my header ? Can't the be used ?
.m.
Registered User
Posts: 531
Joined: Wed Nov 04, 2009 8:39 pm

Re: Header question

Post by .m. »

^ that blank space can be used, but images should be arranged in
such a way that they are also clearly visible in a mobile device.

however, looks like you are using a old version of phpBB &
your phpBB board is not optimized for mobile view.

if you want to use available blank space to add 2 images then :
add first link & its image code after

Code: Select all

<div id="page-header">
AND add 2nd link & its image code
just before corresponding </div>

Code: Select all

<div id="page-header">
<span class="header_left"><a href="link 1"><img src="image 1" width="x" height="y" alt="" /></a></span>

Code: Select all

<span class="header_right"><a href="link 2"><img src="image 2" width="x" height="y" alt="" /></a></span>
</div>
User avatar
warmweer
Jr. Extension Validator
Posts: 4934
Joined: Fri Jul 04, 2003 6:34 am
Location: Van Allen Bel ... gium

Re: Header question

Post by warmweer »

.m. wrote:
Mon Jun 29, 2020 2:35 pm
however, looks like you are using a old version of phpBB &
your phpBB board is not optimized for mobile view.
haha, I was looking at it this morning and thinking: hey, it looks like a modified version of prosilver, not even thinking it could be an old version.
And old it is ... v 3.0.12 even.

Contemplating an upgrade could be more profitable than modifying the header.
3.0 is EOL as is 3.1 and in the not too distant future 3.2 will be likewise.
Spelling is freeware, which means you can use it for free.
On the other hand, it is not open source, which means you cannot change it or publish it in a modified form.
scorpio4646
Registered User
Posts: 84
Joined: Wed Dec 30, 2009 5:19 pm

Re: Header question

Post by scorpio4646 »

That's very helpful. I will have a play with it tomorrow after reading it all again and again and probably again. :)

Thanks for you help once again.
I assume that all theses changes are in overall_header
.m.
Registered User
Posts: 531
Joined: Wed Nov 04, 2009 8:39 pm

Re: Header question

Post by .m. »

^ yes, in general, header related changes should be done in overall_header
Post Reply

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