Seeking a new and improved design, this style will modify aesthetic and practical features.
Also allow you to customize colors, fonts and the logo: how you want.
See additional info for more.
Redesign Yourself AO3 - Updated 04.18 by esdruxule
Imported and mirrored from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/111189.user.css
Details
Authoresdruxule
LicenseCC-BY-4.0
Categoryarchiveofourown
Created
Updated
Size3.2 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
\\UPDATE///
!NEW! I finally manage to change the colors of the images, for now is just the logo.
: Now allow you to customize colors and fonts.
HOW TO COLOR THE LOGO:
Hue: is in degrees, for example, 30deg will give a orange-red, 100deg will give a strong green.
Saturation:is in %, 100% is the normal saturation, less will soft the color, more will give an almost neon effect(since the original red is very saturated)
Brightness:is in decimals, and very small values, dont use negatives to dark the color, instead use 0.5 or lower if you wish;
The default values will produce a slight dark blue that matches the default colors
Important Note:
The logo coloring uses extremely new css features, for any doubts please refer to --> filter - CSS|MDN
--->Fixed the primary header, I accidentally putted in color "background" instead of "accents", now the header will appear normally.
Also, I recently made an account on Ao3, they have the said "skins", I don't recommend to use together, the style will override, but shadows and other colors configurations may enter in conflict. Ao3 skins also don't allow the same level of customization that this style do. Keep the skin as default if you have a ao3 account.
\\I will be adding more customizable features, check regularly.
Also if you want to give a suggestion, please leave a message.///
Tips:
If you are in doubt about the color scheme visit Coolors, and for fonts
allowed in css and to help you choose a specific type, visit Css Font Stack
(Keep in mind that you can only put in fonts the font-family line, eg:"Arial Black,Arial Bold,Gadget,sans-serif")
Features:
""Default:""
\Background -> Is a soft grey instead of pure white, with the idea of be less tiresome for the eyes.
!!!UPDATE: Grey is slight more darker.
\Fonts -> Fonts will be automatically changed to any sans-serif you have.
!!!UPDATE:Fonts in the text body are bigger, easier to read.
\Overall -> Everything is in solid colors, accents are in a soft blue, filter box is the same color of background, everything that used to be soft round now is plain square.
!!!UPDATE: Menu looks a bit different, because the links are in blue now.
Know issues:
None, please message me if found one.
Source code
/* ==UserStyle==
@name Redesign Yourself AO3 - Updated 04.18
@namespace USO Archive
@author esdruxula
@description Seeking a new and improved design, this style will modify aesthetic and practical features. Also allow you to customize colors, fonts and the logo: how you want. See additional info for more.
@version 20150418.06.53
@license CC-BY-4.0
@preprocessor uso
@advanced color background "Background" #F5F5F5
@advanced color accents "Accents " #3F7CAC
@advanced color accents2 "Links" #4F79A9
@advanced color bordercolor "Filter Box Border" #CACCCF
@advanced text fontype "Font Family" "sans-serif"
@advanced text fontsize "Font Size" "17"
@advanced color fontcolor "Font Color" #2A2A2A
@advanced text hue "Logo Hue" "210"
@advanced text sat "Logo Saturation" "70"
@advanced text bri "Logo Brightness" "2"
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("archiveofourown.org") {
#header .primary{
background:none !important;
background-color:/*[[accents]]*/ !important;
box-shadow:none !important;
}
.logo{
filter: hue-rotate(/*[[hue]]*/deg) saturate(/*[[sat]]*/%) brightness(/*[[bri]]*/) !important;
-webkit-filter: hue-rotate(/*[[hue]]*/deg) saturate(/*[[sat]]*/%) brightness(/*[[bri]]*/) !important;
}
*{
font-family:/*[[fontype]]*/ !important;
color:/*[[fontcolor]]*/ !important;
}
#header .heading a{
color:/*[[accents]]*/ !important;
}
.actions a, .action, .actions input, .input[type="submit"], .button, .current, .actions label{
background: linear-gradient(/*[[background]]*/ 2%, /*[[background]]*/ 95%, /*[[background]]*/ 100%) repeat scroll 0% 0% /*[[background]]*/;
border-radius:0px !important;
}
body, body .toggled form, .dynamic form, .secondary, .dropdown {
background-color: /*[[background]]*/ !important;
font-size:/*[[fontsize]]*/px !important;
}
.blurb h4 a:link{
color:/*[[accents2]]*/ !important;
text-transform:capitalize !important;
font-size:120% !important;
}
#header h1{
font-size:140% !important;
}
#footer ul, #footer{
background:none !important;
background-color:/*[[accents]]*/ !important;
box-shadow:none !important;
}
span.delete a{
color:/*[[accents2]]*/ !important;
}
fieldset{
box-shadow:none !important;
border-color:/*[[bordercolor]]*/ !important;
background: linear-gradient(/*[[background]]*/ 100%, /*[[background]]*/ 10%) repeat scroll 0% 0% /*[[background]]*/;
}
.splash .module h3{
color:/*[[accents]]*/ !important;
}
.input[type="checkbox"]{
box-shadow:none !important;
border-color:/*[[background]]*/ !important;
}
a, a:link {
color:/*[[accents2]]*/ !important;
}
#footer a {
color:/*[[background]]*/ !important;
}
a.tag:hover, .listbox .heading a.tag:visited:hover, li.relationships a {
color:/*[[accents2]]*/ !important;
background:/*[[background]]*/ !important;
}
h2{
text-shadow:none !important;
}
}