My CSS Resources 🥳

A tip before you get started: Keep your code organized!

This code ↴ gets confusing if you're new to coding and don't know what to edit because it's all combined together instead of organized like the one below it:

Versus this ↴ where you see what you can edit and it's more organized. You should also try to write the properties in alphabetical order so you don't use the same one twice:

In case you need it, here's a pic:

Once you get used to coding in spacehey, feel free to put the code whichever way you want :)

If you ever see the first example of code that's all combined together, just copy it and head over to https://www.10bestdesign.com/dirtymarkup/css/ and paste it there. Then hit the "clean" button and it will clean up the code for you to edit it easier.

A tip before you get started: style tags !

If you're not checking the style tags, that can easily mess up the code and you'll be left wondering why it doesn't come out the way you want it to:

Code without correct style tags:

These style tags ↑ are the same and won't change your code because they both have < > without the forward slash that closes the tag: </style>

Code with correct style tags:

Learning to Code for Spacehey Profiles:

Beginner's Intro to CSS with Spacehey Noah's YouTube Playlist
How To Create an Aesthetic Spacehey Background Youtube Video
How to Edit Your Spacehey Layout (Top 5 Codes) Youtube Video
Resources to get started pimping out your profile Blog by Seth
A placeholder stylesheet Blog by meh!!

Coding Resources:

For anything CSS www.w3schools.com/css/
The w3schools is a site that is used by all beginners to learn CSS, HTML, or any other web related coding.
For anything HTML www.w3schools.com/html/
A CSS Generator webcode.tools/generators/css
Generate highly customizable CSS properties. Preview the results before copying them to your code.
Quackit Site www.quackit.com/css/
For any questions with css or html stackoverflow.com/
Ideas for styling your css or designing your profiles freefrontend.com/

Profile and Blog Editors:

Profile Editor
Paste your code or edit it.
Profile Editor in Friends View
This view helps you edit the box that says "so-and-so is your friend".
Blog Editor
To edit the CSS of this blog, the template is below ↓ just copy it and edit it live. Don't forget to add <style> </style> tags.
Basic Black and White Blog CSS Template
This is just a template, you're welcome to change it around as you wish.

Colors:

A site with color names or hex code numbers htmlcolorcodes.com/color-names/.
The code will look like this:
color: ForestGreen;
or
color: #228B22;

If you want the color to have transparency, then the code should be in rgba like this:
color: rgba (34, 139, 34, 0.5);

the 0.5 at the end can be changed to 0.1 to make it more transparent or 0.9 to make it less transparent.
For color palettes if you need help or inspiration go to https://colorhunt.co/. Colorhunt has really good palettes (especially dark ones).
Pinterest (for example; search for "green palette aesthetic")
Color Palette Generator www.degraeve.com/color-palette
Paste the URL of an image and it will automatically generate a pallet that matches the image. I really like using this!
Another color generator colllor.com

Cursors:

Custom cursors that are fun! custom-cursor.com/
I really love these especially because they add more of your personality to your profile page!
Open Cursor Library www.rw-designer.com/cursor-library
icons8.com
Free icons you can use for your cursor, just make sure you edit down the size to fit.
The Classic Cursor site www.cursors-4u.com
I used this site way back in the day and even now it's still good.

Fonts:

Free Google Fonts fonts.google.com
The site will show you how to use the @import code to add the fonts to your profile.
Cool Fonts from www.dafont.com
Personal fonts can be added to your profile with the @font-face code more details here
More personal Fonts from www.fontspace.com
You can save the fonts to dropbox and then use the @font-face code to use in your profile.

Icons and Images:

Use icons from icons8.com for the Contact Box icons.
Click Download then the Link. Then "Custom Size" and make it 30x30 or 40x40.
For the code to customize contact icons go to Cory's Blog
Icons for the Blog Image (if your profile has the code) www.picgifs.com/mini-graphics
If you're looking for the code to put an image before the blog post, check out my blog post
You can also go to giphy.com/stickers to look fo a fun gif to add as an image before the blog post.
Pixels ohpixels.tumblr.com
pix5ls.tumblr.com/fav
engrampixel.tumblr.com
Pixels can be used to replace the Contact Icons.
Blinkies make your own
Another Blinkies Site
Huge Directory
Upload images on imgbb.com to use the link to embed pictures in your profile.
Create images or designs on Canva.
Find pics here:
pixabay.com
www.pinterest.com
www.glitter-graphics.com
wallha.com
www.clker.com

Changing the Spacehey Logo:

codepen.io/sosuke/pen/Pjoqqp
In the box that says Target Color, put in the hex code of the color you want (like #8B8C7E).
Then click the button that says "Compute Filters" and you'll get a code that looks like this:
filter: invert(57%) sepia(7%) saturate(422%) hue-rotate(25deg) brightness(94%) contrast(96%);

You're going to copy that and paste it into the code for the logo:
<style>
nav img.logo{
filter: brightness(0) saturate(100%) invert(57%) sepia(7%) saturate(422%) hue-rotate(25deg) brightness(94%) contrast(96%) !important;
}
<style>

Youtube Autoplay

The code can be found in my blog

Additional Resources (Placeholder Text, Image Editing, Video to GIF)

HTML ASCII Reference
I use this to write the style tags in comments or blog posts to avoid spacehey from erasing them.

https://bennettfeely.com/clippy/
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset)
Placeholder Text
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasize design elements over content.
generator.lorem-ipsum.info
Cupcake ipsum
Outer Space ipsum
Glowing Text
glowtxt.com
pookatoo.com
If you need to edit an image:
www.photopea.com
GIMP (Photoshop Alternative)
Video to GIF:
When I'm using a pc/laptop: https://new.express.adobe.com/tools/convert-to-gif
Then I upload it to https://giphy.com/
When I'm on my ipad I use the GIF Maker - Make Video to GIFs
But I prefer to edit on my laptop since it's easier for me.

Inspiration:

I can get inspiration from anywhere and everywhere! From movies, tv shows, kdramas, anime, books, webtoons, manga, manhwas, games, or other online sources.

Sometimes it can be pictures I see, or magazines I read. The color schemes in pictures or media can come together to form palettes and from there I just piece them together.

It takes quite a bit of playing around with my ideas to build a layout, especially if I'm freestyling a layout with no set theme.

For example, if I have a set theme in mind (like creating a xmas theme, or a Genshin theme, or a theme based on a character or book) then it becomes easy to get the images I want to use for it and choosing theme colors can come later. I can use images related to the theme to change the borders, box shapes, backgrounds used, etc.

If I'm freestyling a layout, then it can take hours or days but most of the time months because I stop working on the layout if I get frustrated with it lol But the point is that it takes a while to make since I don't have a set theme in mind and I'm quite finicky when it comes to layouts. I've always preferred quality over quantity, because for me at least, there's no use making 500+ layouts if there's going to be errors in the code (like incorrect style tags) or if certain parts of the css is missing (like forgetting to edit the code for comment replies, the profile-info box, etc). All of that comes together to make the profile look nice and makes profiles more personalized.

Everyone has their own way of doing things, so all I can share is how I would go about doing things for my layouts and as always I'm not a professional coder so don't go thinking I know everything when it comes to coding lol. These are most of the resources I use for my layouts. If you found any new sites to use I'm glad I could help in any way :)

45 Kudos