Tutorial A Comprehensive Guide to Customization

[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