[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
mrgtb
Registered User
Posts: 217
Joined: Wed Nov 28, 2007 10:09 pm

Re: Define max-width for prosilver

Post by mrgtb » Sun Jul 06, 2014 12:50 pm

Another improvement I think could be made to the style now it uses a white rounded forum background (although it's a matter of taste) really for each person. Get rid of that horrible yellow "hover colour" used on forums listings, also match same hover colour used for all areas of forum like on members list and online users list to "same colour used" (instead of being different), to be more uniformed across the board again.

I changed the yellow to white after playing around with different colours. That colour works really well, and is more of a neutral colour most would be happy with. Look at screen-shots of 3 different forum areas changed to use same white hover colour (then check same areas here).
3.PNG
(71.18 KiB) Downloaded 1240 times
02.PNG
02.PNG (21.18 KiB) Viewed 6536 times
03.PNG
(32.82 KiB) Downloaded 1240 times
Last edited by mrgtb on Sun Jul 06, 2014 1:24 pm, edited 5 times in total.

User avatar
mrgtb
Registered User
Posts: 217
Joined: Wed Nov 28, 2007 10:09 pm

Re: Define max-width for prosilver

Post by mrgtb » Sun Jul 06, 2014 1:01 pm

Again, I don't really get why you have forum home using a different CAT bar image than forum listing page, online listing page e.t.c? On my forum I've made both those different areas match up "looking exactly same" with category bar image used. Also used same CAT bar image (but modified with photoshop) to be longer for header background also, done so the header area matches up as well.

forum home page:
a.png
a.png (20.49 KiB) Viewed 6532 times
forum listing page:
b.png
(49.92 KiB) Downloaded 1236 times

This is how it looks here with screen-shots taken to show the difference from mine (used above).


forum home page:
c.png
c.png (31.06 KiB) Viewed 6529 times
forum listing page:
d.png
d.png (50.22 KiB) Viewed 6529 times
if you want to see these same changes made in my last 3 post in action live, then visit my forum link in signature below, have a look around.

User avatar
M.Gaetan89
Registered User
Posts: 64
Joined: Tue Jan 28, 2014 7:17 pm
Location: Divonne-les-Bains, France
Contact:

Re: Define max-width for prosilver

Post by M.Gaetan89 » Sun Jul 06, 2014 1:50 pm

I think you'll like this PR. It removes all the gradient images and replace them with CSS gradient. So each category will always have a gradient, independently of the number of forums.
However, I think using the alternate background color (as on topics list) would also be a good solution.

User avatar
mrgtb
Registered User
Posts: 217
Joined: Wed Nov 28, 2007 10:09 pm

Re: Define max-width for prosilver

Post by mrgtb » Sun Jul 06, 2014 3:21 pm

Now that the forum uses it's own background with rounded corners. You can play around with styling the page "body background" more. Such as doing this, which I've just done on my forum.

In colours.css change:

Code: Select all

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

Code: Select all

html, body {
	color: #536482;
	background: #F5F7FA url("./images/bg_body.gif");
Upload image used to "themes/images" folder. The image uses "coloured and transparent squares", so the background colour still shows through it (while image is used for whole page. Think it makes the border stand out better also around the forum using white squares with (current) but darker background colour showing through as alternate squares.
bg_body.gif
bg_body.gif (51 Bytes) Viewed 6498 times
a1.png
a1.png (18.83 KiB) Viewed 6495 times
However, I tried something else adding a body background image that didn't work well because of other certain forums areas. Like WhoIs IP "Popup Box" causing issues when doing this. I wanted to add a solid (blue) image band across the top of the page body using this below.

Code: Select all

html, body {
   color: #536482;
   background: #F5F7FA url("./images/bg_body.gif") repeat-x;
But because the WhoIs online IP checking pop-up box is small and uses dark coloured text displayed on body background itself at top, same thing with smiley pop-up box. It wasn't possible to use an image band without it affecting those pop-up boxes looking daft with dark text you could hardly read against the blue body background band. Ruling out really you being able to add a dark coloured background band across top of forum to have two colours used. Much like how XenForo does it like this.
xf.png
xf.png (12.65 KiB) Viewed 6480 times
So thought I'd mention this as it kind of limits you being able to style body background, unless you just tile a light coloured image all over it which I ended up having to do really, but would have preferred a coloured band across to break background up better and have two colours used on it.


If you used a forum background band at top, because the smiley box is short in height means that band (if blue lets say) would be used behind both title text and even what's displayed at bottom also (most likely). If the band was about 300px long used.
aa.png
aa.png (30.09 KiB) Viewed 6475 times
Dark text title on page background not suitable if using a blue band on forum page body background
ab.png
ab.png (32.14 KiB) Viewed 6475 times

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1724
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Define max-width for prosilver

Post by DavidIQ » Sun Jul 06, 2014 6:56 pm

You're going way off scope/topic with all of your last few replies in this topic. Each and every one of your "suggestions" should be a separate RFC. If you're not going to talk about the max-width change that this topic is/was about please don't post here. Either find the relevant topic or start a new one, as has already been mentioned.

Thanks.
Image

User avatar
mrgtb
Registered User
Posts: 217
Joined: Wed Nov 28, 2007 10:09 pm

Re: Define max-width for prosilver

Post by mrgtb » Sun Jul 06, 2014 8:58 pm

OK, point taken.

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 » Tue Jul 08, 2014 4:46 am

It looks horrible with all of the padding on the sides... :(
These kids today...
Buy them books, send them to school and what do they do?

They eat the paste. :lol:

Octopus2
Registered User
Posts: 12
Joined: Wed May 25, 2005 5:58 pm

Re: Define max-width for prosilver

Post by Octopus2 » Tue Jul 08, 2014 6:52 am

For me it looks beautiful with all the padding on the sides... ;)

User avatar
Ger
Registered User
Posts: 269
Joined: Mon Jul 26, 2010 1:55 pm
Location: 192.168.1.100
Contact:

Re: Define max-width for prosilver

Post by Ger » Tue Jul 08, 2014 8:20 am

I like proSilver the way it is now (for 3.1).
Of course you can discuss until 2050 about the exact looks, but IMHO that is not important. The most important thing is the basic structure with responsive design and inheritance as the biggest assets.
With proSilver as it is now, you can make a complete different style in just a mornings work. Create a overall_header, _footer and index_body with some alterations, change common.css end colours.css and maybe a my_style.css for the extras and you're ready. With that, you can change the exact width, the padding, the colors and everything else to your own taste.

IMO: no need for further debating this.
Above message may contain errors in grammar, spelling or wrongly chosen words. This is because I'm not a native speaker. My apologies in advance.

User avatar
callumacrae
Website Team
Website Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: Define max-width for prosilver

Post by callumacrae » Tue Jul 08, 2014 9:41 am

Master_Cylinder wrote:It looks horrible with all of the padding on the sides... :(
It looks different. People are biased against change. Please consider this and leave some time before making a comment.
Made by developers, for developers!
My blog

Locked