myluckyseven

On that MSPA layout is there a way to make custom colors appear on the profile itself like with pesterlogs?
Anonymous

I’m pretty sure that in making actual posts, Tumblr strips all formatting that could let you use colors- no font color, no styles, no classes or IDs- but in the Info box it all appears to be fair game in my tests. So here’s a few different methods to get colored text in your sidebar.

Method One: Basic HTML

<font color=”#insert hex code here”>Text you want colored</font>

This one’s pretty easy, it’s about 3 copy/pastes for a block of text. It’s probably the way you will use, if you are smart and do not want to read the horrible novel I wrote below this sentence.

Method Two: Style=

To use this one and the next one, you need a different tag to wrap your text in. You could use one that does some other kind of formatting, like <strong> or maybe <p>, or something that exists more to structure your layout, like a <div> or <span>, or even one of the new HTML5 tags like <section>. They all work like <font>, in that you must use </tag name> to close them.

Once you have your text wrapped in a tag, you add this to it:

<tag style=”color:#hex code again;”> </tag>

This is a way of adding a little smidgen of CSS where you need it in your HTML code!

Method Three: Custom CSS

This one is the most involved, because like a big idiot, I never enabled the Custom CSS box in the MSPA theme. WHOOPS. So first you would have to re-download it, and re-install it. Then you open the tab on the far right of the Customize screen, the Advanced tab. The first box there is the Custom CSS box, which lets you tweak your layout without having to scroll up and down forever in the Theme tab.

In the Custom CSS box, you’ll need to code a class. This isn’t so hard, it works just like this:

.classname { }

You can replace classname with just about anything you need that isn’t already used in the CSS. I’d recommend something like .textcol-1 or similar for the purpose of coloring some text if only because I can guarantee I haven’t used “textcol” anywhere in the CSS of the MSPA style layout. Once that’s set up, you have to write in the actual color stuff, like in method two:

.textcol-1 { color:#hex code a third time; }

And then the color’s set! To apply it to the text, we again work like Method Two and pick a tag. But instead of <tag style=”“> you write this:

<tag class=”textcol-1”></tag>

This tells the tag that anything in it needs to have all the style options from the textcol-1 class applied to it. In this case, it’ll be colored whatever hex code you picked! This method is longer, but it makes changes a lot easier. You only have to edit the hex code in the Custom CSS box to change every instance of the color in the actual webpage! You can also add multiple colors, or other font styling with ease, much like this:

.textcol-1 { color:#5D402E; font-weight:bold; }

.textcol-2 { color:#F07818; }

Now, anywhere you called textcol-1, the text will be brown and bolded. Anywhere you called textcol-2, the text will be orange and plain. And now you know some basics of CSS.


this has been Way More Information Than You Wanted with myluckyseven!!

  1. wraithlike posted this