@ScottBrooks As an Oklahoma City resident and Thunder fan I just want to say what a fantastic job you do for our basketball team! Kevin Durant and Russell Westbrook must be awesome to coach.
note: This was done in jest to practice the spoiler format and I realize you are probably not the head coach of the OKC Thunder NBA team. If you are can you get me KD's autograph?
*Anduin wearily approaches the Broccoflower, containing the life essence of the deceased Lord @Shandyr and uses a pair of tongs to pick it up and place in his backpack...*
I have found two... Only eight remain. AND I WILL FIND THEM ALL!
Looks perfect, though the glow is not incredibly visible. You should also note that these effects are not compatible with Internet Explorer 9 or earlier (and I'm not even sure about IE10).
You can also combine the glow with the font colour:
EDIT: Apparently it's not possible to quote from other threads without losing the quotation, so I had to adapt the text.
As a reply to your topic here, you can quote anyone by using the same tags. Just remember what goes where when formatting.
Example: <blockquote class="Quote" rel="Username">Stuff</blockquote> On this site, the blockquote tag consists of a class for the styling (make sure to capitalise the word 'Quote') and an attribute called 'rel='. Rel, which is short for relationship in content, is for the username of the person you are quoting.
Everything else fits in between the two div tags. Note that this has an affect on text only, so it is for the arrows rather than anything else.
Next, the items themselves. Now, I don't tend to worry about readibility because I know where everything goes, but for readibility I have broken it up below.
<div style="margin:0 auto;
width:450px;
text-align:justify;
background: rgb(0,89,148);
background: -moz-linear-gradient(top, rgb(0,89,148) 0%, rgb(0,7,43) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,89,148)), color-stop(100%,rgb(0,7,43)));
background: -webkit-linear-gradient(top, rgb(0,89,148) 0%,rgb(0,7,43) 100%);
background: -o-linear-gradient(top, rgb(0,89,148) 0%,rgb(0,7,43) 100%);
background: -ms-linear-gradient(top, rgb(0,89,148) 0%,rgb(0,7,43) 100%);
background: linear-gradient(to bottom, rgb(0,89,148) 0%,rgb(0,7,43) 100%);
border-radius:10px;
padding:10px;
border:2px solid rgb(0,89,148);">
Presentation item 1.
</div> Margin is set to 0 and auto, this makes sure that the div is centred.
Width. This is the width of the element in px. You can use any of the unit names here (em, px, %, ex, pt, cm, mm, in, pc), but 'px' is most common (and recommended) when sizing for screens.
Text-align is exactly what you would expect it to be, like above, the alignment of the text. Depending on the length of the text within the div element, centring that might be better. I had it as justified in the other topic because of the amount of text. One liners are better when centred. Since we already used 'text-align:center' for the very first div element, each item within that inherits that style, I could simply remove the 'justified' value rather than needing to centre each item individually.
Background. Now, this is where it gets interesting because you will notice there are more multiple variations. This is purely for browser compatibility. A basic colour is given in the case of browsers that do not support the linear-gradient style at the top and then each browser has its own prefix. -moz- for Firefox, -o- for Opera, two -webkits- which apply to Chrome and Safari, -ms- for Microsoft Internet Explorer, and finally there is one with no prefix. The one lacking a prefix is for browsers that can use it without needing a prefix; for example, modern versions of Firefox automatically interpret this and change it as required. Colours can be RGB (red, green, blue), RGBA (red, green, blue, alpha(transparency)), HSL (hue, saturation, lightness), HSLA (hue, saturation, lightness, alpha), or plain old hexadecimal. I tend to use RGB or RGBA these days for most things.
The border-radius style determines how rounded the corners will appear. Note that every item in HTML is based on a rectangle (or square, four corners with each being 90 degrees). Depending on the size of the item in question, you can even make it look round.
However, when rounding the corners of an element, text can then be clipped.
This is some text.
Notice that the word 'This' overhangs the border. This is where padding comes in. Padding is used when necessary to pad the inside of an element. Note that padding is note the same as a margin, margin is the outside of the element while padding is the inside. Padding will also automatically increase the size of the object, so resizing of width and hight might be necessary.
This is some text.
The difference between margin and border are as follows:
The first box has a set width of 100x100px. The second box has a set width of 100x100px and a padding of 20px. The third box has a set width of 100x100px and a margin of 20px.
The margin can accept a negative integer as well as positive integers while padding will only accept positive integers.
The last style listed in the code above, the border. This produces a border around the element as shown in most of my examples above.
Finally, you have the arrow. This is a special ASCII character. I have increased the font size otherwise it would appear like this: ↓. You can either copy and paste, or you can use ↓. I prefer the latter. You can also use ⇓ for ⇓.
I placed each arrow inside a span element like this: <span style="font-size:3em">↓</span>
@Troodon80, I did that. I simply pushed the Quote button in thread X, and copied the text that appeared in the text field to the text field of thread Y. When I posted it didn't looklike this:
I dunno, I rarely take mechanics or powergaming into consideration—for me, it's all about the flavor. But it's always nice to find common ground with people who think differently
Ok, must have made a typo somewhere. Thanks for your help!
Conveniently, I do not need to memorise the HTML tags for basic things. I only need to remember div and span and styles when I want to do something fancy, most of which come naturally. I have a Firefox extension installed called Text Formatting Toolbar (highly recommend it for forums that can use BBCode and HTML, assuming you use Firefox)—which I have modified for my own use (the list function is broken in the normal version and I have updated it with a couple new features that only I would probably find useful). On a further note, it appears that the person responsible for that extension has abandoned the project. I may see if I can pick it up where he left off. If I do get permission, then perhaps he will update his own site with the newer version.
Comments
Example:
Standard:
New height, set to 100px:
New width, set to 100px:
New height and width, both set to 100px:
When height or width are used singularly, the image will retain proportions. When an image has both set, then it will use both.
You can take a large image like this one:
And make it much smaller and also more manageable:
Test
c. Test
c. Test
test
Oh....doesn't show up in the preview but it works. Got it.
I have found two... Only eight remain. AND I WILL FIND THEM ALL!
Hmmm... is there another way to do it?
Oh, this looks complicated, um... is it working now?
Glow
Looks perfect, though the glow is not incredibly visible. You should also note that these effects are not compatible with Internet Explorer 9 or earlier (and I'm not even sure about IE10).
You can also combine the glow with the font colour:
<span class="glow" style="color:rgb(255,0,0);">Text</span>If you want to change the colour of the glow effect then you will need to manually add it.
<span style="color:rgb(255,0,0);text-shadow: 0px 0px 8px rgb(255,50,50);">Red</span> <span style="color:rgb(0,255,0);text-shadow: 0px 0px 8px rgb(50,255,50);">Green</span> <span style="color:rgb(0,0,255);text-shadow: 0px 0px 8px rgb(50,50,255);">Blue</span>You can also enhance the glow by adding layers of shadows. Each layer is separated by a comma, but remember the final layer needs a semi-colon:
<span style="color:rgb(255,0,0); text-shadow: 0px 0px 8px rgb(255,50,50), 0px 0px 8px rgb(255,50,50), 0px 0px 8px rgb(255,50,50), 0px 0px 8px rgb(255,50,50);">Red</span>Varying degrees of intensity depending on the spread:
<span style="color:rgb(0,255,0);text-shadow: 0px 0px 3px rgb(50,255,50), 0px 0px 3px rgb(50,255,50), 0px 0px 3px rgb(50,255,50), 0px 0px 3px rgb(50,255,50);">Green</span>And varying effects depending on the position:
<span style="color:rgb(0,0,255);text-shadow: -5px -5px 8px rgb(50,50,255), -5px 5px 8px rgb(50,50,255), 5px -5px 8px rgb(50,50,255), 5px 5px 8px rgb(50,50,255);">Blue</span>Personally, I don't like adding much more than a slight shadow. This, for example:
Raised Text
Old:
Example: <blockquote class="Quote" rel="Username">Stuff</blockquote>
On this site, the blockquote tag consists of a class for the styling (make sure to capitalise the word 'Quote') and an attribute called 'rel='. Rel, which is short for relationship in content, is for the username of the person you are quoting. Next item on the list, @WithinAmnesia.
↓
The first part of this is a method of centring the content.
<div style="display:block;text-align:center;"> </div>Everything else fits in between the two div tags. Note that this has an affect on text only, so it is for the arrows rather than anything else.
Next, the items themselves. Now, I don't tend to worry about readibility because I know where everything goes, but for readibility I have broken it up below.
<div style="margin:0 auto; width:450px; text-align:justify; background: rgb(0,89,148); background: -moz-linear-gradient(top, rgb(0,89,148) 0%, rgb(0,7,43) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,89,148)), color-stop(100%,rgb(0,7,43))); background: -webkit-linear-gradient(top, rgb(0,89,148) 0%,rgb(0,7,43) 100%); background: -o-linear-gradient(top, rgb(0,89,148) 0%,rgb(0,7,43) 100%); background: -ms-linear-gradient(top, rgb(0,89,148) 0%,rgb(0,7,43) 100%); background: linear-gradient(to bottom, rgb(0,89,148) 0%,rgb(0,7,43) 100%); border-radius:10px; padding:10px; border:2px solid rgb(0,89,148);"> Presentation item 1. </div>Margin is set to 0 and auto, this makes sure that the div is centred.
Width. This is the width of the element in px. You can use any of the unit names here (em, px, %, ex, pt, cm, mm, in, pc), but 'px' is most common (and recommended) when sizing for screens.
Text-align is exactly what you would expect it to be, like above, the alignment of the text. Depending on the length of the text within the div element, centring that might be better. I had it as justified in the other topic because of the amount of text. One liners are better when centred. Since we already used 'text-align:center' for the very first div element, each item within that inherits that style, I could simply remove the 'justified' value rather than needing to centre each item individually.
Background. Now, this is where it gets interesting because you will notice there are more multiple variations. This is purely for browser compatibility. A basic colour is given in the case of browsers that do not support the linear-gradient style at the top and then each browser has its own prefix. -moz- for Firefox, -o- for Opera, two -webkits- which apply to Chrome and Safari, -ms- for Microsoft Internet Explorer, and finally there is one with no prefix. The one lacking a prefix is for browsers that can use it without needing a prefix; for example, modern versions of Firefox automatically interpret this and change it as required. Colours can be RGB (red, green, blue), RGBA (red, green, blue, alpha(transparency)), HSL (hue, saturation, lightness), HSLA (hue, saturation, lightness, alpha), or plain old hexadecimal. I tend to use RGB or RGBA these days for most things.
The border-radius style determines how rounded the corners will appear. Note that every item in HTML is based on a rectangle (or square, four corners with each being 90 degrees). Depending on the size of the item in question, you can even make it look round.
However, when rounding the corners of an element, text can then be clipped.
Notice that the word 'This' overhangs the border. This is where padding comes in. Padding is used when necessary to pad the inside of an element. Note that padding is note the same as a margin, margin is the outside of the element while padding is the inside. Padding will also automatically increase the size of the object, so resizing of width and hight might be necessary.
The difference between margin and border are as follows:
The first box has a set width of 100x100px.
The second box has a set width of 100x100px and a padding of 20px.
The third box has a set width of 100x100px and a margin of 20px.
The margin can accept a negative integer as well as positive integers while padding will only accept positive integers.
The last style listed in the code above, the border. This produces a border around the element as shown in most of my examples above.
Finally, you have the arrow. This is a special ASCII character. I have increased the font size otherwise it would appear like this: ↓. You can either copy and paste, or you can use
↓. I prefer the latter. You can also use⇓for ⇓.I placed each arrow inside a span element like this:
<span style="font-size:3em">↓</span>Conveniently, I do not need to memorise the HTML tags for basic things. I only need to remember div and span and styles when I want to do something fancy, most of which come naturally. I have a Firefox extension installed called Text Formatting Toolbar (highly recommend it for forums that can use BBCode and HTML, assuming you use Firefox)—which I have modified for my own use (the list function is broken in the normal version and I have updated it with a couple new features that only I would probably find useful). On a further note, it appears that the person responsible for that extension has abandoned the project. I may see if I can pick it up where he left off. If I do get permission, then perhaps he will update his own site with the newer version.
ochre
However, it is still possible to obtain ochre by using its hexadecimal code, like this:
<font color="#CC7722">ochre</font>Red
<span style="color:rgb(255,0,0)">Red</span>So, like: ochre?
<span style="color:rgb(204,119,30)">ochre?</span>