[RFC] Define max-width for prosilver

These requests for comments/change have lead to an implemented feature that has been successfully merged into the 3.1/Ascraeus branch. Everything listed in this forum will be available in phpBB 3.1.
Locked
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 912
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Define max-width for prosilver

Post by hanakin »

"thats just like your opinion man" :lol:
Donations welcome via Paypal Image

User avatar
Master_Cylinder
Registered User
Posts: 361
Joined: Wed Jul 31, 2013 9:54 pm

Re: Define max-width for prosilver

Post by Master_Cylinder »

Yeah, we need more memes... :roll:
These kids today...
Buy them books, send them to school and what do they do?

They eat the paste. :lol:

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 674
Joined: Mon Mar 08, 2010 9:18 am

Re: Define max-width for prosilver

Post by VSE »

Late to the party. But going max width without addressing the surroundings is a design oversight. Here are some options that provide content borders with reduced contrast to the background for less eye strain.

One has inset shadows to give it some pop and depth, the other is flat. (These were made in a rush so ignore the flaws at the very top of them)
Screen Shot 2014-06-24 at 11.15.45 AM.png
(150.52 KiB) Downloaded 640 times

Code: Select all

html, body {
	min-height: 100%;
	background: #e8e8e8;
}

#wrap {
	margin: 10px auto;
	padding: 12px;
	max-width: 1080px;
	border-style: solid;
	border-width: 1px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border-color: #a0a0a0;
	background: #fff;
	-webkit-box-shadow: inset 0 -10px 15px #e0e0e0, 0 0 3px #a0a0a0;
	-moz-box-shadow: inset 0 -10px 15px #e0e0e0, 0 0 3px #a0a0a0;
	box-shadow: inset 0 -10px 15px #e0e0e0, 0 0 3px #a0a0a0;
}
Screen Shot 2014-06-24 at 11.20.51 AM.png
(148.79 KiB) Downloaded 640 times

Code: Select all

html, body {
	min-height: 100%;
	background: #e8e8e8;
}

#wrap {
	margin: 10px auto;
	padding: 12px;
	max-width: 1080px;
	border-style: solid;
	border-width: 1px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border-color: #a0a0a0;
	background: #fff;
}
Has an irascible disposition.

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 674
Joined: Mon Mar 08, 2010 9:18 am

Re: Define max-width for prosilver

Post by VSE »

Lighter bg and border color
This border color is the same as used for HR tags and H3 tags, so it matches the other border lines

Code: Select all

html, body {
   min-height: 100%;
   background: #f5f7fa;
}

#wrap {
   margin: 10px auto;
   padding: 12px;
   max-width: 1080px;
   border-style: solid;
   border-width: 1px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   border-color: #ccc;
   background: #fff;
}
Attachments
Screen Shot 2014-06-24 at 11.39.39 AM.png
(147.71 KiB) Downloaded 627 times
Has an irascible disposition.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 912
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Define max-width for prosilver

Post by hanakin »

I would say something more like this and I bumped the max-width to 1512px to accommodate those who have issues with 1152 fullscreen on 1680 to 1920 widths

Code: Select all

html, body {
    color: #536482;
    background-color: #F5F7FA;
}

#wrap {
    min-width: 650px;
    max-width: 1512px;
    margin: 15px auto;
    padding: 15px;
    border-radius: 6px;
    background-color: #FFF;
    border: 1px solid #D3DCE9;
}
Screenshot 2014-06-24 20.55.02.png
(204.28 KiB) Downloaded 615 times
Or with a lighter border of e6e9ed
Screenshot 2014-06-24 21.00.16.png
(202.92 KiB) Downloaded 614 times
Donations welcome via Paypal Image

keith10456
Registered User
Posts: 523
Joined: Sat Apr 22, 2006 10:29 pm
Contact:

Re: Define max-width for prosilver

Post by keith10456 »

Personally, I like the first one in this post.

User avatar
nextgen Online
Registered User
Posts: 128
Joined: Sat Jul 24, 2010 4:59 am
Location: Guatemala
Contact:

Re: Define max-width for prosilver

Post by nextgen »

Have you thought as you will see on mobile devices?
Before you can modify something should also make modifications to the responsive style.
*Imagine a signature super spectacular.*

User avatar
naderman
Consultant
Posts: 1727
Joined: Sun Jan 11, 2004 2:11 am
Location: Karlsruhe, Germany
Contact:

Re: Define max-width for prosilver

Post by naderman »

keith10456 wrote:Personally, I like the first one in this post.
That one is fine but I prefer the one with the lighter border.

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 674
Joined: Mon Mar 08, 2010 9:18 am

Re: Define max-width for prosilver

Post by VSE »

hanakin wrote:I would say something more like this and I bumped the max-width to 1512px to accommodate those who have issues with 1152 fullscreen on 1680 to 1920 widths
Screenshot 2014-06-24 20.55.02.png
Or with a lighter border of e6e9ed
Screenshot 2014-06-24 21.00.16.png
I think too light... might as well be all white, which is what we are trying to avoid.

The original image in the PR was the best it has looked IMO. It's a shame it got derailed and that PR went in the wrong direction.

Throwing random colors at this to try and make it lighter or darker or whatever is not the way to approach this (my own ideas posted above included). Prosilver's entire color scheme should be taken into deep consideration. The background, the border colors all must have relevance to Prosilver's existing color scheme, and should blend and contrast with it seamlessly. It should look like it was meant to be, not something that has been tacked on.

That said, these changes should really be left to somebody with true graphic design experience, as everybody's tastes will differ and the only real solution to this will be an educated one, not a personal one. If there is no one truly qualified here to make such design decisions, then none should be made, until there is, IMO.
Has an irascible disposition.

User avatar
Kamahl19
Registered User
Posts: 161
Joined: Thu Dec 27, 2007 10:31 am

Re: Define max-width for prosilver

Post by Kamahl19 »

Hanakin's first image is really great, second one is too light. I really like it and it reminds me first versions of prosilver from 2005 or 2006 if I remember correctly :)

Locked