Chapter Text
Hello fellow users! I tinkered a lot (and I really mean a lot) with CSS and siteskins lately and I’ve come to learn a few things, some of them also thanks to the siteskins made by user ElectricAlice and the explanations in them on Github.
So I will list here the codes contained in the site skin that will allow you to have gradient text for several parts of the site and I will add the explanation for each code.
Let’s get started!
The first code will affect the greetings, meaning the upper right part of the site, the one with “Hi, xxx!”, “Post” and “Logout”, plus the dropdown menu of these three elements:
#header #greeting a {
background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The second code will affect the buttons “Post new”, “Edit works”, “Subscribe”, “Invitations”, “Expand fandom list”, plus all the buttons for the skins (both workskins and siteskins) and all the buttons at the top and at the bottom of a work.
#header input[type="submit"],
#main .actions a,
#main .actions a:visited,
#main .action,
#main .actions input,
#main input[type="submit"],
#main .actions label {
background: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border: solid 2px #1e90ff;
}
The third code affects the color of the summary of a work, plus the datetime on the right side of a work.
#workskin p,
.system p,
.news p,
.blurb p {
background-image: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
The fourth code will affect the font color of the relationship tags (for example "Urameshi Yuusuke/Yukimura Keiko"):
li.relationships a {
background: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The fifth code will affect the font color of the character tags:
li.characters a {
background: linear-gradient(to right, #810404 0%, #000000 10%, #BA0000 15%, #000000 25%, #FF0000 50%, #000000 60%, #BA0000 80%, #000000 90%, #810404 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The sixth code will affect the color code of all the other tags:
li.freeforms a {
background: linear-gradient(to top right, #FF0000, #FF14E0, #B833D3, #28E2FF, #248AFF, #4006FF, #00ff00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Now, the six codes below affect the left side dashboard. In this example, I used the same gradient for all the levels of the dashboard, but you can use a different gradient for each level if you want.
#dashboard li:nth-of-type(6n+1) a {
background: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#dashboard li:nth-of-type(6n+2) a {
background: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#dashboard li:nth-of-type(6n+3) a {
background: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#dashboard li:nth-of-type(6n+4) a {
background: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#dashboard li:nth-of-type(6n+5) a {
background: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#dashboard li:nth-of-type(6n+6) a {
background: background: linear-gradient(to right, #9711fa, #081c85, #096979, #00d4ff, #9711fa );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
If you want to use only one color (or gradient, or font, or text color, or special effect) for all the levels of the dashboard, you can use this code instead of the above six codes:
#dashboard,
#dashboard ul,
#dashboard .secondary,
#dashboard a {
background: linear-gradient(to right, #F8295A 0%, #FFA500 25%, #EAE326 40%, #37EA1B 60%, #2A97EA 80%, #B926F8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The thirteenth code affects the current level of the dashboard (the one of the page you're viewing in that moment), in this case giving it a red-green gradient text:
#dashboard .current {
background: linear-gradient(to right, #FF0000, #00FF00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
The fourteenth code affects the lines in the “Sort and filter” column on the right side (in the example, I will also change the font from the deafult font to the font Lucida Calligraphy):
.filters .expander {
color: #000000;
background: linear-gradient(to right, #ff0000, #0000ff, #ff0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Lucida Calligraphy cursive;
}
If you want to give the "Sort and filter" column a different gradient for each level, you need to switch the above code with these codes:
.filters .rating .expander {
background: linear-gradient(to top right, #ffff00 0%, #FF0000 10%, #FF14E0 25%, #B833D3 42%, #28E2FF 60%, #248AFF 79%, #4006FF 90%, #00ff00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .warning .expander {
background: linear-gradient(to right, #00FF00 0%, #1E90FF 30%, #FFA500 50%, #1E90FF 70%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .category .expander {
background: radial-gradient(circle farthest-corner at center center, #FF0000 0%, #FFA500 25%, #05C1FF 50%, #FFA500 75%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .fandom .expander {
background: linear-gradient(to right, #FF20E9 0%, #FF005D 30%, #AB30CA 50%, #FF005D 70%, #FF20E9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .character .expander {
background: linear-gradient(to right, #00d4ff 0%, #081c85 40%, #096979 70%, #00d4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .relationship .expander {
background: linear-gradient(to right, #810404 0%, #000000 10%, #BA0000 15%, #000000 25%, #FF0000 50%, #000000 60%, #BA0000 80%, #000000 90%, #810404 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .freeform .expander {
background: linear-gradient(to right, #9711fa 0%, #081c85 40%, #096979 70%, #00d4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .crossover .expander {
background: radial-gradient(ellipse farthest-corner at center center, #3FFF4B 0%, #13D46D 25%, #22D39E 42%, #28E2FF 54%, #248AFF 73%, #4006FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .status .expander {
background: linear-gradient(to bottom right, #FF20E9 0%, #FF005D 30%, #AB30CA 50%, #FF005D 70%, #FF20E9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .words .expander {
background: linear-gradient(to right, #810404 0%, #000000 10%, #BA0000 15%, #000000 25%, #FF0000 50%, #000000 60%, #BA0000 80%, #000000 90%, #810404 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.filters .dates .expander {
background: linear-gradient(45deg, #F8295A 0%, #FFA500 25%, #EAE326 40%, #37EA1B 60%, #2A97EA 80%, #B926F8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
And if you want to add some cute emoticon (you can't add emoji if you're using the gradient text, sorry) to each level of the "Sort and filter" column, you need these codes:
.filters .rating .expander:before {
content: '✩ ';
}
.filters .rating .expander:after {
content: '✩ ';
}
.filters .warning .expander:before {
content: '♥ ';
}
.filters .warning .expander:after {
content: ' ♥';
}
.filters .category .expander:before {
content: '♪ ';
color: #000000;
}
.filters .category .expander:after {
content: ' ♪';
color: #000000;
}
.filters .fandom .expander:before {
content: '☽ ';
}
.filters .fandom .expander:after {
content: ' ☾';
}
.filters .character .expander:before {
content: '❀ ';
color: #FF0000;
}
.filters .character .expander:after {
content: ' ❀';
color: #FF0000;
}
.filters .relationship .expander:before {
content: '✮ ';
}
.filters .relationship .expander:after {
content: ' ✮';
}
.filters .freeform .expander:before {
content: '♫ ';
}
.filters .freeform .expander:after {
content: ' ♫';
}
.filters .crossover .expander:before {
content: '✩ ';
}
.filters .crossover .expander:after {
content: '✩ ';
}
.filters .status .expander:before {
content: '♥ ';
}
.filters .status .expander:after {
content: ' ♥';
}
.filters .words .expander:before {
content: '♪ ';
}
.filters .words .expander:after {
content: ' ♪';
}
.filters .dates .expander:before {
content: '☽ ';
}
.filters .dates .expander:after {
content: ' ☾';
}
This code changes the look of the buttons in the site:
.actions a,
.actions a:link,
.action,
.action:link,
.actions button,
.actions input,
input[type=“submit”],
button,
.actions label {
background: linear-gradient(to right, #810404 0%, #000000 10%, #BA0000 15%, #000000 25%, #FF0000 50%, #000000 60%, #BA0000 80%, #000000 90%, #810404 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
border: 1px solid #0000ff;
box-shadow: none;
}
And this code changes the way the buttons look like when you hover over them:
.actions a:hover,
.actions button:hover,
.actions input:hover,
.actions a:focus,
.actions button:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus {
background: linear-gradient(to right, #810404 0%, #000000 10%, #BA0000 15%, #000000 25%, #FF0000 50%, #000000 60%, #BA0000 80%, #000000 90%, #810404 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
border: 1px solid #ff0000;
box-shadow: 2px 2px 2px #ffa500;
}
And this is all you need to have the site appear with gradient text, at least based on my personal experience.
Also, just by changing the font family in the font-family line, you can have fun with using custom fonts downloaded from the net in your site skin, like the cute and elegant Autumn Flowers (you can find it here), the creepy Them People (you can find it here) or the cowboy style Gashroad (you can find it here). All you need to do is to write the line like this, where xxx is the full name of the custom font:
font-family: 'xxx', personal;
So, for example, for the Autumn Flowers font, it will be font-family: 'Autumn Flowers', personal;
I added two complete gradient text siteskins in the second and third chapter of this work. Each siteskin has a different combination of gradients, also the siteskin in the second chapter has the same gradient for all the levels of the dashboard, while the siteskin in the third chapter uses different gradients for each level of the dashboard.
I hope this will be of help to you all, fellow users, have a great day! ^-^