Forum:Some changes in the Community Central styling

Hi, I noticed that by this edit every namespace here in Community Central has the same background.

The problem is that as those green borders that were first only on Admin Central but now are on every namespace are done using a background image that is only(?) 800px in height, meaning that the borders ends abruptly if the browser window is taller than that.

So, instead of using the said image, I wonder if the following CSS, that should do about the same results without height limits, could be used for that purpose instead.

First, defining the background gradient (I haven't used gradients much so browser compatibility or validity is not guaranteed, sorry): body { background: #D5EAFE no-repeat fixed; background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#2C85D7),color-stop(100%,#D5EAFE)); background-image: -webkit-linear-gradient(top, #2C85D7, #D5EAFE); background-image: -moz-linear-gradient(top, #2C85D7, #D5EAFE); background-image: -ms-linear-gradient(top, #2C85D7, #D5EAFE); background-image: -o-linear-gradient(top, #2C85D7, #D5EAFE); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2C85D7', EndColorStr='#D5EAFE'); }

Then the green borders and accompanying shadow: .WikiaPage { border-left: 13px solid #88C440; border-right: 13px solid #88C440; -webkit-box-shadow: 0px 10px 20px #444; -moz-box-shadow: 0px 10px 20px #444; box-shadow: 0 10px 20px #444; }

I'm sure it could be done somewhat better too, so feel free to improve. –Tm_T (Talk) 10:47, September 17, 2011 (UTC)


 * I'd like to see your solution being used since it's certainly more versatile than the current background image. — Sovq 11:09, September 17, 2011 (UTC)
 * Sovq - just add the above to Special:MyPage/wikia.css. It mimics the current image quite nicely. Rappy 19:36, September 17, 2011 (UTC)


 * I know, I tested it already, but I like to see what everyone else is seeing and I don't like anyone seeing something flawed. — Sovq 20:07, September 17, 2011 (UTC)
 * You are using Oasis, am I right? Oasis in itself is flawed from one browser to another despite compatibility suggestions. Rappy 21:58, September 17, 2011 (UTC)


 * Heh, that's true, but I've learned to accept that it's THE skin the most users will see. The described issue isn't the skin's fault though, it's just poor design. — Sovq 22:23, September 17, 2011 (UTC)


 * Yep. I completely agree. Rappy 22:28, September 17, 2011 (UTC)

Hey guys -- we are aware of that problem and are working on a solution. Marc-Philipp  (Talk)  22:40, September 17, 2011 (UTC)


 * Thanks MtaÄ, and please let us know if the CSS solution above is insufficient in some part. (: –Tm_T (Talk) 07:38, September 18, 2011 (UTC)
 * Tm_T -- I haven't tested the CSS, but one thing it didn't do (from what I saw) is adding a gradient to the border. You barely see it, but it's there. Also, what I did was just a quick fix as I didn't have the source file, other staff need to review the file that I uploaded. Marc-Philipp   (Talk)  12:02, September 18, 2011 (UTC)
 * Hmm, I tried to comb through with colourpicker to notice any gradients on the border (I don't trust my eyes or cheap monitors on this kind of things), but couldn't get anything else out but single solid colour throughout the whole visible part of it, let me know what I did miss and I'll try fix. (: –Tm_T (Talk) 05:48, September 20, 2011 (UTC)

Great work, everyone! We love this kind of help! One thing we noticed is that with this solution, the background isn't fixed on IE (we tested on IE8). Any ideas? --Dopp http://images2.wikia.nocookie.net/__cb32675/wikia/images/e/e9/WikiaStaff.png (help forum | blog) 21:29, September 19, 2011 (UTC)
 * As I don't have (currently) IE to test this, I hope someone who knows about its actings would chip in on this, I'll try find a way to test it myself too though. There's also few "bugs" with this solution that I will try fix soon (one is this edit page lagging the border in its top, as "the new editor" has different page layouting regarding the global navigation header. (why so?) –Tm_T (Talk) 05:45, September 20, 2011 (UTC)


 * Another solution: does someone want to create a taller version of the background image (extending the gradient or just repeating the last line of pixels vertically for awhile..)? Must stay under 100kb. Ping my talk page when there's a solution ready to implement. :) --Dopp http://images2.wikia.nocookie.net/__cb32675/wikia/images/e/e9/WikiaStaff.png (help forum | blog) 18:03, September 22, 2011 (UTC)
 * Like this one? Rappy 22:41, September 22, 2011 (UTC)


 * So close! This version changes the gradient so that it gets lighter much further down the image. Can you tweak that so it matches the original? (Added image on that page for reference.) --Dopp http://images2.wikia.nocookie.net/__cb32675/wikia/images/e/e9/WikiaStaff.png (help forum | blog) 22:47, September 23, 2011 (UTC)


 * You mean to have it taper off to white after that and just extend the green bar? Sure, I can do that. Rappy 23:03, September 23, 2011 (UTC)


 * Two files. One is based off of MtaA's 2000x1200 upload and the second is based off of your 2000x800 upload . The latest one will have to be purge since it was hit with the 'upload over existing' cache bug and won't display properly. The only difference? MtaA's version will have the white taper off farther down the screen that your original one, but not as far down as my original. Rappy 23:31, September 23, 2011 (UTC)


 * Hrm. Looks like quality is degrading. Gradient isn't so smooth anymore. :-\ --Dopp http://images2.wikia.nocookie.net/__cb32675/wikia/images/e/e9/WikiaStaff.png (help forum | blog) 23:32, September 23, 2011 (UTC)


 * That's because at that point, it's no longer a gradient and is simply the same color repeating. Without the original PSD, it will be impossible to recreate exactly in the manner you are wanting. =) Rappy 23:36, September 23, 2011 (UTC)

I made some CSS that's similar to Tm's code that fixes the border on the edit page, and everything (except the gradient and shadows) works in IE: User:Mythrun/wikia.css