FIMFiction UserScripts 383 members · 0 stories
Comments ( 13 )
  • Viewing 1 - 50 of 13

After cleaning up and searching through the CSS file for Fimfiction before the update, I’ve found and modified a few elements to make the site elements work properly with Fimfiction Advanced installed.

Installing this in Stylish will bring back square avatars, a green menubar, 3D-ish buttons, removes much of the blue in favor of the old tan/olive green theme, and makes the popular stories list scrollable again.

Other than that, I’ve made very few adjustments to the file, and taking into account how I’m onlybarelygetting into HTML/CSS coding, I can’t do very much yet.

Here’s the code down blow. Copy and paste it into Stylish on Chrome or Firefox to install it.:twilightsmile:

(Also, there may/may not be some leftover code added by the Wayback Machine from when I retrieved the file.)

https://pastebin.com/raw/kDRJ3RFj

yrfoxtaur
Group Contributor

Why pastebin links? Is it too large for userstyles.org?

5979077
Nah. It’s just that it made it impossibly annoying to copy. It’ll lag stylish for a bit when you paste it in, but once it’s loaded it works pretty well. I’ve adjusted it a bit to work better with Fimfiction Advanced.

yrfoxtaur
Group Contributor

5979096
OH. I hadn't looked at the file before. You're reusing the entire thing!

Should really just include the rules you're actually using...

5979113
I’m still pretty new to this stuff, so I have no idea what to remove. I just know what to change.

yrfoxtaur
Group Contributor

Well, css is pretty easy. The file pretty much consists of rulesets, and each ruleset affects one or more elements. Rulesets override each other in the order encountered, so the last ruleset is the one that wins, generally.

Anything loaded with stylish will, as a result, generally win.

Basically, the parts that you choose to change are ~90% of what you need. Here's a pretend ruleset:

selector
{
property1: value1;
property2: value2;
property3: value3;
}

(The selector determines which parts of the page the ruleset affects, the properties listed in the ruleset will have their values changed from their existing value to the value specified in the ruleset)

Lets say you wanted to change selector’s property3 value to value4.

You could go back and edit the ruleset, and that would often be best, but not in the context of stylish.

You could also add a new ruleset. Like this:

selector
{
property3: value4;
}

That's what you're generally doing with stylish. Adding new rulesets that override parts of the existing ones, and only those parts that need changing.

5979047 https://youtu.be/H8Jz0WwcFZs
To make popular stories scrollable is the following code:

div.front_page .popular-stories-container {
    position: relative
}
div.front_page .popular-stories-container:after {
    content: " ";
    display: block;
    background: rgba(238, 233, 226, 0);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238, 233, 226, 0)), color-stop(100%, #eee9e2));
    background: -webkit-linear-gradient(top, rgba(238, 233, 226, 0) 0%, #eee9e2 100%);
    background: linear-gradient(to bottom, rgba(238, 233, 226, 0) 0%, #eee9e2 100%);
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 200px;
    z-index: 1;
    pointer-events: none
}
div.front_page .popular-stories-container .story-card-list {
    overflow: hidden;
    height: 800px;
    max-height: none
}
div.front_page .popular-stories-container .story-card-list::-webkit-scrollbar-track {
    background-color: #eee9e2;
    box-shadow: none
}
div.front_page .popular-stories-container .story-card-list::-webkit-scrollbar-thumb {
    border-radius: 5px
}
div.front_page .popular-stories-container .story-card-list:hover {
    overflow: auto;
}

Luckily it was labeled correctly and conveniently, so it was easy to Ctrl+F.

I didn’t search for the coding to fix the green menu bar or the avatars because I already found styles to fix those..

yrfoxtaur
Group Contributor

5979562
Psst!
Exchange

[code][/code]

for [codeblock=css][/codeblock]. [code=css] works too, but is less pretty

yrfoxtaur
Group Contributor

5979600
Hey. I hope we aren't getting you down here. You said yourself that you're still learning, and we just wanna help. Well, I do, anyway.

What I was trying to get at, was, if you know what to change, then you know what to keep. Everything else can go. I’d advise keeping the original complete file for reference, but loading only the parts you changed and kept into stylish.

In the hopes it will be useful, here's some more on css selectors

5980543
It’s alright. I”m taking summer classes to learn more.

5980529
Ah, okay, I was wondering how people got their code to look so nice. Thanks for the tip!

  • Viewing 1 - 50 of 13