New Forum Header

[Arite]

Nice job on the new header for the Forum .

I have just a couple of suggestions/CSS tweaks to make it look more consistant. Somewhere (the top of the CSS works) add:

Code: Select all

.noUnderline { color: #0070BB !important; } .blue { font-family: Arial; } #linkBar { margin-top: 11px !important; } body, html { background: url("//images.videolan.org/style/images/background.png") repeat-x scroll center top #FFFFFF; }

The first selector bit just overrides the link colour for the "non-profit organization" hyperlink and the second sets the font to Arial (what the main home page uses, on Windows 7 anyway). That might not work consistantly over all OS's however as not everyone has Arial, but as the main site specifies only Arial for the body font it might be the same. The third just moved the linkBar down a pixel because for some reason it's slighly off otherwise when compared to the main site.

The font (second selector bit) one is the most noticable (on Windows anyway) as the font is calculated from a phpBB class as "Verdana,​Helvetica,​Arial,​sans-serif" instead of "Arial".

The fourth bit sets the background for the html tag as well as the body so that, in the event of the page content being shorter than the browser window, the background gradient continues instead of being cut off with the page below being white.

Before:



After:



^I also "fixed" the rounded corners on the navbar (ther bar below the VideoLAN one - where the UCP links are etc.). If you wanted to get rid of the white corners (as they stand out against the gradient) you could do e.g.:

Code: Select all

.navbar { border-radius: 8px; }

And then set the spans that contain the images (corners-top, corners-bottom and their child spans) with a CSS property of "background-image: none;". That makes the white corner images disappear, and applies nice CSS3 rounded corners instead. This would require more wok though as the corners are used throughout the style so all rounded conters would need to be changed.

The lower boxes with white corners are still noticable too, so would involve more editing to fully fix.

Cheers, Arite.

[Jean-Baptiste Kempf]

OK, the first part is applied, of course...

[Jean-Baptiste Kempf]

And the second part too.

However a lot of places have now un-rounded corners...

[Arite]

Nice, cheers .

I'll have a look at the rounded corners - should be doable with a bit more CSS. Only negative is that older browsers might not benefit.

Arite.

[Jean-Baptiste Kempf]

Older browsers should die.

[Arite]

Fair enough, not many people will be using IE6(/7/8?) nowadays, and if so they just wouldn't get rounded corners in the case of the border-radius CSS .

I can't see the changes you applied - seems to be the same other than the un-rounded corners. I placed the CSS essentially at the top of the phpBB stylesheet (what style.php returns) and it worked OK.

Here's an updated tweaks bit with a couple more things:

Code: Select all

.noUnderline { color: #0070BB !important; } .blue { font-family: Arial; } #linkBar { margin-top: 11px !important; } body, html { background: url("//images.videolan.org/style/images/background.png") repeat-x scroll center top #FFFFFF; } dd { margin-bottom: 0px !important; } .headerbar, .navbar, .post, .forabg, .forumbg, .panel, .rules { border-radius: 7px; } dl.codebox code { overflow: auto !important; }

The dd margin-bottom bit is to sort out the spacing of list layout found in the profile section of a post (Posts, Joined, Location etc.).

The border-radius sets the border radius for the classes that uses the rounded corners. I may have missed a couple though. 7px seems to be about right.

The overflow bit is for code boxes, they work on desktops, but on mobiles/touchscreens they don't seem to. May not make any different/might not be needed.

So adding all of that to e.g. the forum theme/stylesheet in the ACP should make things look pretty good, in Firefox at least. I believe Chrome should behave the same.

The tweaks in action:



Note that IE9 (and presumably others) seems broken ATM:



It's hard to debug with IE though as Firebug isn't available (Firebug Lite is in a JavaScript form, but that doesn't allow editing anyway).

Arite.

[Jean-Baptiste Kempf]

I never made it to work, btw.

[kdean]

The problem with IE is due to the following line in the head:

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This is telling IE 8 and later to render the page as if it were IE7, which of course is crap.

Change it to:

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

which tells IE to render using the latest renderer the browser supports. This fixes the IE header layout problems Arite pictured. Neither of these modes show the compatibility mode button at the upper right of IE, which is probably a good thing since IE 7 mode (Compatibility Mode) doesn't render correctly anyway.

If for whatever reason you want people to have the Compatibility mode button, you would just delete the line of code entirely.

[Jean-Baptiste Kempf]

I will try to do it.

[kdean]

Looks good in IE now.

[Arite]

The problem with IE is due to the following line in the head:

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This is telling IE 8 and later to render the page as if it were IE7, which of course is crap.

Ah OK, didn't notice that.

Looks good in IE now.

Yep, much better .

I never made it to work, btw.

Adding the code anywhere to the CSS should do it (code from this post). To check it I'm just adding the code on-the-fly in Firebug FYI (CSS tab -> Source Edit a CSS file, paste code to check it works).

Alternatively, instead of adding it to a CSS file you could just add it to the <head> section in the overall_header.html template file in a <style type="text/css"></style> tag.

NOTE: If you modify the file directly you need to refresh the template cache in the ACP. If you do it in the ACP it'll work straight away but refreshing the cache will lose the changes.

Arite.

[Jean-Baptiste Kempf]

Oh, btw, I made it to work again

[Arite]

Nice one, looks good .

Arite.

[Jean-Baptiste Kempf]

Sorry for the delay.