Two forum logos, left and right justified.

[macflurry]

Hi,

How would you go about adding two forum logos that each sit to the left and the right of the banner?

I have a forum logo that I want sat to the left and an image that I want sat to the right.  This way they always sit to the edges of the screen regardless of the page size on a browser.

[Alan Vende]

Hi, macflurry ,

First thing's first: you would first need to upload your image to the respective themes in which you wanted to use it on in Admin > Themes > Theme Manager. Once there, you'll see an Images column. Under that, will show the number of images you have in each respective theme. If you hover over the numbers, you'll see a button called Images. If you click that, you'll be in the Images area for that respective theme.

Once you click Images, wait for it to load and then scroll down to the bottom until you see Custom Theme Images. That's where you will want to upload your images.

After you put your images into the Images area, you'll want to navigate to your Forum Wrapper (Admin > Themes > Layout Templates > Forum Wrapper (the first option in your Layout Templates).

In there is where you'll put the code below.

On about line 56 (depending on how much customization you have in that template), you'll see a code <h2 id="banner">. Put your cursor after the closing > and press Enter/Return to create a new line.

On that new line, paste the two lines of code below. You can duplicate it as many times as you want and use the position property that I talk about later in this post to position them.

You would use a variation of this code:

<img class="YOUR CLASS NAME HERE" src="YOUR IMAGE URL HERE" width="42" height="42">
<img class="YOUR CLASS NAME HERE" src="YOUR IMAGE URL HERE" width="42" height="42">

The width and height are optional items. I've left them there just so you know how they would go in the code. (For the "YOUR IMAGE URL HERE," you'll insert the URL that you find by clicking the Link button on the respective image(s) once they are successfully uploaded to the theme.

In your CSS (Admin > Themes > Advanced Styles & CSS), you'll paste this at the bottom of your style sheet for for the theme(s) that you would like to use the two images on (I've color coded the respective classes above so they are the same below.):

.YOUR CLASS NAME HERE {
float: left;
position: relative;
left: 10px;
}
.YOUR SECOND CLASS NAME HERE {
float: right;
position: relative;
right: 10px;
}

Additionally, if you don't want the images to be completely flush with the left or right side of the banner, you can use the position CSS property to move it in a bit, like I did above.

I hope this helps! If you have anymore questions, please don't hesitate to ask!

[macflurry]

Jul 17, 2018 12:37:57 GMT -8 Alan Vende said:

You would use a variation of this code:

<img class="YOUR CLASS NAME HERE" src="YOUR IMAGE URL HERE" width="42" height="42">
<img class="YOUR CLASS NAME HERE" src="YOUR IMAGE URL HERE" width="42" height="42">

The width and height are optional items. I've left them there just so you know how they would go in the code. (For the "YOUR IMAGE URL HERE," you'll insert the URL that you find by clicking the Link button on the respective image(s) once they are successfully uploaded to the theme.

Thank you for your help!!

For the first two lines of code, where are they saved?

I have saved the images in Admin > Themes > Theme Manager
I have saved the second box of code in Admin > Themes > Advanced Styles & CSS

Thanks again,Stu.

[Alan Vende]

Jul 18, 2018 14:08:30 GMT -8 macflurry said:

Jul 17, 2018 12:37:57 GMT -8 Alan Vende said:

You would use a variation of this code:

The width and height are optional items. I've left them there just so you know how they would go in the code. (For the "YOUR IMAGE URL HERE," you'll insert the URL that you find by clicking the Link button on the respective image(s) once they are successfully uploaded to the theme.

Thank you for your help!!

For the first two lines of code, where are they saved?

I have saved the images in Admin > Themes > Theme Manager
I have saved the second box of code in Admin > Themes > Advanced Styles & CSS

Thanks again,Stu.

I've updated my post above, but will paste it here as well.

Jul 17, 2018 12:37:57 GMT -8 Alan Vende said:

After you put your images into the Images area, you'll want to navigate to your Forum Wrapper (Admin > Themes > Layout Templates > Forum Wrapper (the first option in your Layout Templates).

In there is where you'll put the code below.

On about line 56 (depending on how much customization you have in that template), you'll see a code <h2 id="banner">. Put your cursor after the closing > and press Enter/Return to create a new line.

On that new line, paste the two lines of code below. You can duplicate it as many times as you want and use the position property that I talk about later in this post to position them.

For the two lines of HTML, you'll want to create your own classes. Were you able to do that? As an example, one could be left-ban-img and the other could be right-ban-img. Those are what you'll want to put after the period in the CSS, before the code and the opening bracket (where it says YOUR CLASS NAME HERE.

If you have any further questions, please don't hesitate to ask! I hope this helps!

[macflurry]

Worked a treat, thank you. I'm pretty sure I would have struggled sorting that out on my own.

Thanks for your help, it was very much appreciated!!

[Alan Vende]

Jul 21, 2018 12:21:56 GMT -8 macflurry said:

Worked a treat, thank you. I'm pretty sure I would have struggled sorting that out on my own.

Thanks for your help, it was very much appreciated!!

So glad I could help!