Site Logo

[Hervé]

Hi,
I use Header Banner 3.2.4-RC1.
By defaut the "site logo" is the phpBB one displayed on wide screens on the left of the banner; it can be replaced by another image like the tiny house here.
On my board I do not need it but I use the "site_logo" to display an animated gif on the right on the banner.
For that purpose in my personnal style css I've written

Code: Select all

.site_logo {
	background-image: url("./images/site_logo.gif");
	background-repeat: no-repeat;
	display: inline-block;
	width: 150px;
	height: 50px;
position: relative;
top: 0px; left: 980px;
}

It works fine on large screen (the banner is 1150 px wide) and as it is not displayed on Smartphones it is OK too,
see https://www.leforumrecifal.com/ '4ème année" scrolling on the right (on large screen).

It appears that the site_logo is also displayed on smaller screens like iPad with a smaller banner :
as the position is fixed top: 0px; left: 980px; it is outside the banner !

I have tried top: 0px; right: 20px; expecting it would be 20 px from the right but it is now 20 px to the left of the left side of the banner !

How can I change my css so that it is always aligned right with the banner ?
Thanks

[Administrator]

I am not seeing any banner nor logo at that link

Just a suggestion but have you tried a negative value in the CSS?

[Hervé]

Hi,
No I have not tried a negative value.
Strange that you don't see the banner.
This is a screen copy with position: relative;top: 0px; left: 980px; the '4ème année' scrolling text is OK where it is on large screen

[Administrator]

My ad block was blocking it, I can see it now.

Where did you put that piece of CSS? In common.css or the extensions stylesheet?

[Hervé]

in my personnal style css I've written ...

[Administrator]

Take it from there and put it at the end of headerbanner.css and purge the cache

[Hervé]

Hi,
this does not change anything.
Of course with left: 980px; the 150 px logo is on the right of a 1150 pixels wide banner, and with a smaller banner it is outside of it.
Instead of putting the logo 980 px from the left it should be set at 150 px from the right but right: 150px; does not work either.

If I inspect the html code I get

Code: Select all

<div class="banner-header">
	<a id="headerbanner_logo" class="logo" href="https://www.LeForumRecifal.com/Accueil.php" title="Accueil">
	<span class="site_logo"></span></a>
</div>

Code: Select all

.banner-header #headerbanner_logo {
    float: left;
    width: auto;
    padding: 10px 13px 0 10px;
    position: absolute;
    z-index: 1;
}

Code: Select all

.site_logo {
    background-image: url(./images/site_logo.gif);
    background-repeat: no-repeat;
    display: inline-block;
    width: 150px;
    height: 50px;
    position: relative;
    top: 0px;
    left: 980px;
}

I think the problem is that class="logo" is relative to class="banner-header" which floats left.
I don't have sufficient css knowledge to be able to put it right.

[Administrator]

After I had closed everything down last night I realised that it probably would not of worked.

In headerbanner.css

replace

Code: Select all

.banner-header #headerbanner_logo {
    float: left;
    width: auto;
    padding: 10px 13px 0 10px;
    position: absolute;
    z-index: 1;
}

with

Code: Select all

.banner-header #headerbanner_logo {
    background-image: url(./images/site_logo.gif);
    background-repeat: no-repeat;
    display: inline-block;
    width: 150px;
    height: 50px;
    position: relative;
    top: 0px;
    left: 980px;
}

purge the cache etc and see what happens (you will have to activate the logo in the Header Banner configuration settings)

also where is the scrolling text defined? Its not in that CSS you gave me initially so is it in a template file and if so what is the code?

[Hervé]

The scrolling text is an animated gif : background-image: url(./images/site_logo.gif); the file is in /styles/LeForumRecifal/theme/images/

I don't think the modification will work because you set left: 980px; so it will be OK on a 1150 px wide banner but not if the banner is smaller, it's the same problem as now.

[Administrator]

I've run out of theoretical ideas, so if you let me have the images you are using (both banner and gif) I will experiment here and see what I can come up with