Astral Arcanum

Tags: space, scifi, alternative, purple, blue, stars, layout, layouts, dark

Description:

I went for a mystical vibe with my "Astral Arcanum" skin, mixing dark, cosmic colors and cool magic symbols to create a laid-back, enchanting space. It's like a starry night filled with magic.
Enjoy!

The skin is fully customisable or usable as is.

NOTES:
1. IMPORTANT! make sure to read the instructions in the beginning of the code to make sure you get the blinkies as interest titles.
2. I changed out the television interest for series and heroes for hobbies.
3. Check out notes all over the code to costumise things.
4. Fully functional on mobile!
5. Put the layout code in 'Who i'd like to meet' for the best results as that box is removed from the page with this layout.

To test this layout use this site and follow the instructions

If you have any bugs or issues please let me know in the comments ✦
Thanks!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ⋅⊰∙∘☽ the Fairy Gothmother ☾∘∙⊱⋅ (https://layouts.spacehey.com/layout?id=103119) -->

<!-- (c) Layout created by The Fairy Gothmother (https://spacehey.com/thefairygothmother) -->

<!-- RESOURCES:
BLINKIES ----- https://blinkies.cafe/
COLOR CODES ----- https://html-color.codes/
HTML IMAGE UPLOAD ----- https://imgbb.com/
SYMBOLS ----- https://www.symbolspy.com/
FONTS ----- https://fonts.google.com/
-->

<!-- IMPORTANT:
!! in order to get the costum blinkie titles for the interests
!! put the following under each interest topic on https://spacehey.com/edit
!! just put the text you want in the box behind it
General: <img src="https://i.ibb.co/F0QQYPd/blinkies-Cafe-5-C.gif" alt="blinkies-Cafe-5-C"/>
Music: <img src="https://i.ibb.co/0rTG82d/blinkies-Cafe-YM.gif" alt="blinkies-Cafe-YM"/>
Movies: <img src="https://i.ibb.co/QJtmkd7/blinkies-Cafe-Q7.gif" alt="blinkies-Cafe-Q7"/>
Television: <img src="https://i.ibb.co/WynJXzc/blinkies-Cafe-pr.gif" alt="blinkies-Cafe-pr"/>
Books: <img src="https://i.ibb.co/kGrWtZY/blinkies-Cafe-P9.gif" alt="blinkies-Cafe-P9"/>
Heroes: <img src="https://i.ibb.co/TcDysqc/blinkies-Cafe-MB.gif" alt="blinkies-Cafe-MB"/>

!! to make your own go to https://blinkies.cafe/ and select the 'sparkle' tags
!! select the stargazer blinkie, add your own text and use the 'moonaco' font
!! select '1x (150x20 px)' for scale and then generate and download
!! after downloading upload it to https://imgbb.com/ and use the link it provides in stead of one of the above
 --> 

<style>
	/* import your fonts here */
	@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Kumar+One&family=Kumar+One+Outline&display=swap'); 
</style>

<style>

	* { /* this rule sets the colours for the scrollbars */
		scrollbar-color: #32174d #080808;
	}

	a:hover { /* this rule sets your cursor style for links when hovered over */
		cursor: url('https://cur.cursors-4u.net/others/oth-6/oth659.cur'), auto !important;
	}
	
	* { /* this rule sets your cursor style for the whole page */
		cursor: url('https://cur.cursors-4u.net/symbols/sym-2/sym188.ani'), url('https://cur.cursors-4u.net/symbols/sym-2/sym188.png'), auto !important;
	}
		
	/* this sets the style for mobile devices */
	@media (max-width: 600px) {
		.container {
			width: 100% !important;
		}
	}
	
	:root { /* Colors */
		--headers: #6c3483;
		--text: #cf3476;
		--names: #9b59b6;
		--links: #2980b9;
	}
	
	body { /* Main text settings */
		font-family: 'Kode Mono', monospace;
		font-weight: 400;
		font-style: normal;
	}
	
	.blog-preview h4,
	.blog-preview h2,
	.blog-preview h3,
	.blog-preview h5 {	/* Styles for headings */
		color: var(--headers) !important;
	}

	.profile .right .blurbs .inner .section h4 {
		color: #9457EB;
		font-family: 'Kumar One', system-ui;
		text-shadow: 2px 2px 3px #4B0082;
	}

	a { /* Styles for links */
		color: var(--links) !important;
	}
	
	a:hover { /* Styles for links on hover */
		color: #9457EB !important;
	}
	
	p, .count { /* Styles for text */
		color: var(--text);
	}
	
	.profile .friends .person p { /* Styles for names and friends counter */
		color: var(--names);
		font-weight: 1;
	}
	
	nav label { /* Styles for search */
		color: var(--links);
	}
	
	.details p:last-child { /* Styles for last login and status */
		color: var(--text);
	}
	
	.container { /* Additional styles */
		width: 75%;
	}
	
	body { /* Styles for the body */
		position: relative;
		background-image: url('https://pixeljoint.com/files/icons/full/space__r1437994661.gif');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		text-align: center;
	}
	
	/* Overlay to create the black transparent layer */
	body::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3); /* Black with 30% opacity */
		z-index: -1;
	}

	h1 { /* Styles for the user's name */
		color: #9457EB;
		font-style: normal;
		font-weight: 400;
		font-family: 'Kumar One Outline', system-ui;
		font-size: 40px !important;
		text-shadow: 2px 2px 3px #4B0082;
	}

	nav{ /* the navigation is adjusted here */
		background-color: transparent;
		border: none;
		text-align: center;
	}

	nav .top{ /* line that appears between help/login/signup */
		color: #7B4A63;
	}

	nav .top, nav .links {
		background-color: transparent;
	}

	nav .links{
		border-top:1px solid #7B4A63;
		border-bottom:1px solid #7B4A63;
	}

	nav .links li:not(:last-child)::after,
	footer .links li:not(:last-child)::after{ /* this is the line that appears between links in the header and footer. you can add an emoji or symbol instead */
		content: "✧";
		color: #7B4A63;
	}

	a[title="Notifications"] img.icon { /* Hide the original bell icon image */
		display: none;
	}
	
	a[title="Notifications"]::before { /* Adds a new icon in the bell's stead*/
		content: "\263D \2709 \263E"; /* Unicode of the symbols ☽ ✉ ☾ */
	}
	
	a[title="Notifications"] { /* Styles for the new notification icon */
		display: inline-block;
		width: 50px;
		height: 30px;
		font-size: 24px; /* Adjust the size of the symbols */
		text-align: center; /* Center the symbols horizontally */
		line-height: 30px; /* Center the symbols vertically */
		color: #000; /* Color of the symbols */
	}

	nav img.logo { /* Styles the spacehey logo itself */
		filter: brightness(0) saturate(150%) invert(10%) sepia(74%) saturate(5025%) hue-rotate(200deg) brightness(120%) contrast(121%) !important;
		height: 30px;
	}

	.search-wrapper input[type=text] { /* the search wrapper and button */
		background-color: rgba(0, 0, 0, 0.5) !important;
		border: 1px solid #007fbf!important;
		color:#007fbf!important;
	}

	button {
		border: 2px solid #002e63!important;
		font-family: 'Kumar One Outline', system-ui important;
		background-color:rgba(0, 0, 0, 0.0) !important;
		color: #007fbf!important;
	}

	.online { /* the online symbol and text */
		margin: auto;
		padding-bottom: 5px;
		content: url(https://i.ibb.co/1mscxz1/blinkies-Cafe-pw.gif);
		width: 200px;
	}

	a, p, nav label, .section { /* font family for the headers, navigtion links, links, body text */
		font-family: var(--font-family);	
		font-size: 12px!important;
		font-weight: 1;
	}
	
	h2, h3, h5 {
		font-family: var(--font-family);
		font-size: 12px!important;
		font-weight: 1;
	}

	hr { /* the hr code. the hr is the horizontal line when you want to separate important info or add a break in your paragraphs*/
		height:2px;
		background: #002e63;
		border: none!important;
	}

	.blurbs,
	.mood,
	.contact,
	.profile .table,
	.blog-preview,
	.profile .table-section { /* this is where you adjust the borders and background */
		border: var(--borders) !important;
		background-color: rgba(0, 0, 0, 0.3) !important;
	}
	
	.friends {
		border: var(--borders) !important;
		background-color: rgba(0, 0, 0, 0.0) !important;
	}
	
	.comment-replies { /* this is the border around the replies */
		border:1px solid #702963;
	}

	.comment-reply:not(:first-child) { /* line in between comment replies*/
		border-top: 4px double #702963;
	}

	.comment-reply p {
		margin: 0;
		text-align: left;
	}

	td { /* your interest and comments table row background color */
		background-color: transparent!important;
	}

	main { /* the middle section of your profile background color*/
		background: transparent;
		border: transparent;
		outline: none;
	}

	.table-section { /* the interest table */
		border:none !important;
	}


	.profile .contact .heading, .profile .table-section .heading,.home-actions .heading, .profile .friends .heading { /* the header section of the boxes */
		background: rgba(0, 0, 0, 0.8); /* Black background with 80% opacity */
		border:none !important;
		font-family: 'Kumar One Outline', system-ui;
		font-size: 16px !important;
		font-weight: bold;
		color: #9457eb;
		text-align: center;
		text-shadow: 1px 1px 5px #4b0082;
		padding: 10px 25px 5px;
		border-radius: 2px;
		display: inline-block;
	}

	.profile-info { /* this is the box that says "Edit Info" when you're logged in, and to your friends it says "Profile Name is your friend". */
		background: rgba(0, 0, 0, 0.8) !important;
		border:none !important;
		font-family: 'Kumar One Outline', system-ui;
		text-align: center;
		padding: 10px 25px 5px;
		border-radius: 2px;
		display: inline-block;
	}

	.profile-pic img { /* adjusting images borders and adding styling if you want to */
		background: url('https://i.pinimg.com/originals/a6/ab/7b/a6ab7b6b75c343970e20d9dc8dbd0386.gif');
		background-size: 100%100%;
		padding: 7px;
		border-radius: 2px;
		display: inline-block;
	}

	.profile-pic {
		margin:auto;
		padding: 10px 25px 5px;
		border-radius: 2px;
		display: inline-block;
	}

	friends-grid{ /* you can add text-align:center; if you want your friends to be centered */
		text-align: center;
	}

	.profile .friends .person img:not(.icon) {
		border-radius: 25px !important;
		height:50px;
		width:50px;
		filter: grayscale(80%) blur(2px) brightness(50%) drop-shadow(0 0 5px #4b0082);
	}
	
	.profile .friends .person img:not(.icon):hover {
		filter: grayscale(0%) blur(0px) brightness(100%) drop-shadow(0 0 10px #9457eb);
	}

	.contact .inner a img { /* custom contact */
		font-size: 0;
	}
	
	.contact .inner a img:before {
		font-size: 1em;
		display: block;
	}

	.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { /* add me */
		content: "＋"
	}
	.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* faves? */
		content: "❥"
	}
	.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* chit chat */
		content: "➣"
	}
	.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* forwardd */
		content: "»"
	}
	.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant chat */
		content: "…"
	}
	.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block */
		content: "■"
	}
	.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* group me */
		content: "☽"
	}
	.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report */
		content: "⊗"
	}

	.comments-table { /* this is the comments table scroll code. you can delete this if you don't want a scroll box */
		display: block;
		height: 600px!important;
		overflow-y: scroll;
		border:none !important;
		outline: none !important;
		border-radius: 2px;
		padding: 10px 25px 5px;
		display: inline-block;
		background: rgba(0, 0, 0, 0.5) !important;
		text-align: center;
	}

	.comments-table td:first-child * {
		color: var(--text);
	}
	
	.comments-table td {
		border: 2px solid black;
		padding:10px;
		border-radius: 0px;
		filter: grayscale(80%) brightness(50%) drop-shadow(0 0 5px #4B0082);
	}

	.comments-table td:hover {
		filter: grayscale(0%) brightness(100%) drop-shadow(0 0 5px #9457EB);
	}

	footer {
		background: transparent;
	}
	footer a {
		color: #4b0082;
	}
	footer p {
		color: #9457eb;
	}
	
	.blurbs .heading { /* hides the blurbs title */
		display:none;
	}

	/* edits the links section */
	.profile .left .table-section {
		padding-left: 20px;
	}
	
	.profile .left .table-section .inner a::before {
		margin-right: 5px;
		content: "Other \2726";
		padding-top: 1px;
		padding-right: 5px;
		display: inline-block;
		max-width: 130px;
		max-height: 17px;
		width: 100%;
		height: 100%;
		background-image: url("https://i.ibb.co/VtKzfGY/blinkies-Cafe-uy.gif"); /* button background image */
		background-size: 100% 100%;
		color: lightgrey;
		text-align: right;
		
	}

	.profile .left .table-section .inner a:hover::before {
		color: #9457EB;
	}

	.profile .left .table-section .inner {
		text-align: left;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 2px;
		max-width: calc(100% - 20px);
		min-height: 17px;
	}
	
	.profile .left .table-section .inner a[href^="https://"] { /* manually add site referenced in https://spacehey.com/editlinks under 'website' behind the https:// */
		content: ""; /* manually input your own website name between the quotes to display */
	}

	.profile .left .table-section .inner a[href^="https://www.instagram.com"]::before {
		content: "Instagram \2726";
	}

	.profile .left .table-section .inner a[href^="https://x.com"]::before {
		content: "X \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.youtube."]::before {
		content: "Youtube \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.youtube."] {
		content: ""; /* manually input username between the quotes to display */
	}

	.profile .left .table-section .inner a[href^="https://www.tumblr.com"]::before {
		content: "Tumblr \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.tumblr.com"] {
		content: ""; /* manually input username between the quotes to display */
	}

	.profile .left .table-section .inner a[href^="https://www.twitch.tv"]::before {
		content: "Twitch \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.facebook.com"]::before {
		content: "Facebook \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.tiktok.com"]::before {
		content: "TikTok \2726";
	}

	.profile .left .table-section .inner a[href^="https://github.com"]::before {
		content: "Github \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.reddit.com/u"]::before {
		content: "Reddit \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.snapchat.com/add"]::before {
		content: "Snapchat \2726";
	}

	.profile .left .table-section .inner a[href^="https://dribbble.com/"]::before {
		content: "Dribble \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.pinterest.com"]::before {
		content: "Pinterest \2726";
	}

	.profile .left .table-section .inner a[href^="https://open.spotify.com/user"]::before {
		position: absolute;
		content: "Spotify \2726";
	}
	.profile .left .table-section .inner a[href^="https://open.spotify.com/user"] {
		content: ""; /* manually input username between the quotes to display */
	}

	.profile .left .table-section .inner a[href^="https://soundcloud.com"]::before {
		content: "Soundcould \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.last.fm/user"]::before {
		content: "Last.fm \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.deviantart.com"]::before {
		content: "DeviantArt \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.behance.net"]::before {
		content: "Behance \2726";
	}

	.profile .left .table-section .inner a[href^="https://vsco.co"]::before {
		content: "VSCO \2726";
	}

	.profile .left .table-section .inner a[href^="https://ello.co"]::before {
		content: "Ello \2726";
	}

	.profile .left .table-section .inner a[href^="https://letterboxd.com"]::before {
		content: "Letterboxd \2726";
	}

	.profile .left .table-section .inner a[href^="https://BeRe.al/"]::before {
		content: "Be Real \2726";
	}

	.profile .left .table-section .inner a[href^="https://mastodon.social"]::before {
		content: "Mastodon \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.threads.net"]::before {
		content: "Threads \2726";
	}

	.profile .left .table-section .inner a[href^="https://bsky.app/profile"]::before {
		content: "Bluesky \2726";
	}

	.profile .left .table-section .inner a[href^="https://linktr.ee"]::before {
		content: "Linktree \2726";
	}

	.profile .left .table-section .inner a[href^="https://producthunt.com/"]::before {
		content: "ProductHunt \2726";
	}

	.profile .left .table-section .inner a[href^="https://telegram.me"]::before {
		content: "Telegram \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.patreon.com"]::before {
		content: "Patreon \2726";
	}

	.profile .left .table-section .inner a[href^="https://paypal.me"]::before {
		content: "Paypal \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.buymeacoffee.com"]::before {
		content: "Buy Me a Coffee \2726";
	}

	.profile .left .table-section .inner a[href^="https://ko-fi.com"]::before {
		content: "Ko-fi \2726";
	}

	.url-info { /* hides url box */
		display:none;
	}

	.details-table td:first-child { /* hides general, music, etc titles */
		display: none;
	}

	.blurbs .inner .section:nth-child(2) { /* hides the "who I'd like to meet" */
		display:none;
	}

	.blog-preview h4 { /*hides blog names */
		display:none;
	}
	
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 106 comments ( View all | Add Comment )

Kareshi	1746487359 us1ng!! thx s0 much ^^ Report Comment
•˙🥥⊹꒷ ᑲіmᑲ᥆ ɞ🎀˙✦	1745790686 usandddop Report Comment
Hexagonal23	1745717048 Using it! nwn Report Comment
Wint3rr_	1745095380 using Report Comment
v@mpb!tch!	1744905634 This is super super cute! I am using it! Report Comment
Murda	1744896972 using Report Comment
°•°•~dinosaurz-rex🦖☆°•°	1744256521 THIS IS SI MAJESTIG IM USING TYY :33 Report Comment
°•°•~dinosaurz-rex🦖☆°•°	1744254395 THIS IS SI MAJESTIG IM USING TYY :33 Report Comment
Surge	1743965426 Trying to use this, but I want the interests titles to just be text, not blinkies, and I can't figure out what part of the HTML removed them so I'm not sure how to get the text back. Report Comment Same with the "Who I'd Like To Meet" section, I don't want that gone but I can't tell what removed it. by Surge; 1743965513; Report
ren🦴	1743778269 will use:3 Report Comment
Navsie	1743413733 THIS IS SOO COOL IM USING IT TYY Report Comment
SP4C3SH0TR	1742426690 THIS IS RLLY COOL IM USING IT THANK YOU SO MUCH <3 Report Comment
Vampirax_x	1742235007 really cool layout! im gonna use it :3 Report Comment
CR0XX3Z	1742084795 Using! This looks amazingg Report Comment
ναℓєηтιηє !! ⤜♡→ cяєѕcєηт.	1741885374 Used, thank you so much for sharing. :) Report Comment
xeph	1741717315 using Report Comment
_xxBl0ødy_kiTtYxx_	1741355167 using Report Comment
annanaan	1740840533 using Report Comment
Pastelloz (#1 wheeljack fan)	1740330610 using Report Comment
0ZZI3	1740156895 omg using !!!! Report Comment