Tutorial A Comprehensive Guide to Customization

[xayah.]

About Me !

introduction.txt

Hello ! This code was inspired by this tumblr code & I based the color palette off my profile picture.

ever seen a beautiful code & wondered how you could fully utilize all the features the coder has implemented? this might mean adjusting the positioning of a picture using x% and y%, changing the color of your url from the default blue to something else, changing the font or colors used, etc...

or maybe you're a baby coder and want some tips on BBCode basics that you've seen in almost every freebie ever on this site? this includes hidden scrolls, making something mobile friendly, and even learning in-depth about basic commands (line-height, padding, margins, etc). maybe even tabs & accordions ??!

if you answered yes to any of these questions, or have had these questions before, i'm here to create a manual that you can always refer back to instead of searching through thread after thread for a tutorial someone wrote long, long ago!

i already have some ideas about topics to go through, but please feel free to comment below! i will directly tag you if i answer your question. i'll list a few rules real quick because this is getting pretty long already!

one. - please scroll through to see if your question has been asked before! if it has, react to it to show me that more people want this type of question answered first before others.
two. - all code examples i offer on this thread are free for your dissection in your private workshops, but please do not claim it as your own! i'm here to help, but these codes are still my property / examples i had to create and work on.
three. - i'm planning to continue doing this even as i enter college in a week or two, but as a student, i'm going to have to have my homework and activities take precedent over anything else. thank you for being understanding!
four. - if i haven't solved your confusion with one of my guides, feel free to ask more elaborate questions by replying to the direct guide with the question. but also, i'm not here to solve specific code issues! these are general topics that i am going in-depth in, so that when you see a line of code, you can decode 85-90% of what is happening!

thank you

#introduction

#feel_free_to_say_hi

#frequently_asked_questions

 

[xayah.]

Directory !

chatrooms.jpg

01.

GETTING STARTED
— for anyone

02.

INSPIRATION 101
— for anyone

03.

COLORING LINKS
— for anyone

04.

IMAGES 101
— for novices

05.

LINE-HEIGHT: 0
— tba

06.

PADDING 101
— tba

07.

FA ICONS
— tba

#directory

#click_for_redirection

 

[xayah.]

Getting Started!

faq.chat

no one asked, but...

How do I get started coding?

anyways...

When I usually say coding, I am really referring to CSS injection and not BBCode, and this will be teaching the basic skeleton of CSS injection instead of pure BBCode as a result.

However! Some basic BBCode functions are just as important and commonly used. Truthfully, most of these can be found in the menu bar on top of where you're writing, but the ones I can think of off the top of my head are:

[color][/color][/COLOR]
[COLOR=pink][i][/i]
[b][/b]
[u][/u]
[s][/s]
[size=# here][/size]
[font=Exact Spelling of Google Font here][/font]
[left][/left] OR [center][/center] OR [right][/right] OR [justify][/justify]
[quote][/quote]
[spoiler][/spoiler] OR [Ispoiler]This is a capital I, not lowercase L.[/Ispoiler]
[url='LINK HERE'][/url]

Want to know a fun fact? I used the [color=COLOR/#HEXCODE][/color] pure BBCode command to change the text inside the code from black to pink! Told you they were just as useful.

In order of the list, each pure BBCode command does the following to your post / text:
— Changes the color to anything you'd like if you write a basic name (think ROYGBIV) or insert a #HEXCODE
— Italicizes your text like this
— Bolds your text like this
— Underlines your text like this
— Strikesthrough your text (AKA draws a line through your text) like this
— Changes the size of your font like this or this
— Changes the font of your text like this as long as it's on Google Fonts
— Changes the alignment

of your text​

but do note​

left is the default— Quotes text like

this

— Hide text like

Spoiler

this

OR this with the capital I
— Hyperlinks your text to some URL like this

Now for the basic skeleton of CSS injection. Everything starts with either:

[border][/border] OR [bg][/bg]

The only difference between the two is the following text you'll use. With the 'border' tag, you will write how thick the border will be, the style of it, and what color it'll be. For the possible styles of borders, refer to this article here. The 'bg' tag simply requires a color which can be a ROYGBIV name or a hexcode:

[border=#px style color][/border] OR [bg=color][/bg]

Note: 0 / none, and transparent are also all valid entries but have differing effects. We will go over them later.

Following the creation of your box (boxes are the default shape but we will go over more later on), you must always address the following parameters:
— height: #px; how long the box is
— width: #px; how wide the box is
— padding: #px; in simplest terms, how pushed inwards towards the center the text of your box is

Some other functions you must address if there is text are:
— color: #HEXCODE; the color your text will be if you intend to write in the box
— line-height: #px; the distance between lines of text (but this can affect the spacing of your code in a negative way if used at the wrong place!!)
— font-size: #px; how large or small the text is (the default is 15 or 16px)
— font-family: 'Name' OR "Name Here"; the font style or it will default to this site's default (this only works for really basic ones like "Times New Roman" or 'Verdana')

The default unit we are using for now is pixels (px) because they are the simplest.
If you used the 'border' tag but want a background, don't forget to add:
— background: #HEXCODE; this fills the box with color (gradients and images will be addressed later on)

If you used the 'bg' tag but want a border too, don't forget to add:
— border: #px style #HEXCODE; this gives the entire box a border. Some sub-types of this are border-top, border-left, border-bottom, and border-right

Now that you know the basics, go forth and make simple codes!

If you want to get ahead, the best way is to look up CSS commands (W3Schools is my lover at this point) and deconstruct other codes! Also, a huge tip is to turn on BBCode mode (the [ ] on the top right next to Preview!) It preserves spacing unlike writing mode.

#getting_started

#the_basics

#BBCode_skeleton

 

[xayah.]

Inspo pt. 1 ?!

faq.chat

no one asked but...

Where do you get inspiration?

anyways...

I'm actually pretty smooth brained when it comes to designing codes, and I mention it a lot in my freebie thread! Designing blocks are a huge pain in the-, but it's not hard to find inspiration! The real struggle is making that a design. For me at least.

Some things you can do to get inspiration are:
— scroll through rp tumblr themes or tumblr themes in general (this doesn't mean copy color for color, line for line but maybe one panel of a theme is enough to inspire a whole code for you)
— find aesthetics you want to encapsulate on pinterest or the internet
— think of what kind of code you'd like to make and if for a specific rp, what're the vibes of said rp?
— play around on canva or some other program where you can make a code mockup
— ask friends if they have any codes they'd like and offer to code them
— play around with color palettes
— look around at other freebies (again, don't copy!)
— think of a specific feature you'd like to practice (mobile-friendliness, scrolls, tabs) and create a new code that challenges you based on that

But remember. If you do find inspiration from another person's creation, it would be nice (and somewhat expected!) of you to link or at the very least mention it. BBCode may be Creative Commons but please respect others' intellectual property!

#inspiration

#the_code_equivalent_of_writer's_block

 

[xayah.]

Colored Links !

faq.chat

no one asked but...

How do I change the color of my links?

anyways...

So this is finally a short one! When you link something using the 'url' tag, the text automatically turns blue like this but sometimes, that color is a little too ugly out of place! Let's fix that like this! (Hover or click on the this!)

Crazy, right? It's quite simple.

[url='LINK HERE'][color=#HEXCODE] TEXT HERE [/color][/url]

See how the 'color' tag is inside the 'url' tag? That's very important. Have them outside of it, and you might end up with a 'color' tag that doesn't show up but also didn't do anything to change the color like this:
example!

I swear I put a 'color' tag but because it was in the wrong position / order (see the incorrect code below!) , it didn't take effect.

[color=#000000][url='https://youtu.be/_WZCvQ5J3pk']example![/url][/color]

#coloring_links

#the_importance_of_position_and_order

 

[xayah.]

Images !

faq.chat

no one asked but...

How do I customize images in a code?

anyways...

Buckle up. This one is gonna be a bit longer than normal. I'll be going over both how to create images and how to edit their positioning, size, etc.

To be technical, images are actually backgrounds in CSS. To create an image in your code, you'll use the following code below:

background: url('URL HERE');

This is the most basic form. Note that when copying an image url, this command generally only works with files that have an ending like .jpg, .png, or .gif, not 1XJLSG=39JLGSJ (actual unfortunate image urls I have copied before).

The background command is one of the most common lines you will see across freebies on this site. It's the only way to get images to appear without [ IMG ] and far more versatile. But, sometimes you'll see coders tell you to change the positioning of pictures! How does that work?
This falls under a sub-type command for background called background-position. Background-position works by using two values: X & Y (although it can be shortened to one value only). You use two values when you know the vertical placement (Y) will be different from the horizontal placement (X). These values will be in percentages. X moves from 0% to 100% in a left to right motion, and Y moves from 0% to 100% in a top to bottom motion.
If X and Y are coincidentally the same value, feel free to simply put only one percentage instead of two of the same, and the code will respond accordingly. Otherwise, you could make things even simpler and just do left, right, or center.

Background-position isn't the only sub-type however. In CSS, the background command has EIGHT different sub-types! For the purpose of going over beginner customization and creation of images, I'll be going over four of them. I've already covered two: background-image (which we shortened to background earlier - this is important!!) and background-position. The remaining two are background-repeat and background-size.

Background-repeat is exactly what it sounds like. It controls if and how a background image will repeat if the image is too small to fully cover the box. Images that don't fit the box will repeat along both the x and y axes (meaning horizontally and vertically). There are six valid inputs you can use to alter how and if an image repeats.
— background-repeat: repeat; this is the automatic option, and you don't need to write this into your code if repeat is the effect you're going for. images may be cut awkwardly however in order to fill the box.
— background-repeat: repeat-x; pictures only repeat in the horizontal direction
— background-repeat: repeat-y; pictures only repeat in the vertical direction
— background-repeat: no-repeat; the picture won't repeat even if it doesn't fill up the entire box
— background-repeat: space; the images are pushed to the corners of your box, leaving a cross-shaped area of empty space.
— background-repeat: space-repeat; the images repeat and are pushed to the left and right side, leaving a vertical line of empty space in the middle
— background-repeat: round; the images are scaled to fit (meaning the picture is stretched to fit the area instead of clipped to fit like in repeat)

Finally, there's background-size. Background-size works in a similar way to background-position only this time we're adjusting the size, not the area we see. It can also solve the problem of an image being too small, and this is how.
With background size, you can input units (like px aka pixels), percentages (%), or even simple commands. The most commonly used input is a simple command called 'cover'.
— background-size: cover; this scales the image to the smallest possible size while preserving the ratio between height and width. If the image's height:width ratio is different from your container's height:width ratio, the picture will be cropped either horizontally or vertically so use background-position to fix this!
The other inputs possible look like this:
— background-size: 150%; this causes the image to grow to 150% of it's original size
— background-size: 200px 300px; the image's height and width are now 300px and 200px, respectively.

But typing all of these out every. single. time. can be so tiring and really wear on you while coding, so let me introduce shorthand! To condense all these sub-types together into one convenient code, you'll use:
— background: [background-image] [background-position]/[background-size] [background-repeat]; the spacing must be the same as this, and the '/' is on purpose!

For example, if I wanted to focus on the center of an image that was 80% of its normal size and repeated only horizontally, I would write:
— background: url('URL HERE') center/80% repeat-x;

Now that you know how to create and edit images, go forth and edit your faceclaims and aesthetics so that I can actually see them on your codes!

#images

#backgrounds

#background_size

#background_position

#background_repeat