#custom CSS links

[infoanalysishub]

How to Remove Underline from Links in WordPress Themes

Learn how to remove underlines from link or hyperlinks in WordPress using custom CSS, Elementor, child themes, or plugins. Applies to Hello Theme and more. How to Remove Underline from Links in the Hello Theme and Other Themes in WordPress By default, many WordPress themes apply an underline to hyperlinks. This includes the lightweight Hello Theme by Elementor. Underlining enhances visibility…

[dolphinrostrums]

love when i wake up to see an update happened to make a few vencord plug-ins break, but i check the vencord updater tab and see there's already fixes for my favorite ones just waiting for me to update <2 i love you vencord i love you customization of personal experiences i love you not giving massive corporations that are enshittifying their products money they don't deserve

[pixiel]

Old Tumblr Dashboard (Userstyle)!!

I created a Userstyle for the Chrome/Firefox Stylus Extension that reverts the new dashboard to the old look!

You need to have Stylus installed. So if you don't have it:

Install the Stylus Firefox Addon or the Manifest V2 Chrome Extension (You can install Chrome Extensions on Edge as well)

Once it's installed into Firefox/Chrome/Edge you can proceed with adding this style or any other.

To add the style (Stylus), follow the instructions:

Go to this link: https://userstyles.world/style/11286/old-tumblr-dashboard-userstyle (If it says 'style not found' then the Userstyle.world server is just down, try again in an hour)

Click on "install".

Style will open a tag with it and in the left side you'll have a button that says "install style", click there. (Step-by-step copied from the lovely dorothyoz39 who wrote this in a reply!) If you don't want the sticky header you can remove the labelled script at the top of the css below /* Sticky Header*/

For Manifest V3 only Chrome Or Stylus incompatible browsers:

For Chrome Manifest V3 install the Tampermonkey Extension

Then add the Tampermonkey Backup Script instead of the Stylus version

https://greasyfork.org/en/scripts/492279-old-tumblr-dasboard-backup I highly recommend you switch to Firefox for continued use of good extensions! Stylus does not have a V3 update yet; however, the tamermonkey script works just as good.

Be sure to check for updates regularly and if you'd like, consider supporting me on Ko-Fi https://ko-fi.com/pixiel !

I'm currently taking donations so I can afford a much-needed wheelchair, so please check out my GoFundMe for more details! Any Ko-Fi donations will be added manually to the GoFundMe

..::::HOW TO UPDATE::::..

click the Manage button on Stylus and click the check for update button next to the userstyle, then click again to install!

Make sure to check the Userstyle and see if the version number matches the one below if you don't see any changes!

NEW UPDATE: 25/05/25 (D/M/Y) 17:28PM BST v17.13

16.16: Fixed activity and notifications, they now look like the previous version 17.0: Final update to the new icons bs! Every page should be functional. If theres any missed parts or bugs - let me know! 17.9: Minor fixes and Tampermonkey update! You can also fix the positioning of the Communities button and subnav from this menu as well - it should remember your settings when you update!

Tumblr Post Width & More (OTD+ Userstyle) Is now available!!

OTD+ is an add on for Old Tumblr dashboard that you can use to edit the Post Width, Content Positioning & More - It must be used with Old Tumblr Dashboard installed as well on the latest update! This style might be merged with OTD in the future.

THE CREATOR OF THIS USERSTYLE SUPPORTS THEIR TRANS SISTERS. WE'RE ALL IN THIS TOGETHER!

Check the readmore for the changelog, custom code & known issues!

----- Known issues:

Only two columns in Masonry view. Semi-Unfixable, Tumblr creates columns based on monitor size, if I try adding another column (because it doesn't exist) it just perpetually loads on screen. Semi-fix: Zoom out in chrome/firefox and it adds more columns, you may need to change the font size of the page though

Search bar doesn't appear on some pages (like viewing a post), this is because Tumblr removed the search bar on those pages completely. Unfixable but not a big deal

Tumblr has ONCE AGAIN CHANGED THE ACCOUNTS MENU. The menus are now shorter and have less information on them. This is unfortunately permanent. I do not see any way to fix this. Unfixable.

If you want people's icons to stay fixed in place, instead of scrolling with the dashboard change this in Stylus;

Or if you're using the tampermonkey version

Find text:

.NLCTe > div.Evcyl > div > div > .So6RQ.YSitt > .ge_yK > .c79Av > article > header > .RYkKH > .nZ9l5 { pointer-events: auto; top: 55px; transition: top .25s; position: -webkit-sticky; position: sticky; } and replace it with;

.NLCTe > div.Evcyl > div > div > .So6RQ.YSitt > .ge_yK > .c79Av > article > header > .RYkKH > .nZ9l5 { pointer-events: auto; top: 0px; transition: top .25s; position: absolute; }

Solved issues: (Update)

Menus need to be manually closed SOLVED! in V.4 and updated in V.5! The menu & icon WILL scroll with you if you have removed the sticky header CSS, however, clicking anywhere on screen will make the Menu disappear still.

Masonry view in searches is now fixed!

Resized Messenger Chat Box!

NEW UPDATE 16/08/23, 23:55 BST v6.5: Figured out how to reorganise the icons in the header. Let me know if you have any problems with it and make sure to update your Userstyle! Some icons are hidden with Display: Block; you can hide more icons with this method!

Solved issues p2

Brought back SOME of the icons for Tumblrs latest update - Unfortunately, this does not bring back user icons for Reblogged posts! Make sure to yell at Tumblr for removing the icons as well as the horrible dashboard update here! v7.5 Fixed icons for all posts and put them back where they came from!

v6.9.6.9 (I promise this is the last funny number): Fuck Off Buggy The Clown Update + All languages support for the old header design!

v7.0: Fixed the search bar for tumblrs new collections feature, so it looks like the original search bar!

v8.0: Fixed masonry view icons, hidden the reblog icon on dashboard icons, fixed icons in blog viewport

V8.1: Fixed issue with icons not working on soft-refresh & with endless scrolling disabled - be sure to complain to staff!

v9.3: Changed a few things with the search feature, I also made the posts less round.

UPDATE2 11/04/2024: SO We mighhtttt have overrun their servers. 😅 I'm getting a 500 Internal Server Error every time I try to fix it or upload it as a new style - the massive influx of people downloading the userstyle was probably too much. The Tampermonkey backup on Greasyfork works just fine though! Probably easier for a lot of people migrating anyway! UPDATE 11/04/2024:: My code has broken on Userstyles.world, (it is now fixed as of 12/04/24) until this is fixed I have created a Tampermonkey Backup Version of the Userstyle so feel free to use this version if you've broken yours!

https://greasyfork.org/en/scripts/492279-old-tumblr-dasboard-backup

v9.6: Moved the Following | For you | Your Tags to below the create a post panel. Fixed the Accounts Menu! + Bugfixes V10.3: Patio compatibility. Added a way to hide the Patio button & "patio feedback?" button, just search for patio in the code and follow the instructions! v11.0: Temporary Chat feature fix after Tumblr broke it, fixed some positioning issues and j/k scrolling!

v12.3: Fixed a text issue (my bad!), I undid the changes to the replies function and added a way to fix icons order for when you get the communities update!

v12.5: Update to make compatible with the Content Positioning using Tumblr Post Width & More (OTD+ Userstyle) v12.6: Post buttons fixed, icons unable to be fixed yet as I haven't got the tumblr changes just yet - but I will fix them asap!

v11.7: Communities Update, changed the new search bar on communities page to resemble the old one. The search bar still doesn't work on these pages yet for some reason. Blog view icons fixed. v13.0: The icons change should now have a working patchfix! BIG THANK YOU to arcadian-asgardian for sending me the screenshots I needed and testing if it worked. + Minor tweak, communities button resized to fit the rest of the icons better v13.2: Mini fixes now that I have better access to the new changes! Communities icon re-centered, usernames nudged back into place.

V13.5 & v13.7: Nuked the Go Premium button - Re-positioned the search bar on search pages v13.10: Changed a lot of the new look for replies - it's not perfect yet mind. Small bug with the "..." menu moving to the left with shorter replies. Looks a lot more like the old replies section though! Made it possible to remove the reply to reply button just search for "NEW Replies UI" in the userstyle and remove the /* */ around "display: none" OR use Ublock to block the element! v14.1: Reverted the "Original Poster" border + text to look like old version. Edit: Whoops, fixed an issue with showing the timestamps

v13.4: Added a way to fix the communities icon position if you don't have the New Xkit button or have hidden any of the icons. Just remove the highlighted /* */ pair in the code for what you need.

v14.11: Made Premium Perks button available in the bottom left corner for all premium users v15.2: Fixed the Tumblr fuckup AND added a cool new feature that allows you to customise the look of your header & hide the reply-to-replies button if you like, here's how to customise this. Set to "Block" if you want the button/icon visible, Set to "None" if you want it hidden! V15.5: Given labels to options for clarity - now says 'show' or 'hide'!

v15.9: The Boopdate! V16.0: Fixed Search view pages and made them look normal, unfortunately, I can't bring back the dropdown menus for "top"/"All Time" etc - but it should look more like the original now

v16.3: Minor tweaks to make search pages look better

16.10: Fix changes to the notification icons 16.14: Fixed many issues with Tampermonkey Version - including a bug that makes the header go weird when you click on a post, fixed notification icons in small view

16.16: Fixed activity and notifications, they now look like the previous version

16.26: TEMPORARY UPDATE - only changes some aspects of the dashboard - THIS IS FULLY INCOMPLETE AND I AM WORKING ON A FULL FIX FOR THE REST OF THE SITE EDIT: added changes for timestamps!

[wafrn]

Tumblr will not die, but this post is Wafrn propaganda

I dont think tumblr will shut down. It may go the "twitter way", it may get worse service, worse moderation (EVEN WORSE YES), and worse support and worse performance.

But it wont suddenly shut down forever. Outages will be longer and more frequent but thats it.

Now, the wafrn propaganda I promised: if you care about a social media that doesn't overtarget the baning of trans people, you should give wafrn a try.

A website inspired by tumblr, that connects with mastodon and bluesky (ok mastodon, fedi etc but you get it)

It allows custom CSS themes, asks, and lots of stuff.

You can do more than like a post, you can EMOJIREACT to it!

An important bit, since it connects with mastodon and bluesky, you can follow other people you know from tumblr. I will keep this linked post updated

We also have a phone app in beta, both for iphone and android wich you can download here

Registrations are manualy reviewed by the small modteam. Depending on the timezone it can take a few minutes or 12 hours. For safety reasons we do not allow registrations with VPNs (they get abused for accounts dedicated to harrasment and other stuff that I will not disclose for your mental health).

You should give wafrn a try:

How do we plan to host everyone without money? THATS THE NEAT PART, WE DONT! If for any reason you dislike how we handle stuff, you can always host your own wafrn for you and your friends (we are working on the documentation, this is after all a hobby project atm). You can host your own wafrn and still connect with people at bluesky, mastodon and our wafrn server :D

[pneuma-themes]

Primavera: All in One Page #01 by @pneuma-themes

Always, it's spring, and everyone's in love, and the flowers pick themselves.

Live Preview / Get the code: [Pastebin] / [Github]

Another Twitter inspired layout. This is an all-in-one page with about, blogroll, tags, and FAQ sections. The code has been heavily annotated, so please go through the code first before sending me an ask!

Important note: Your blog must have been given permission to use Javascript on pages. As of 2024, the waiting time is almost indefinite, and thus might necessitate a circumvention. You can refer to the post I linked to find the how-to.

For the blogroll to display the list of blogs you follow, you must enable this option on the blog setting:

This will not work on secondary blogs, as they do not have that option on their settings.

Features:

Five custom links

Everything is customizable, from the icons to the content and the colors. Customizable options can be found on the :root section of the CSS.

A built-in light-on/off mode that can be toggled by one click.

A header image. The size of your header image is 60% of your screen width x. 250px. The image should resize automatically.

An endless space for practically every section. You can be as detailed or as concise as you like.

Sticky navigation tabs.

A short "currently" tab in the about section, can be about anything you like.

This is a page theme, so blog posts will not be displayed. Please install this through the Add new page link instead.

Credits:

Icons: @alydae

Header: @tofuvi

Fonts: Merriweather, Albert Sans @ bunny.net

Font icons: Dencar Icons (ported by @glenthemes)

CSS tabs: bulma.css, functionality adapted from this StackOverflow post.

Tooltips: tippy.js

Please like and reblog if you like or are using this!

[retrcmoon]

XOXO - RPG THEME SET - 1k SPECIAL !!!

This theme set is completely free. It is a special thank you for 1k followers. Please support me and my work by liking and reblogging this post!

[ BLOG THEME INFORMATION ]

Option between 400px, 450px, 500px and 540px posts.

Custom Body Fonts and Body Font sizes (11px - 13px)

Two Custom Header Links

Two Dropdown Links with unlimited link options

Dropdown Links are optional

Fully supports NPF (beta editor) posts.

The theme adjusts to different screen sizes.

Visible Source Link & Scroll to top button.

A lot of the design can be changed in the editing panel. Everything else is explained in the code.

Sidebar Boxes for: Welcome, Events, Admins, Quick Links and Schedule

Quick RPG Information on the header (Member & Application count, short rp information and Plot description)

Disclaimer and further blog information in the footer.

Sticky Sidebar

Footer can be turned off.

[ LOCATION PAGE ]

The Page does not contain any javascript (100% java free)

Comes in 2 versions (with and without filters)

Location picture sizes are 130 x 130. They will resize automatically.

Option for a background picture.

3 Custom Links

All colors can be easily edited on top of the css code

The theme will resize to different screen sizes.

Custom accent colors (explanation in the code)

[ CHARACTER PAGE ]

The Page does not contain any javascript (100% java free)

Comes in 2 versions (with and without filters)

Character picture sizes are 155 x 150. They will resize automatically.

Option for a background picture.

3 Custom Links

All colors can be easily edited on top of the css code

The theme will resize to different screen sizes.

Character boxes have custom links.

Custom accent colors (explanation in the code)

[ GUIDELINES ]

Do not claim as your own.

Do not remove the credit!

Do not use as a base code or take parts of this code for your theme.

Feel free to edit as much as you want!

All credits are mentioned in the code!

Static Blog Theme Preview  + Page Preview Links + All Codes  Location Page Preview + All Codes  Character Page Preview + All Codes  All codes (without preview)

[sugaredrhubarb]

A QUICK GUIDE TO AO3 CUSTOMIZATION FROM SOMEONE WHO KNOWS NOTHING ABOUT CODING

ft adding pink to everything and my secret to writing long comments

note: I originally posted this to twt but if that place burns in a fiery pit I spent too long on this for it to disappear, so I'm putting it here too :)

so many people know way more about this than I do, but this is a step-by-step walkthrough of the changes *I've* made, and hopefully it works as an introduction people can build from for whatever they'd like to do

There are a lot of images in this post! (click to enlarge)

to start, AO3 skins

site skins change how the AO3 website appears when logged in (even on mobile), mine is pink and blue!

I'll have my skin turned off throughout the post so the guides appear as they will for you

to create, edit, and view skins, go to the "skins" tab from the left-hand menu. you can also view public site skins from there or from the button in the preferences.

public site skins are made by other users. i would really encourage previewing and exploring them to become familiar with the possibilities (maybe you just want to use one of them and now you're done!)

to create your own skin

on the skins page, click "create site skin"

if you don't know CSS (same), use the wizard! clicking on the "?" will give more information about each option

I only use the colours section you'll see a link right there for hex codes I use pink as a header colour and bue for accent but lots of people change the background colour and that looks really cool!

submit

The next step (optional!!!) is to add CSS from a public skin to your own. I use "ByLine" by Branch. this separates the tag categories and adds spacing to make them easier to read.

here is a before and after using the fic "Landslide" by @roosterbruiser as an example

to see the CSS of a skin, click the title

copy all the text below the CSS heading

in the skin creator/editor press the custom CSS option and paste all the text into the CSS box

you can have both wizard and custom CSS settings, in mine you can see the header and accent colours as well as the CSS

level up: USERSCRIPTS

userscripts are small pieces of code that modify a website. for AO3, this may involve adding shortcuts and buttons or even advanced tagging functions (computer people, I'm so sorry if this is wrong, I'm trying). I use Greasy Fork and Tampermonkey.

This is how I write long and formatted comments!

Greasy Fork is an archive of userscripts and Tampermonkey is a browser extension and userscript manager. You don't need to use these two in particular. please use your common sense when downloading anything or adding permissions to your browser.

Greasy Fork guide on installing scripts

Install Tampermonkey on Chrome

there are TONS of user scripts for AO3. This is another good opportunity to explore all the possibilities. there are lots of more complicated options I haven't explored.

scripts for AO3

i use this floaty review box

and this comment formatting

EDIT: if you use chrome you might need to turn on developer mode in your chrome extension manager - you can google "tampermonkey developer mode" and it should explain that :)

to install (once you have Tampermonkey installed):

open the script you want in Greasy Fork and press install

Tampermonkey will open, press install again

clicking the Tampermonkey extension will let you toggle scripts on and off, and opening the dashboard will let you view, edit, and delete scripts

i find i can only have a few turned on at a time before they cancel each other out, but that depends on which ones you're using and someone more savvy might be able to fix that

how to use the floaty review box - write more comments!

there will now be a "floaty review box" button at the top of the work, it will open a floating text box you can move anywhere on the page. highlighting any text and pressing the insert button will paste the text with italics into the box

anything you type in the review box will appear in your comment at the bottom of the page!

if you have also installed the comment formatting script, you'll be able to highlight any text in your comment and use the new buttons above the comment box to format it

thats all ive got! Hopefully this is a good starting point to get familiar with some of the terms and basics for skins and scripts <3

if you want some inspo for how to comment on fics i made a whole fic rec list on twitter based on comments I've left, it's here. i have a masterlist of recs there mostly for darklina/reylo and similar ships.

the tag #reading with ru has cod recs and me talking about books

:)

[ao3commentoftheday]

ao3 skins faq

Just a few answers to questions I've seen in the notes on this poll

What is a site skin? A site skin is CSS code that changes the way AO3 looks. This could be anything from changing the page colour to the font to the way tags look to hiding parts of the site - and more.

Where do I find site skins? There are a few places. The easiest one is in the site footer (that red band at the bottom of the page). There are four skins linked there under the word Customize, and you can click on them to see what they do. Another place to find skins is https://archiveofourown.org/skins?skin_type=Site Those skins were created years ago and loaded into AO3 for easy applicaiton. Just hit the Use button and they'll be applied to your account. Lastly, you can find skins created by other AO3 users. Some people post their code on AO3 itself, some use github or other code repositories. A lot of folks share their skins here on tumblr with images and then a link to the code itself.

How do I save them to my account? If you're using the ones in the footer or the ones linked on the Public Skins page, you don't need to save them. Those are built into AO3. If you want to create your own (or use one created by another user), that's when you save them to your account. Tap on your name at the top of the Ao3 page. Then select Dashboard, then select Skins. Tap the button labelled Create Site Skin and give your skin a unique name. Write or paste the CSS code into the big box, then hit the Submit button to save it. If you want to use it right away, hit the Use button on the next page.

What's the difference between a Work Skin and a Site Skin? A work skin changes the appearance of an individual AO3 work, and it changes it for everyone who looks at that work. This lets you turn your fic into something that looks like an email or a text chain or a newspaper, etc etc without having to use images. Work skins can also be turned off by other users, so if they just want to read the plain text of your work they still can. A site skin changes how the entire site looks - but only for you.

How do you have 100+ site skins?? I start a lot of skins that I abandon partway through. I also create skins for certain specific purposes - for example, changing the look of all of the buttons on the site - and then I can just grab that chunk of code and add it to any "full" site skins I create for the purposes of sharing. I have a lot of experiments that fail, but I keep the code around because maybe I'll learn how to fix it someday.

Can I create my own site skin if I don't know how to code? You can! AO3 has a site skin Wizard that will help you change the colours, fonts, and font sizes on the site. Go to your Dashboard > Skins > Create Site Skin and then tap on Use Wizard. Give your skin a unique title. Click on the ? bubbles to get examples of how to enter information into each box. If there's anything you don't want to change, you can just leave that box empty. When you add in colours, they must be hex colour codes, and they must include the # at the start. Any font you add need to exist on your device (so it might work on your computer but not on your phone because your phone doesn't have that font installed). You can add parent skins to Wizard skins, too. See below!

I wish I could have [X functionality] in [Y aesthetic skin] You can! If you create one site skin in order to block certain works or tags, you can add that skin on top of an aesthetic skin. To do so, edit your aesthetic skin, scroll down and tap on the Advanced button (lower left of the CSS box), tap on Parent Skin, type in the name of your blocking skin and Add Parent Skin. Then save your aesthetic skin, and the two are combined! You can also do this with those skins that are native to AO3. So for example, you want a Reversi (dark mode) skin that Shortens Long Tags and also hides the "you have muted some users" banner. Create a site skin with the muted users code:

p.muted.notice { display: none; } And add Reversi and Shortening Long Tag Fields to it as parents. (you can also copy/paste all of the code into a single site skin, if you'd prefer)

For more FAQs, you can check out the Skins & Archive Interface section on AO3's FAQ page. Or you can drop questions in the notes, too.

[stellophiliac]

you should make a website!

"my favorite social media site is shutting down!"

"the CEO of the site i use just committed another atrocity!"

"i want a webspace that's all my own!"

if any of these sound like you (and if you're on tumblr, i know at least one applies) you should make your own website!

why make a website?

incredibly customizable

you can put whatever you want on it

it's, well, your own! like a house you build with your own hands

things you'll need

a computer. you can maybe get away with doing this on a mobile device, but i have zero experience there

a code editor. i like VScodium, which is a de-microsoft-ed version of VScode.

a will to learn ;)

site hosting

neocities. everyone knows neocities. at this point i do feel like it's become a bit too centralized, but it's a good option nonetheless. do note that there are filetype restrictions for free users, but that shouldn't be a huge issue for most. what may be an issue, though, is that there's a content security policy that prevents sites made after jan 1st, 2024 to use outside scripts. also, you have to pay to use your own domain

nekoweb. similar to neocities, but there's no filetype restrictions or a content security policy. some differences are outlined in the FAQ (thinking about moving here... i am a traitor...) i'm not sure if domain support is free or paid.

github pages or codeberg pages. you'll need an understanding of git for this

pages.gay: run by besties.house, uses git

teacake: free hosting is currently closed, but paid hosting starts at 2 bucks a month.

leprd.space: i know next to nothing about this.

a web server. don't recommend this if you don't know computer stuff but it is an option (you'll likely have to provide your own domain though)

gripes & solutions (?)

i'm not comfortable maintaining pages in pure HTML / templating with JS sucks!

with a static site generator, you can write pages in markdown and they'll be converted into HTML and (if you'd like) be put into a template of your choosing. my personal choice is 11ty but there are tons of options!

static site generators can be a bit of a learning curve (and you will have to write some html for templating) but if you're making a lot of pages or blogging regularly it's something to consider

there are starters for 11ty online but i might make a more beginner-proofed starter and/or guide in the future? don't count on it

i don't want to write/maintain CSS

simpleCSS is a tiny CSS file you can use to make semantic HTML ("naked" HTML) look nice. it's got decent customization options too. it's not particularly fancy or opinionated, but it's a good starting point if you need something

i don't know what to put on my website!

small list of ideas:

weblog

art/writing/music gallery

movie/show/book tracker

place to store bookmarks/links

scary! i'm scared!

my askbox/messages/e-mail inbox/etc. are open to anyone who'd like to ask for help!

[boringkate]

It's like letterboxd, but for porn!

This your routine reminder that I made a site for posting about what porn you've been watching!

Check out what other people have posted already!

It has a searchable database of over eighty thousand porn scenes. All of them have thumbnails and most of them have trailers.

You can even use that search page to make your own hyper specific porn randomizers. This page (for example) will play a preview video from a different random manyvids anal scene every time you load it (go see how many reloads it takes before you get served a video of me).

If there's a scene missing then you can probably get it added just by pasting in a link. It can scrap scene metadata from 25 different sites. It even automatically checks a handful of those sites every morning for new releases.

There are rewards for posting too. You can unlock a handful of my old scenes totally for free.

If you're on desktop then you can even customize your profile page's css (I replaced mine's background with looping gifs from bible black lol) (I disabled custom css on mobile just because of how little screen real estate there is).

[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; }

[zarla-s]

how did you start up a website, mainly getting the domain? You ended up making that post about the cool link just as I was going down a rabbit hole of research on how to get my own website up for a bakery I want to start up years in the future.

Personally I use AMS Computer Services for my site, I've used them for an incredibly long time and they've always been very steady and reliable. Cheap too at 4$ a month! AMS also does domain names for you for about 20$ a year. You can buy a domain name separately from your hosting if you want, although that always seemed kind of finicky to me...

There are also free options for site hosting too of course! Neocities is a big one, and for 5$ a month you can get a custom domain name for your Neocities site too if you want. Nekoweb is also an option if you're looking for a free hosting service! Hmm, Nekoweb doesn't have file type limitations... I should look into if it'd be a good place to host an Ukagaka's network updates.

If you're looking more into how to make a webpage in terms of like, HTML and CSS and things like that, there are tons of guides out there to help you! I did a round-up post for them a while back, hehe.

[wonhoutboy]

page_03: encounter by wonhoutboy

preview / code

• writing diary page: header, icon, bio, 3 links; • writing updates for each story; • progress bar; • cover space 170x250px; • tumblr controls by magnusthemes; • css icons by css.gg; • can be used as a base code as long as you credit me; • images used in the preview: x x x; • please consider buying me a coffee <3.

!! if you find any bugs/if anything doesn’t go well or if you just struggle with customizing it, please reach out to me via private message or ask and i’ll gladly help!

reading diary page coming next!

[gordonramsei]

⋆✴︎˚｡ my first doc 🖤

my first doc is a javascript - free muse page  that might have even the most devoted google doc user fooled !  i'm super proud of how this page turned out ; it's super easy to navigate , fully annotated to help u make ur own customizations , and has a beginner  friendly  coloring structure so u only have to put ur hex codes in once !  this page should be pretty much good to go but please let me know if u encounter any issues and i'll get on troubleshooting asap !

as always , pretty please give this  post a like or  reblog  if u intend on using this code or if u just want to be a supportive hottie  ! love u all bigly ; be sure to pet a cute animal today  ! mwuah !

 𓊈 ⋆✴︎˚｡ PAGE FEATURES ...  𓊉

realistic google doc layout design

fully annotated code w/ helpful breakdowns of content locations to avoid a lot of unnecessary scrolling

root css styling removes the need to repeatedly copy and paste hex codes ... think more or less the same way a tumblr theme would work .

100% no  javascript

useful styling guide within the code

section for rules

section for personal links

three main images to decorate ur page

full list of credits , inspo , image sizes , and fonts are listed within the doc containing the code

🎃 guess what ??? this theme is free ! download it with a free member account on patreon or directly from mediafire here .

⋆✴︎˚｡ click the source link to view a live preview !

[transformativeworks]

Were you using the OTW 17th Anniversary Skin?

Do you miss it? Would you like to make it your own? GOOD NEWS!

OTW Comms has posted the CSS and links to instructions on how to use it here on AO3 - https://archiveofourown.org/works/61170658

Go forth and customize your fic reading experience!

~ Mod Remi

[sofia-d-asb]

Twine/SugarCube ressources

Some/most of you must know that Arcadie: Second-Born was coded in ChoiceScript before I converted it to Twine for self-publishing (for various reasons).

I have switched to Ren'Py for Cold Lands, but I thought I would share the resources that helped me when I was working with Twine. This is basically an organized dump of nearly all the bookmarks I collected. Hope this is helpful!

Guides

Creating Interactive Fiction: A Guide to Using Twine by Aidan Doyle

A Total Beginner’s Guide to Twine

Introduction to Twine By Conor Walsh (covers Harlowe and not SugarCube)

Twine Grimoire I

Twine Grimoire II

Twine and CSS

Documentation

SugarCube v2 Documentation

Custom Macros

Chapel's Custom Macro Collection, particularly Fairmath function to emulate CS operations if converting your CS game to Twine

Cycy's custom macros

Clickable Images with HTML Maps

Character pages

Character Profile Card Tutorial

Twine 2 / SugarCube 2 Sample Code by HiEv

Templates

Some may be outdated following Twine/SugarCube updates

Twine/Sugarcube 2 Template

Twine SugarCube template

Twine Template II

Twine Template by Vahnya

Sample Code and more resources

A post from 2 years ago where I share sample code

TwineLab

nyehilism Twine masterpost

How to have greyed out choices

idrellegames's tutorials

Interactive Fiction Design, Coding in Twine & Other IF Resources by idrellegames (idrellegames has shared many tutorials and tips for Twine, browse their #twine tag)

How to print variables inside links

How do I create a passage link via clicking on a picture

App Builder

Convert your Twine game into a Windows and macOS executable (free)

Convert your Twine game into a mobile app for Android and iPhone (90$ one-time fee if memory serves me right) // Warning: the Android app it creates is outdated for Google Play, you'll need to update the source code yourself