Report Blog Entry
coding's hard. i've got 1 brain cell but i figured it out the basics - so can you, i believe in ya
here's some resources/links/and some coding ^__^
this may be updated as i find (or create) more coding snippets, but for now you've got the basics, resources, tips, and how i decoded & figured out how to do a custom font for your profile name (full credit to Cory for the original code)
TUTORIALS/PREMADE CODE SNIPPETS:
- Cory's Blog
- Coding Layout Megathread (by Jenna)
- Select CSS (by sarah ♡)
- HTML_ Group
- Bec's Layouts (by me! use as a base if you'd like)
RESOURCES:
- Spacehey CSS Preview
- Live Color Palette (useful for text colors)
- Wallpaper Cave
- Emojipedia (useful for anything really, but i like using emojis for custom contact buttons)
- Unicode: Brackets, Quotes, Etc (make your text fancy)
- Fancy Text Generator (another tool to make your text fancy)
- Several Google Fonts* (see asterisk further down the page for help)
TIPS:
- use the live Spacehey CSS Preview and BACK UP YOUR CODE (just in case!) trust me, you don't want to lose a ton of work, or even a little bit of work
- when using any images in coding, i recommend uploading to imgur or another exterior site - just in case whatever site that's hosting your image goes down (also save and don't lose it)
- crediting other user's work is important! put credits somewhere on your profile, or if using an image, directly link to the artist's work using the image as a hyperlink itself
- have fun, be patient, and sip your favorite beverage while coding away
- please don't forget to hydrate
*Cory has a wonderfully done coding snippet here that makes your username on your profile neon, blinking, and extra fancy - i loved it, but i wanted to see if i could customize it or decode it and figure out how it works
CUSTOM FONT FOR PROFILE NAME:
here's example CSS taken from my layout, customize as you like, use as a base, etc
<!-- custom profile name font --><style>@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@200&display=swap');.profile .left h1{ font-family: 'Turret Road', cursive; transform: rotate(0deg); font-size: 42px; text-shadow: 0 0 5px #6c5ca4, 0 0 10px #6c5ca4, 0 0 10px #6c5ca4, 0 0 42px #6c5ca4;</style>this uses one of the fonts above, from the "Several Google Fonts" link. i'm using the Turret Road font for my own profile and using it as an example. image by image tutorial below...
- let's say you like this font while browsing - click it! (img #1)
- now, you're going to want to click "select this style" (img #2)
- on the rightside of the page, you'll see "selected family" in a column. click "import" (shown in yellow highlight on the image) and select the highlighted (blue) text for your font code - this starts in https://fonts and ends in =swap. (img #3)
- now the highlighted text (in blue) from img #3 is what you'll be replacing my code with. replace "https://fonts.googleapis.com/css2?family=Turret+Road:wght@200&display=swap" with whatever font you've chosen
- not done yet! some fonts have different families with their code. in the same column you found the link for your chosen font, you'll see "CSS rules to specify families". (img #4)
- in this example, you'll replace 'Turret Road' with 'Syne Tactile' (the new font name) and in this case, leave the 'cursive' coding piece alone. sometimes you'll have to replace 'cursive' with something else
- make sure everything works nicely first in the live CSS Preview before importing your code onto your profile (or anywhere else)
- if something is being buggy, comment here for help - or alternatively use the "trial and error" method (either is fine)
a few more things - you may have noticed the neat glow effects. cool, right? full credit goes to Cory for this idea, as well as the transform: rotate CSS code. unless you like the same color i'm using for my custom profile name, follow the instructions below to spice it up
- wherever you see #6c5ca4, change this color to your preferred color (using Live Color Palette or something similar) to change the glow around your name
- you may have noticed the transform: rotate(0deg); coding piece - this can be used to rotate your name by so-and-so degrees. experiment with the number (0 originally) until you're happy, but by default the (0deg) does not have it rotating, the code is just there for ease of access
- use the font-size: 42px; code piece to change the size of your font
- if something is being buggy, comment here for help - or alternatively use the "trial and error" method (either is fine)
- enjoy (optional)
Comments
Displaying 0 of 0 comments ( View all | Add Comment )