Feel inspired? Check out our Summer Workshops!

Author Topic: Resources for Graphics and Coding  (Read 3087 times)

* The Narrator

    (03/27/2015 at 01:02)
  • *
    • View Profile
c o d i n g   c h e a t   s h e e t .
g e n e r a l   r u l e s   f o r   d i v   -   c o d e s.

Div-coding is coding with content-containers (most plot pages consist of these). Before we start coding, there are a couple of things you need to know.
  • There is a certain format you will always work with, basically the skeleton of all codes. This is the following format:
Code: [Select]
[div style=";"][/div]
  • You add so-called properties to the code to define your box's characteristics. You will give those properties a position within the code like so:
Code: [Select]
[div style="width:300px; height:200px;"][/div]
  • You will wrap up all distinctive properties by a ; If you don't do this, your code won't work. You can take a look in the code-box above to see how the ; is meant to separate properties.

Under the line, you will find a list with properties. I personally love to add those properties in this sequence just so that I know I will not forget any important properties.

Also, remember! The easiest way to learn to code is to play around with it.



l i s t   o f   b a s i c   d i v   -   p r o p e r t i e s .
width:
what does it do: the breadth of your box. To be specified using any number followed directly by the post-fix px.

e.g.: width:300px;

note: The maximum breadth of the Hogwarts forums' topics is 450px, your box might become wonky if you exceed this number.
height:
what does it do: the height of your box. To be specified using any number followed directly by the post-fix px.

e.g.: height:300px;
background-color:
what does it do: The background-color to your box. To be specified using a # followed by a hex-colorcode. You can find a list of those here.
e.g.: background-color:#306EFF;
background-image:url('')
what does it do: Don't you want one solid color as your background, but a picture instead? Use this property.

e.g.: background-image:url('http://i.imgur.com/hIxYu77.jpg');

NOTES: First, ensure that you've uploaded the picture yourself (using a hosting site such as imgur) otherwise it could be deleted and disappear forever. Second, for this feature to work best, make sure that your picture has the same size as the div-property of which you want it to be the background.
border:
what does it do: The border to your box. To be specified threefold:
  • Any number followed directly by the post-fix px. This will specify the breadth to your border.
  • A hex-colorcode to specify the color of your border. You can find a list of those here.
  • The style of your border. You can choose between: solid; double; dotted; dashed.
e.g.: border:1px solid #306EFF;

notes (1): If you wish for a border on just one side of the box or every border a different style, you need to specify all borders separately:
  • If you only want to add or change the border to the top, you use the code border-top:
  • If you only want to add or change the border to the right, you use the code border-right:
  • If you only want to add or change the border to the left, you use the code border-left:
  • If you only want to add or change the border to the bottom, you use the code border-bottom:
notes (2): The style double requires a breadth of 3px.
padding:
what does it do: Specifies the distance between the border of the box and the box's content(s) (e.g. text, pictures). To be specified using any number followed directly by the post-fix px.

e.g.: padding:10px;

notes: If you wish for a different padding values across your div, you need to specify all paddings separately:
  • If you only want to add or change the padding to the top, you use the code padding-top:
  • If you only want to add or change the padding to the right, you use the code padding-right:
  • If you only want to add or change the padding to the left, you use the code padding-left:
  • If you only want to add or change the padding to the bottom, you use the code padding-bottom:

e.g.: without padding:

(:

e.g.: with padding:

(:

margin:
what does it do: Specifies the distance between the border of a specific box and other boxes or content. It specifies external distance to other elements, where padding meddles into internal distance to other elements within one box. To be specified using any number followed directly by the post-fix px.

e.g.: margin:10px;

notes: If you wish for a different margin values for your div, you need to specify all margins separately:
  • If you only want to add or change the margin to the top, you use the code margin-top:
  • If you only want to add or change the margin to the right, you use the code margin-right:
  • If you only want to add or change the margin to the left, you use the code margin-left:
  • If you only want to add or change the margin to the bottom, you use the code margin-bottom:
« Last Edit: 08/27/2018 at 20:12 by Cladis Perses Gallion »

* The Narrator

    (03/27/2015 at 01:02)
  • *
    • View Profile
u s a b l e   b o a r d   f o n t s .

Hey all!
These are the fonts that I've installed on the boards. To call any of them, simply use the code below. These can be used in plot pages, journals, etc - whatever suits your fancy. : )

PLEASE NOTE: You should not attempt to add bold or italics to these fonts. They won't work well. Thanks!





archer.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=archer]

bebas.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=bebas]

blanch.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=blanch]
callie

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=callie]

channel.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=channel]
dancingscript.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=dancingscript]
eightfifteen.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=eightfifteen]
elsie swash caps.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=Elsie Swash Caps]
goudybookletter.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=goudybookletter]
grand hotel.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=Grand Hotel]
governor.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=governor]
hamburgerheaven.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=hamburgerheaven]
homestead.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=homestead]
lavanderia.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=lavanderia]

neou.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=neou]
ostrichsans.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=ostrichsans]
peacathi.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=peacathi]
rochester.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()-

Code: [Select]
[font=Rochester]
windsong.

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()-


Code: [Select]
[font=windsong]


g o o g l e   f o n t s   i n t e g r a t i o n .

Note: Please please please (for the love of Rowling) use this sparingly. Yes it's cool. Yes you have a ton of fonts at your disposal. But the more fonts you try and load to the page, the slower it will be, and the more it will tax our servers. Do not use more than one per thread (if you use more than one, it will cancel any others out), in addition to the list of fonts above. Also, do not use them in signatures.

To use, simply go to Google Fonts, find a font you want to use, and type the name into the BBCode exactly as it appears on the Google Fonts site. For example, I want to use Lobster Two. I would simply type the following bbcode:

Code: [Select]
[size=24px][gfont=Lobster Two]This is the font I want.[/gfont][/size]

To get this:

This is the font I want.

Also note, it won't work if you try to call a google font from the "style" attribute in a span or div bbcode. It has to be the gfont bbcode.

Again, do not use more than one, tops, per thread. Do not use any in signatures. If I see this, I will edit the extra fonts out. Then I will come to your inbox and throw panda plushies at you.
« Last Edit: 02/19/2018 at 21:00 by Cladis Perses Gallion »

* The Narrator

    (03/27/2015 at 01:02)
  • *
    • View Profile

▲ aliceblue.
▲ antiquewhite.
▲ aqua.
▲ aquamarine.
▲ azure.
▲ beige.
▲ bisque.
▲ black.
▲ blue.
▲ blueviolet.
▲ brown.
▲ burlywood.
▲ cadetblue.
▲ chartreuse.
▲ chocolate.
▲ coral.
▲ cornflowerblue.
▲ cornsilk.
▲ crimson.
▲ cyan.
▲ darkblue.
▲ darkgrey.
▲ darkgreen.
▲ darkkhaki.
▲ darkmagenta.
▲ darkcyan.
▲ darkorchid.
▲ darkred.
▲ darksalmon.
▲ darkseagreen.
▲ darkslateblue.
▲ darkslategray.
▲ darkturquoise.
▲ darkviolet.
▲ deeppink.




* Cladis Perses Gallion

    (02/19/2018 at 18:27)
  • ****
  • Divination Professor
  • C25D30T18S23
  • [Winner!] HSNet 30-Day Challenge
    • View Profile
c o d i n g   c h e a t   s h e e t .
g e n e r a l   r u l e s   f o r   s p a n   -   c o d e s.

Span-coding is the design of simple text. Before we start coding, there are a couple of things you need to know.
  • There is a certain format you will always work with, basically the skeleton of all span-codes. This is the following format:
Code: [Select]
[span style=";"][/span]
  • You add so-called properties to the code to define your text's characteristics. You will give those properties a position within the code like so:
Code: [Select]
[span style="font-family:georgia; font-size:20px;"][/span]
  • You will wrap up all distinctive properties by a ; If you don't do this, your code won't work. You can take a look in the code-box above to see how the ; is meant to separate properties.

Under the line, you will find a list with properties. I personally love to add those properties in this sequence just so that I know I will not forget any important properties.

Also, remember! The easiest way to learn to code is to play around with it.



l i s t   o f   b a s i c   s p a n   -   p r o p e r t i e s .
font-family:
what does it do: Determines the font/text style of your text.

e.g.: font-family:georgia;

note: Make sure this is always a font that is loaded onto the site. These can found here.
font-size:
what does it do: Determines the size of your text. To be specified using any number followed directly by the post-fix px.

e.g.: font-size:30px;
color:
what does it do: Determines the color of your text. To be specified using a # followed by a hex-colorcode. You can find a list of those here.
e.g.: color:#306EFF;
line-height:
what does it do: Determines the distance between the individual lines of your text. To be specified using any number followed directly by the post-fix px.

e.g.: line-height:10px;

NOTES: If your line-height value is bigger than your font-size value, your lines will be well apart. Do you want your text to overlap? Make sure your line-height value is smaller than your font-size value.
text-transform:
what does it do: Determines whether your text is either all small or all capitals.

e.g.1: text-transform:uppercase;
= GIVES ONLY CAPITALS FOR YOUR TEXT.


e.g.2: text-transform:lowercase;
= gives only smalls for your text.
letter-spacing:
what does it do: Specifies the distance singular letters of your text. To be specified using any number followed directly by the post-fix px.

e.g.: letter-spacing:10px;
=
so much space!
text-align:
what does it do: Specifies how your text is aligned. Can exist in either center, left, right or justify.

e.g.: text-align:justify;
Cute symbolswhat does it do: Fun things to spice up your text.

Quote
⚜ ⚔ ϟ ☂ ➳ ✪ ✥ ✬ ✯ ❄ ❉ ∆ » « ¡ ™ ‹ › ∞ § ‡ ° • · º ® †  ‘ ˚  ◊ ∫ ı ı ˜

Find more here.
« Last Edit: 02/20/2018 at 08:05 by Cladis Perses Gallion »
rage rage

AGAINST THE DYING OF THE LIGHT

* Cladis Perses Gallion

    (02/19/2018 at 18:28)
  • ****
  • Divination Professor
  • C25D30T18S23
  • [Winner!] HSNet 30-Day Challenge
    • View Profile
f o n t   a w e s o m e .

Font awesome is an icon font which can be used in posts via the span tag and specific class designations.


Code: [Select]
[span class="fa fa-puzzle-piece"]

Code: [Select]
[span class="fa fa-camera-retro fa-3x"]

The list of icons and their class designations can be found here.
Examples of different effects can be found here.
victim of introspection

IS THERE NO WAY OUT OF THE MIND?

Tags: