Free CSS and HTML by Chris (40+) :|: Lioden

Report

1 2 ... 8 9 10 11 12 13 14

Posted by

Free CSS and HTML by Chris (40+)

Chris (Main) 🌼 (#105465)

Heavenly
View Forum Posts

Posted on
2023-02-10 20:50:45

Free CSS and HTML
All CSS layouts can be pasted into territory descriptions and branches using the bits of code beneath the preview images with the singular asterisk (*) removed. To use them in caves and mounds just copy the dropbox link inside of them that's in the double quotes after href.

HTML templates (found in the first reply of this thread) can be used by tapping or clicking on the preview image to be taken to its pastebin page.

Any of the code on this thread you are free to edit as you like as long as my credits are not removed and are clearly visible. I am also happy to help if there's anything you're having trouble with in regards to editing.

All layouts with an * after the name are clan compatible and any with ** are clan compatible and are more detailed than my typical free layouts.
Scenic Layouts
Rocky Arch
Rocky Arch Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/2ecm987no8rlo7f/rocky-arch.css?dl=0" />

Boat at Night
Boat at Night Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/ek8wsew9fh78fct/boat-at-night.css?dl=0" />

Mossy Forest
Mossy Forest Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/95b9uaiuu23730a/mossy-forest.css?dl=0" />

Spacey Blue
Spacey Blue Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/9nwk5tszv2eqqp9/space-blue.css?dl=0" />

Cherry Blossoms
Cherry Blossoms Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/5rovy2ygblbx5lh/cherryblossom.css?dl=0" />

Aesthetic Layouts
Stamps
Stamps Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/e9pcidkkv2bx04r/stamps.css?dl=0" />

Pink Clouds
Pink Clouds Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/69q7r8ykw48ji1w/pink-clouds.css?dl=0" />

Daisies
Daisies Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/hbskrhuye5w72vn/daisies.css?dl=0" />

Pink Skyline
Pink Skyline Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/3znwp1q8uk8ah7y/pink-skyline.css?dl=0" />

Honeycomb
Honeycomb Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/du4xbl62hvxm23q/honeycomb.css?dl=0" />

That Assignment You're Avoiding
Assignment Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/gvfbjgp7qvrwpob/assignment.css?dl=0" />

Red Sun
yes there is a red sun on the bg image it's just hard to see in the example lol sorry about that
Red Sun Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/jfw7ae0q06mprfj/red-sun.css?dl=0" />

Flower in the Dark
Flower in the Dark Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/va09alay85vpapc/flower-in-dark.css?dl=0" />

Iridescent
Iridescent Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/ci192qv44qj7wyx/iridescent.css?dl=0" />

Simple Layouts
Blue and Peach
Blue and Peach Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/d0qidmqkzfek5sp/blue-and-peach.css?dl=0" />

Plum and Silver
Plum and Silver Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/ez1nibutgz96tm2/plum-and-blue.css?dl=0" />

Wine and Bone
Wine and Bone Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/3hhcjlvr72u9mbb/wine-and-bone.css?dl=0" />

Winter
Winter Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/sneh57hnf8tbmdj/winter.css?dl=0" />

Pink Skulls**
Pink Skulls Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/scl/fi/u5b6muemvnhxq46rk42ba/pink-skulls.css?rlkey=6uqpqf90gnm5q0z62fvtpn8vi&st=j6ahct5e&dl=0" />

Pride Layouts
Ultra Bright Rainbow
Ultra Bright Rainbow Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/u0cc3voocysdes2/pride-rainbow.css?dl=0" />

Bi Vibes
Bi Vibes Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/oe1efjunk6px3yi/bi-vibes.css?dl=0" />

Lesbian
Lesbian Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/kpzbpsxc0ooifp5/lesbian.css?dl=0" />

Gay
Gay Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/sc0s9kpo1mz8tzr/gay.css?dl=0" />

Trans (the blue is a bit off but dw about it lol)
Trans Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/oyw4xn1kea6fcpe/trans.css?dl=0" />

Pan
Pan Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/5xd2v3aide18hgs/pan.css?dl=0" />

Lion Pride (Request)
I put it here as a pun lol
Lion Pride Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/asxzzdyaavlitln/lion-pride.css?dl=0" />

Enby
Enby Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/lbj0gr6e858v4hs/enby.css?dl=0" />

Seasonal Layouts
Spring Bird**
Spring Bird Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/scl/fi/31al6hhj7e8b8llipy39n/spring-bird.css?rlkey=1fbj45zxxoh8a7jv467tix0jy&dl=0" />

Spring Night**
Spring Night Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/scl/fi/8b4j9ibzojqz0ykv4mp6x/spring-night.css?rlkey=t0bh52i05dvbrcnya6t0xk6mx&dl=0" />

Summer Beach*
Summer Beach Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/bh9bc8qn34hw3av/season-summer.css?dl=0" />

Summer Sunset**
Summer Sunset Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/scl/fi/eoi1obt2euciui5b1pa7d/beach-sunset.css?rlkey=k64kse5oiil6ibq21f787280w&dl=0" />

Autumn Leaves
Autumn Leaves Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/mjxngzts6htv00r/season-autumn.css?dl=0" />

Harvest Moon**
Harvest Moon Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/scl/fi/hr6joomzopye5pi1wl8y8/harvest-moon.css?rlkey=40w3ykqp7qhimd9birhpcnq18&dl=0" />

Winter Pond**
Winter Pond Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/scl/fi/drkqbxpjftn87g26z0xtv/winter-pond.css?rlkey=bfjzvudl1yf6kgthk6v6g7d0f&dl=0" />

Winter Ice
Winter Ice Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/lysms1dxcqc67pp/season-winter.css?dl=0" />

Twitter-esque Layouts
Lights Out Blue
Lights Out Blue Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/cd4hyubhyaggh5q/twt-dark-blue.css?dl=0" />

Lights Out Green
Lights Out Green Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/9e5esvoikk78uby/twt-dark-green.css?dl=0" />

Lights Out Orange
Lights Out Orange Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/b7xdeeb416gba06/twt-dark-orange.css?dl=0" />

Lights Out Pink
Lights Out Pink Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/qgvxlw754u2fuw0/twt-dark-pink.css?dl=0" />

Lights Out Purple
Lights Out Purple Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/svxmswoyzkibq4b/twt-dark-purple.css?dl=0" />

Lights Out Yellow
Lights Out Yellow Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/awt1i6r9zwpzzwc/twt-dark-yellow.css?dl=0" />

Dim Blue
Dim Blue Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/i9v7n4z11alteya/twt-dim-blue.css?dl=0" />

Dim Green
Dim Green Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/1wz8xvnknooc5ef/twt-dim-green.css?dl=0" />

Dim Orange
Dim Orange Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/bcugooowqbi14hn/twt-dim-orange.css?dl=0" />

Dim Pink
Dim Pink Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/k7efgzm69z6asmn/twt-dim-pink.css?dl=0" />

Dim Purple
Dim Purple Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/xkwdr28c714i7ng/twt-dim-purple.css?dl=0" />

Dim Yellow
Dim Yellow Layout Preview

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/84cilc4o95csq49/twt-dim-yellow.css?dl=0" />

55 players like this post! Like?

Edited on 30/04/24 @ 21:12:11 by Chris (Main) 🌼 (#105465)

Chris (Main) 🌼 (#105465)

Heavenly
View Forum Posts

Posted on
2024-04-22 18:02:03

Chris (Main) 🌼 (#105465)

Heavenly
View Forum Posts

Posted on
2024-04-22 18:02:03

#304446398802

that wouldn't work code can't be sent raw through pms without asterisks but what I'm talking about is <*a> vs <*a href="linkAddress"> (the first is empty and therefore mucking up your code) and then finding the extra <*/a> at the end of the section

if anything I recommend you copy the code you've got in each thin section by itself into a text file or something and separate the link and image parts to understand what pieces are doing what and that will help you find any problem areas like empty a tags or other tags that you're not wanting to use as that will make them easier to see than they are in the editor on here

0 players like this post! Like?