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

gundham's gf's Blog

"she/her ace grayro adhd inxp"
Cis Female
69 years old
Interzone
Last Login: 1621723461000
Contacting gundham's gf
Message
Report
Add
Block
All Blogs (3/10)
1612925282000

Basic CSS Guide - PT. 2

"How do I change my comment input background?"

commentInput {

background-image: url(URL HERE);

}

Of course, you may replace background-image with the color component instead. One thing I forgot to mention until now is linear gradients. Linear gradients seem hard to code, but they are actually easy. Here is an example of a comment input with a linear gradient background instead:

commentInput {

background-image: linear-gradient(to right, black , darkred);

}

This link will teach you more about linear gradients and how to use them in replacement of an image, gif, or regular color: https://www.w3schools.com/cssref/func_linear-gradient.asp ... Linear gradients can be used in place of any URL or color (if it is a background/background-image component).

"How did you get a custom cursor?"

I actually used a website for the cursor and code. This site offers animated or still cursors, and it is from a variety of media (anime, celebrities, holidays, etc). Use the MySpace 2.0 coding and put it into your CSS rules: https://www.cursors-4u.com/

"How did you get the L gif on your sidebar?"

.topLeft::after {
content: "(URL HERE)";
display: block;
position: 50% 50%;
height: (IMAGE/GIF HEIGHT)px;
max-width: (IMAGE/GIF WIDTH)px;
background-position: 0 0;
background-size: 100% 100%;
background-image: url(URL HERE);
object-fit: cover;
}

This code block has a LOT of components to it, so it is significantly harder to understand. I recommend using these dimensions and adjusting for your image. If you have a smaller image/gif, doubling the height and width is a quick fix to making it bigger. I recommend setting object-fit to cover so that your image doesn't become warped or stretched. object-fit and background-position is very hard to explain, but this article is a quick read, simple to understand, and includes code as well as pictures of the code in action. https://css-tricks.com/on-object-fit-and-object-position/ I recommend playing around with the settings for a while and understanding how these variables work.

"How did you put extra text in the header?"

.logo b:(before or after) {
content: "BLANK";
font-family: (Arial, Tahoma, etc); (CSS friendly families: https://www.w3schools.com/cssref/css_websafe_fonts.asp)
font-size: (number)px;
color: (color hex, code, or rgb); (Font color)
}

DISCLAIMER: I am not aware currently how to hide the MySpace logo. However, I will edit this blog when I do. If you check my profile, you will see my header says "gundham tanaka lover". I put this into the BLANK in the content section. If you don't have the MySpace logo already hidden, I suggest you use before and not after. If you do have it removed, the 'after' variable will place this text where the logo used to be.

"How do I change the Send Message, Add to fwiends, etc icons?"

Send Message Icon:

sMsg {

background-repeat: no-repeat;
background-image: url(URL HERE);

}
Add to fwiends Icon:

add {

background-repeat: no-repeat;
background-image: url(URL HERE);

}
Report Icon:

report {

background-repeat: no-repeat;
background-image: url(URL HERE);

}
Block Icon:

block {

background-repeat: no-repeat;
background-image: url(URL HERE);

}
Changing The Font Color of These:
.boxButton {
display: inline-block;
width: calc( 49% - 60px );
padding-left: 30px;
height: 24px;
font-size: small;
color: (color code, hex, or rgb);
padding-top: 7px;
}

The #(name) component is different for all of these, so make sure you include all of these code blocks if you want to change them all. For the font color/boxButton block, you can mess around with any of the variables to your desired effect.

For now, this is everything I know about basic CSS. Besides CSS, other advice I have is choosing easily readable colors appropriate for your background, blurb color, etc. Will edit when I learn more.

Please login to leave a comment.
Comments
Zozo
1612942451000

I really appreciate this thanks so muchh

(1/10)