Published by Gl0r!a

published 1714493019

Category: SpaceHey

View Blog View Profile Report Blog Entry

MY RUGRATS LAYOUT!!! (꒪ัں꒪ั)♥

HIIIIIIIIIIII LUVSSSS :))))
I MADE MY RUGRATS LAYOUT FINALLYYY AFTER LIKE 5 MONTHS & I JUST POSTED IT!!!!

You can find my layout here OR here .

And as always, I recommend this SITE to help format and edit your layout/code.

↑ It gives you a preview when testing your code, which makes it easier in comparison to constantly re-loading ur own profile!!!!

These "layout blogs" are just like "reposts" exactly from my Layout but in here I'll provide more reference pics as well as info for what each part means.

First off.... lemme give creds to one of my Spacehey Friends GIO. Btw they updated their layout and it's fyeeee ash so y'all should go check it out!! This is their profile btw: gio's Profile | SpaceHey or use this link: https://spacehey.com/profile?id=2058062.

If it weren't for GIO as with the Spongebob layout- I probably wouldn't have postedany or even made one. Typically for me I only make layouts of themes that other people haven't done before. But since he said I should heck- why not! And I'm glad I did tbh. It took me a while to get to it b/c I've been so busy and haven't been on here as much as I would've liked but alas I am finished! And shhh don't tell anyone it only took me a day. I'm starting to do these layouts quicker. The parts that take the most time is probably the hex codes for the colors that I want for my layout, the curosr depending on which site I use it on b/c my oh my- When I tell you my Ed Edd n Eddy layout took me soooo long to do the cursor- but it was well worth it. Then the other thing that takes me time for the most part is the images/gifs I use throughout my page. Trying to find the "perfect pic" since I'm still new to all this idk how to fix the image size so I have to keep messing with and trying out 59353954 different images until there's one that fits perfectly in the box or background since I can't edit the size, isn't too blurry, and fits in with the theme.

In my blog, I'll insert images of the Layout first and then post the code.

Feel free to use, edit, tweak, etc. andddd PLEASEEEE give credits to the other users that I mentioned in the code as well as MYSELFFFF if using!

↑ ~To be more in depth for what I mean= For example, someone could make a layout for "Harry Potter" and I use one of their codes under that layout to help me with my "Rugrat Layout"- say I used their cursor code to help me with my own, even though I changed and tweaked theirs. Although I didn't use EXACTLY the same thing they put- because my theme is different from theirs- due to the fact that I tweaked it or changed something/added something so that I can use it to fit in and blend in with my layout... I will still give them credit anyways as I used part of their code and they helped me in formatting my layout. Pretty much they are the ones that helped me in formatting the layout if that makes sense. So a lot of my layouts are literally just that- it's really a whole bunch of tweaks and edits from many different things like a huge artwork of random items from different poeple. (Hope this makes sense lol so it doesn't seem like I'm stealing ppl's layouts or anything OFC NOT!) SO plzzzzz as stated b4. Please give them credit as well as myself as we put effort and time in creating the layout! Thank u ;)

And you can always comment under here or my layout, giving me recommendations, etc. ;D

ANYWHOOOOO sorry for all that ranting haha- But.... as I said shoutout to GIO because I ended up finallyyyy doing my Rugrats layout!

Btw here's how GIO convinced me Lol: (screenshot proof I gotcha famm)

Ok that's it! Thanks 4 clicking on my blog ;)

Without further ado... let's get to the nitty gritty.

THIS IS HOW THE LOADING PAGE LOOKS LIKE:

HERE ARE THE LAYOUT SCREENSHOTSSSSSSS:

Ok now onto the layout code!!!! ^-^

THIS IS THE CODE 4 THE LAYOUT:

Paste what's below in the "HTML/CSS Code:" when you click "Edit your profile."

(^^^this gives me creds for composing the layout & if u ever see these, it's the individuals who made the parts of the layout getting their credit as well ;)

</iframe>

(^^^this puts the song in the background of the layout)

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url(https://media1.tenor.com/m/cq6rih6MSrEAAAAC/rugrats-nickelodeon.gif);

background-size:cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 2s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 100%{ opacity: 1; } 100%{ opacity: 0;} }

</style>

(^^^this is the loading page, so before you click on my page the loading screen gif appears)

<style>

main:before {

width: 807;

margin-bottom: 25px;

border: 1px solid black;

height: 470px;

display: block;

content: "";

background-image: url("https://nerdbot.com/wp-content/uploads/2023/10/Rugrats_2-scaled.jpg");

background-position: center center;

background-size: cover;

}

</style>

(^^^this gives the logo of my layout "the logo is when you first click on my page and see the image that says "Nickelodeon Rugrats")

<style>

(^^this creates a cursor of your liking- I went with the Chuckie Finster one but they also had Tommy, and Phil and Lil on that same website!)

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

box-sizing: border-box;

}

html, body{

margin: 0;

padding: 0;

}

body{

background-color: #

;

background-image: url();

font-family: 'Kristen ITC', cursive;

font-size: 15px;

padding: 10px;

}

</style>

(^^this changes the entire font of my whole entire layout- any text that I have it changes the font to whatever font family I put on here)

<style>

nav .top, nav .links{

background: solid;

text-align: center;

}

nav .links li:not(:last-child)::after,

footer .links li:not(:last-child)::after{

content: "🍼";

</style>

<style>

body {

background: #13;

}

main {

background: #9370db;

color: white;(text)

}

</style>

(^^this gives the layout its baby bottle emojis where it says Home, browse, search, blog, etc. as well as on the very bottom of the layout also--- PLUS it changed the color of my background layout to a purple and made some of my texts white as well)

<style>

:root {

--logo-blue: #9370db;

--darker-blue: #ffef00;

--lighter-blue: #7B68EE;

--even-lighter-blue: #fba0e3;

--lightest-blue: #6a5acd;

--dark-orange: #131313;

--light-orange: #7cfc00;

--even-lighter-orange: #ff9f00;

}

.contact {

border-radius: px;

background: URL('https://getwallpapers.com/wallpaper/full/e/d/f/146935.jpg');

}

table, tr, td {

background-color:#bf00ff;

border;

border-width:1.2px;

}

body{

text-transform: lowercase;

background-color: #000000;

background: url("https://i.etsystatic.com/24420862/r/il/8f4a6b/3263225914/il_1588xN.3263225914_bdaf.jpg");

background-size: cover;

background-attachment: fixed;

.blog-preview p {

background-color: #;

padding: 5px 10px;

border-radius: 10px;

color: #ff33c;

}

</style>

(^^does a lot and probably is the most time consuming- it changes the background color of the text boxes so like what you put in general, heroes, etc. it changes the color of the banner where you actually search something up on Spacehey, it changes the color of the font that says "view more" or "view blog"and it also changes the banner that says "friend's comments" "friend space" "contacting etc."~~ One day I'll make it more in depth and write out exactly what each one changes b/c it can get tricky at times maybe it's b/c idk how and am still new on this- however, note that for some of the colors it changes two things at a time and you can't change each color individually for some parts so keep that in mind)

<style>

footer{

background-color:COLOR;!important;

background-image: url('https://s-media-cache-ak0.pinimg.com/564x/94/2f/c5/942fc53c17c038808e0db866ae961c9c.jpg') !important;

}

</style>

(^^this changes the photo for the banner at the very bottom- mine is a repeating pic of Reptar)

<style>

/* contact icons */

.contact .inner a img {

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 to friends */

content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Angelica-icon.png")

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorite */

content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Chuckie-icon.png")

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send a message */

content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Tommy-icon.png")

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* foward to friend*/

content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Susie-icon.png")

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Lil-icon.png")

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Phil-icon.png")

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add 2 group */

content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Cynthia-icon.png")

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Spike-icon.png")

}

</style>

(^^this changes the character icons under "contacting" so for mine, I have characters from Rugrats for each part that says "Report User", "block user", "add to friends" etc.)

(^^this adds a floating gif to the right hand side of my screen - in this case a floating Reptar gif. Note that even if you have a loading screen page, this gif will appear also when the loading screen is there as well)

GIFSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS TO USE:

(Below are all of the gifs I used throughout my layout, I always put them under the "who I'd like to meet" section and under "music" etc. Feel free to change any and use all or however much that you would like)

WHEWWWW FINALLY! That's over am I right lol. thank You sooooo muchhhh if you did click on this blog and have reached the end ;) I appreciate it haha. Hope u like the layout and feel free to tweak it to ur liking and lmk how it turns out!!!

Published by Gl0r!a

MY RUGRATS LAYOUT!!! (꒪ัں꒪ั)♥

You can find my layout here OR here .

And as always, I recommend this SITE to help format and edit your layout/code.

THIS IS THE CODE 4 THE LAYOUT:

Comments