MyBB Community Forums

Full Version: How to keep logo on the left but add a righthand banner/gif in addition
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
Yes upload it to your image folder, or use a banner link if you have one.
(2017-02-15, 12:40 AM)johnnyvang Wrote: [ -> ]Yes upload it to your image folder, or use a banner link if you have one.
BigRed,

Coupla things you want to try:
1. If you want to modify your forum to make it custom, you'll end up needing to do some coding. So, here's a bookmark you can add for future reference.
https://www.w3schools.com/html/default.asp
This is an excellent online tutorial for HTML. Check out the link partway down on the left for HTML Images.

2. Keeping it simple. Upload the image you want to the same location you have your existing logo.

3. Using ACP / Templates & Style, click on Templates on the left hand menu, then click on the templates for your theme you want to change. Expand the Header Templates link, then click on header link. That puts you in edit mode.

4. Line 6 should look something like:
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
type in a new line just after that:
&nbsp; &nbsp; <img src="http://utubepoop.com/images/new-graphic.jpg" alt="utubepoop.com" title="utubepoop.com" />

5. As was mentioned already, add more &nbsp; to move it to the right.

6. If you want to make it a clickable link just like your logo on the left, use this code:
&nbsp; &nbsp; <a href="http://utubepoop.com/index.php"><img src="http://utubepoop.com/images/new-graphic.jpg" alt="utubepoop.com" title="utubepoop.com" /></a>

7. It should be obvious you want to click Save and Continue Editing, or Save and Return to Listing when you have made your changes.
ok i sort of get what you are saying but when you say: "As was mentioned already, add more &nbsp; to move it to the right."

I don't understand.

what are "&nbsp"?

thanks for your help sorry if this is a stupid question Smile
non-breaking space.
See this link to w3schools tutorial:
https://www.w3schools.com/html/html_entities.asp

If there is no space between two graphics, one will be right next to the other. Sometimes you want some space between. You can use &nbsp; multiple times as necessary.
(2017-02-15, 01:51 PM)HLFadmin Wrote: [ -> ]non-breaking space.
See this link to w3schools tutorial:
https://www.w3schools.com/html/html_entities.asp

If there is no space between two graphics, one will be right next to the other. Sometimes you want some space between. You can use &nbsp; multiple times as necessary.

ok mostly got it HOWEVER! how do I move my banner a wee bit up? (see photo below) http://utubepoop.com/

thx
Use the attached logo which has been cropped to almost the same height as your banner logo. There was a lot of white space. 260 pixels vs. 128. I used photoshop, but any other image editing program will work as well.

I have a horizontal logo on my forum, and the css needs to be changed to keep the elements on the right hand side crashing.

You'll need to edit your theme's global.css in ACP / Themes and Templates. Select your theme and double-click on global.css

use the dropdown to find #logo ul.top.links
you'll see fontweight bold on the left half,
and in Extra CSS you'll probably see
text-align: right;
margin: -10px 5px 0 0;

delete the minus sign to make it 10px, not -10px

So you know where I picked this up, here's another great tutorial link:
https://www.w3schools.com/css/default.asp
(2017-02-15, 08:01 PM)HLFadmin Wrote: [ -> ]Use the attached logo which has been cropped to almost the same height as your banner logo. There was a lot of white space. 260 pixels vs. 128. I used photoshop, but any other image editing program will work as well.

I have a horizontal logo on my forum, and the css needs to be changed to keep the elements on the right hand side crashing.

You'll need to edit your theme's global.css in ACP / Themes and Templates. Select your theme and double-click on global.css

use the dropdown to find #logo ul.top.links
you'll see fontweight bold on the left half,
and in Extra CSS you'll probably see
text-align: right;
margin: -10px 5px 0 0;

delete the minus sign to make it 10px, not -10px

So you know where I picked this up, here's another great tutorial link:
https://www.w3schools.com/css/default.asp

Thank you very much for editing my logo for me I will probably use it for other pages. HOWEVER as of now i like my logo as it is. I just want to move my banner up a wee bit it is intruding on the top text of the header. Would you be able to show me the apporopriate code?

thx still learn to html. Smile

If you are putting elements in a table, you could use vertical align attribute. However, the header logo plus additional graphic is not a table element, so as you can see the tall logo and the short header graphic align at the bottom. Changing the CSS margin from -10px will keep the graphic from crashing into the logo links on the right hand side.

The only way to raise the header graphic is to increase the height of the graphic, without stretching it. Paste it into a larger canvas with transparency.

Look into Gimp or Photoshop, or Elements or whatever it's called.
(2017-02-16, 10:03 PM)HLFadmin Wrote: [ -> ]If you are putting elements in a table, you could use vertical align attribute. However, the header logo plus additional graphic is not a table element, so as you can see the tall logo and the short header graphic align at the bottom. Changing the CSS margin from -10px will keep the graphic from crashing into the logo links on the right hand side.

The only way to raise the header graphic is to increase the height of the graphic, without stretching it. Paste it into a larger canvas with transparency.

Or, you can use this as a single logo graphic because they have been combined.
Use this as an example of what you can do with other graphics in an image editing program.
Look into Gimp or Photoshop, or Elements or whatever it's called.

Sorry i was unclear i want to move my banner a wee bit up so it stops covering the text NOT the poop logo JUST THE BANNER with sonic the hedgehog.

 title="{$mybb->settings['bbname']}" /></a>
                                                            &nbsp; &nbsp;<img src="http://utubepoop.com/images/aytp banner.jpg" alt="utubepoop.com" title="utubepoop.com" />
                                                            <ul class="menu top_links">

 what do I add to move my banner a wee bit up?

see image below

thank you for your help and time Smile
Pages: 1 2 3