dealmiser's profile picture

Published by

published
updated

Category: Web, HTML, Tech

bits and pieces of code used on my profile!!

hii!! welcome to my codes collection (sort of) 
i will be adding more to this if i find any cool stuff
basically this is all the code i learnt and have used on my page! 

major thanks to the people that helped me with my code because i too have no knowledge of code whatsoever!

( i put links on the posts & people on where i got the codes from at least to the ones i can remember, a bunch of these i searched on google and just clicked on the results )




// DROPDOWN MENU //

for plain text:

<details><summary style="font-size: 13px;" class="mb8"><u>put any text you want here</u> </summary>
<p>
put any text you want here
</p>
</details>

for images/gifs:

<details><summary style="font-size: 13px;" class="mb8"><u>put any text you want here</u> </summary>
<p>
<img src="insert gif/image link here" width=""/>
</p>
</details>




// ADDING A SCROLLBAR/SCROLLBOX //

comments:

(this ones pretty easy! all i pretty much did was look for this code below, and lower the height to 250px, but you can edit to any size you want!)
(something to add also, i put in the code to have the comments in a scrollbar somewhere, and it gave me two scrollbars for the comments?? if you have that glitch, remove the code you found and do what i said above)

#comments .inner {
        height: 250px;
        overflow: auto;
    }

interest table (inside):

<div style="height: 120px; width: AUTO; border: 1px solid black; overflow:auto;">
<p>put any text you want here</p><p>
</p><div></div></div>

*** NOTE DO NOT ADD <style> tags, when i did, it made it so the text would appear invisible, also put this code --in the interest boxes-- like this image below vv


(thank you to kyon who helped me with this <3 check their page out, its so cool o( ❛ᴗ❛ )o)


interest table (outside):

(you can safely add this & the interest table inside ver together, i did it in page for an example)

<style>
:not(.table-section) + .table-section {
border: none!important;
height: 300px;
overflow-y: auto;
transition: all 0.3s ease!important;
}

.table-section:nth-of-type(even):{
height: 90px;
overflow-y: auto;
transition: all 0.3s ease!important;
}
</style>

(also thank you very much to kyon again who also helped me with this !!)

friends table:

.friends-grid {
    background: #hex code color of your background;
    border: 7px ridge #whatever you want the border color to be;
    padding: 10px;
    max-height: 150px; 
    overflow-y: auto;
}




// REMOVING(HIDING) SECTIONS //

hiding url section:

<style>
.profile .url-info {
    display: none;
</style>

hiding both interests & links section:

<style>
.table-section{display:none;}
</style>

hiding interests section only:

<style>
:not(.table-section) + .table-section{display:none;}
</style>

hiding links section only:
<style>
.table-section + .table-section{display:none;}
</style>



// RANDOM PIECES OF CODE //

auto play music:

<iframe width="0" height="0" src="https://www.youtube.com/embed/VIDEOURL/?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

( thank you to this post by Vidal)

cd player thingy:
(this post by idioteque)

but for some reason the auto play music code wasn't working so i just replaced it with the code i have above 

changing links color, hover color & background:

    nav .links a {
    text-decoration: none;
    color: #f09; /* change Link color*/
    font-size: 0.98em;
}
    
nav .links a:hover  {
    color: yellow; /* change Link hover color*/
    text-decoration: underline;
}

nav .links {
    background-color: pink;/* change background color behind links*/
}

making pfp a circle:

<style>
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }

    table.details-table {
        border-collapse: collapse;
    }

    table.details-table td {
        background-color: transparent !important;
    }

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
</style>


film grain on your profile:

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

( thank you to this post by Cory )


have images & gifs shake when you hover over them:

<style>
a{
color: #0000ff;
-webkit-transition: all ease 0.5s; 
-moz-transition: all ease 0.5s; transition: all ease 0.5s;
}

  a:hover { 
    box-shadow: inset 0 50px 0 0 #5A61A3; 
    color: white;
  }

footer a{
color: #2b3d4f;
}

.friends-grid img{
   border: 3px double #6F8FAF;
}

::-webkit-scrollbar {
width: 14px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, rgba(238,238,238,1) 38%, rgba(206,206,206,1) 62%);
border: 1.5px solid #888888;
border-radius: 5px;
}

::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
}

.profile-pic:hover img { 
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-transition: .5s ease-in; 

img:hover{ 
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-transition: .5s ease-in; 

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }

</style>


tv lines on our profile:

<style>
body::before {content: " ";display: block; 

body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}
</style>


*** FOR  AN EXAMPLE OF ALL OF THESE (except for the circle pfp) LOOK AT MY PAGE (ノ´ヮ`)ノ*: ・゚




// HELPFUL LINKS //

custom fonts by Cory
(check out his blog! he has a bunch of helpful snippets of css codes)

profile resources masterpost by Caitlynn
(has a whole ton of profile deco links, to decorate your page!!)

some of my best layout resources by Maki
(has a bunch of helpful codes!)

useful css codes for your page! by Laura
(well,,, as the title says!!)

Web, HTML, Tech Forum
(bunch of posts with other more helpful stuff!!) 

tiny gifs collection <3 by kuurousa on Tumblr!
(cute tiny gifs to add to your graphics collection)

windows 98 icons by Alex Meub
(what i used for my contact icons)


annnnnd that is all!! hopefully i managed to help at least one person with this :)) 


48 Kudos

Comments

Displaying 5 of 5 comments ( View all | Add Comment )

gergshimer

gergshimer's profile picture

this is so helpful, oh my god! thank u! <3


Report Comment

Apfels !! >_<

Apfels !!  >_<'s profile picture

WAA IVE BEEN LOOKING FOR THIS ALL OVER !! THANKYOU SUPER AWESOME AND HELPFUL !!


Report Comment

Chiggle_

Chiggle_'s profile picture

suuper helpful tysm


Report Comment

JELLY

JELLY's profile picture

oh my goodness gracious this is so useful thank you!!!


Report Comment

⚝ kyon ⊹ ࣪ ˖

⚝ kyon ⊹ ࣪ ˖'s profile picture

UR PROFILE IS AWESOME AND THIS BLOG IS VERY HELPFUL *THUMBS UP EMOTE


Report Comment



TYSM AAAA 。(>ω<。)

by dealmiser; ; Report