profile picture

Published by aliraluna

published
updated

Category: Web, HTML, Tech

View aliraluna's Blog

View aliraluna's Profile

Report Blog Entry

HTML/CSS codes that might help ~o.o~

Hello! 

I have gathered some useful codes here and there and thought you might be interested in them. Thanks to everyone that has shared their insightful knowledge!

Pages that might help with coding:

  1. https://blog.spacehey.com/entry?id=1552

  2. https://blog.spacehey.com/entry?id=1724 

  3. https://blog.spacehey.com/entry?id=1254 

  4. https://blog.spacehey.com/entry?id=1533 

  5. https://blog.spacehey.com/entry?id=3276

  6. https://blog.spacehey.com/entry?id=2808

VISIT HERE to try the coding first: https://genericprofileeditor.neocities.org/ 

VISIT HERE to learn more about HTML and CSS: https://www.w3schools.com/


NOTE: To add images, add the code AFTER/LUEGO the <style> </style>

<img src=”IMAGEHERE”>

To separate sentences with images or whatever: <p> </p>

Example: <p> <img src=”IMAGEHERE”> </p> =THIS is one sentence with one image


Color codes:

Color website: https://htmlcolorcodes.com/ 


Code for round corners:

Website for corners percentages: https://www.w3schools.com/css/css3_borders.asp 


Note for/about using cursors: just copy and paste it AFTER your main <style> </style>

Website for cursors: https://www.cursors-4u.com/


CODES:

  1. Code for profile background (usually will be a color as to not confusing it with the general/main background:


.profile {

background:#FEBFED;


 }


  1. Code for general profile (is the small area that is close to the profile picture):


.general-about {

 background:#BFE4FE;

  border-radius: 15px;


  1. Code for Blog Preview:

.blog-preview {

  background:#FBBFFE;

  border-radius: 15px;



  1. Code for Blurbs (NOTE: This is the area of “about me” and “people i’d like to meet)


.blurbs {

    background:#F7FA89;

  border-radius: 15px;


 }


  1. Code for changing the COLOR inside the General interests boxes:

<p style="background-color: #ANYCOLOR ;"> WRITE HERE


</p>


  1. Heading code for: “contacting aliraluna”, aliraluna interests, profile links”: 


.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

  background-color: #89FAC4;

  color:#FFFFFF ;

}


  1. Code for border of letters F: 


.profile .contact, .profile .table-section, .profile .url-info {

  border: 2px solid #89FAC4;

}


  1. Code for the background color of the friend list:

.friends:not(#comments) {

  grid-area: friends;

  background:#A7BCFB;  

  border-radius: 15px


}


  1. Code for the background of the COMMENTS section (both the section that has the pictures of the commenters, and the inside of the comment box:


.profile .friends td {

  background: #89FAC4;

  border-radius: 15px




  1. Codes for changing the SPACEHEY logo AND the SpaceHey Banner/menu at the top of the page:


.logo {

    background: #F7FA89;

    

}


nav{background-color:#F7FA89;(--box_color_and_seethru); !important;border-radius: 0px 0px var(--curve) var(--curve); !important;}

nav ul{background:none !important;}

nav img{filter: opacity(80%) !important;}

nav ul a img, .mood a img{display:none !important;}

.top{background:none !important;background-color:rgba(0, 0, 0, 0.1); !important;}


  1. Code for adding more rows in the INTERESTS section/table:


<tr>

  <td>

    <p>Pets</p>

  </td>

  <td>

    <p>I have two dogs, Chicca and Eevee</p>

  </td>

</tr>


If I want/need to add colors then:


<tr>

  <td>

    <p>Pets</p>

  </td>

  <td>

    <p></p><p style="background-color:  #F7FA89 ;">I have two dogs, Chicca and Eevee</p>

  </td>

</tr>


EDIT

Website to make custom scroll box html

https://www.myspacegens.com/handler.php?gen=scrollbox 

https://www.quackit.com/html/codes/html_scroll_box.cfm#:~:text=An%20HTML%20scroll%20box%20is,overflow%20property%20to%20the%20div


Websites To find free to use stamps and banners:


https://blingee.com/

https://www.glitter-graphics.com/ (THIS one is so awesome ToT)


Website to make gif pictures:

http://www.glitterfy.com/ 


Code to change the color and visibility of footer (box)


footer {

        border-radius: 15px;

        background: rgba(255, 255, 255, 0.94) !important;

        display: block !important;



  1. Code to make my profile picture round (from square to round) and people’s picture round


.profile-pic {

border-radius: 500px;

overflow: hidden;

}


.profile .friends .person img {

border-radius: 500px;

}



EDIT
Code to change the colors inside the general,etc table

.profile .table-section .details-table td {
  background-color:#FF8C46 ;
  color: #black;
}


/*the color refers to the color of the words*/


Code to change the colors of the heading from the right side (about me, etc)

.profile .blurbs .heading, .profile .friends .heading {
  background-color: #444;
  color: #bbb;
}

Code to replace the ONLINE icon
 .online { visibility: hidden; } .online img { content: url("https://i5.glitter-graphics.org/pub/745/745455rvacxjsot2.gif"); animation-name: none; visibility: visible; height: 20px; width: 80px; 





16 Kudos

Comments

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

delete me

profile picture

Hello! Do you have a code that can change the white middle part of the profile? I basically just want to make it black with white words. Thank you for any help!
(SIDE NOTE: I know you have a lot of codes on here already, but I'm kind of a hopeless millennial that doesn't understand code haha! )


Report Comment



Hi Grace! that would be the following:


.profile {

background:black;
color:white


}


Since you already have and in your code just copy and paste the code inside it:

.profile {

background:black;
color:white


}

Please note that the white is also applied to the comments section and your interests table so you would need to manually change that in case that you do not want those words/letters to be white as well.
So for example if you want to have your interests table to be black and white letters you just need to leave it like this:

.profile .table-section .details-table td {
background-color:black ;
color: #black;
}

But if you want to have a different color you would just need to change it like this:

.profile .table-section .details-table td {
background-color:black ;
color: #ffd700 ;
}

So there you go! if you need any more help feel free to reach out "Emoticon_smile" Icon

note: added comment again since I think you can get notifications for replies .

by aliraluna; ; Report

Thank you! I have since learned how to change my background, but I appreciate your help.

by delete me; ; Report

aliraluna

profile picture

Hey jones, how so?
Just in case, in my case that code is to change the header color of those boxes, the background color (which would be the pink one in my case) is the background color of the page which would be another code~


Report Comment

𝕻𝖔𝖙𝖆𝖙𝖔 𝕵𝖔𝖓𝖊𝖘

profile picture

the contact one the only one giving me a problem


Report Comment