Home | All Fwiends | Random | Online | Music | Blog | Search

Holy_Water's Blog

"왜 이것을 번역했습니까? 하하하"
Gender Questioning
14 years old
United States
Last Login: 1620915638000
Contacting Holy_Water
Message
Report
Add
Block
All Blogs (7/10)
1618252989000

CSS

I'll update (add more) overtime

Directions:
-Copy and paste into the Customize box
-Add a link from recommended or your own site if needed (like a gif or image)

-For gifs I recommend using tenor, and if you do, once you find a gif RIGHT CLICK ON IT AND CLICK OPEN IN NEW TAB then thats the url you would use
-And images just use google, don't forget to open it in a new tab!

-For color changes you can use https color codes, I recommend using this site----> https://html-color.codes/#:~:text=A%20HTML%20color%20code%20is%20an%20identifier%20used,triplet%2C%20and%20a%20HSL%20%28hue%2C%20saturation%2C%20lightness%29%20triplet.

----Background Gif(Multiple)----
body {
background: url(DELETE THIS AND INSERT GIF URL);
font-family: cursive;
padding-top: 45px;
font-size: 25px;
}

---Background Gif or Image(Singular)
body {
font-family: Times New Roman, serif;
color: white;
background-color: black;
background-size: cover;
padding-top: 45px;
font-size: 15px;
background-image: url(DELETE AND INSERT URL HERE);
text-align: center;
background-attachment: fixed;
}

----Floating gif image (like the blinking eyes I have on my page)----
.url {
background: url(DELETE THIS AND INSERT GIF URL OR IMAGE) no-repeat;
position: fixed;
right: 20px;
bottom: 200px;
color: #ffffff00;
background-size: 300px;
height: 500px;
width: 300px;
border: none;
box-shadow: none;
filter: drop-shadow(8px 9px 15px #00000044);
z-index: 1000;
font-size: 0px;
opacity: 1;
}

---This one is to put a floating gif on the bottom right---
.url {
background: url(DELETE AND PUT GIF OR IMAGE URL HERE);
position: fixed;
right: 0;
bottom: 0px;
color: #ffffff00;
background-size: 300px;
height: 270px;
width: 270px;
border: none;
box-shadow: none;
filter: drop-shadow(8px 9px 15px #00000044);
z-index: 1000;
font-size: 0px;
opacity: 1;
}

----Background Gif for the left side(under my profile the hearts gif)----
div.topLeft {
background-image: url(DELETE THIS AND INSERT GIF URL OR IMAGE);
border: 3px dotted;
border-color: #7bfc03;
padding: 3px;
}

----Three Gifs to go under the music area..thing.. yea----
.topLeft:after {
margin: 4px 236px 36px -240px;
content: " ";
display: block;
white-space: pre-wrap;
padding: 0px 69px 0px 0px;
height: 1800px;
width: 852px;
background-image: url(DELETE ME AND INSERT GIF URL OR IMAGE), url(DELETE ME AND INSERT GIF URL OR IMAGE), url(DELETE ME AND INSERT GIF URL OR IMAGE);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 385px;
background-position: 243px 0px, 243px 239px, 243px 472px;
}

----Gif for music box, it'll show up once you've but a mp3.----
.player::before {
content: "";
display: block;
position: relative;
width: calc(50% -20px);
height: 335px;
max-width: 390px;
background-position: 0 0;
background-size: 100% 100%;
background-image: url(DELETE ME AND INSERT GIF URL OR IMAGE);
object-fit: cover;
}

----Background color or image for your profile pic and age area thing----
td {
background-image: url(URL GOES HERE);
display: table-cell;
vertical-align: inherit;
}

----This makes your Fwiends' pfp (Ones you put at the top) Circles----
.fwiendFace img {
border: solid 2px #FFFFFF;
border-radius: 50%;
background-position: center;
display: absolute;
object-fit: cover;
height: 100px;
width: 100px;
}

---Circle pfps but with a image or gif in the back---
.fwiendFace {
background-image: url(INSERT URL HERE);
border: 2px solid #fff;
border-radius: 50%;
width: 100px;
height: 100px;
margin-right: 5px;
margin-bottom: 5px;
font-size: 0px;
max-width: 100vw;
}
sheeesh it cut off 20 other css, I'm gonna cry

Please login to leave a comment.
Comments
Holy_Water
1618256164000

Curse you "4096 Chars Max" (╯‵□′)╯︵┻━┻

(1/10)