InsaneJournal

Tweak says, "What is this, a missile launch"

Bonemeal (bonemeal) wrote in rp_tutorials,
@ 2013-08-13 10:32:00

Current mood:	awake
Entry tags:	layouts, mood themes

Time for another dumb question
How do you modify the size of your mood theme icons in the layout CSS itself? I've asked the coder of my layout, but no response.

At the moment, the mood theme icon size is smaller than the size of my actual icons. I'd like to change it to match.

(Post a new comment)

ex_vorpal57
2013-08-13 03:29 pm UTC (link)

Looking at the code, your icons are showing up at 95px in width. If you want them to be 100px, try this in the CSS:

Under...

.meta {
font-size: 5pt;
text-transform: uppercase;
letter-spacing: 1px;
font-family: arial;
}

Add this...

.meta img {
width: 100px;
height: 45px;
}

That way the width and height match the original aspect ratio of the 120x65px image.

That should do the trick without manipulating anything else on the layout, but it's been a long time since I've done anything with an S1 layout. Let me know if it does the trick or mucks with something else that uses the meta class in the layout.

(Reply to this) (Thread)

	bonemeal 2013-08-26 10:22 pm UTC (link)
	I think it's worked, so thanks! (Reply to this) (Parent) (Thread)

ex_vorpal57
2013-08-26 10:35 pm UTC (link)

Looks like it has! But it also looks like I may have flubbed the aspect ratio as they look a tad stretched. 55px for the height might be the golden number - I tested it out and it looked better

If you wanted to test it yourself without changing the code and if you use Firefox, you could use the Inspect Element tool.

If Firefox is indeed used, right-click on your layout and select the Inspect Element option, then "Style" on the right bar that'll come up at the bottom of your browser window. From there, there's a little mouse indicator on the left that'll allow you to select any element on the screen. Click on your mood icon (any one will do), and the code will come up to the right. My little bit of code will be there and you can type in the new number(s) and see it presented live without changing the code itself on your journal.

If you don't use Firefox, then you'd just have to change it manually and see if you like it. >_>

/end ramble. I do this stuff too often.

(Reply to this) (Parent)