XF 2.1 Add an image to header on right?

[joshg]

I'm trying to figure out how to add a second image to the header bar on my forum. I've got the logo customized which shows up on the left, which is fine. But I have another image I'd like to put on the right side of that same bar.

I've looked at the app_header.less template but can't see an easy way to add an image to the right side.

Any tips appreciated!

-josh

 

[Paul B]

You can use the header ad position for the image.

The CSS can go in the extra.less template.

 

[joshg]

You can use the header ad position for the image.

The CSS can go in the extra.less template.

thanks! Can you be a little more specific for a CSS and template novice?

 

[Paul B]

The css depends on how you want to display the image.

There aren't default settings.

 

[joshg]

The css depends on how you want to display the image.

There aren't default settings.

thanks for replying... i guess I have a lot to learn as I have no idea what you're talking about. I do know about CSS at a very high level, but would need some more instructions on how to get a single image to appear on the right side in my header. Will keep looking for some easy way to do this... if anyone can give me instructions what to change where, and where to enter the path to the image I want on the right, and any parameters I'd need to set, I'd really appreciate it.

 

[Mr Lucky]

For something very basic in your admin control panel:

Setup > Advertising > Add adversisement - choose Container Header from position dropdown

Add html for image and some simple inline CSS (or as above give it a CSS class and reference that in extra.less)

<img style="width:100%;height:auto" src="https://example.com/xxxx.jpg" alt ="my image" />

or

<img style="max-width:300px;height:auto" src="https://example.com/xxxx.jpg" alt ="my image" />

or

<img class="header-image"  src="https://example.com/xxxx.jpg" alt ="my image" />

In the last example you would add the css for .header-image in extra.less

 

[joshg]

For something very basic in your admin control panel:

Setup > Advertising > Add adversisement - choose Container Header from position dropdown

Add html for image and some simple inline CSS (or as above give it a CSS class and reference that in extra.less)

<img style="width:100%;height:auto" src="https://example.com/xxxx.jpg" alt ="my image" />

or

<img style="max-width:300px;height:auto" src="https://example.com/xxxx.jpg" alt ="my image" />

or

<img class="header-image"  src="https://example.com/xxxx.jpg" alt ="my image" />

In the last example you would add the css for .header-image in extra.less

THANK YOU! This is exactly what I needed and it worked great.

 

[Alvin63]

Just been searching for the same thing and this post came up. I am unsure as to how the image is found as part of the code? It looks like a web address. So does the photo need a web address link or can you just upload it?