XF 1.5 I'm going crazy over here :( Banner/Header)

[Aquarist]

Hi everyone,

Please can someone point me in the right direction.

I have a forum setup on https://community.aquarist.com with my logo which is great, the problem occurs when i try adding 4 simple .png's to the banner and center them like the attached "community_header.png" i knocked together in photoshop.

I place the code in "ad_header" and the code I'm using is as follows:-

<xen:hook name="ad_header" />
    <div style="text-align: center;">
        <a href="https://community.aquarist.com/index.php#garden-ponds.7"><img title="Garden Ponds" src="https://community.aquarist.com/images/categories/garden_ponds.png" alt="Garden Ponds"/>
        <a href="https://community.aquarist.com/index.php#freshwater-aquariums.6"><img title="Freshwater" src="https://community.aquarist.com/images/categories/freshwater.png" alt="Freshwater"/>
        <a href="https://community.aquarist.com/index.php#tropical-aquariums.5"><img title="Tropical" src="https://community.aquarist.com/images/categories/tropical.png" alt="Tropical"/>
        <a href="https://community.aquarist.com/index.php#marine-aquariums.1"><img title="Marine" src="https://community.aquarist.com/images/categories/marine.png" alt="Marine"/>
    </div>

I checked the code and everything looks good (i think) i check it from this site here

The problem is that the top nav bar goes down like in the "community_header_bad.png" and i get two arrows over the logo, basically the header covers the forum categories and the arrows are from the "Nav breadcrumbs" and everything goes out of whack.

Please any advice would be great.

 

[Aquarist]

OK, now I have no idea what i'm doing...

I have now changed the code to the following: -

<xen:hook name="ad_header" />
<div style="text-align: center;">
    <a href="https://community.aquarist.com/index.php#marine-aquariums.1"><img title="Marine" src="https://community.aquarist.com/images/categories/marine.png" alt="Marine" align="middle"/>
    <a href="https://community.aquarist.com/index.php#tropical-aquariums.5"><img title="Tropical" src="https://community.aquarist.com/images/categories/tropical.png" alt="Tropical" align="middle"/>
    <a href="https://community.aquarist.com/index.php#freshwater-aquariums.6"><img title="Freshwater" src="https://community.aquarist.com/images/categories/freshwater.png" alt="Freshwater" align="middle"/>
    <a href="https://community.aquarist.com/index.php#garden-ponds.7"><img title="Garden Ponds" src="https://community.aquarist.com/images/categories/garden_ponds.png" alt="Garden Ponds" align="middle"/>
    </a>

this has changed it a bit https://community.aquarist.com

but it still looks a little off, and ideas anyone

 

[Jordyn]

This was certainly a tricky one with your set up. I cant even say this will even work for you, it works for me, but its worth trying.
Note, your images need to hide in responsive mode or it causes the same problem you're having..

Here is what i did which has seemed to work out ok.
Get ready for crazy code lol.

Add to your ad header:

<div class="headerimages">
<a href="https://aquarist.com/">
  <img title="Buy, Sell or Trade" src="https://community.aquarist.com/images/categories/listings.png" class="aqu" alt="Buy, Sell or Trade" style="width:160px;height:145px;border:0;">
</a>

<a href="https://community.aquarist.com/index.php#marine-aquariums.1">
  <img title="Marine" src="https://community.aquarist.com/images/categories/marine.png" class="aqu" alt="Marine" style="width:160px;height:145px;border:0;">
</a>

<a href="https://community.aquarist.com/index.php#tropical-aquariums.5">
  <img title="Tropical" src="https://community.aquarist.com/images/categories/tropical.png" class="aqu" alt="Tropical" style="width:160px;height:145px;border:0;">
</a>

<a href="https://community.aquarist.com/index.php#freshwater-aquariums.6">
  <img title="Freshwater" src="https://community.aquarist.com/images/categories/freshwater.png" class="aqu" alt="Freshwater" style="width:160px;height:145px;border:0;">
</a>

<a href="https://community.aquarist.com/index.php#garden-ponds.7">
  <img title="Garden Ponds" src="https://community.aquarist.com/images/categories/garden_ponds.png" class="aqu" alt="Garden Ponds" style="width:160px;height:145px;border:0;">
</a></div>

Add to EXTRA.css - The max-width is now 1150px as you added another image since i was working with 4. 1150px is for 5 images.

.aqu {
float:right;
margin-left:0px;
}
.aquClear {
float:right;
clear:right;
margin-left:0px;
}

<xen:if is="@enableResponsive">
@media (max-width:1150px)
{
.Responsive .headerimages {
display: none;
}
}
</xen:if>

You can use the margin-left:0px to move the images closer or further apart.

The final touch: Style Properties:
Header and Navigation>>Height of Header Logo = 145px and Width of Header Logo = 100%

Let me know how you go mate.

 

[shimspedy]

to be honest why did you choose to use the old xenforo?

 

[Jordyn]

to be honest why did you choose to use the old xenforo?

XF 1.5 is not broken man

 

[Aquarist]

to be honest why did you choose to use the old xenforo?

TBH i like the theme/style more on this one, at least until i can get one done

 

[Aquarist]

This was certainly a tricky one with your set up. I cant even say this will even work for you, it works for me, but its worth trying.
Note, your images need to hide in responsive mode or it causes the same problem you're having..

Here is what i did which has seemed to work out ok.
Get ready for crazy code lol.

Add to your ad header:

<div class="headerimages">
<a href="https://aquarist.com/">
  <img title="Buy, Sell or Trade" src="https://community.aquarist.com/images/categories/listings.png" class="aqu" alt="Buy, Sell or Trade" style="width:160px;height:145px;border:0;">
</a>

<a href="https://community.aquarist.com/index.php#marine-aquariums.1">
  <img title="Marine" src="https://community.aquarist.com/images/categories/marine.png" class="aqu" alt="Marine" style="width:160px;height:145px;border:0;">
</a>

<a href="https://community.aquarist.com/index.php#tropical-aquariums.5">
  <img title="Tropical" src="https://community.aquarist.com/images/categories/tropical.png" class="aqu" alt="Tropical" style="width:160px;height:145px;border:0;">
</a>

<a href="https://community.aquarist.com/index.php#freshwater-aquariums.6">
  <img title="Freshwater" src="https://community.aquarist.com/images/categories/freshwater.png" class="aqu" alt="Freshwater" style="width:160px;height:145px;border:0;">
</a>

<a href="https://community.aquarist.com/index.php#garden-ponds.7">
  <img title="Garden Ponds" src="https://community.aquarist.com/images/categories/garden_ponds.png" class="aqu" alt="Garden Ponds" style="width:160px;height:145px;border:0;">
</a></div>

Add to EXTRA.css - The max-width is now 1150px as you added another image since i was working with 4. 1150px is for 5 images.

.aqu {
float:right;
margin-left:0px;
}
.aquClear {
float:right;
clear:right;
margin-left:0px;
}

<xen:if is="@enableResponsive">
@media (max-width:1150px)
{
.Responsive .headerimages {
display: none;
}
}
</xen:if>

You can use the margin-left:0px to move the images closer or further apart.

The final touch: Style Properties:
Header and Navigation>>Height of Header Logo = 145px and Width of Header Logo = 100%

Let me know how you go mate.

YOUR THE MAN!!!

I did everything you said, but i wasn't sure where to put the very last step "width of header logo = 100%"

I love what you did mate, i really do. all the images display perfectly and then disappear if required. ***AMAZING***

If i can ever help you out sometime please let me know, i will do my best i promise!

Thank you sooooo much for helping me out on this

 

[Jordyn]

Oh, it must be a mod i am using that has that option. If it works without it then thats great.
Thanks for the feedback, glad it worked and you can now move on to the next step of your project.
If you need anymore help just drop us a PM. Cheers mate thanks