Crystal Ball

Tags: layout, bela, temporary, goth, pagan, wiccan, pink, blue, purple

Description:

This layout is not originally mine and I will explain that. Originally it was created by Bela and you can find that layout below.

Based on Pink layout created by Bela https://layouts.spacehey.com/layout?id=344

Then temporary made another almost completely white version based on that layout which was just as amazing. That layout can be found below.

Based on Minimal White layout created by temporary https://layouts.spacehey.com/layout?id=26820

I then wanted to go a step farther and modify it again but this time use a picture background in place of the overly simple plain white that was used. I was looking for something out there, something that was really BAM! So I modified it with Crystal Balls.

Modified by @Coffee Queen

If you plan to modify it father please give credit where it is due and link back to those that deserve it. While I did modify this layout some, the real masterminds to this particular layout goes to Bela and temporary.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Coffee Queen (https://layouts.spacehey.com/layout?id=28009) -->

<!-- (c) Layout created by Coffee Queen (http://layouts.spacehey.com/coffee_queen) -->

<!-- Based on Pink layout created by Bela (https://layouts.spacehey.com/layout?id=344) -->

<!-- Based on Minimal White layout created by temporary (https://layouts.spacehey.com/layout?id=26820) -->

<!-- Modified by @Coffee Queen -->

<style>
/*==========⚠️==========
* please do not remove credits for any of the creators of this code if you use this layout.
* if you modify this layout please keep the other creators and add to it do not erase us.
* please link back to the three layouts above if you modify this layout for use by others.
============⚠️==========*/

@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

:root {
    --headers: #6d2cd6;
    --text: #6d2cd6;
    --text_accent: #6d2cd6;
    --names: #6d2cd6;
    --links: #6d2cd6;
    --hover: #6d2cd6;
    --borders: 1px solid #6d2cd6 !important;
    --border_normal: 1px solid #6d2cd6 !important;
    --border_none: none !important;
    --border_accent: #6d2cd6;
    --font-family: 'Kalam', cursive;
    --curve: 0px;
    --simple_bg: #e175fe;
    --bg_transparent: transparent;
    --dropshadow: #9c60fe;
}

main .left {
    padding-right: 20px;
}

.url-info {display: none !important;} /* to hide the url */
.blurbs .heading{display: none !important;} /* to hide the blurbs heading */

 /* headings*/
h3, h4, h5, .url-info b {
    color: var(--headers) !important;
}

 /* color of links */
a {
    color: var(--links) !important;
}

 /* color of links on hover */
a:hover {
    color: var(--hover) !important;
}

/* color of text */
p, h2 {
    color: var(--text) !important;
}

/* color of names, and friends counter */
h1, .friends a p {
    color: var(--names) !important;
}

 /* color of names on hover */
h1, .friends a:hover p {
    color: var(--hover) !important;
}

/* color of search */
nav label {
    color: var(--links) !important;
}

/* aboutme & want2meet headings */
.section h4 {
    color: var(--headers) !important;
    text-align: center;
}

/* line in between comment replies*/
.comment-reply:not(:first-child) {
    border-top: 3px double var(--border_accent);
}

/* Count of Friends comments on profile*/
.count {
    color:var(--text_accent);
}

/* text decoration */
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

.logout-btn:hover, .logout-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .top a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .links a {
    text-shadow: none !important;
}

nav .links a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

/* font family */

h2, h3, h4, h5, a, p, nav label, .section {
    font-family: var(--font-family) !important;
    font-size: 12px!important;
}

/* padding and margin */

.icon {
    border: none !important;
}

.blurbs {
    margin-top: 10px !important;
    margin-bottom: 30px !important
}

.friends {
    margin-top: -10px !important;
    margin-bottom: 30px !important
}

.profile-info {
    border-radius: var(--curve) !important;
}

.comment-replies {
    border: 5px dotted var(--border_normal);
}

.comments-table {
    border-radius: var(--curve) !important;
    border: none !important;
}

.table-section {
    padding-bottom: 7px !important;
    margin-top: 30px!important
}

#comments {
    margin-top: 5px !important;
    padding-bottom: 5px !important
}

.details p:last-child {
    color: var(--links) !important;
    filter: brightness(95%);
}

.mood {
    margin-top: 20px;
}

/* background image */
body {
    background-image: url("https://i.imgur.com/3mdBmQD.png");
    background-repeat: repeat;
    background-attachment: fixed;
}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {
    background: var(--simple_bg);
    margin-bottom: 30px;
    border: var(--border_none);
}

nav .top {
    background: rgba(0, 0, 0, 0.0);
}

nav .top a {
    color: var(--links) !important;
}

nav .links {
    background: transparent!important;
    text-align: center;
    text-shadow: none !important;
}

/* nav logo */
nav img.logo {
    filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(0%) hue-rotate(305deg) brightness(104%) contrast(80%);
    !important;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: var(--headers);
}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: var(--border_normal);
    color: lightgray !important;
    border-radius: 0px !important;
}

button {
    border-radius: 0px !important;
    border: var(--border_none) !important;
    font-family: var(--font-family) !important;
    background-color: var(--bg_transparent) !important;
    color: var(--text) !important;
}

/*============= online icon  ===================*/

.online {
    content: url(https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif);
    filter: saturate(75%) !important;
}

.f-col img {
    content: url(https://cdn-icons-png.flaticon.com/64/868/868604.png);
    filter: opacity(30%) !important;
}

/*============= profile name ===================*/

h1 {
    padding-left: 20px !important;
    font-family: 'Kalam', cursive;
    font-size: 25px !important;
    margin-top: -10px!important;
    color: var(--links)!important;
}

/*============= box shadows ===================*/

.mood, .blog-preview, .contact {
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: var(--simple_bg);
    border: var(--border_normal) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
}

.contact {
    background: var(--simple_bg);
    padding: 20px;
    margin-bottom: 40px !important;
}

main {
    background: var(--bg_transparent);
    padding: 6px 0px;
}

.profile-pic img {
    outline: none !important;
    border: none !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.friends-grid img {
    outline: none !important;
    filter: opacity(80%) saturate(0%) !important;
    border-radius: var(--curve) !important;
}

td {
    background-color: var(--bg_transparent) !important;
}

hr {
    border-top: 1px solid var(--border_normal);
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--border_normal) !important;
}

.friends, .blurbs {
    background: var(--simple_bg);
}

.mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--border_normal) !important;
}

.mood, .blog-preview {
    text-align: center;
    background: var(--simple_bg);
    border: var(--border_normal) !important;
}

.table-section {
    border: var(--border_normal) !important;
    background-color: var(--simple_bg) !important;
    border-radius: var(--curve) !important;
}

.heading {
    background: var(--bg_transparent) !important;
    padding-bottom: 4px !important;
    background-size: 100%100%!important;
    text-align: center;
    border: none!important;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: var(--border_normal) !important;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
    border: var(--border_normal);
}

.comments-table td:first-child img {
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

footer {
    color: var(--text);
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: var(--simple_bg);
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 3px;
    border: 1px solid var(--border_normal);
}

::-webkit-scrollbar-thumb {
    background: var(--headers);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border_accent) !important;
}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur267.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/01/light-purple-pointer-2.html" target="_blank" title="Light Purple Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Light Purple Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>

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 0 of 0 comments ( View all | Add Comment )