Fixing The Happening (Adding Banners Back to Fimfiction)

After the happening, I decided that some users might want their banners back. So I downloaded the Stylish plug-in, and created a new style for fimfiction that includes one of my favorite banners:

So here's what you do to apply this:

1- Download and install the Stylish plug-in for Firefox or Chrome (there is also Opera, and Safari (unsure how up to date this one is)).
2- Go to "write new style" > "blank style" and paste the following:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("fimfiction.net") {
.pin_nav_bar_spacer {
display: block!important;
background-image: url("YOURBANNERURLGOESHERE");
background-position: center;
background-repeat: no-repeat;
height: 175px!important;
}
.header {
max-width: 1300px!important;
}
.user-page-header {
margin-left: auto!important;
margin-right: auto!important;
max-width: 1300px!important;
}
}

(it currently works with firefox. In chrome or others, you may need to choose "For Fimfiction.net" instead of "blank style", then copy and paste the code from inside the brackets of "@-moz-document domain("fimfiction.net")")
3- Go to this page and choose the banner you like: fimfiction banners
4- Right click your banner and choose "View Background Image" or whatever your browser uses.
5- Copy the URL of the image and paste it into the quotes of the style where it says YOURBANNERURLGOESHERE.
6- Save the style and apply it.

Congratulations! You have added banners back to Fimfiction!

The only difference so far is the user page module is still the huge top bar thing, and the group pages now have both a banner and the group banner. But that's no problem.

PS: If you want to create your own banner for the site, the image size is 1300 by 175. You can host it where you want so long as the URL leads to it.

If you have any questions, or problems applying the styles, check in the comments section, as the answer might already be there. If not, feel free to ask.

Help from the wonderful fluttercheer regarding the banner URL change!:

Hi!

Just in case you haven't noticed already, the direct URL of the banners here has changed for some reason.

Here are the new ones, so that you can update your styles:

static.fimfiction.net/images/custom_banners/zecora.jpg

static.fimfiction.net/images/custom_banners/aeron_fluttershy.jpg

static.fimfiction.net/images/custom_banners/aeron_philomena.jpg

static.fimfiction.net/images/custom_banners/aeron_celestia.jpg

static.fimfiction.net/images/custom_banners/derpy_dash.jpg

static.fimfiction.net/images/custom_banners/ponykiller_trixie.jpg

static.fimfiction.net/images/custom_banners/yamio_fluttershy.jpg

static.fimfiction.net/images/custom_banners/ratofdrawn_1.jpg

static.fimfiction.net/images/custom_banners/ratofdrawn_rarijack.jpg

static.fimfiction.net/images/custom_banners/solar_luna.jpg

static.fimfiction.net/images/custom_banners/solar_group.jpg

static.fimfiction.net/images/custom_banners/uc77_1.jpg

static.fimfiction.net/images/custom_banners/cmaggot_fluttershy.jpg

static.fimfiction.net/images/custom_banners/rainbow_ss.jpg

static.fimfiction.net/images/custom_banners/rainbow_markerpone.jpg

static.fimfiction.net/images/custom_banners/rainbow_roseluck.jpg

static.fimfiction.net/images/custom_banners/jj_trixie.jpg

static.fimfiction.net/images/custom_banners/anima_1.jpg

static.fimfiction.net/images/custom_banners/mew_pinkie.jpg

static.fimfiction.net/images/custom_banners/tsitra_dash.jpg

static.fimfiction.net/images/custom_banners/knifeh_scoots.jpg

static.fimfiction.net/images/custom_banners/noben_celestia.jpg

static.fimfiction.net/images/custom_banners/ep_shady_trough.jpg

static.fimfiction.net/images/custom_banners/spittfire_1.jpg

static.fimfiction.net/images/custom_banners/blitzpony_luna.jpg

static.fimfiction.net/images/custom_banners/gsphere_scoots.jpg

static.fimfiction.net/images/custom_banners/stoic_celestia.jpg

static.fimfiction.net/images/custom_banners/moe_canterlot.jpg

static.fimfiction.net/images/custom_banners/alasou_costumes.jpg

static.fimfiction.net/images/custom_banners/pridark_luna.jpg

static.fimfiction.net/images/custom_banners/gign_flutterdash.jpg

static.fimfiction.net/images/custom_banners/goben_forest.jpg

static.fimfiction.net/images/custom_banners/devinian_lyra_bonbon.jpg

static.fimfiction.net/images/custom_banners/devinian_fluttershy.jpg

static.fimfiction.net/images/custom_banners/jackalynn_pinkiedash.jpg

static.fimfiction.net/images/custom_banners/yakovlev_fluttershy.jpg

static.fimfiction.net/images/custom_banners/yakovlev_twilight.jpg

static.fimfiction.net/images/custom_banners/mymagicdream_twilight.jpg

It's basically just "static.fimfiction.net" at the beginning now, the rest is the same.

I already updated my own style to make it work again.

Comments

[Prince_Staghorn]

...I am unable to download this... thanks anyway!

[PiercingSight]

2670071
Is it because of the browser that you use?

[Prince_Staghorn]

2670076 And paranoia due to the fact that the last thing I downloaded filled my computer with so much malware that I needed to take it to a professional computer repair shop

Oh well, i'm okay with it

[PiercingSight]

2670091
Oh, I see. That makes sense, especially if you use chrome on a windows. Well, I can try to assure you that Stylish is safe, but then again, I'm on a mac. Though, even if I used a windows, I would still trust it (and as a programmer I know when not to trust something on the internet).

So whether you use it or not is up to you. It isn't all that important in the end though.

I wish you luck!

[Prince_Staghorn]

2670094 thanks! i'm glad we could have this conversation!

[FoxfanMLP22]

Well I Have Google Chrome... Is There a Plug-in for it?

[PiercingSight]

2670120
Yes (click here)

[Digital Ghost]

Does this work on Opera? (before the browser wars starts up, I'm using this simply cause I hate [/too lazy] having to switch browsers constantly since Opera makes it easy to bypass school wifi site blocking.)

I know Chrome and Opera are more or less made from the same kit, so I was wondering.

[PiercingSight]

2670130
It appears so.

[Digital Ghost]

2670134 SWEET! Thanks for this!

[dracone]

Now you just need to figure a way so the patch works with a Kindle or iPad, for those of us who also visit the site with mobile devices.

[PiercingSight]

2670150
Sadly this will only work in browsers that can have plugins. Mobile safari cannot. And Kindle almost certainly cannot. So if their were a way I would have done it, but sadly, I know not one other than perhaps using a nested iframe or something like that on another site (something I'm sure wouldn't be very trusted, or stable).

[Officer Hotpants]

You forgot the step where we hire a bunch of school children to chase Knighty with oranges in socks until he stops purposefully trying to reduce the site to a bland, unusable ruin.

I still can't believe how goddamn stupid his "redesign" of the browsing system is. That has to have been done on purpose.

[whizzball1]

Awesome! It works. Thank you!

[PiercingSight]

2670202
You're very welcome.

[Kleora]

So with this can you only use one banner, or can you do it so you get a different banner upon each page reload?

[whizzball1]

2670217 It could be done with a bit of complex-ish Javascript.

[Kleora]

2670233
Sounds like effort. Is there an easy way to do it so you can click the banner and be redirected to the FiMFIC main page like you could before the update?

[whizzball1]

2670237 I'd need to brush up on my HTML skills to do it, but yes. It should be fairly easy. Let me see if I can throw together something.

[Kleora]

2670241
Thanks. I really need to learn some more HTML. It seems like it has endless use.

[whizzball1]

2670245 So it turns out Stylish cannot insert HTML code, only CSS. And as far as I know you can't run HTML code with CSS or make an image into a link with CSS, so unfortunately that can't be done.

[Kleora]

2670250
Ah well. Thanks for looking into that for me. I appreciate it.

[PiercingSight]

2670268
2670250
It is actually possible, it's just... not very safe or easy. Hence the reason I have not done so.

[Raymanguy]

I can;t seem to figure out how to do this. It just won't work for me.

[PiercingSight]

2670282
Do you have Stylish installed? What browser are you using?

[Raymanguy]

2670294
Yes and Chrome.

[whizzball1]

2670297 Oh. It took me a while to figure out what the blog was trying to say, but basically, see the "-moz" line? There's a bracket at the end. All the stuff inside that bracket set should be copied, minus the very last bracket at the end. And at the bottom it says "Applies to." Add "fimfiction.net" (don't add the quotations) under "URLs on the domain" and then you're done.

[Raymanguy]

2670331
Copied where?

[PiercingSight]

2670297
Did you follow the chrome instructions? Namely, copying the following code:

.pin_nav_bar_spacer {
display: block!important;
background-image: url("YOURBANNERURLGOESHERE");
background-position: center;
background-repeat: no-repeat;
height: 175px!important;
}
.header {
width: 1300px!important;
}
.user-page-header {
margin-left: auto!important;
margin-right: auto!important;
width: 1300px!important;
}

into the Stylish > Write New Style > For fimfiction.net style editor, replacing the URL with the image you want, and save that?

[Raymanguy]

2670352
When I clicked Write New Style I never got the option for fimfiction. it just opened up the code window.

[whizzball1]

2670364 Yeah, there's no "For fimfiction.net". Follow my instructions as to how to make it for fimfiction.net (namely, the URLs on the domain thing).

[Raymanguy]

2670416
But I don't understand what you mean by copy?

[Tennis Match Fan]

Does this work for kindles? If not, do you have a version that works for kindles?

[PiercingSight]

2670217
I have written a little php script that returns a random image on reload. Though it seems to be working a little strangely for me, perhaps because of the way that fimfic switches between pages, or because of the way my cache is set up. Either way, instead of an image URL, use the following: http://wallballpro.com/bp/RandomImage.php

[PiercingSight]

2670434
The code must be copied and then pasted into the style editor text area.

[Raymanguy]

2670564
I did that. I mean about the copy of "@-moz-document domain("fimfiction.net") {"

[PiercingSight]

2670570
That line there should not be copied if you're using chrome. That is Mozilla Firefox specific code. For chrome copy the following only:

.pin_nav_bar_spacer {
display: block!important;
background-image: url("YOURBANNERURLGOESHERE");
background-position: center;
background-repeat: no-repeat;
height: 175px!important;
}
.header {
width: 1300px!important;
}
.user-page-header {
margin-left: auto!important;
margin-right: auto!important;
width: 1300px!important;
}

That's all the code necessary for chrome.

[whizzball1]

2670444 Only if you can download the "Stylish" plugin for a mobile browser (CHrome or FIrefox).

[Raymanguy]

2670576
Ok, awesome. Now one last thing. How do I get banner URL? I tired to do what you said but there wasn't a View Background Image"

[PiercingSight]

2670631
It appears that Chrome doesn't have this option. Instead try "inspect element" and the "background-image" tag should be visible on the right. Copy the URL from there.

[Raymanguy]

2670635
Awesome! Thanks a bunch!

[PiercingSight]

2670640
No problem!

[whizzball1]

2670635 Yeah, that's what I had to do. THank goodness for the dev tools.

[Manaphy]

It worked! Thank you very much!
I'm going to go advertise this on my blog!

[Veryveryfluttershy]

I'm dumb, I don't understand any of this .

[PickleSurprise]

Thank you for this. The moment I logged on today I knew something was off and it didn't take very long to realise what that was.

I do have a question though. Why were the banners removed? Its been a couple days since I was last on but I don't remember any drama from site admins or whomever decided this was a good idea.

Once again, thank you.

[Forgoten Null]

Ok, it took me about 20 minutes of fiddling to get it to work, but it works now.

You have my eternal thanks. Here is your reward, carry it with you and it will bring swift death to your enemies.
static.giantbomb.com/uploads/scale_small/8/80973/1547224-yer.png

[The Guardian and Friends]

Now all you need to do it make it so that the banner can be a link to the homepage like before. That'll be awesome!

[orivonfist]

I have a kindle fire

[Knight of Lycaeus]

May I have a hand? I've gotten Stylish up and the code in, but the image for the banner won't show up except as a blank white space despite adding the URL. Could anyone provide some insights as to why.