LaLa (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
laronmi) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
dreamcodes2012-01-08 02:46 pm
laronmi) wrote in dreamcodes2012-01-08 02:46 pm
Entry tags:
Muselist - Remix of a remix
Never done this before, so I hope I'm doing it right! Offering a muselist/possible CR chart(?) today. Very customizable, although I offer no preset color templates. The code explanation is there to hopefully help make customizing it easier.
Inspired by this remake of the original arrow-tabbed table. Now with 300 times more gradients and extraneous code!
Other than the usericon on the left, this uses no images to produce the effects.
Preview
Code
Explanation of the code
The vertical-align is what determines where the usericon will be. Middle will be in the middle of the table, top will be the top of the table, and bottom is for the bottom of the table. The first live preview sets it to the top. The second has it in the middle.
The background color for icon is that border around the rounded icon image. Change the color by inserting a hex value. You may change the border size by changing the padding value. If you don't want the border to be a circle, strip out the code in blue.
Insert the url of the icon you wish to use. If you don't want the icon to display as a circle, strip out the code in blue.
OKAY. This is where it gets a bit complicated, but it's not hard! Promise! Gradients are pretty easy, once you know what goes where.
First, the background color for older browsers is needed because not all browsers display gradients.The text color should be self explanatory.
For the gradients themselves, you'll notice that the property is repeated several times. This is done for browser compatibility. The starting gradient color is the color at the top, and the end gradient color is the color at the bottom. The CSS and browser will take care of the blending for you. Just input those hex values in their correct spots, and assuming your browser can display CSS gradients, they'll show up! Like magic!
If you don't want the gradients, then strip out the stuff in green (And any red stuff in between). If you don't want the rounded corners, strip out the stuff in blue.
Text shadow is that funky effect the character names have in the preview. It will not display in all browsers, and some people don't like it. If you don't want it, strip out the code in blue (And any red stuff in between).
Everything else should hopefully be self explanatory. The character name text color was added to make the text not clash horribly with the background, or to make it match the rest of the text.
This creates a single line with bolded text on the left and non-bolded text on the right. Repeat this as many times for as many single line elements as you want. Adjust the color value for the border as you like.
This is a single line element with a link. The link color is included to make the link text not clash horribly with the background. You may use <user name="USERNAME">, but as far as I know, there's no way to change the link color that way, and the corresponding link may be unreadable or ugly to look at, depending on what color your background is. You may, of course, change the text to whatever you want.
This element will create something that allows for multiple lines of text. Unlike the previous two, making paragraphs and multiple lines will not cause the entire table to look weird. Use this if you've got something to say.
The multi line header simply means what you want the bolded font (See the first live preview) to say.
IMPORTANT: You will need to surround paragraphs with <p></p> or use <br /> for line breaks. Because this code uses <lj-raw>, it will NOT automatically put in line breaks. They must be inserted manually.
Closes all the tags. Do not mess with this unless you've added/removed elements.
Known issues
If you run into any issues, or if you spot errors in the code, please let me know! Likewise, if you have any questions, or if my explanations are confusing, also let me know.
Inspired by this remake of the original arrow-tabbed table. Now with 300 times more gradients and extraneous code!
Other than the usericon on the left, this uses no images to produce the effects.
Preview
|
|
L'Arachel
Canon:
Fire Emblem: The Sacred Stones
Played at:
Camp Fuck You Die
Journal:
farfromcommon
Notes:
You can type as much as you want. Insert line breaks with <br /> or use the <p> tag around paragraphs. text talk blah blah blah something about cats and a penis joke, sure. |
|
|
Yuri Petrov | Lunatic
Canon:
Tiger and Bunny
Played at:
Camp Fuck You Die
Journal:
lunadickery
Notes:
You can't say much; overflow looks bad.
|
Code
Explanation of the code
<lj-raw>
<table style="width: 400px;">
<tr>
<td style="padding: 5px; vertical-align: middle;">The vertical-align is what determines where the usericon will be. Middle will be in the middle of the table, top will be the top of the table, and bottom is for the bottom of the table. The first live preview sets it to the top. The second has it in the middle.
<div style="background: ****BACKGROUND COLOR FOR ICON****; padding: 6px; height: 100px; width: 100px; -moz-border-radius: 55px; border-radius: 55px; -webkit-border-radius: 55px;">The background color for icon is that border around the rounded icon image. Change the color by inserting a hex value. You may change the border size by changing the padding value. If you don't want the border to be a circle, strip out the code in blue.
<div style="background: url(****ICON/IMAGE URL****) center center no-repeat; height: 100px; width: 100px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-radius: 50px;"></div></div></td>Insert the url of the icon you wish to use. If you don't want the icon to display as a circle, strip out the code in blue.
<td style="background: (****BACKGROUND COLOR FOR OLDER BROWSERS****; color: (****TEXT COLOR****; font-family: 'Georgia', 'Times New Roman', serif; width: 300px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px; padding: 15px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='(****STARTING GRADIENT COLOR****', endColorstr='(****END GRADIENT COLOR****'); background: -webkit-gradient(linear, left top, left bottom, from(****STARTING GRADIENT COLOR****), to(****END GRADIENT COLOR****)); background: -moz-linear-gradient(top, ****STARTING GRADIENT COLOR****, ****END GRADIENT COLOR****); background: -o-linear-gradient(top, ****STARTING GRADIENT COLOR****, ****END GRADIENT COLOR****);">OKAY. This is where it gets a bit complicated, but it's not hard! Promise! Gradients are pretty easy, once you know what goes where.
First, the background color for older browsers is needed because not all browsers display gradients.The text color should be self explanatory.
For the gradients themselves, you'll notice that the property is repeated several times. This is done for browser compatibility. The starting gradient color is the color at the top, and the end gradient color is the color at the bottom. The CSS and browser will take care of the blending for you. Just input those hex values in their correct spots, and assuming your browser can display CSS gradients, they'll show up! Like magic!
If you don't want the gradients, then strip out the stuff in green (And any red stuff in between). If you don't want the rounded corners, strip out the stuff in blue.
<span style="font-size: 1.5em; font-style: italic; text-align: left; text-shadow: ****TEXT SHADOW COLOR**** 2px 2px 2px;"><a style="color: ****CHARACTER NAME TEXT COLOR****;" href="****CHARACTER JOURNAL URL****">****CHARACTER NAME****</a></span>Text shadow is that funky effect the character names have in the preview. It will not display in all browsers, and some people don't like it. If you don't want it, strip out the code in blue (And any red stuff in between).
Everything else should hopefully be self explanatory. The character name text color was added to make the text not clash horribly with the background, or to make it match the rest of the text.
<p>
<div style="border-bottom: dashed 1px ****BORDER COLOR****; font-size: 10pt; padding-bottom: 2px; text-indent: 3px; width: 300px;"><b>****BOLDED/LEFT ALIGNED TEXT****: </b>
<span style="float: right;">****TEXT****</span>
</div>This creates a single line with bolded text on the left and non-bolded text on the right. Repeat this as many times for as many single line elements as you want. Adjust the color value for the border as you like.
<div style="border-bottom: dashed 1px ****BORDER COLOR****; font-size: 10pt; padding: 6px 0 2px 0; text-indent: 3px; width: 300px;"><b>Played at: </b>
<span style="float: right;"><a style="color: ****TEXT COLOR****;" href="****URL****">****LINK****</a></span>
</div>This is a single line element with a link. The link color is included to make the link text not clash horribly with the background. You may use <user name="USERNAME">, but as far as I know, there's no way to change the link color that way, and the corresponding link may be unreadable or ugly to look at, depending on what color your background is. You may, of course, change the text to whatever you want.
<div style="border-bottom: dashed 1px ****BORDER COLOR****; font-size: 10pt; padding: 6px 0 0 0; text-indent: 3px; width: 300px;"><b>****MULTI LINE HEADER**** </b><br />
<span style="float: right; padding-top: 2px; margin-left: 3px; text-indent: 0px;">
<p>****MULTI LINE TEXT****</p>
</span>
</div>This element will create something that allows for multiple lines of text. Unlike the previous two, making paragraphs and multiple lines will not cause the entire table to look weird. Use this if you've got something to say.
The multi line header simply means what you want the bolded font (See the first live preview) to say.
IMPORTANT: You will need to surround paragraphs with <p></p> or use <br /> for line breaks. Because this code uses <lj-raw>, it will NOT automatically put in line breaks. They must be inserted manually.
</p>
</td>
</tr>
</table>
</lj-raw>Closes all the tags. Do not mess with this unless you've added/removed elements.
Known issues
- Depending on the layout, the usericon borders may look strange if displayed in the journal layout view. Not ugly, but strange. The border/padding won't be centered around the icon, but rather shifted to the left and up some.
- The table cells will not show rounded corners in Opera.
- Not accessibility friendly. Usericons will not display alt text.
- Strong use of CSS3 elements means that these will not display properly in all browsers. Use with caution.
- Tested in Chrome, Safari, Firefox, and Opera, all on a Mac. Not tested on Windows or Linux browsers.
- On LJ, the default link colors override what you set. You'll have to style the link itself, which is doable, but I'm too lazy to add that in at the moment. MAYBE LATER.
If you run into any issues, or if you spot errors in the code, please let me know! Likewise, if you have any questions, or if my explanations are confusing, also let me know.
no subject
no subject