Report Blog Entry
basic css intro
coming in, i expect any reader to be at least somewhat familiar with css, mainly just the general format and notation. however! i will be covering some features i think are a little more advanced / confusing (or at least that confused me!!)
padding v. margin
in css, youll frequently see margin and padding used, and they seem... nearly identical? its confusing!! and i aint know the difference for a while, but i finally learned!!
margin is used around the entire element, including the border, while padding is between the content and the border around the element.
selectors syntax
as i hope anyone reading knows, you can select a class using .class-name
moreover, you can select a specific tag with a class by using tag.class-name
and finally, you can select child tags by using parent-tag.class-name child-tag
for an example from spacehey, to select the links in the navbar at the top, youd use the selector .links li
variables
another important concept is defining variables, so that you dont need to repeat yourself all the time with colors that are used a lot!
in css, variables are declared in the :root pseudoclass, using the syntax name: value. you can then reference these variables with the var() function!
for example, if we want to make a color called --border-color thats set to #ff0095, and then use that to set the border for .comment-replies, wed do so like this
pseudoelements
last time i talked about so-called pseudoelements, but what are they?
well, if you want a real answer, its something you add to a selector to only select a certain part of whatever element youre selecting, see here for more info.
but, in our case, there are only two we care about, ::before and ::after, which selects the content before and after the element being selected (who couldve guessed!!)
this is commonly used to insert extra content, for example, if we want to surround every element in a p tag with brackets, we could do
congratulations! youre now a certified cssxpert!!! (warning: you are in no ways certified, do not use this certificate of nothing to apply for a job :3)
colors
onto the fun part!! from the start, i knew that i wanted a completely pink (or at least mostly pink!) profile, and i basically... picked colors as i went? this is generally not a good idea! you should always design before programming / implementing, itll save you a lot of hassle!
anyways, i basically just used a hex color picker (the one that shows up if you just google "hex color picker"), and i just picked colors i liked! so, i ended up with the following colors:
which ends up in code looking like this
those top 9 are all to change default colors on spacehey, while the bottom 5 are custom defined for my own uses.
notice that --logo-blue, which is the color at the top behind the spacehey logo, is assigned to nothing. this is to make it transparent, and while there are other ways, this is the nicest imo.
simple styles
the most simple styles are the ones that just change colors, images, or padding/margin, and theyre all fairly self-explanatory, so im grouping them up!
there are a few things here that are fairly strange/important: first, the padding in main. for some reason, on some devices, theres a hideous white bar above the profile, and setting the padding to 0 makes sure that doesnt happen, but im not really sure why it would even happen in the first place, but oh well
second, the content property for .online is how you can change the image used to display that youre online!
third, the weird selector .profile .friends .person p is how i make sure the names of my friends are white, instead of being whatever the weird gross text color is by default.
finally, the :hover pseudoelement. i feel i dont really need to explain what it does, but just in case, it defines some properties for when the element is moused over.
contact section
if you notice in my contact section, i dont have any icons, and the default title has been replaced!
the code to do this is extremely simple, just
notice that the font-size is set using a weird system, rem, whats that about? well, rem sets the font size relative to the root font size, so this means that it will be 80% of the size of the root's font size!
sections and making it pop!
now, so far, my profile looks quite flat!! all the sections blend together, and there's nothing separating each section from another. so, lets fix that! we're going to give every section a border and a darker background, to make it really pop from the background!
i reckon i dont really need to explain much code here, you can just see that im selecting basically every single section and assigning them a border and background color.
ringing phone!!
if you ever have a notification while on my page, youll notice that theres a little ringing phone in the top corner!! the code for this is extremely simple, and the effect is soo cute!!
buttons
the default buttons on spacehey are.. certainly something...
something that i dont want! they look disgusting with my colors!
(screenshot from the layout editor site, hence the weird comments)
so, ofc i had to style them! i didnt think buttons fit at all, so i made them look like the other links / text on the page, such as where you click to view a blog!
this gives a really pretty effect imo, and it fits much much better than the default buttons!
sidenote, but at first i named this file "buttonsex.png", obviously "buttons example" and it took me far too long to realize it just looked like "button sex"...
cursor
now for my FAVORITE FAVORITE FAVVVVOOORITE part!! the cursor!! i love espeon sm shes my favorite pokemon, and this cursor is so so sooo adorable!!
hidden content
now, spacehey has a looot of profile info that i dont really care about or use, so i hide all of it! i dont remember... what did what... so just test out stuff from here!
conclusion
thanks for reading!! hopefully you guys got something out of this!! here are a few resources if youre interested!!
layout tester
Comments
Displaying 3 of 3 comments ( View all | Add Comment )
xyriiiaaa
omg I am STARTING (MAJOR BEGINNER) to learn this and this made things A LOOOT easier ! so far I've just been copying codes from layouts then just adjusting it to my preferences :3
Shiro
I will def be useing this was gonna do it on my own later just been to lazy so far but i love the list of buttons and stuff ofc arch was on there XP thank you for makeing this
Yanisu
wait i thought it would be super super confusing but it is pertty simpilar to how i java works SO NOW I CAN EDIT MY LAYOUT THANK YOU
YAYY OFC its not hard at all just time consuming!!
by lucia; ; Report