#tag fieldset

[pekasairroc]

Turning the Stars Debate for SSTS into my page a day is the only way that would ever get done. I have 82 passages left out of 600 for this section (started in 2019 and floundered). Then programming it. Then adding in the pre-debate stuff. Then adding the post-debate. Then adding in the T5s. Then play testing and debug. Then fixing the audio. Then making it screen-reader accessible. Then it’s done.

And then onto Twin Meteorites.

[danny-chai]

ao3 skin that i made!! (copy code under "keep reading")

it's a messy combination of pieces of code from other people's skins and my own changes

the header image is NOT MINE! it is "Pattern Galaxy Space Planets Vibrant Linear Universe" by Arncil on Redbubble, which i just used as an example for an image you could use!

here are some of the skins that i can remember using as part of this, but i've been building it for years so forgive me if i forget some:

Shortening long tag fields by Xparrot (on ao3)

Slim Shaded by AO3 (on ao3)

Lily Garden by tealtiam (on Tumblr)

AO3 Tag category coloring! by ao3css (on Tumblr)

come back here to my tips or leave a comment if you need some help customizing the code!

Background color: #26303C

Text color: #CBC6C3

Header color: #46626D

Accent color: #993F33

steps to create a new skin using this code:

log into ao3 account

go to dashboard >> skins

click "create site skin"

make sure TYPE is "site skin"

add a unique title

copy all code below

paste into field 'CSS'

click on "use wizard" at the top

copy and paste the four colors written above into their corresponding boxes

click SUBMIT

click USE

how to customize this skin:

FONT SIZE: at the very top of the code, change the "90%" to be bigger or smaller to change the font size within a fic

MAIN COLORS: to change the main colors, select "use wizard" when editing the skin and replace any of the four hex codes under "Background color:", "Text color:", "Header color:", and "Accent color:"

SECONDARY COLORS: find all hex codes within the code and change those numbers as you like! i changed all colors to match with the color palette of the header photo that i chose to make it feel cohesive

TAG COLORS: towards the end, the "relationship", "character", and "freeform" tags alternate three colors to make them easy to separate. in this skin they are all very similar, so you can change those to be whatever colors you like!

HEADER PHOTO: find the link towards the end of the code right before the warning tags and replace it with a link to any photo you like! it loops, so you don't have to worry about sizing or anything

FONT: i'm unsure how exactly to do this, but the in-fic font is currently set to Georgia Serif, so i suppose just go find that and replace it with your preferred font!

BORDER STYLES: wherever you see the code "border-style:", replace the word that comes after it with one of these options: none, solid, dashed, dotted, double, groove, ridge, inset, outset, or hidden

WARNING TAGS: at the very end of the code is a list of words or phrases that, when they appear in the tags of a fic, are highlighted in a contrasting color so that they are easy to avoid if necessary. you can add or remove those tags however you like, or change the warning color!

COPY AND PASTE ALL CODE BELOW

#workskin { font-size: 90%; } li.blurb .tags { max-height: 7.5em; overflow-y: auto; } #header { min-height: 0; } #header a, #header fieldset, #header ul.primary, #header ul.primary .current { border: 0; background: 0; } h1 a img { height: 50px; border: 0; } #header .landmark { clear: none; } #header ul.primary { background: rgba(0,0,0,0.65); border-bottom: 1px solid rgba(0,0,0,0.75); } #header ul.primary, #header ul.primary .current, ul.primary.actions a, #header ul.primary .current { color: #CBC6C3; } #header ul.primary .current, #header #search input, #header #search input:focus { background: rgba(0,0,0,0.25); color: #CBC6C3; box-shadow: inset 0 0 3px #131A2A; border-color: #131A2A; } .actions, .actions input { text-transform: lowercase; } blockquote.userstuff { font-family: "Mido", "AUdimat", "Ostrich Sans Rounded","Lucida Grande", sans-serif !important; position: relative; background: rgba(0,0,0,0.1); padding: 2%; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 0 2px rgba(0,0,0,0.4); } blockquote.userstuff:after { content: "\201D"; right: 0; top: auto; left: auto; } body, .userstuff { font-family: Mido, Georgia, serif; } .heading, .userstuff h3, .userstuff h4 { font-family: "CabinSketch", Georgia,serif; } #main .heading { color: #CBC6C3; } #inner .group, #inner .heading, fieldset, .verbose legend, table, table th, col.name, span.unread, span.replied { outline: none; background: transparent; border-color: #131A2A; border-style: double; box-shadow: none; border-radius: 2em; border-bottom-right-radius: 0; border-top-left-radius: 0; } #inner .group .group .group, col.name { border-style: double; border-color: #CBC6C3; box-shadow: 0 0 2px #000; } #inner .bookmark .user.module, #inner .wrapper { border: 0; border-radius: 0; border-top: 3px double #bbb; box-shadow: none; } .filters { font-size: 90%; } .toggled form, .dynamic form, .secondary, .dropdown { background: #fff url("/images/skins/textures/tiles/white-handmade-paper.jpg"); } a.tag, a.tag:visited, a.tag:link { display: inline-block; padding: 1px 3px; margin: 2px 0px; border: 2px solid #46626D; border-radius: 5px; } .commas li:after { content: ""; } h5.fandoms.heading { color: transparent; } .favorite a.tag { border: none; } .tags li.relationships:nth-of-type(3n+1) a.tag { background-color: #1d3954; } .tags li.relationships:nth-of-type(3n+2) a.tag { background-color: #264663; } .tags li.relationships:nth-of-type(3n+3) a.tag { background-color: #305475; } .tags li.characters:nth-of-type(3n+1) a.tag { background-color: #214154; } .tags li.characters:nth-of-type(3n+2) a.tag { background-color: #294c61; } .tags li.characters:nth-of-type(3n+3) a.tag { background-color: #31576e; } .tags li.freeforms:nth-of-type(3n+1) a.tag { background-color: #234e54; } .tags li.freeforms:nth-of-type(3n+2) a.tag { background-color: #2a585e; } .tags li.freeforms:nth-of-type(3n+3) a.tag { background-color: #316269; } .tags li.freeforms a.tag:hover, .tags li.characters a.tag:hover, .tags li.relationships a.tag:hover { background-color: #26303C; color: white; } #header .logo { display: none; } #header ul.primary { box-shadow: none; padding-top: 30px; padding-bottom: 30px; background: #FCC191 url(https://i.pinimg.com/564x/8c/bc/ae/8cbcae1760dc88ae8730566337a5d2eb.jpg); background-attachment: fixed; } li.blurb a.tag[href*="suicid"], [href*="suicide"], [href*="Suicide"], [href*="rape"], [href*="Rape"], [href*="consentual"], [href*="Consentual"], [href*="non-con"], [href*="consent issues"], [href*="Kidnapping"], [href*="kidnapping"], [href*="Canibalism"], [href*="cannibalism"], [href*="Cannibalism"], [href*="Dove"], [href*="dead dove do not eat"], [href*="murder"], [href*="Murder"], [href*="harm"], [href*="self harm"], [href*="Harm"], [href*="Torture"], [href*="abduction"], [href*="asphyxiation"], [href*="blood"], [href*="Blood"], [href*="death"], [href*="Death"], [href*="gore"], [href*="Gore"], [href*="incest"], [href*="Incest"], [href*="trauma"], [href*="Trauma"], [href*="torture"] { color: #000000; font-weight: bold; background-color: #993F33; }

[achillesuwu]

So I modified the last anniversary skin (here is the code of said anniversary skin btw) to make it darker and change the color of the text to make it softer for my eyes so I thought I would share ! (Code below + don’t worry if you don’t know anything I explain it and feel free to ask any questions you may have)

Side by side comparison of the original and mine (I already use a blue light filter on my phone but if you want the text to be as soft as the tag you just need to go in the code below, change: #FFF8DC in #FAE5BA

The color I used are as follows : FFF8DC, FAE5BA, #eee, 800000, 2a2a2a, 191919, DEB887, 000000 (I believe it’s all of them) so if like me you can’t code for shit you just need to find what these number’s color mean and change them with any other you want

Side by side comparison with reversi/the dark mode of ao3 and mine (if you want reversi you just need to scroll down at the very bottom of any page and click on it or go preferences > skin > Public Site Skins > search for reversi and click on use)

Code (don’t know how to use it ? Go in the rb I will explain it with pictures)

#footer .group,

.post fieldset fieldset,

fieldset fieldset {

background: none;

}

#header {

background: #000 url('https://media.archiveofourown.org/news/milestones/2024-08-seventeen-years-otw/2024-08-seventeen-years-otw-pattern.jpg');

background-size: 350px;

}

#header .heading a,

#header .primary .dropdown a:focus,

#header .heading a:visited,

#main .pagination .current,

h2 {

color: #ffe8b4;

}

#header .clear,

#footer {

border-color: #000000;

}

#header .actions a[href="/menu/fandoms"],

#header .actions a[href="/menu/browse"],

#header .actions a[href="/menu/search"],

#header .actions a[href="/menu/about"] {

color: #FFE4B5;

}

#footer ul {

background: url('https://live.staticflickr.com/7284/9616997915_4194b6c6f7_h.jpg');

background-size: 350px;

}

#footer ul li:nth-child(1) ul,

#footer ul li:nth-child(2) ul,

#footer ul li:nth-child(3) ul,

#footer ul li:nth-child(4) ul {

background: rgba(0, 0, 0, 0.0);

}

#header .primary {

background: #8a1a10;

}

#footer {

background: #8a1a10;

}

input[type="text"],

textarea,

select {

background: #191919;

color: #FFE4B5;

}

select:focus {

background: #2a2a2a;

}

option {

background: #191919;

color: #FFE4B5;

}

#work form fieldset.work.meta dl dd.warning.required fieldset,

#main form fieldset.work.meta dl dd.warning.required fieldset {

color: #FFE4B5;

}

#bookmark-form form {

background: #2a2a2a;

color: #FFE4B5;

}

#error {

color: #000000;

}

fieldset,

.verbose fieldset {

border-color: #404040;

background: #000000;

border: 1px solid #595959;

}

.search [role=tooltip] {

background: #333;

border: 1px solid #666;

}

#main a:visited {

color: #DEB887;

}

#main a.tag:visited:hover {

color: #111;

}

body,

.group,

.group .group,

.region,

.flash,

form dl,

#main .verbose legend,

.notice,

ul.notes,

table,

th,

td:hover,

tr:hover,

.symbol .question:hover,

#modal,

.ui-sortable li,

.required .autocomplete,

.autocomplete .notice,

.system .intro,

.comment_error,

.kudos_error,

div.dynamic,

.dynamic form,

#ui-datepicker-div,

.ui-datepicker table {

background: #000000;

color: #FFF8DC;

border-color: #800000;

outline: #111;

box-shadow: none;

}

#header .actions a:hover,

#header .actions a:focus,

#header .dropdown:hover a,

#header .open a,

#header .menu,

#small_login,

.group.listbox,

fieldset fieldset.listbox,

.listbox,

form blockquote.userstuff,

input:focus,

textarea:focus,

li.relationships a,

.group.listbox .index,

.dashboard fieldset fieldset.listbox .index,

#dashboard a:hover,

th,

#dashboard .secondary,

.secondary,

.thread .even,

.system .tweet_list li,

.ui-datepicker tr:hover {

background: #191919;

}

a,

a.tag,

a:link,

#header a:visited,

#header .primary .open a,

#header .primary .dropdown:hover a,

#header #search input:focus,

#header #search input:hover,

.userstuff h2,

#dashboard a,

#dashboard span,

#dashboard .current,

.group .heading,

.filters dt a:hover {

color: #FFE4B5;

}

#header .dropdown .menu a:hover,

#header .dropdown .menu a:focus,

.splash .favorite li:nth-of-type(odd) a,

.ui-datepicker td:hover,

#tos_prompt .heading,

#tos_prompt [disabled] {

background: #111;

color: #ffe8b4;

}

#outer,

.javascript,

.statistics .index li:nth-of-type(even),

#tos_prompt,

.announcement input[type="submit"] {

background: #000000;

}

#dashboard ul,

dl.meta,

.group.listbox,

fieldset fieldset.listbox,

#main li.blurb,

form blockquote.userstuff,

div.comment,

li.comment,

.toggled form,

form dl dt,

form.single fieldset,

#inner .module .heading,

.bookmark .status span,

.splash .news li,

.filters .group dt.bookmarker {

border-color: #2a2a2a;

}

.group.listbox,

fieldset fieldset.listbox,

#main li.blurb,

.wrapper,

#dashboard .secondary,

.secondary,

form blockquote.userstuff,

.thread .comment,

.toggled form {

box-shadow: 1px 1px 3px #000;

}

#dashboard .current,

.actions a:active,

a.current,

.current a:visited,

span.unread,

.replied,

span.claimed,

dl.index dd,

.own,

.draft,

.draft .unread,

.child,

.unwrangled,

.unreviewed,

.ui-sortable li:hover {

background: #000;

border-color: #191919;

box-shadow: -1px -1px 3px #000;

}

input,

textarea {

box-shadow: inset 0 1px 2px #000;

}

li.blurb,

.blurb .blurb,

.listbox .index,

fieldset fieldset.listbox,

.dashboard .listbox .index {

box-shadow: inset 1px 1px 3px #000;

}

#footer a:hover,

#footer a:focus,

.autocomplete .dropdown ul li:hover,

.autocomplete .dropdown li.selected,

a.tag:hover,

.listbox .heading a.tag:visited:hover,

.symbol .question {

background: #ffedc5;

border-color: #988352;

color: #111;

}

#header #greeting img,

#header .user a:hover,

#header .user a:focus,

#header fieldset,

#header form,

#header p,

#dashboard a:hover,

.actions a:hover,

.actions input:hover,

.delete a,

span.delete,

span.unread,

.replied,

span.claimed,

.draggable,

.droppable,

span.requested,

a.work,

.blurb h4 a:link,

.blurb h4 img,

.splash .module h3,

.splash .browse li a:before,

.required,

.error,

.comment_error,

.kudos_error,

a.cloud7,

a.cloud8,

#tos_prompt .heading {

color: #ffe8b4;

}

#greeting .icon,

#dashboard,

#dashboard.own,

.error,

.comment_error,

.kudos_error,

.LV_invalid,

.LV_invalid_field,

input.LV_invalid_field:hover,

input.LV_invalid_field:active,

textarea.LV_invalid_field:hover,

textarea.LV_invalid_field:active,

.qtip-content {

border-color: #8a1a10;

}

.splash .favorite li:nth-of-type(odd) a:hover,

.splash .favorite li:nth-of-type(odd) a:focus .splash .favorite li:nth-of-type(odd) a:visited:hover,

.splash .favorite li:nth-of-type(odd) a:visited:focus {

background: #ffe8b4;

color: #111;

}

a:visited,

.actions a:visited,

.action a:link,

.action a:visited,

.listbox .heading a:visited,

span.series .divider {

color: #BC8F8F;

}

.actions a,

.actions a:link,

.action,

.action:link,

.actions input,

input[type="submit"],

button,

.current,

.actions label,

#header .actions a,

#outer .current {

background: #191919;

border-color: #222;

color: #eee;

box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #191919;

text-shadow: none;

}

.actions a:hover,

.actions input:hover,

#dashboard a:hover,

.actions a:focus,

.actions input:focus,

#dashboard a:focus,

.actions .disabled select {

color: #999;

border-color: #000;

box-shadow: inset 2px 2px 2px #000;

}

.actions a:active,

.current,

a.current,

.current a:visited {

color: #FFE4B5;

background: #191919;

border-color: #FFE4B5;

box-shadow: inset 1px 1px 3px #000000;

}

.delete a,

span.delete {

box-shadow: -1px -1px 2px rgba(255,255,255.25);

}

.actions label.disabled {

background: #222;

box-shadow: none;

}

ul.required-tags,

.bookmark .status span,

.blurb .icon {

opacity: 0.9;

border: 0;

}

#outer .group .heading,

#header .actions a,

fieldset.listbox .heading,

.userstuff .heading {

text-shadow: none;

color: #FFE4B5;

background: none;

}

#header .actions a,

fieldset fieldset,

.mce-container button,

.filters .expander,

.actions .disabled select {

box-shadow: none;

}

fieldset fieldset.listbox {

outline: none;

}

form dd.required {

color: #eee;

}

.mce-container input:focus {

background: #F3EFEC;

}

.announcement .userstuff a,

.announcement .userstuff a:link,

.announcement .userstuff a:visited:hover {

color: #111;

} #footer .group,

.announcement .userstuff a:visited {

color: #666;

}

.announcement .userstuff a:hover,

.announcement .userstuff a:focus {

color: #999;

}

.event.announcement .userstuff a,

.filters .expander {

color: #eee;

}

[writtenbylex]

Sorry y’all my mom’s healths been bad this year!! Here’s that ao3 skin

I’ve never shared one before so please comment how it works! I can make you ones too- with special requests

CSS

#outer {

background-image: url("https://i.ibb.co/QDXwWNL/Butterfly-BG.png");

}

img.logo {

padding: 10px 70px 0px 0px;

background: url(https://i.pinimg.com/736x/8f/d0/8c/8fd08c806ed588386da54da72d7b6776.jpg);

background-size: 70px;

background-repeat: no-repeat;

width: 0px;

height: 0px;

}

#header,

#dashboard,

#main,

#footer .module {

background: #f4effc;

margin: 0.5em 2.5em;

padding: 1em;

}

#inner .region {

padding: 1.5em;

}

#header,

#dashboard,

#main,

#inner .group,

#footer .module,

fieldset,

.flash {

border: 4px solid #d9bfd9;

outline: 0;

border-radius: 2em;

box-shadow: 0 -10px 0 #b680c2, 0 10px #b680c2,-6px 0 0 #751b87,6px 0 0 #751b87, inset 0 0 5px;

margin-bottom: 2em;

}

.blurb .module,

#inner .group .group .group,

fieldset fieldset {

border: 0;

box-shadow: none;

}

.group .header,

.blurb ul.tags,

.blurb blockquote,

#outer .current {

background: #ddd;

border: 3px solid #fff;

border-radius: 1.5em;

padding: 0.5em;

}

.group .header {

width: 96%;

}

#footer {

background: none;

border: none;

}

#header h1 {

top: 0.5em;

left: 0.5em;

}

#header #greeting {

right: 2em;

}

#header h1 img {

opacity: 0.75;

}

#header li.search {

float: none;

display: block;

margin-top: 0.643em;

}

#header li.search input {

border: none;

}

#header ul.primary a,

#header ul.primary .menu a,

#header .dropdown .menu a:hover,

#header .dropdown .menu a:focus {

background: #ddd;

}

#dashboard {

width: 20%;

}

#main.dashboard {

margin: auto 1.5em;

position: relative;

clear: none;

float: right;

width: 60%;

}

#outer #footer .heading,

#outer #footer .actions a,

#header ul.primary a {

color: #751b87;

}

.blurb ul.required-tags li span,

.bookmark .status span,

.actions a,

.actions a:visited,

.action,

.actions input,

input[type="submit"],

button,

.current,

.actions label,

legend,

textarea,

input,

#header ul.primary a,

.icon {

border: 1px solid #ddd;

border-radius: 1.5em;

box-shadow: 0 0 2px #555;

}

.icon {

border-radius: 5em;

}

#main .index,

#header ul.primary,

#header ul.primary .menu {

box-shadow: none;

border: none;

background: transparent;

}

#header .primary .menu li {

border-bottom: none;

}

And then here’s a little more info to get it perfect

Text color:#751b87 Header color:#751b87 Accent color:#eecbf5

[thegrayascendancy-if]

Hello, wanted to say I read and loved the demo. Very well done. I just had a few questions, would love to know what Twine Template you use, especially at the beginning. Where you have the character creator, I love that the box around your selection changes to say/match what you chose. Such as depending on what skin color I choose it changes to signify that. Would love to know if you would share how you did that. I look forward to future updates! Best of luck.

Thank you! 🤍

I'm using the default template for SugarCube, if I remember correctly. Glad that you liked the box effect, it was my solution to reducing the number of passages whilst still allowing the validation of user input in character creation.

I did it through a combination of HTML tags and SugarCube native macros. Technical stuff under the cut:

Here is an example for eye color:

<fieldset class="charbox"><legend id="chareyes" class="chartxt">$p.appearance.eyes</legend> <div class="charoptions">Your eyes are: <<link "hazel">><<set $p.appearance.eyes to "hazel">><<replace "#chareyes">>$p.appearance.eyes<</replace>><</link>> <<link "brown">><<set $p.appearance.eyes to "brown">><<replace "#chareyes">>$p.appearance.eyes<</replace>><</link>> [rest of the options removed for brevity]</div> </fieldset>

The fieldset and the legend HTML tags together form a single box, a so-called legend, which I declare per attribute such as name, skin color, etc. You need a fieldset to make legend work iirc, but legend is where that text is displayed and it is positioned on the box frame by default. Important here is to give a unique ID to the legend tag ("chareyes" in this case), as we are interested in manipulating the text shown in it depending on our box.

In the sample above, the options I present for the eye color are listed within the Twine <<link>> tags. For these links there is no target passage to go to. Instead, you can see it is coded to do two things upon clicking the respective option. One, setting a game variable to the selected color.

<<set $p.appearance.eyes to "brown">>

Two, triggering a replace command to change the value shown in the legend to the description of the selected eye color according to the variable we have set in the same line. This is the bit you are asking about:

<<replace "#chareyes">>$p.appearance.eyes<</replace>>

Replace triggers without changing passages, so this way you can adjust multiple variables on a single "page". You'd obviously need to adjust the corresponding CSS classes to make it look the desired way, but the mechanics are serviced with just this idea above.

Hope this helps!

[your-average-art-dealer]

Macaque Site Skin Thing (yippee!)

────────────────────────────────────────────

Notes:

The CSS is mostly mishmashed from other codes and therefore is not perfect, there a places where the site retains its white accents or boxes and can be quite jarring when scrolling in a dark purple background to then suddenly be met with splashes of bright white

I personally wouldn't read works with this, it's mostly for the aesthetic and was not made with comfortable reading in mind (oof)

Wizard Settings/Code Stuff is REQUIRED alongside the CSS because without it the skin looks... kind awful.

────────────────────────────────────────────

CSS:

p.kudos { background: url("https://i.imgur.com/JmZWnGX.png"); background-repeat: no-repeat; }

.listbox, fieldset, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, .dynamic form { background: url("https://i.imgur.com/xoHN0lj.jpeg"); background-repeat: repeat; border: 4px solid #fff; box-shadow: none; }

header h1.heading a::before {

content: url("https://i.imgur.com/9NaliS0.png"); visibility: visible; }

search .button,

header .logo {

display: none; }

header .heading a,

greeting img.icon {

visibility: hidden; }

outer {

background: linear-gradient(90deg, rgba(24, 12, 41,.9) 0%, rgba(16, 7, 28,1) 100%); }

header h1 sup,

header .button,

header .landmark,

header .logo {

display: none; }

inner.wrapper {

margin: 0em 4%; }

header .heading {

height: 20em; }

header {

background-color: #ffffff; background-image: url("https://i.imgur.com/1jqr3CI.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; border-bottom: 2px solid #fff; }

header .heading a {

color: #fff; padding-left: 0em; }

header .primary {

background: none; box-shadow: none; }

greeting {

background: none; margin-right: 0em; position: absolute; right: 0em; top: 0em; }

header .primary li:not(.search),

header .primary li a,

greeting li,

greeting li a {

color: #FFF !important; background: #850900; border-top-left-radius: 2%; }

header .primary li:not(.search),

greeting li {

border: 1px solid #372457; }

.warnings .tag, .work .warning a.tag { background: #06000f; border: 1px solid #06000f; border-radius: 5px; color: #dbc2ed !important; padding-left: .5em; padding-right: .5em; }

.relationships .tag, .work .relationships a.tag { background: #0b0121; border: 1px solid #0b0121; border-radius: 5px; color: #dbc2ed !important; font-weight: bold; padding-left: .5em; padding-right: .5em; }

.characters .tag, .work .characters a.tag { background: #220c4a; border: 1px solid #220c4a; border-radius: 5px; color: #dbc2ed !important; font-weight: bold; padding-left: .5em; padding-right: .5em; }

────────────────────────────────────────────

Wizard Stuff:

────────────────────────────────────────────

[cosmosbuilder]

Hi!! Newbie to making Ao3 skins here. Do you know how I can change the text color? I changed my background, and now the default black text shows up a bit funny and I'd like a different color that won't be so bad on the eyes but I don't know how to do that in CCS or Wizard. Thanks!

if you just want to make all the text the same color than use the wizard! you can find text color under the color section (make sure you use a hashtag before the hex or else it won't work) but if you want to make the text different colors than use this code:

.userstuff p { color: #FF0000; outline: none; font-size: medium; }

body, th, col.name, form blockquote.userstuff, input:focus, input, select:focus, select, textarea:focus, textarea, .autocomplete div.dropdown ul,

ui-datepicker-div,

ibox_wrapper,

ibox_content,

.toggled form, .dynamic form, .secondary, .listbox .index, .dashboard .listbox .index, .nomination dt { color: #FF5300; }

header .user a,

header .user a:visited {

margin: 2px; color: #FFA500 !important; }

header .menu,

header .menu li a:link,

header .menu li a:visited {

color: #FFD200 !important; }

.heading a, .userstuff, .heading,

heading h3,

.splash .module h3 { color: #FFFF00; }

.actions a, .action, .actions input, input[type="submit"], button, .current, .actions label, a.cloud4, a.cloud5 .actions a, .actions a:link, .actions a:visited, .current, a.current, .current a:visited, .current a:link { color: #80C000; }

body,

main.error,

main.slow,

main.maintenance,

.required .autocomplete, .autocomplete .notice, .post .required .warnings, .listbox .heading, .listbox .heading a:visited, .userstuff h2, .userstuff caption, .userstuff table, .userstuff td, .userstuff col, .userstuff tr, .userstuff thead, .userstuff tfoot, .userstuff tbody, .userstuff th, .userstuff thead td, .userstuff th a, .userstuff th a:link, a.cloud3 { color: #008000; }

.actions a, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, span.unread, .replied, span.claimed, kudos a:hover { color: #004080; }

header #greeting img,

header .heading a,

header fieldset,

header form,

header p,

header .user a:focus,

header .user .current,

.delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .system .latest h3, .system div.news h3, .system .tweets h3, .required, .error, a.cloud7, a.cloud8 { color: #0000FF; }

span.symbol { color: #2600C1; }

a, a:link,

dashboard a,

dashboard span,

a.tag, .tags a { border-bottom: none; color: #4B0082; }

the hex codes included are: #FF0000 #FF5300 #FFA500 #FFD200 #FFFF00 #80C000 #008000 #004080 #0000FF #2600C1 #4B0082

they're in the order they appear, hope this helps!

[ao3css]

How do I make a tag/title/author or any link I click on remain the same color as if I haven't clicked on it? My OCD is going crazy over this, thank you in advance :DD

Btw: I'm using this skin, love it so much as someone who is light sensitive :))

hello! I found that removing all instances of the :visited css selector in your skin to work for this! edited skin below

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset {  background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table {  background: #131517;  color: #eee;  border-color: #131517;  outline: #111;  box-shadow: none; }

form .notice, form ul.notes {  box-shadow: none; }

#workskin {  font-size: 1.2em;  margin: auto;  padding: 0 0.25em;  max-width: 60em;  overflow-x: auto;  overflow-y: hidden;  position: relative; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label {  border-radius: 0; }

#header ul.primary, #outer #footer, .toggled form {  background: #131517; }

#header .primary {  background: none;  padding: 10px 0;  width: 100%;  box-shadow: none; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff {  background: #1a1c1e !important; }

.user.navigation.actions>li {    margin-top: 0.3em!important; }

#header .menu, #small_login {    border:1px solid #1f2126;    box-shadow: none;    padding: 0 }

.tags.group, .more.group {    margin-top: 0.6em; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover {  background: #131517; }

.userstuff p {  text-align: justify;  margin: 1.286em auto;  padding: 0;  line-height: 1.5; }

.tags.commas {  margin: 1.5em auto; }

.tweets {  display: none; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] {  background: #22262a; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] {  background: #131517; }

.filters .submit input {  border: 1px solid #131517;  background-color: #131517;  height: 110%;  margin: 1em 0;  min-height: 2.286em;  padding-left: 0;  padding-right: 0;  text-align: center;  white-space: normal; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker {  border-color: #1a1c1e;  background: #1a1c1e; }

.news, .readings {  display: none; }

.work.navigation.actions {    width: 100%; }

dl.meta {  border: none; }

.splash .news li {  padding: 1em; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff {  padding: 1.643em; }

li.blurb, fieldset, form dl {  border: none; }

li.blurb, .blurb .blurb {  display: block;  position: relative;  clear: left;  padding: 1em 1.4em;  overflow: visible; }

.logged-in .splash>.module {  width: 100% !important; }

dl.meta {  max-width: 75em;  margin: auto;  clear: right;  padding: 2em 1.75em;  position: relative;  overflow: hidden; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form {  box-shadow: none; }

#dashboard .current, .actions a:active, span.unread, .replied, span.claimed,  dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover {  background: #131517;  border-color: #1f2126; }

#greeting .menu {  right: 0;  border: 1px solid #1f2126;  box-shadow: none; }

select {  background-color: #131517;  color: #fff;  border: 1px solid #131517;  min-height: 2.4em;  border-radius: 0; }

input:focus, select:focus, textarea:focus {    background: #131517; }

input, textarea {  min-height: 1.8em;  box-shadow: none; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .symbol .question, .qtip-content {  background: #a7a7a7;  color: #111; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus {  background: #a7a7a7;  color: #111; }

#header #greeting img, #header .heading a, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading {  color: #a7a7a7; }

#header .menu li {  border-bottom: 1px solid #2c2c2c;  margin: 0;  text-align: left; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content {  border-color: #131517; }

#dashboard.own {  border: none; }

form.filters dl {  margin-left: 0;  margin-right: 0; }

.filters .expander:focus {  outline: none; }

.filters .expander {  padding: 0.45em 0 0.45em 14px; }

.filters .group dt.search, .filters .range dt {  padding: 1.25em 0 0.4em 0; }

a.tag {  border-bottom: 1px dotted !important; }

a, a:link, a.tag, #header a, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a,  #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover {  color: #fff; }

#header .dropdown .menu a {  padding: .75em .5em .75em; }

#header #search .text {  background: #131517 !important;  border-radius: 0;  margin: 0.2857em 0.429em; }

.action a:link, span.series .divider {  color: #999; }

a:active, a:focus, button:focus {  outline: none; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a {  background: #1a1c1e;  border-color: #1a1c1e;  color: #eee;  box-shadow: none;  text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus {  color: #fff;  border-color: #101214;  box-shadow: none;  background-color: #101214; }

.actions a:active, .current, a.current {  color: #fff;  background: #101214;  border-color: #101214;  box-shadow: none; }

.delete a, span.delete {  box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon {  opacity: 0.9;  border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 {  text-shadow: none;  color: #fff;  background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander {  box-shadow: none; }

fieldset fieldset.listbox {  outline: none; }

form dd.required {  color: #eee; }

.mce-container input:focus {  background: #F3EFEC; }

.announcement .userstuff a, .announcement .userstuff a:link {  color: #fff; }

a, a:link {  color: #fff;  text-decoration: none; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus {  color: #999; }

.event.announcement .userstuff a, .filters .expander {  color: #eee; }

[zerafinacss]

Beautiful! Amazing! One of the best ideas for a skin I've ever seen!

I've made a few adjustments, mainly to change the tags. The biggest one is changing the tag colors inside of works so that they match the blurb tags and are more readable on mobile.

Before and after:

Here is the code I added/changed:

I replaced the following part of the code:

a.tag, a.tag:visited, a.tag:link { display: inline-block; padding: 2px 5px; margin: 2px 0px; border-radius: 5px; } .commas li:after { content: ""; } .warnings .tag { background: #ab3740; color: #f3f0e5 !important; border: 1px solid #ab3740; } .warnings .tag:hover { background: #f3f0e5 !important; color: #ab3740 !important; border: 1px solid #ab3740; } ul.tags li.warnings:first-child:before { content: "🔶🔷🔶 "; } .relationships .tag { background: #366c89; color: #f3f0e5 !important; border: 1px solid #366c89; } .relationships .tag:hover { background: #f3f0e5 !important; color: #366c89 !important; border: 1px solid #366c89; } .characters .tag { background: #ef984d; color: #f9f7f2 !important; border: 1px solid #ef984d; } .characters .tag:hover { background: #f3f0e5 !important; color: #cb7040 !important; border: 1px solid #cb7040; } .freeforms .tag { background: #226a64; color: #f3f0e5 !important; border: 1px solid #226a64; } .freeforms .tag:hover { background: #f3f0e5 !important; color: #226a64 !important; border: 1px solid #226a64; }

With this:

a.tag:not(.heading a.tag) /* exclude heading tags */ { display: inline-block; padding: 1px 5px; margin: 3px 0px; border-radius: 5px; } .commas li:after { content: ""; } /* use attribute selectors for tags so that tags in other places like inside works also change colors */ [class^=rating] a.tag { background: #574599; color: #f3f0e5; border: 1.5px solid #574599; } [class^=rating] a.tag:hover { background: #f3f0e5; color: #574599; /* border is not needed here because it's the same as without hover */ } [class^=warning] a.tag { background: #ab3740; color: #f3f0e5; border: 1.5px solid #ab3740; } [class^=warning] a.tag:hover { background: #f3f0e5; color: #ab3740; } ul.tags li.warnings:first-child:before { content: "🔶🔷🔶 "; } [class^=category] a.tag { background: #438164; color: #f3f0e5; border: 1.5px solid #438164; } [class^=category] a.tag:hover { background: #f3f0e5; color: #438164; } .work .fandom a.tag { /* no attribute selector here because I only want to change the fandom tags inside of works */ background: #cd6847; color: #f3f0e5; border: 1.5px solid #cd6847; } .work .fandom a.tag:hover { background: #f3f0e5; color: #cd6847; } [class^=relationship] a.tag { background: #366c89; color: #f3f0e5; border: 1.5px solid #366c89; } [class^=relationship] a.tag:hover { background: #f3f0e5; color: #366c89; } [class^=character] a.tag { background: #ef984d; color: #f9f7f2; border: 1.5px solid #ef984d; } [class^=character] a.tag:hover { background: #f3f0e5; color: #cb7040; } [class^=freeform] a.tag { background: #226a64; color: #f3f0e5; border: 1.5px solid #226a64; } [class^=freeform] a.tag:hover { background: #f3f0e5; color: #226a64; }

I also changed the border colors in a few places to make them match the skin by adding this code:

hr, .userstuff hr, blockquote, .userstuff blockquote, .listbox, fieldset fieldset.listbox, .splash .module h3, .bookmark .user, dl.meta { border-color: #d6caa5; }

Work in Progress Wednesday Thursday

I don't remember the last time I was quite this excited about a skin that I'm making. I have no idea if all of this will end up in the final version, but I'm just having so much fun with seeing what I can actually do that I wanted to share some work in progress shots.

(honestly? the hardest part has been finding the images. any tips on where to get medieval illuminated artwork would be much appreciated!)

In the first image, the AO3 title and the lady/dragon are separate images so on a desktop monitor the AO3 part is on the left and the dragon piece is on the right.

[flowering-midnight]

dl.meta { border: 2px solid #252542 !important; border-radius: 0.75em !important; margin-left: 10px; padding: 20px !important; box-sizing: border-box; }

::selection { background-color: #e49494; color: #252542; }

main {

background: #1A1A2E; }

body { font-size: 11pt; }

workskin img {

border-radius: 1rem; }

worskin p {

font-size: 12pt; }

a.tag:hover, .listbox .heading a.tag:visited:hover { background: transparent; }

header h1.heading span {

display: none; }

header .heading sup {

visibility: hidden; }

header h1.heading a::before {

font-family: "Lucida Handwriting", cursive; margin-left: 1em; font-weight: bold; content: "⊹˚. ♡.ð–¥” Ý Ë–"; }

.menu.dropdown-menu { border: 2px solid #252542 !important; border-radius: 0.75em !important; padding: 8px !important; box-sizing: border-box; }

header .menu li {

border-bottom: 0px; }

li.comment, .thread .even { border-radius: .75em; border: 1px solid #e49494; padding: 10px; background: #1A1A2Eba; }

li.comment, .thread .odd { border-radius: .75em; border: 1px solid #e49494; padding: 10px; background: #1A1A2Eba; }

li.comment { border-radius: .75em; border: 1px solid #e49494; padding: 10px; background: #1A1A2Eba; }

.btn:hover, input[type="submit"]:hover, .actions li input[type="submit"]:hover, .actions .current:hover { color: #B4C8CE !important; background: #252542 !important; }

.actions a:hover, .actions li .current a:hover { color: #1A1A2E !important; }

.splash .favorite li:nth-of-type(2n+1) a { background: #1A1A2E; }

.splash .favorite li:nth-of-type(2n+1) a { background: #252542; }

.splash .favorite li:nth-of-type(2n+1) a:hover { color: #1A1A2E !important; background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%); }

body { background: #252542 !important; color: #B4C8CE !important; }

a { transition: 0.2s ease-in-out !important; }

body, th, tr:hover, col.name, form blockquote.userstuff, input:focus, input, select:focus, select, textarea:focus, textarea, .autocomplete div.dropdown ul,

ui-datepicker-div,

ibox_wrapper,

ibox_content,

.toggled form, .dynamic form, .secondary, .listbox .index, .dashboard .listbox .index, .nomination dt { background: #1A1A2E; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif !important; color: #B4C8CE; }

outer.wrapper {

background-color: #1A1A2E !important; }

.bookmark .count a { color: #1A1A2E !important; }

.comment_notice, ul.notes, .caution, .error, .comment_error, .alert.flash { color: #B4C8CE; background-color: #ce4c4c; border: none; box-shadow: none; margin-top: 10px !important; }

header .search input[type="text"],

header .search input[type="text"]:focus {

color: #B4C8CE !important; }

header .logo {

display: none; }

.home .header h2 { border-bottom: 0px; }

.subscription dd { background-color: transparent !important; }

dashboard .actions a,

dashboard .actions a:visited {

color: #B4C8CE !important; }

.blurb ul.required-tags { background: #252542 !important; }

.filters dl { background: transparent; }

dashboard .actions .current {

color: #B4C8CE !important; background: #1A1A2E; }

.announcement .userstuff h2 { margin-top: 10px; color: #1A1A2E; }

fieldset fieldset, fieldset dl dl, .fieldset, fieldset { border-radius: 0.75em; background: #1A1A2E; }

header .user a,

header .user a:visited {

margin: 2px; color: #B4C8CE !important; }

.picture .header { border: none; }

li.comment, .thread .even { border-radius: 0.75em; }

.bookmark div.user { border-radius: 0.5em; }

.blurb .header .heading { background: transparent !important; }

.blurb .stats { color: #f7f7f7; }

.module .heading h4, .module .heading h5, h5.module .fandoms .heading, .meta .stats, .meta .stats dl dt, .meta .stats dl dd, .dashboard .own .work { background: transparent !important; }

h5.heading, .user .datetime, .bookmark .user .userstuff, .bookmark .user .meta { margin: 10px; }

.reading h4.viewed { background: #252542; border: 1px solid #B4C8CE; padding: 0.5em; border-radius: 0.25em; }

.posted { font-size: 0.8em; }

header .menu,

header .menu li a:link,

header .menu li a:visited {

border-radius: 0.75em; background: #252542 !important; color: #B4C8CE !important; border: none; }

header .menu li a:hover,

header .dropdown:hover a {

background: #1a1a2e !important; }

li.blurb { border-radius: 0.75em; background: #252542; border: none; }

.filters .submit input { height: 100%; margin: 1em 0; min-height: 1.286em; padding-left: 0; padding-right: 0; text-align: center; color: #1A1A2E; background: #B4C8CE; }

header #search>* {

width: 70%; white-space: nowrap; margin-right: 60px; }

form.verbose legend, .verbose form legend { height: auto; width: auto; font-size: 100%; background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%); color: #1A1A2E; border: none; padding: 0.5em; box-shadow: none; opacity: 1; margin: 10px; border-radius: 0.5em; }

.actions input[type="text"], .actions input[type="text"]:focus, .textarea, .autocomplete input, form.search input[type="text"], form.search input[type="text"]:focus, li.search fieldset, .search input[type="text"], .search input[type="text"]:focus { color: #9e9e9e; background: #1A1A2E; border: 1px solid #B4C8CE; border-radius: 0.25em; box-shadow: none; font: 90%; padding: 5px; width: 90%; -webkit-appearance: none; }

.input, .highlighted { border: none; }

.filters input:checked+.indicator+span { text-decoration: underline; font-weight: normal; }

header .actions a:hover,

header .actions a:focus,

header .dropdown:hover a,

header .open a,

header .menu,

small_login,

header .dropdown:hover .current+.menu,

.actions a, .actions a:link, .actions a:active, .actions a:visited, .current span, .current, a.current, .actions .current, .current, .current a:visited, .current a:link,

dashboard .current,

.actions a:active, span.unread, .replied, span.claimed, .own, .unread, .child, .unwrangled, .unreviewed { color: #e49494; border: 1px solid #e49494; background-image: none; border-radius: 0.25em; box-shadow: none; }

dl.index dd { color: #B4C8CE; }

.draft, .draft .wrapper { color: #B4C8CE; }

header h2,

footer ul,

footer ul.navigation a,

.autocomplete .dropdown ul li:hover, li.selected { color: #1A1A2E; }

a.tag:hover, .listbox .heading a.tag:visited:hover { background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%); }

tbody tr, thead td,

header #small_login,

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, form dt, .actions a:active, .current, a.current, .current a:visited, .search span.tip { border-color: #252542; }

.heading a, .userstuff, .heading,

heading h3,

.splash .module h3 { color: #B4C8CE; }

.listbox>.heading { color: #B4C8CE; padding: 10px; padding-left: 15px; }

.listbox .index { background: #252542; }

a.tag { border-bottom: none; border-radius: 8px; padding: 3px; }

.actions a, .actions a:link, .actions a:visited, .current, a.current, .current a:visited, .current a:link { color: #1A1A2E !important; background: #B4C8CE; border: none; border-bottom: none; background-image: none; border-radius: 0.25em; box-shadow: none; }

.listbox { border: none; border-radius: 0.5em; }

.actions a:hover, .actions li .current a:hover { background: #252542 !important; color: #B4C8CE !important; border: none; border-bottom: none; background-image: none; border-radius: 0.25em; box-shadow: none; }

.action.top, .action a:link { background: #B4C8CE; color: #1A1A2E; height: auto; font-weight: bolder; padding: 0.15em 0.25em; }

.splash .module h3 { border-bottom: none; font-variant: small-caps; font-size: 1.914em; }

.title { font-variant: small-caps; }

.published, .comments { font-size: 14px; font-variant: small-caps; }

form .notice, form ul.notes { box-shadow: none; }

.actions a, .action, .actions input, input[type="submit"], button, .current, .actions label, li.relationships, li.relationships a, .thread .even, .preface h3 { background-color: transparent; }

a:hover, .splash .browse a:hover { color: #e49494; }

login-block,

li.blurb, fieldset, form dl,

symbols-key dl,

.toggled form, .dynamic form, div.comment, li.comment, .comment div.icon, .autocomplete div.dropdown ul,

modal,

.bookmark p.count span, .ui-sortable li:hover, .actions a:hover, .actions input:hover, .userstuff blockquote { border-color: #252542; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff { box-shadow: none; }

header .actions a:hover,

header .actions a:focus,

header .dropdown:hover a,

header .open a,

header .menu,

small_login,

header .dropdown:hover .current+.menu,

dashboard .current,

.actions a:active, .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed { background: #252542; }

bookmark-form {

background: #252542; }

dashboard.own,

dashboard .secondary,

dashboard ul.navigation {

background: transparent !important; }

dashboard.own {

border-top: none; border-bottom: none; }

dashboard ul {

padding: 10px 0; border-top: 0px; }

.actions a, .action, .actions input, input[type="submit"], button, .current, .actions label, a.cloud4, a.cloud5 { color: #B4C8CE; }

a:visited, a.cloud6 { color: #B4C8CE; }

thead, tfoot, tfoot td, th, tr:hover, col.name, input, textarea,

modal .content,

.actions a, .action, .actions input, input[type="submit"], button, .current, .actions label, span.unread, .replied, span.claimed, .system .latest h3, .system div.news h3, .listbox, fieldset fieldset.listbox, dl.meta, .picture .header, .bookmark .user { border-color: #e49494; background: #1A1A2E; border-radius: 5px; margin-bottom: 10px; }

li.blurb, .blurb .blurb, .listbox .index, .dashboard .listbox .index { box-shadow: 3px 0px 0px #C779D0, -3px 0px 0px #e49494; box-sizing: border-box; padding: 10px; }

header ul.primary {

box-shadow: none; padding-top: 30px; padding-bottom: 30px; background: #e49494 url(https://64.media.tumblr.com/3caf6a489d9efba6ba7e21f7b31d394a/263a4a13dc5fd3c3-0d/s1280x1920/86be51d7c4414b62505cff36cbc4f65a295c90d2.jpg); background-attachment: fixed; width: 95%; margin: 0px auto; float: none; display: table; border-radius: 25px; }

header .dropdown a {

background: #1A1A2E; border-radius: 5px; margin-right: 10px; padding: 8px; }

header .dropdown,

header .dropdown a,

header .dropdown a:hover {

color: #e49494 !important; }

header .dropdown .menu .current {

background-color: #B4C8CE; color: #252542; }

workskin {

background: url(https://64.media.tumblr.com/0837fad06b13000e960e67dcd198c34d/e15a0add901c6a08-ac/s250x400/7610daac34005f8a07df3d474bd8bd98bca6a0f5.gif); background-repeat: repeat-x; }

workskin img {

max-width: 95%; display: block; margin-left: auto; margin-right: auto; }

.autocomplete div.dropdown ul { border: 1px solid #B4C8CE; border-radius: 0.5em; }

table, thead td,

header #small_login,

fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme { background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%) !important; color: #252542 !important; transition: 0.1s !important; }

fieldset dl dl { color: #B4C8CE !important; }

form blockquote.userstuff, .ui-sortable li:hover, .listbox, fieldset fieldset.listbox, .readings-index h3, .search span.tip, .flash, .notice, .error, .comment_error { background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%); color: #1A1A2E; }

.comment h4.byline { background: transparent; }

body,

main.error,

main.slow,

main.maintenance,

.required .autocomplete, .autocomplete .notice, .post .required .warnings, .listbox .heading a:visited, .userstuff h2, .userstuff caption, .userstuff table, .userstuff td, .userstuff col, .userstuff tr, .userstuff thead, .userstuff tfoot, .userstuff tbody, .userstuff th, .userstuff thead td, .userstuff th a, .userstuff th a:link, a.cloud3 { color: #B4C8CE; }

.listbox h3 { color: #1A1A2E !important; }

.draft { border-color: #B4C8CE; }

.actions a, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, span.unread, .replied, span.claimed { border-bottom-color: #B4C8CE; }

.ui-sortable li:hover, .secondary, .wrapper, .ui-draggable form { box-shadow: none; }

header #small_login {

box-shadow: none; }

.delete a, span.delete { box-shadow: none; }

header .primary .menu .current {

color: #00273d !important; }

a, a:link, a:visited:hover,

dashboard span,

.autocomplete div.dropdown ul, .actions a:visited, .actions a:active, .current, a.current, .current a:visited, a.tag, .tags a, a.cloud1, a.cloud2 { border-bottom: none; color: #e49494; }

.userstuff h3,

header .primary a,

header .primary .current,

header .primary input,

header .search input {

border-color: #00273d; }

.userstuff h3 { border-bottom: 0px; font-size: 1.8em; }

.userstuff h2 { font-size: 2em; }

.actions a:active, .current, a.current, .current a:visited { box-shadow: none; }

a.tag:hover { color: #1A1A2E !important; background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%); }

.autocomplete .dropdown ul li:hover, li.selected { background: #B4C8CE; }

header #greeting img,

header .heading a,

header fieldset,

header form,

header p,

header .user a:hover,

header .user a:focus,

header .user .current,

.actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .system .latest h3, .system div.news h3, .system .tweets h3, .required, .error, a.cloud7, a.cloud8 { color: #B4C8CE; }

outer #header #greeting .icon,

.error, .comment_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active,

header .primary a,

header .primary .current,

header .primary input,

header .search input {

border-color: #B4C8CE; }

.unread,

dashboard span,

dashboard.own,

fieldset.actions, fieldset dl fieldset dl, .dynamic form fieldset, .toggled form fieldset, .toggled form dl, .secondary .toggled form, .dashboard .own, .mods li, dl.stats dt, .blurb .header .heading, .blurb .header ul, .blurb .header p.status, fieldset.comments, .userstuff table, .userstuff td, .userstuff col, .userstuff tr, .userstuff thead, .userstuff tfoot, .userstuff tbody, .userstuff th, .userstuff thead td, .userstuff th a, .userstuff th a:link { background: #1A1A2E; }

fieldset dl, fieldset.actions, fieldset dl fieldset dl, .dynamic form fieldset, .toggled form fieldset, .toggled form dl, .secondary .toggled form, .actions a, .action, .actions input, .action:link input[type="submit"], button, .current, .actions label,

outer.wrapper,

inner.wrapper,

dl.index, dl.stats, .listbox, fieldset fieldset.listbox, .listbox li.blurb, fieldset.comments, dl.nomination { box-shadow: none; }

h2, .system p#signup,

header h2 {

text-shadow: none; }

header h2 {

background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%); border-radius: 20px; padding: 10px; margin: 10px; }

.dashboard .listbox { border: 1px solid #e49494; }

.comment fieldset { border: 0px; }

greeting img.icon {

border-radius: 2em; height: 2.5em; width: 2.5em; }

.primary .icon, .icon { border-radius: 30px; height: 7em; width: 7em; transition: 0.2s; }

.icon:hover { border-radius: 10px; }

.picture .icon img { border-radius: 30px; height: 7em; width: 7em; margin: -8px; }

.icon { padding: 5px; }

.comment div.icon { border-bottom: 0px; }

span.symbol { color: #B4C8CE; background: #1A1A2E; border: 1px solid; vertical-align: super; border-radius: 0.75em; box-shadow: none; }

.notice { border: 1px solid #B4C8CE; color: #B4C8CE; background: #1A1A2E; box-shadow: none; padding: 1em; }

modal-bg {

background: #B4C8CE; }

.characters a:before, .relationships a:before, .freeforms a:before, .meta a:before { color: #B4C8CE; content: "\2666"; padding: 0 0.25em 0 0; }

.splash .browse li a:before { color: #B4C8CE; content: "\2666"; padding: 0 0.25em 0 0; }

.kudos a:before { color: #B4C8CE; content: "\2666"; padding: 0 0.25em 0 0; }

.btn, input[type="submit"], .actions li a, .actions li input, .actions li input[type="submit"], .actions li .current, .actions li label, .action:link { color: #1A1A2E; background: #B4C8CE; border: none !important; border-bottom: none; background-image: none; border-radius: 0.25em; box-shadow: none; }

input[type="submit"], input[type="submit"]:hover { border: none; }

.btn:hover, input[type="submit"]:hover, .actions li input[type="submit"]:hover, .actions .current:hover { color: #B4C8CE; background: #1A1A2E; border: none; border-bottom: none; background-image: none; border-radius: 0.25em; box-shadow: none; }

.tags input[type="radio"], .filters [type="radio"]+.indicator::before, .filters [type="radio"]+.indicator::before { color: #B4C8CE; background: #1A1A2E; border: 1px solid #B4C8CE; border-radius: 1em; box-shadow: none; }

.filters [type="radio"]:checked+.indicator::after, .filters [type="checkbox"]:checked+.indicator::after, [type="radio"]:checked+.indicator::after { color: #B4C8CE; background: #B4C8CE; }

header .primary>li:first-of-type {

margin-left: 2em; }

dashboard a {

background: transparent; }

.unread,

dashboard span,

fieldset dl, fieldset.actions, fieldset dl fieldset dl, .dynamic form fieldset, .toggled form fieldset, .toggled form dl, .secondary .toggled form, .dashboard .own, .mods li, dl.stats dt, .blurb .header .heading, .blurb .header ul, .blurb .header p.status, fieldset.comments, .userstuff table, .userstuff td, .userstuff col, .userstuff tr, .userstuff thead, .userstuff tfoot, .userstuff tbody, .userstuff th, .userstuff thead td, .userstuff th a, .userstuff th a:link { background: #252542; }

.assignment dl.stats, .assignment dl.stats dt, .assignment dl.stats dd, dl.stats, dl.stats dt { background: transparent; color: #f7f7f7; }

.assignment .index dt { margin-bottom: 5px; }

.blurb dl.stats { background: #252542; margin-bottom: 5px; }

.byline.heading { color: #B4C8CE; }

dashboard {

border: 2px solid #252542 !important; border-radius: 0.75em !important; margin-left: 10px; background: transparent; padding: 20px !important; box-sizing: border-box; }

.userstuff p { color: #B4C8CE; outline: none; font-size: 11pt; }

.user .datetime { color: #f7f7f7; }

.preface blockquote { border: 0; font-size: xx-small; }

p.kudos { background: none; padding: 0.5em; }

ul.series, ul.series li { color: #f7f7f7; }

.own .header, .inbox .actions, .inbox .comments, .pseud .header, .collection .header { background-color: transparent; }

.own .type { color: #f7f7f7; }

.faq .example, .guideline .example { border: 0px; background-color: #252542; border-radius: 5px; }

.comment .icon .visitor { background: url(/images/imageset.png) no-repeat -1px -76px; padding: 0px; margin: 5px; }

.skins .primary .icon, .admin .primary .icon { padding: 0px; margin: 10px; }

.bookmark .count a { color: #B4C8CE; }

.announcement .userstuff { background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%); border-color: #e49494; color: #fff; }

.announcement .userstuff p { color: #fff; }

.announcement input[type="submit"], .announcement .action { background: #fff none; border: 1px solid #ce4c4c; color: #f7f7f7; font-size: 0.875em; padding: 0.25em 0.5em; border-radius: 2em; }

input[name="preview_button"] { color: #1A1A2E; background-image: none; border: none; border-bottom: none; border-radius: 0.25em; box-shadow: none; }

input[name="post_button"] { color: #1A1A2E; background-image: none; border: none; border-bottom: none; border-radius: 0.25em; box-shadow: none; }

input[name="preview_button"]:hover { color: #1A1A2E !important; background-image: none; border: none; border-bottom: none; border-radius: 0.25em; box-shadow: none; }

input[name="post_button"]:hover { color: #1A1A2E !important; background-image: none; border: none; border-bottom: none; border-radius: 0.25em; box-shadow: none; }

footer {

background: #252542 !important; color: #B4C8CE; border-top: none !important; }

footer .heading,

footer ul,

footer ul.navigation a {

color: #B4C8CE !important; }

footer a:hover {

box-shadow: none; }

.event.announcement .userstuff a, .filters .expander { color: #B4C8CE; }

.kudos_error { background: #1A1A2E; border-color: #e49494; box-shadow: none; }

.blurb ul.required-tags li span { border-radius: 5px; }

.bookmark .status span, .bookmark .status a { border-radius: 5px; }

a.tag { background-color: #1a1a2ea6 !important; margin-bottom: 10px; line-height: 23px; padding: 3px 5px 3px 5px; }

.warnings, .warning .tags, .characters, .characters .tags, .relationships, .relationships .tags { color: transparent; }

.warnings a, .warning .tags a { color: #FEAC5E; }

.relationships a, .relationships .tags a { color: #1A1A2E !important; background-image: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%) !important; }

.characters a, .characters .tags a { background-color: #0b23248c !important; color: #4bc0c8 !important; }

.statistics .index li:nth-of-type(2n) { background: transparent; }

.listbox > .heading { color: #1A1A2E; }

.logged-in .splash > .module { float: left; margin: auto; width: 90%; }

[ghost-opal]

--- Shoutout ------------

| to the <fieldset> tag |

|____________________|

[krishna337]

HTML fieldset Tag

The HTML <fieldset> tag is used to create a group of related elements in HTML form.Use the <legend> tag to define caption or title of the fieldset element.The <fieldset> tag create a box around the related elements. Syntax <fieldset>Content...</fieldset> Example <!DOCTYPE html> <html> <head> <title>HTML fieldset Tag</title> <style> fieldset{ padding:15px; background:…

[smallkatas]

How to make an Archive of Our Own dark mode.

Have you ever been stuck up at night reading fic for hours? If your tired of burning your eyeballs with a pure white background, boy do i have the solution for you!

Step 1) Go to the ‘My Preferences’ tab.

Step 2) Click ‘Skins’

Step 3) Click ‘Create Site Skin’

Step 4) Copy paste this code into the CSS box

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset {  background: none; } body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table {  background: #2F3136;  color: #eee;  border-color: #202225;  outline: #dcddde;  box-shadow: none; } #header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, #header .dropdown:hover .current + .menu, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover {  background: #2a2a2a; } #header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] {  background: #2F3136; } #outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] {  background: #36393F; } #header ul.primary, #outer #footer, .toggled form {  background: url("/images/skins/textures/tiles/black-noise.jpg"); } #header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker {  border-color: #36393F; } .group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form {  box-shadow: 1px 1px 3px #202225; } #dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover {  background: #202225;  border-color: #36393F;  box-shadow: -1px -1px 3px #202225; } input, textarea {  box-shadow: inset 0 1px 2px #202225; } li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index {  box-shadow: inset 1px 1px 3px #202225; } #footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content {  background: #dcddde;  color: #111; } .splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus {  background: #dcddde;  color: #2F3136; } #header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header .user .current, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, a.cloud7, a.cloud8, #footer .actions .secondary a, #tos_prompt .heading {  color: #e00000; } #greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, #header .actions .current, .qtip-content {  border-color: #202225; } a, a:link, a.tag, #header a, #header a:visited, #header .current, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover {  color: #fff; } a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider {  color: #dcddde; } .actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a {  background: #555;  border-color: #222;  color: #eee;  box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #555;  text-shadow: none; } .actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus {  color: #999;  border-color: #202225;  box-shadow: inset 2px 2px 2px #202225; } .actions a:active, .current, a.current, .current a:visited {  color: #fff;  background: #555;  border-color: #fff;  box-shadow: inset 1px 1px 3px #36393F; } .delete a, span.delete {  box-shadow: -1px -1px 2px rgba(255,255,255.25); } ul.required-tags, .bookmark .status span, .blurb .icon {  opacity: 0.9;  border: 0; } #header ul.primary, #outer #footer, .toggled form {  background: url("/images/skins/textures/tiles/black-noise.jpg"); } #outer .group .heading, #header .actions a, #footer .secondary a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 {  text-shadow: none;  color: #fff;  background: none; } #header .actions a, fieldset fieldset, .mce-container button, .filters .expander {  box-shadow: none; } fieldset fieldset.listbox {  outline: none; } form dd.required {  color: #eee; } .mce-container input:focus {  background: #F3EFEC; } .announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover {  color: #111; } .announcement .userstuff a:visited {  color: #666; } .announcement .userstuff a:hover, .announcement .userstuff a:focus {  color: #999; } .event.announcement .userstuff a, .filters .expander {  color: #eee; }

Step 5) Hit submit, and enjoy painless night binging!

I’m sorry for the tag @ao3commentoftheday but I don’t have a lot of followers and I really want people to see this and hopefully make some lives easier since more people than ever before are using ao3.

Anyone that wants to share this post to other sites is welcome to!

Edit: Corrected some dashboard color glitches.

[dordlebuns]

Day 18: Accessibility and Element Semantics

Feeling pretty refreshed tackling on a new challenge within my full-stack development: accessibility and element semantics! This is really important because I had worked on a side project that was looking pretty sloppy with TONS of <div> elements. After tonight I can revisit the code and make changes as needed.

Let's get to it!

Learned of element semantics and the things encompassed within that. There are two main categories: primary structure and content indicators.

The alt attribute on img tags (this is used after the url like so: <img src url alt text> is used to provide text to an image should it not load properly for whatever reason.

<h1> - <h6> is used as a way to categorize content and label them as such. Something that was stressed to me is to NOT use them for sizing, that is something CSS can be utilized for.

Learned about different elements to semantically label my content. <main>, <head> (which is not the same as <header>), <section>, <article>, <nav>, and <footer>. Tons of ways, but at the end of the day if they don't fit the bill use a <div>.

Audio accessibility! With text, using an <audio> element can provide for accessibility to any user. The <audio> tags support the control attribute.

The control attribute shows the browser default play, pause, and keyboard functionality controls. It's a boolean attribute, so it does not need a value.

When providing the source tag, use a src attribute and set it to a url similar to an image. Then, using the type attribute will need to be set to audio/mpeg. (at least in my example)

The <figure> element which is used for wrapping a visual representation like charts or images. The <figcaption> tag is used within <figure> tags to provide a caption to the image.

The <label> element used around user responses. It can have a <for> attribute on it to provide information to the user.

Radio buttons can be pretty hectic looking on the developer. Using a <fieldset> tag surrounds the entire grouping of radio buttons. The <legend> attribute can be used as well typically next to the prompt or question the user is responding to.

That was a pretty informative and lengthy section. Tomorrow I will be finishing up Visual Accessability and moving on to principles and Flexbox! Sleepy time.

[guruji]

Website Design and Programming – Introduction to Web Forms

There is practically no website without at least a form in one of its pages. Forms are useful to collect data from the website visitors and  users. Once the user submits the form to the server, a form processing script must get the form data, validate that the user input matches the expected format for each field (e.g: email address field must be a string of text with the format of a valid email address) and process this information as desired. The script may save it into a database, send it by email or just do some processing with it and display the result. Validating the user input is essential to prevent malicious users from damaging your site.

A form definition in html starts with the form tag and ends with the /form tag. This tag can have several attributes like method (GET or POST), and action (the url of the form processing script). If use the GET method, the form data is encoded in the action URL. This method is recommended when the form is a query form. With the POST method, the form data is to appear within a message body. This is the recommended method when the form will be used to update a database, or send email, or make any action other than just retrieve data.

The form fields are used to collect the data. Generally a label is placed by each field, so the user knows what data to input. There are different kind of fields, among them:

· Textboxes

· Textareas

· Drop-downs

· Multi select

· File

· Radio buttons

· Checkboxes

· Buttons

· Hidden

The hidden fields are used to send some data that the user does not need to see, along with the form. An example of this could be a form number, so the form processing script identifies which form has been submitted.

The File field allows users to upload a file. The form processing script will get the file together with the rest of the form data. For this field to work properly, you need to include this attribute in the form tag: enctype=”multipart/form-data”.

Buttons are used to submit or reset the form.

Refer to an HTML guide for full description on the attributes and syntax of each tag. You may find a guide at http://www.w3schools.com/tags/default.asp or at http://www.w3.org/MarkUp/ among many other sites.

When the form is complex, it is useful to group fields in areas using the fieldset tag. Just place the fieldset tag, then optionally a legend Section Name /legend tag, then all the pertinent form fields, and the /fieldset tag after them.

It is possible to use CSS (Cascading Style Sheets) or inline styles to change the look of the form controls.

You can bring your forms to a different level by combining them with the usage of scripting language like JavaScript. You can make the form react immediately to certain events, like the user clicking on a control, or a field changing its value. You can highlight the field that has the focus, for example. Or count how many characters have been entered in a text box or a textarea. You can make calculations and display the results automatically. The possibilities are endless.

Thanks and regards,

https://gurujisoftwares.com

[hydralisk98]

hydralisk98′s web projects tracker:

Core principles=

Fail faster

‘Learn, Tweak, Make’ loop

This is meant to be a quick reference for tracking progress made over my various projects, organized by their “ultimate target” goal:

(START)

(Website)=

Install Firefox

Install Chrome

Install Microsoft newest browser

Install Lynx

Learn about contemporary web browsers

Install a very basic text editor

Install Notepad++

Install Nano

Install Powershell

Install Bash

Install Git

Learn HTML

Elements and attributes

Commenting (single line comment, multi-line comment)

Head (title, meta, charset, language, link, style, description, keywords, author, viewport, script, base, url-encode, )

Hyperlinks (local, external, link titles, relative filepaths, absolute filepaths)

Headings (h1-h6, horizontal rules)

Paragraphs (pre, line breaks)

Text formatting (bold, italic, deleted, inserted, subscript, superscript, marked)

Quotations (quote, blockquote, abbreviations, address, cite, bidirectional override)

Entities & symbols (&entity_name, &entity_number, &nbsp, useful HTML character entities, diacritical marks, mathematical symbols, greek letters, currency symbols, )

Id (bookmarks)

Classes (select elements, multiple classes, different tags can share same class, )

Blocks & Inlines (div, span)

Computercode (kbd, samp, code, var)

Lists (ordered, unordered, description lists, control list counting, nesting)

Tables (colspan, rowspan, caption, colgroup, thead, tbody, tfoot, th)

Images (src, alt, width, height, animated, link, map, area, usenmap, , picture, picture for format support)

old fashioned audio

old fashioned video

Iframes (URL src, name, target)

Forms (input types, action, method, GET, POST, name, fieldset, accept-charset, autocomplete, enctype, novalidate, target, form elements, input attributes)

URL encode (scheme, prefix, domain, port, path, filename, ascii-encodings)

Learn about oldest web browsers onwards

Learn early HTML versions (doctypes & permitted elements for each version)

Make a 90s-like web page compatible with as much early web formats as possible, earliest web browsers’ compatibility is best here

Learn how to teach HTML5 features to most if not all older browsers

Install Adobe XD

Register a account at Figma

Learn Adobe XD basics

Learn Figma basics

Install Microsoft’s VS Code

Install my Microsoft’s VS Code favorite extensions

Learn HTML5

Semantic elements

Layouts

Graphics (SVG, canvas)

Track

Audio

Video

Embed

APIs (geolocation, drag and drop, local storage, application cache, web workers, server-sent events, )

HTMLShiv for teaching older browsers HTML5

HTML5 style guide and coding conventions (doctype, clean tidy well-formed code, lower case element names, close all html elements, close empty html elements, quote attribute values, image attributes, space and equal signs, avoid long code lines, blank lines, indentation, keep html, keep head, keep body, meta data, viewport, comments, stylesheets, loading JS into html, accessing HTML elements with JS, use lowercase file names, file extensions, index/default)

Learn CSS

Selections

Colors

Fonts

Positioning

Box model

Grid

Flexbox

Custom properties

Transitions

Animate

Make a simple modern static site

Learn responsive design

Viewport

Media queries

Fluid widths

rem units over px

Mobile first

Learn SASS

Variables

Nesting

Conditionals

Functions

Learn about CSS frameworks

Learn Bootstrap

Learn Tailwind CSS

Learn JS

Fundamentals

Document Object Model / DOM

JavaScript Object Notation / JSON

Fetch API

Modern JS (ES6+)

Learn Git

Learn Browser Dev Tools

Learn your VS Code extensions

Learn Emmet

Learn NPM

Learn Yarn

Learn Axios

Learn Webpack

Learn Parcel

Learn basic deployment

Domain registration (Namecheap)

Managed hosting (InMotion, Hostgator, Bluehost)

Static hosting (Nertlify, Github Pages)

SSL certificate

FTP

SFTP

SSH

CLI

Make a fancy front end website about 

Make a few Tumblr themes

===You are now a basic front end developer!

Learn about XML dialects

Learn XML

Learn about JS frameworks

Learn jQuery

Learn React

Contex API with Hooks

NEXT

Learn Vue.js

Vuex

NUXT

Learn Svelte

NUXT (Vue)

Learn Gatsby

Learn Gridsome

Learn Typescript

Make a epic front end website about 

===You are now a front-end wizard!

Learn Node.js

Express

Nest.js

Koa

Learn Python

Django

Flask

Learn GoLang

Revel

Learn PHP

Laravel

Slim

Symfony

Learn Ruby

Ruby on Rails

Sinatra

Learn SQL

PostgreSQL

MySQL

Learn ORM

Learn ODM

Learn NoSQL

MongoDB

RethinkDB

CouchDB

Learn a cloud database

Firebase, Azure Cloud DB, AWS

Learn a lightweight & cache variant

Redis

SQLlite

NeDB

Learn GraphQL

Learn about CMSes

Learn Wordpress

Learn Drupal

Learn Keystone

Learn Enduro

Learn Contentful

Learn Sanity

Learn Jekyll

Learn about DevOps

Learn NGINX

Learn Apache

Learn Linode

Learn Heroku

Learn Azure

Learn Docker

Learn testing

Learn load balancing

===You are now a good full stack developer

Learn about mobile development

Learn Dart

Learn Flutter

Learn React Native

Learn Nativescript

Learn Ionic

Learn progressive web apps

Learn Electron

Learn JAMstack

Learn serverless architecture

Learn API-first design

Learn data science

Learn machine learning

Learn deep learning

Learn speech recognition

Learn web assembly

===You are now a epic full stack developer

Make a web browser

Make a web server

===You are now a legendary full stack developer

[...]

(Computer system)=

Learn to execute and test your code in a command line interface

Learn to use breakpoints and debuggers

Learn Bash

Learn fish

Learn Zsh

Learn Vim

Learn nano

Learn Notepad++

Learn VS Code

Learn Brackets

Learn Atom

Learn Geany

Learn Neovim

Learn Python

Learn Java?

Learn R

Learn Swift?

Learn Go-lang?

Learn Common Lisp

Learn Clojure (& ClojureScript)

Learn Scheme

Learn C++

Learn C

Learn B

Learn Mesa

Learn Brainfuck

Learn Assembly

Learn Machine Code

Learn how to manage I/O

Make a keypad

Make a keyboard

Make a mouse

Make a light pen

Make a small LCD display

Make a small LED display

Make a teleprinter terminal

Make a medium raster CRT display

Make a small vector CRT display

Make larger LED displays

Make a few CRT displays

Learn how to manage computer memory

Make datasettes

Make a datasette deck

Make floppy disks

Make a floppy drive

Learn how to control data

Learn binary base

Learn hexadecimal base

Learn octal base

Learn registers

Learn timing information

Learn assembly common mnemonics

Learn arithmetic operations

Learn logic operations (AND, OR, XOR, NOT, NAND, NOR, NXOR, IMPLY)

Learn masking

Learn assembly language basics

Learn stack construct’s operations

Learn calling conventions

Learn to use Application Binary Interface or ABI

Learn to make your own ABIs

Learn to use memory maps

Learn to make memory maps

Make a clock

Make a front panel

Make a calculator

Learn about existing instruction sets (Intel, ARM, RISC-V, PIC, AVR, SPARC, MIPS, Intersil 6120, Z80...)

Design a instruction set

Compose a assembler

Compose a disassembler

Compose a emulator

Write a B-derivative programming language (somewhat similar to C)

Write a IPL-derivative programming language (somewhat similar to Lisp and Scheme)

Write a general markup language (like GML, SGML, HTML, XML...)

Write a Turing tarpit (like Brainfuck)

Write a scripting language (like Bash)

Write a database system (like VisiCalc or SQL)

Write a CLI shell (basic operating system like Unix or CP/M)

Write a single-user GUI operating system (like Xerox Star’s Pilot)

Write a multi-user GUI operating system (like Linux)

Write various software utilities for my various OSes

Write various games for my various OSes

Write various niche applications for my various OSes

Implement a awesome model in very large scale integration, like the Commodore CBM-II

Implement a epic model in integrated circuits, like the DEC PDP-15

Implement a modest model in transistor-transistor logic, similar to the DEC PDP-12

Implement a simple model in diode-transistor logic, like the original DEC PDP-8

Implement a simpler model in later vacuum tubes, like the IBM 700 series

Implement simplest model in early vacuum tubes, like the EDSAC

[...]

(Conlang)=

Choose sounds

Choose phonotactics

[...]

(Animation ‘movie’)=

[...]

(Exploration top-down ’racing game’)=

[...]

(Video dictionary)=

[...]

(Grand strategy game)=

[...]

(Telex system)=

[...]

(Pen&paper tabletop game)=

[...]

(Search engine)=

[...]

(Microlearning system)=

[...]

(Alternate planet)=

[...]

(END)