How to align center and maximum width a banner?

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Locked
spomsta
Registered User
Posts: 23
Joined: Thu Aug 01, 2013 10:01 am

How to align center and maximum width a banner?

Post by spomsta » Wed Aug 28, 2013 6:42 am

Hello,

I have got a banner at the top of my forum and there is an issue according to the screen resolution.

I would like that picture uses the width automatically according the screen resolution of the visitor (if he uses desktop, mobile, tablet, etc.) and the picture be centered, not at the left or the right.

I think it's better if I give you the name of my forum, to prevent spam I uploaded as an attachment to this post my URL.

EDIT :

I maked 2 screenshots, one with desktop and another with iPhone so you can understand better.
I would like that on iPhone the picture shows full (although smaller).
Attachments
forum.jpg
URL-Forum
forum.jpg (7.73 KiB) Viewed 5165 times
banner.jpg
banner.jpg (332.38 KiB) Viewed 5163 times
iphone.jpg
iPhone
iphone.jpg (150.51 KiB) Viewed 5156 times

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: How to align center and maximum width a banner?

Post by Arty » Wed Aug 28, 2013 7:08 am

If its a simple image you can use this:

Code: Select all

#banner img { 
    display: block;
    margin: 0 auto; /* this will center it */
    width: 800px; /* fixed width */
}

@media (max-width: 800px)
{
     #banner {
         width: 100%;
    }
}
If its AdSense, it is not possible to scale it. You'll need to swap ads based on resolution. See this post (second post, solution #2): http://www.artodia.com/threads/responsi ... #post-4043
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

spomsta
Registered User
Posts: 23
Joined: Thu Aug 01, 2013 10:01 am

Re: How to align center and maximum width a banner?

Post by spomsta » Wed Aug 28, 2013 7:17 am

Thanks for reply.

Which file should I modify?

Yes I know, with Adsense it's not possible to scale it, I will check your link.

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: How to align center and maximum width a banner?

Post by Arty » Wed Aug 28, 2013 7:20 am

Any CSS file. Change ids / class names to correct names.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

spomsta
Registered User
Posts: 23
Joined: Thu Aug 01, 2013 10:01 am

Re: How to align center and maximum width a banner?

Post by spomsta » Wed Aug 28, 2013 7:51 am

Yes, my banner is a simple JPEG file.

Into the "colour.css" file of the style I use, there is this piece of code (see attachment).

Can I make the modification directly from here?
Attachments
css.JPG
Colour.css
css.JPG (20.79 KiB) Viewed 5113 times

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: How to align center and maximum width a banner?

Post by Arty » Wed Aug 28, 2013 7:59 am

Yes
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

spomsta
Registered User
Posts: 23
Joined: Thu Aug 01, 2013 10:01 am

Re: How to align center and maximum width a banner?

Post by spomsta » Wed Aug 28, 2013 8:19 am

I guess that I maked something wrong.

I inserted your code after this piece of code (screenshot), refreshed my style and emptied cache but it doesn't work.

User avatar
unlocktheinbox
Registered User
Posts: 9
Joined: Thu Aug 29, 2013 4:44 am
Contact:

Re: How to align center and maximum width a banner?

Post by unlocktheinbox » Thu Aug 29, 2013 5:31 am

This will center you background image in the first photograph that you want.

Code: Select all

.headerbar {
background: url("./styles/SE_Gamer_Dark/theme/images/banner.jpg") no-repeat left top #000000;
color: #FFFFFF;
background-position: center;
}
In your second photograph

You need to change this line (I'm not sure which file this is in, just do a search in your entire source for "style="width: 80%; max-width: 1400px;"

Code: Select all

<div id="wrap" style="width: 80%; max-width: 1400px;">


To This.

Code: Select all

<div id="wrap" style="width: 100%; max-width: 1400px;">
Send an email to mailtest [at] unlocktheinbox.com and get results delivered in minutes.
Email Tools: Email TesterSPF Creator | DMARC Creator | DKIM CreatorEmail Identifiers

spomsta
Registered User
Posts: 23
Joined: Thu Aug 01, 2013 10:01 am

Re: How to align center and maximum width a banner?

Post by spomsta » Thu Aug 29, 2013 6:50 am

Thanks a lot, now I am driving so I will check after :-)

spomsta
Registered User
Posts: 23
Joined: Thu Aug 01, 2013 10:01 am

Re: How to align center and maximum width a banner?

Post by spomsta » Tue Sep 03, 2013 9:42 am

Sorry for delay, I just tested but it doesn't work because when I do :
<div id="wrap" style="width: 100%; max-width: 1400px;">

It changes all the width of my forum which I don't want, I just want to change the banner, not the width forum.

(I discovered an interesting tool) :

Test your website on any screen size including desktops, tablets, televisions, and mobile phones.
http://quirktools.com/screenfly

Do you have another idea? Thanks in advance

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to align center and maximum width a banner?

Post by PolRas » Tue Sep 10, 2013 4:29 am

Arty wrote:If its a simple image you can use this:

Code: Select all

#banner img { 
    display: block;
    margin: 0 auto; /* this will center it */
    width: 800px; /* fixed width */
}

@media (max-width: 800px)
{
     #banner {
         width: 100%;
    }
}
If its AdSense, it is not possible to scale it. You'll need to swap ads based on resolution. See this post (second post, solution #2): http://www.artodia.com/threads/responsi ... #post-4043
And where can i get this responsive design modification ? Want it badly Mr. Arty
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: How to align center and maximum width a banner?

Post by Arty » Tue Sep 10, 2013 6:40 am

PolRas wrote:And where can i get this responsive design modification ? Want it badly Mr. Arty
That topic was not for phpBB and that add-on no longer exists, but part about responsive adSense is relevant for any software.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to align center and maximum width a banner?

Post by PolRas » Thu Sep 12, 2013 10:05 pm

Arty wrote:
PolRas wrote:And where can i get this responsive design modification ? Want it badly Mr. Arty
That topic was not for phpBB and that add-on no longer exists, but part about responsive adSense is relevant for any software.

Your English is tough.....what did you mean by this ----->> '''but part about responsive adSense is relevant for any software'''
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
Lumpy Burgertushie
Registered User
Posts: 65319
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: How to align center and maximum width a banner?

Post by Lumpy Burgertushie » Thu Sep 12, 2013 10:52 pm

he means that you can't change the adsense code to make it "scale" in size. it is what it is.


robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to align center and maximum width a banner?

Post by PolRas » Fri Sep 13, 2013 4:46 am

Thank you !!
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

Locked

Return to “[3.0.x] Styles Support & Discussion”

Who is online

Users browsing this forum: Bing [Bot] and 14 guests