|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 4, 2018 13:14:38 GMT -5
Character Names - -
- Insert Name
- Insert Name
- Insert Name
[/ul][/font][/font] Character Forms - - [ Name ] age ; gender ; rank { one line description of your character ; hair color, eye color, height } screennameCharacter Templates - - [ Insert Template here }[/font][/div]
|
|
|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 4, 2018 13:16:10 GMT -5
prophet i changed my colors up, but it worked!
|
|
|
Post by Arrow↠Deirdre on Sept 4, 2018 13:34:48 GMT -5
prophet Woops Alright, so I changed the size from a web banner to nearly a leaderboard
|
|
|
Post by prophet on Sept 4, 2018 13:40:53 GMT -5
ʙᴜᴍʙʟᴇʙᴇᴇ » Nice, that's a lot better~
This is what you did:
[div style="background:#ade1eb;"][font style="color:#d8f4f6;"]Character Names - -
[font color="fff2d8"][font size="1"][ul type="disc"] [li]Insert Name[/li] [li]Insert Name[/li] [li]Insert Name[/li] [ul][/ul][/ul][/font][/font]
Character Forms - -
[font color="fccdd3"][font size="1"][ Name ] [i]age ; gender ; rank[/i] { one line description of your character ; hair color, eye color, height } [i]screenname[/i][/font][/font]
Character Templates - -
[font color="fff2d8"][font size="1"][ Insert Template here }[/font][/font][/font][/div] Now I'd like you to work on adding "style," and I don't mean the aesthetic kind. Style is used to make your coding concise and clean. This is how you add "style" to your code: (I made the background black because it was kinda hurting my eyes, that's something to remember when choosing a color; can you change the background to a darker blue or at least make the text darker?)
[div style="background:#000000;"][font style="color:#d8f4f6;" size="3"]Character Names - -[/font]
[font style="color:#d8f4f6;" size"1"][ul type="disc"] [li]Insert Name[/li] [li]Insert Name[/li] [li]Insert Name[/li] [ul][/ul][/ul][/font]
[font style="color:#d8f4f6;" size="3"]Character Forms - -[/font]
[font style="color:#d8f4f6;" size="1"][ Name ] [i]age ; gender ; rank[/i] { one line description of your character ; hair color, eye color, height } [i]screenname[/i][/font]
[font style="color:#d8f4f6;" size="3"]Character Templates - -[/font]
[font style="color:#d8f4f6;" size="1"][ Insert Template here }[/font][/div]
Character Names - -- Insert Name
- Insert Name
- Insert Name
Character Forms - -[ Name ] age ; gender ; rank { one line description of your character ; hair color, eye color, height } screennameCharacter Templates - -[ Insert Template here }
|
|
|
Post by prophet on Sept 4, 2018 13:58:28 GMT -5
Arrow↠Deirdre Better, but what if you're making a banner for someone else?
Requester might say: "I'd like to be able to see the whole gif. Can you make it thinner as well?"
[div align="center"][div style="background-image:url(https://media.giphy.com/media/Sb9XUx3OOl4GreIHT3/giphy.gif);height:90;width:650px;padding-top:20px;padding-bottom:20px;border-radius:10px;border:7px dashed #000000;"][font face="Bungee Hairline" style="color:#484141;"]Banner [/font] [font color="#fffff" size="12pt" face="Dawning of a New Day"]An example[/font][/div][/div]
So you fix it to make the size better. I'd like you to now try creating a fanfic type layout that matches this banner. Rules: 1) No toolbar! Only hex colors and original coding is allowed. This will be a given from now on. 2) The colors must match the banner, meaning that they have to look good (not necessarily the same colors; use your own judgement for this) 3) The layout must be able to fit into one post while still looking clean and readable 4) Headers: Intro, Summary, Fans, Rules, Reviews, Chapters, Extras; you have the freedom to change the font and colors how you see fit, but keep them in that order. Use lorem ipsum for fill-in text 5) Ask questions if you get stuck~
[div align="center"][div style="background-image:url(https://media.giphy.com/media/Sb9XUx3OOl4GreIHT3/giphy.gif);height:100px;width:400px;padding-top:20px;padding-bottom:20px;border-radius:10px;border:7px dashed #000000;"][font style="color:#484141;" face="Bungee Hairline" size="7"]Banner [/font] [font color="#fffff" face="Dawning of a New Day" size="1"]An example[/font][/div][/div]
|
|
Pansexual
Sparkly
Unofficial Forum President, and the unofficial patrol saint of black cats with blue eyes.
|
Post by Sparkly on Sept 4, 2018 14:31:27 GMT -5
prophet Okay, I think I've figured it out. [font color="00000"Boop [/font color][/div] Edit: This is harder than I imagined.
|
|
|
Post by prophet on Sept 4, 2018 14:38:44 GMT -5
Sparkly It's okay! Don't stress out! Copy and paste this:
[font color="#000000"][font size="4"]Heading[/font] [font size="2"]Paragraph[/font][/font]
Heading Paragraph
Does it make more sense now? Now I'd like you to go to color-hex and choose any two color from there. Next, use those colors to change the color of the "heading" and the "paragraph"
|
|
|
|
Post by prophet on Sept 4, 2018 14:44:31 GMT -5
Sparkly Ok, so now I want you to start creating cleaner code. This will help you in the long run!
You did this:
[font color="#118a24"][font size="4"]Heading[/font][/font] [font color="#ff00c2"][font size="2"]Paragraph[/font][/font]
I'd like you to try this (I did the first part, but you'll finish it):
[font color="#118a24" size="4"]Heading[/font]
Heading
|
|
|
|
Post by prophet on Sept 4, 2018 14:54:28 GMT -5
Sparkly Great! Do you have any questions so far?
Next, I'd like you to try a div, which means division. It's how we coders make layouts. Example:
[div style="background:#000000;height:20px;width:300px][div align="center"]example[/div][/div]
I'd like you to try a div. Don't use my coding, I'd like you to try it yourself. Don't worry about anything but the background for now; choose any color you'd like from the color-hex website. I'd like you to label it "example"
|
|
Pansexual
Sparkly
Unofficial Forum President, and the unofficial patrol saint of black cats with blue eyes.
|
Post by Sparkly on Sept 4, 2018 15:00:35 GMT -5
|
|
|
Post by prophet on Sept 4, 2018 15:12:24 GMT -5
Sparkly Well, I asked you to just do the background for now. It looks like you copied what I did.
[div style="background:#118a24;height:20px;width:300px;"][div align="center"]Example[/div][/div]
versus what I expected from you. I would prefer you to try it yourself :3
[div style="background:#118a24;"]Example[/div]
Example
Now I'd like you to change the example's font and color, it doesn't matter which ones you choose. The color has to be a hex code though.
|
|
Pansexual
Sparkly
Unofficial Forum President, and the unofficial patrol saint of black cats with blue eyes.
|
Post by Sparkly on Sept 4, 2018 15:31:42 GMT -5
|
|
|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 4, 2018 16:01:48 GMT -5
prophet alright i used a different palette this time! Character Names - -- Insert Name
- Insert Name
- Insert Name
Character Forms - -[ Name ] age ; gender ; rank { one line description of your character ; hair color, eye color, height } screennameCharacter Templates - -[ Insert Template here ]
|
|
|
Post by prophet on Sept 4, 2018 16:21:24 GMT -5
Sparkly Fonts from Microsoft and stuff won't work on the forums. I'd like you to try again using a forum font. This is what I'll mean by font from now on. Here's an example. Choose a new font, put it where "times new roman" is. But I don't want you to copy and paste my code. Use mine to help you, but make sure you put it into what we were already working on
[font face="times new roman"]example[/font]
|
|
|
Post by prophet on Sept 4, 2018 16:30:52 GMT -5
ʙᴜᴍʙʟᴇʙᴇᴇ » Much better, thanks! And I like the added touches :3
Now I'd like you to try playing around with the padding. What is padding? It's basically the space between the border and the text. Here's an example
[div style="background:#000000;padding:100px;height:20px;width:200px;"][b]example[/b][/div] Notice how I didn't do anything to the text yet. That's what padding does.
example
I want you to try it with what you already have. Go ahead and try different numbers too! I recommend 1-100 (remember that it's always measured in pixels, aka px)
|
|
|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 4, 2018 16:49:44 GMT -5
Character Names - -- Insert Name
- Insert Name
- Insert Name
Character Forms - -[ Name ] age ; gender ; rank { one line description of your character ; hair color, eye color, height } screennameCharacter Templates - -[ Insert Template here ]
|
|
|
Post by prophet on Sept 4, 2018 17:23:49 GMT -5
ʙᴜᴍʙʟᴇʙᴇᴇ » Awesome! Good job! I was hoping you'd use a different number, though, but it's ok!
From now on, you'll be taking out the "margin" and use "padding" instead. You can specify (just like you did with margin) what side of the box you want to focus on.
[div align="center"][div style="width:60%;border-width:5px;border-color:rgb(0, 0, 0);border-radius:0px;padding:20px;"][div align="justify"][font color="#000000"][font face="trebuchet ms" size="1"]example[/font][/font][/div][/div][/div]
Next, I want you to try playing around with the box. First, I'll tell you about border radius. It effects the border, and you can make it more circular or square. I'd like you to use it on what you have. Play with the numbers a bit. 1-100px
[div style="background:#000000;border-radius:800px;width:300px;height:150px;padding:50px;"][/div]
|
|
|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 4, 2018 17:33:33 GMT -5
|
|
|
Post by prophet on Sept 4, 2018 17:40:47 GMT -5
ʙᴜᴍʙʟᴇʙᴇᴇ » I meant to edit the coding from before >.< I'm sorry, I'm not making myself clear apparently xD
I'd like you to use the coding we've been working on until now and add border-radius to it. Use 1-50px for the size. Add a double border, size 3pt, color #000000
|
|
|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 4, 2018 17:42:17 GMT -5
ohhh, i'm misunderstanding, i'm sorry >.< i'll get on that!
|
|
|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 4, 2018 17:58:40 GMT -5
prophet here's the coding we've been using! did it turn out right? Character Names - -- Insert Name
- Insert Name
- Insert Name
Character Forms - -[ Name ] age ; gender ; rank { one line description of your character ; hair color, eye color, height } screennameCharacter Templates - -[ Insert Template here ]
|
|
|
Post by prophet on Sept 4, 2018 18:08:44 GMT -5
ʙᴜᴍʙʟᴇʙᴇᴇ » I'll try to make myself clearer xD
Yes, it turned out perfectly! Now, I'd like you to change the height and width to 300x500 I'd also like you center the headings only And make sure all the text is the same color Let me know if you have questions~
|
|
|
|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 5, 2018 13:01:56 GMT -5
prophet how would i go about getting the text to fit into the box even at a fixed size? Character Names - - - Insert Name
- Insert Name
- Insert Name
Character Forms - - [ Name ] age ; gender ; rank { one line description of your character ; hair color, eye color, height } screennameCharacter Templates - - [ Insert Template here ]
|
|
|
Post by ʙᴜᴍʙʟᴇʙᴇᴇ » on Sept 5, 2018 13:14:04 GMT -5
just now realizing that the text didn't fit in the box when i was getting ready to post, but it does now... wtf
|
|
|
Post by prophet on Sept 5, 2018 19:32:55 GMT -5
Sparkly Yes, those are the forum fonts. I want you to type the code out from scratch, choosing one of the forum fonts of your choice. Does that make sense?
|
|
|
Post by prophet on Sept 5, 2018 19:40:49 GMT -5
ʙᴜᴍʙʟᴇʙᴇᴇ » That was the next phase xD
So this was your coding, which doesn't allow the text to stay within the content:
[div style="background:#b40036;border-radius:45px;padding:50px;border:3px double #000000;height:300px;width:500px;"][div align="center"][font face="Cinzel" size="3;" style="color:#19191a;"]Character Names - -[/font][/div]
[font face="Arial" style="color:#3e0123;" size="1;"][ul type="disc"] [li]Insert Name[/li] [li]Insert Name[/li] [li]Insert Name[/li] [/ul][/font]
[div align="center"][font face="Cinzel" style="color:#19191a;" size="3;"]Character Forms - -[/font][/div]
[font face="Arial" style="color:#ede3de;" size="1;"][ Name ] [i]age ; gender ; rank[/i] { one line description of your character ; hair color, eye color, height } [i]screenname[/i][/font]
[div align="center"][font style="color:#19191a;" size="3;" face="Cinzel"]Character Templates - -[/font][/div]
[font face="Arial" style="color:#3e0123;" size="1;"][ Insert Template here ][/font][/div]
[/font]
The way you keep the text in is "overflow." You've probably seen posts with mini scrollbars; overflow does that. While we're at it, I'd like you to go bookmark this lorem ipsum generator site, though I personally prefer cat ipsum because I love cats xD
[div style="background:#000000;overflow:auto;border-radius:5px;padding:50px;height:50px;width:500px;"][div align="center"][font face="crimson text" size="3;" style="color:#ffffff;"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare lorem et quam commodo suscipit sit amet sed mauris. Morbi lobortis fermentum augue, sit amet tempor turpis congue eu. Maecenas et varius sem. Nulla dapibus id nisl id hendrerit. Praesent metus nibh, aliquam quis nunc sit amet, semper dignissim nulla. Nulla at sapien tincidunt, scelerisque nisi eu, sagittis neque. Mauris convallis magna lacus, in ultricies erat fermentum vel. Quisque eget felis in dolor feugiat pellentesque. Curabitur pellentesque sem vel tellus dapibus pharetra. Aenean sit amet porta urna. Curabitur sed consectetur est, a consectetur magna. Pellentesque in rhoncus enim, in eleifend elit. Duis pellentesque laoreet lacus, vitae luctus odio iaculis a. Sed a condimentum erat, sit amet ornare ligula. Aenean commodo elit vitae neque consequat, ut aliquet nisl molestie. Morbi fermentum tortor lacus, vitae egestas ante tincidunt ac.
Nam eu nibh commodo, aliquet neque at, fermentum enim. Curabitur pharetra, dui sed venenatis vestibulum, neque ipsum finibus eros, vel mattis dui nisi eu quam. Quisque a dolor lacus. Duis eget pretium sem. Donec a purus arcu. Phasellus vitae fringilla lorem. Suspendisse vitae interdum orci. Suspendisse sit amet dui tortor. Nunc lobortis finibus sagittis. Pellentesque at sodales nisl.
Duis non malesuada eros. Donec non orci finibus, commodo dolor nec, malesuada risus. Integer et nunc rutrum justo rhoncus efficitur. Aenean varius ut purus nec pharetra. Praesent mollis felis dapibus, volutpat libero et, aliquam sem. Nullam convallis molestie mattis. Curabitur at ornare nulla. Nam condimentum, odio ut elementum hendrerit, nisl nulla feugiat felis, ut commodo nunc ante a magna. Fusce lacinia tempus hendrerit. Mauris massa purus, facilisis ac urna ut, porta placerat sapien. In augue felis, blandit in tellus auctor, mollis condimentum neque. Donec non diam bibendum, viverra lacus non, vestibulum tellus. Donec vel lectus eu sem consequat luctus. Etiam finibus erat vitae ullamcorper dictum. Quisque nec ipsum quam. [/font][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare lorem et quam commodo suscipit sit amet sed mauris. Morbi lobortis fermentum augue, sit amet tempor turpis congue eu. Maecenas et varius sem. Nulla dapibus id nisl id hendrerit. Praesent metus nibh, aliquam quis nunc sit amet, semper dignissim nulla. Nulla at sapien tincidunt, scelerisque nisi eu, sagittis neque. Mauris convallis magna lacus, in ultricies erat fermentum vel. Quisque eget felis in dolor feugiat pellentesque. Curabitur pellentesque sem vel tellus dapibus pharetra. Aenean sit amet porta urna. Curabitur sed consectetur est, a consectetur magna. Pellentesque in rhoncus enim, in eleifend elit. Duis pellentesque laoreet lacus, vitae luctus odio iaculis a. Sed a condimentum erat, sit amet ornare ligula. Aenean commodo elit vitae neque consequat, ut aliquet nisl molestie. Morbi fermentum tortor lacus, vitae egestas ante tincidunt ac.
Nam eu nibh commodo, aliquet neque at, fermentum enim. Curabitur pharetra, dui sed venenatis vestibulum, neque ipsum finibus eros, vel mattis dui nisi eu quam. Quisque a dolor lacus. Duis eget pretium sem. Donec a purus arcu. Phasellus vitae fringilla lorem. Suspendisse vitae interdum orci. Suspendisse sit amet dui tortor. Nunc lobortis finibus sagittis. Pellentesque at sodales nisl.
Duis non malesuada eros. Donec non orci finibus, commodo dolor nec, malesuada risus. Integer et nunc rutrum justo rhoncus efficitur. Aenean varius ut purus nec pharetra. Praesent mollis felis dapibus, volutpat libero et, aliquam sem. Nullam convallis molestie mattis. Curabitur at ornare nulla. Nam condimentum, odio ut elementum hendrerit, nisl nulla feugiat felis, ut commodo nunc ante a magna. Fusce lacinia tempus hendrerit. Mauris massa purus, facilisis ac urna ut, porta placerat sapien. In augue felis, blandit in tellus auctor, mollis condimentum neque. Donec non diam bibendum, viverra lacus non, vestibulum tellus. Donec vel lectus eu sem consequat luctus. Etiam finibus erat vitae ullamcorper dictum. Quisque nec ipsum quam.
|
|
|