Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Jsizizzle on May 09, 2017, 05:58:39 PM

Title: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 09, 2017, 05:58:39 PM
My website is http://playersprogramu.com/

I'd like to have my main header banner auto stretch across the top of my forum.  How would I go about doing that?
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Looking on May 09, 2017, 06:52:44 PM
Make image width 100% and adjust banner_logo in CSS.
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 09, 2017, 11:33:15 PM
How do unmake it 100% and what do u change in Ccs file?
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Vehement Works on May 10, 2017, 12:46:10 AM
(http://i.imgur.com/1tTlP00.png)

like that ?

edit the height to 100px in  .header_main in your css file.

if you want graphic design services contact me.
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 10, 2017, 04:00:59 AM
That didn't work
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Illori on May 10, 2017, 05:10:02 AM
did not work in what way? if you want help you need to provide some details on what is going on.
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Gluz on May 10, 2017, 07:46:00 PM
In the file /Themes/your_theme/css/index.css

You need to modify some parts:

Search:
.header_main
{
width: 100%;
height: 100px;
background: #1a6291 url(../images/vertex_image/main_bg.png);
background-repeat: repeat-x;
}

and delete the height: 100px; line.

Search:
.banner_logo
{
float: left;
width: 200px;
height: 72px;
padding-left: 15px;
}

delete the height: 72px; line, and change the width: 200px; to width: 100%;.

And finally, add to the end of the file this:
.banner_logo img {
width: 100%;
}




With that, the banner will be all across your forum width at any resolution.
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 10, 2017, 11:28:07 PM
Gluz that totally fixed it!   Thank you!!
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 16, 2017, 01:59:41 AM
I have one more issue. After doing this it seems I can't change my banner. I replaced my banner_logo.png and my banner is not changing. I'm note sure if it's because of the changes I made in the last post
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 16, 2017, 02:56:01 AM
OK, so I just needed to clear my cache. Now I want to know if anyone can look at my page at playersprogramu.com and tell me how to stretch my banner all the way across the top of my page but does cover a majority of the top header but not the whole top header. Thank you all for your help
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Gluz on May 16, 2017, 03:48:40 AM
In the index.css

.header_main_content {
    margin: 0 auto;
    display: table;
    width: 100%;
    line-height: 36px;
}


delete the line-height: 36px;
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 16, 2017, 12:27:32 PM
I deleted 
line-height: 36px;
The banner still is showing the same size at playersprogramu.com & not stretching all the way across the top of the page.
Does the last part at the bottom of the css file look ok?
}
.banner_logo img {
   width: 100%;
}
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Gluz on May 16, 2017, 02:52:57 PM
Can you take a screenshot and mark where you want it to fill?

Because I see it the width of the forum and the height of the top part filled with the banner.
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 16, 2017, 03:32:02 PM
I'll have to wait till I get home to do that.  I appreciate your help on this!
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 16, 2017, 09:09:45 PM
Here's the screen shot. It shows the banner not stretching all the way across. Nee to stretch a bit more to completely cover header
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Gluz on May 17, 2017, 12:23:12 AM
Oh, that is a setting on your forum, that is at 95%, but can be override with this:

.header_main_content {
    margin: 0 auto;
    display: table;
    width: 100%;
}

Delete the line display: table;
And change the width: 100%; to width: 100% !important;

.banner_logo {
    float: left;
    width: 100%;
    padding-left: 15px;
}

Delete the line padding-left: 15px;


Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 17, 2017, 02:26:43 AM
Fixed!   Thank you!!!
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Jsizizzle on May 17, 2017, 04:03:38 AM
Gluz, I did notice that on the right-side of my page there is the smallest part that is no stretching all the way across the top.  See screen shot below. Can I fix that?
Title: Re: How do i have my main top banner auto stretch across forum?
Post by: Gluz on May 18, 2017, 01:36:56 AM
That space is the space for the scrollbar that your browser have, I tested in Chrome and Firefox in my android phone, latest versions, and doesn't show that way, neither in the desktop browsers.