Advertisement:

Author Topic: How do i have my main top banner auto stretch across forum?  (Read 2401 times)

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
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?

Offline Looking

  • SMF Hero
  • ******
  • Posts: 2,102
  • SMF Customization
    • jeanborde on Facebook
    • SMF Custom Themes
Re: How do i have my main top banner auto stretch across forum?
« Reply #1 on: May 09, 2017, 06:52:44 PM »
Make image width 100% and adjust banner_logo in CSS.

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #2 on: May 09, 2017, 11:33:15 PM »
How do unmake it 100% and what do u change in Ccs file?

Offline zStudios Team

  • Semi-Newbie
  • *
  • Posts: 41
  • Design and Development
    • zStudiosNetworks on Facebook
    • Siplhes on GitHub
    • zStudios Networks
Re: How do i have my main top banner auto stretch across forum?
« Reply #3 on: May 10, 2017, 12:46:10 AM »


like that ?

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

if you want graphic design services contact me.

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #4 on: May 10, 2017, 04:00:59 AM »
That didn't work

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 47,498
Re: How do i have my main top banner auto stretch across forum?
« Reply #5 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.

Offline Gluz

  • Native Language Support Specialist
  • Sr. Member
  • *
  • Posts: 868
  • Gender: Male
    • Al-eXs on GitHub
Re: How do i have my main top banner auto stretch across forum?
« Reply #6 on: May 10, 2017, 07:46:00 PM »
In the file /Themes/your_theme/css/index.css

You need to modify some parts:

Search:
Code: [Select]
.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:
Code: [Select]
.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:
Code: [Select]
.banner_logo img {
width: 100%;
}


With that, the banner will be all across your forum width at any resolution.
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en inglés.

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #7 on: May 10, 2017, 11:28:07 PM »
Gluz that totally fixed it!   Thank you!!

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #8 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

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #9 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

Offline Gluz

  • Native Language Support Specialist
  • Sr. Member
  • *
  • Posts: 868
  • Gender: Male
    • Al-eXs on GitHub
Re: How do i have my main top banner auto stretch across forum?
« Reply #10 on: May 16, 2017, 03:48:40 AM »
In the index.css

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

delete the line-height: 36px;
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en inglés.

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #11 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%;
}

Offline Gluz

  • Native Language Support Specialist
  • Sr. Member
  • *
  • Posts: 868
  • Gender: Male
    • Al-eXs on GitHub
Re: How do i have my main top banner auto stretch across forum?
« Reply #12 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.
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en inglés.

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #13 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!

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #14 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

Offline Gluz

  • Native Language Support Specialist
  • Sr. Member
  • *
  • Posts: 868
  • Gender: Male
    • Al-eXs on GitHub
Re: How do i have my main top banner auto stretch across forum?
« Reply #15 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:

Code: [Select]
.header_main_content {
    margin: 0 auto;
    display: table;
    width: 100%;
}
Delete the line display: table;
And change the width: 100%; to width: 100% !important;

Code: [Select]
.banner_logo {
    float: left;
    width: 100%;
    padding-left: 15px;
}
Delete the line padding-left: 15px;


Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en inglés.

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #16 on: May 17, 2017, 02:26:43 AM »
Fixed!   Thank you!!!

Online Jsizizzle

  • Semi-Newbie
  • *
  • Posts: 67
Re: How do i have my main top banner auto stretch across forum?
« Reply #17 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?

Offline Gluz

  • Native Language Support Specialist
  • Sr. Member
  • *
  • Posts: 868
  • Gender: Male
    • Al-eXs on GitHub
Re: How do i have my main top banner auto stretch across forum?
« Reply #18 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.
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en inglés.