How do i have my main top banner auto stretch across forum?

Started by Jsizizzle, May 09, 2017, 05:58:39 PM

Previous topic - Next topic

Jsizizzle

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?

Looking


Jsizizzle

How do unmake it 100% and what do u change in Ccs file?

Vehement Works



like that ?

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

if you want graphic design services contact me.
Last released modifications: AdSense Mod|Font AweaZome BBC code


Illori

did not work in what way? if you want help you need to provide some details on what is going on.

Gluz

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.

Jsizizzle


Jsizizzle

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

Jsizizzle

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

Gluz

In the index.css

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


delete the line-height: 36px;

Jsizizzle

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%;
}

Gluz

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.

Jsizizzle

I'll have to wait till I get home to do that.  I appreciate your help on this!

Jsizizzle

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

Gluz

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;




Jsizizzle

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?

Gluz

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.

Advertisement: