News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Logo Size and Positioning

Started by jbridges87, April 04, 2020, 03:35:49 PM

Previous topic - Next topic

jbridges87

Hey Guys, it's me again!
I've figured out how to get a logo to display, but I'm having trouble with the positioning in relation to the top right section where the Simple Machines Forum slogan is located, by default.

My idea is to have no slogan, and have my logo banner span the entire top page of the site. https://crown-sports.com/test_site

I did a search for previous articles and found some topics discussing the modification of the index.css file, and I have a test site to play around with, but I don't know exactly what needs to be modified to achieve my goal.

I noticed when zooming the page size, the logo expands to the entire top of the page, which is what I'm looking for, but once I change the page back to 100%, the top right side of the page is revealed again.

Is there a way to have the logo as a solid banner across the top of the screen that stays like that regardless of the page zoom?
I also noticed it doesn't scale well at all on mobile. Perhaps there's a setting that can fix both of these issues at once?
Come by and check out my sports forum, here.
Running SMF v2.0.17

Sir Osis of Liver

index.css

This will remove smf logo or slogan -



/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
display: none;
}




This will display bg image full width across top -



body
{
background: #000 url(../images/yourimage.jpg) no-repeat fixed;
background-size: 100%;
font: 95%/90% Verdana, Helvetica, sans-serif;
margin: 0;
padding: 20px 0 4px 0;
}



You'll have to play with formatting to get it to look good in Curve.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

jbridges87

So I actually found an old thread which I was able to use to get the logo to span across the top, but I'm still trying to figure out how to get rid of the margins on the top left and top right hand sides. I also need to figure out why the Search/News section isn't aligning on the right hand side anymore.

This is the old thread I found, and I made the change in my index.css https://www.simplemachines.org/community/index.php?topic=488969.20

Come by and check out my sports forum, here.
Running SMF v2.0.17

Antechinus

Quote from: Sir Osis of Liver on April 04, 2020, 04:49:40 PM
index.css

This will remove smf logo or slogan -



/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
display: none;
}

Too verbose. If you're hiding it, you don't need anything except this:

#siteslogan, img#smflogo {
display: none;
}



Quote
This will display bg image full width across top -

body {
background: #000 url(../images/yourimage.jpg) no-repeat fixed;
background-size: 100%;
font: 95%/90% Verdana, Helvetica, sans-serif;
margin: 0;
padding: 20px 0 4px 0;
}

That's not what they're after. They're after a full-width banner inside the header.

Mick.

I dont think you can span 100%. What you see left and right behind the logo, are images as well.   Possibly using z-index:999; and negative margin in css? Meh....just add it small it in size.

Antechinus

Quote from: jbridges87 on April 04, 2020, 05:59:25 PM
So I actually found an old thread which I was able to use to get the logo to span across the top, but I'm still trying to figure out how to get rid of the margins on the top left and top right hand sides. I also need to figure out why the Search/News section isn't aligning on the right hand side anymore.

I wrote a tutorial for this a while back: Full width banner - automatically scales to any screen size

That mentions different margin widths and a few other tricks. See if it makes sense to you. If it doesn't, ask more questions. :)

Antechinus

Quote from: Mick. on April 04, 2020, 06:04:44 PMI dont think you can span 100%.

You can. It's just a bit more messing around, due to the way the default markup handles the header divs.

Mick.

Quote from: Antechinus on April 04, 2020, 06:09:02 PM
Quote from: Mick. on April 04, 2020, 06:04:44 PMI dont think you can span 100%.

You can. It's just a bit more messing around, due to the way the default markup handles the header divs.
i get that. I think its just a matter of adjusting the height. Top and bottom so it doesnt overlap the theme image. (Never liked 2.0 using images on every corner).

Sir Osis of Liver

Wasn't being verbose, leaving the original code so it can be easily reverted (in case things go badly).  You have to tinker with a full width banner in Curve if you place it inside the main wrapper because it's sitting over the sprite.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Quote from: Mick. on April 04, 2020, 06:13:00 PM
i get that. I think its just a matter of adjusting the height. Top and bottom so it doesnt overlap the theme image. (Never liked 2.0 using images on every corner).

Depends how much margin you want, and exactly what look you want. You can totally ditch the sprite from the header if you want to, and just run a full-width banner with no (or very little) margin and a solid background if you think the default sprite doesn't suit your banner. Might as well tell them this, so they can decide how they want it. :)

jbridges87

Quote from: Antechinus on April 04, 2020, 06:07:59 PM
Quote from: jbridges87 on April 04, 2020, 05:59:25 PM
So I actually found an old thread which I was able to use to get the logo to span across the top, but I'm still trying to figure out how to get rid of the margins on the top left and top right hand sides. I also need to figure out why the Search/News section isn't aligning on the right hand side anymore.

I wrote a tutorial for this a while back: Full width banner - automatically scales to any screen size

That mentions different margin widths and a few other tricks. See if it makes sense to you. If it doesn't, ask more questions. :)

I will check this out and let you know how I make out. Thanks
Come by and check out my sports forum, here.
Running SMF v2.0.17

jbridges87

Quote from: Antechinus on April 04, 2020, 06:31:49 PM
Quote from: Mick. on April 04, 2020, 06:13:00 PM
i get that. I think its just a matter of adjusting the height. Top and bottom so it doesnt overlap the theme image. (Never liked 2.0 using images on every corner).

Depends how much margin you want, and exactly what look you want. You can totally ditch the sprite from the header if you want to, and just run a full-width banner with no (or very little) margin and a solid background if you think the default sprite doesn't suit your banner. Might as well tell them this, so they can decide how they want it. :)

What do you mean by ditching the sprite on the header? Sorry, I'm not familiar with that terminology.

Basically, yes, I'm looking for a banner that spans across the entire top of the screen, with no margin. I also need to figure out why the search/news bar isn't aligned to the right anymore?
https://crown-sports.com/test_site/index.php
Come by and check out my sports forum, here.
Running SMF v2.0.17

jbridges87

@Antechinus - Thanks so much for linking that thorough guide. I followed it and was able to get the logo banner to span across the top as desired. https://crown-sports.com/test_site/index.php

Unfortunately, I wasn't able to get the top forum title and SMF slogan to show up. I applied both changes to the index.template.php and index.css files, and the banner actually jumped to the left again on me, revealing a large white section to the right of my banner. Not sure why that didn't work.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Sir Osis of Liver

The forum title is an either/or with logo if you do it in current theme settings.  SMF logo/slogan occupies right side of header inside main wrapper, if it's not disabled it pushes your banner left.  There are other ways to do it, but what you have now looks fine.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Quote from: jbridges87 on April 05, 2020, 01:34:29 AMUnfortunately, I wasn't able to get the top forum title and SMF slogan to show up. I applied both changes to the index.template.php and index.css files, and the banner actually jumped to the left again on me, revealing a large white section to the right of my banner. Not sure why that didn't work.

Are you referring to this example? https://www.simplemachines.org/community/index.php?topic=523994.msg3709892#msg3709892

QuoteWhat do you mean by ditching the sprite on the header? Sorry, I'm not familiar with that terminology.

We were talking about the default background image for the header. The main_block.png is a compound image that uses CSS to display different parts of it in different elements of the interface. Such images are commonly known as "sprites". No idea why, but that's what they get called.

jbridges87

Quote from: Antechinus on April 06, 2020, 01:56:37 AM
Quote from: jbridges87 on April 05, 2020, 01:34:29 AMUnfortunately, I wasn't able to get the top forum title and SMF slogan to show up. I applied both changes to the index.template.php and index.css files, and the banner actually jumped to the left again on me, revealing a large white section to the right of my banner. Not sure why that didn't work.

QuoteAre you referring to this example? https://www.simplemachines.org/community/index.php?topic=523994.msg3709892#msg3709892

Yes, exactly. Ideally, I would love to get the same exact layout. Banner up top with the option of forum title, and SMF slogan, as well as search box/news alignment to the right.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Antechinus

Ok. The instructions in that post should work. Do you still have a copy of the edited template and index.css?

jbridges87

#17
I've applied the changes to my current test site, and have also attached the files to this post, along with the view I get from my mobile device. [Notice the double icons]

I double checked the slogan settings on my site, and forgot I had put a space in the box, which is why the slogan wasn't showing before. It shows up now on my desktop, but it gets cut off due to the limited space. It doesn't show up at all on mobile.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Antechinus

You appear to be using the "Responsive Curve" mod, which will impose its own code on top of the default code. TBH I don't know exactly what it does as I've never used it live, and have only taken a quick look a couple of times on a test site. I would expect that it deliberately drops the slogan on small screens, but that's only a guess. The mod would also be responsible for the double icon problem.

Sir Osis of Liver

Yep, responsive.css dumps slogan -



#siteslogan, img#smflogo, .contact_info
{
display: none;
}



Never seen the double menu icons, maybe something borked in index template.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Advertisement: