?

Log in

No account? Create an account

Previous Entry | Next Entry

Several Questions about Weston Blue layout

  • Feb. 7th, 2010 at 1:54 PM
Basic Information:

Theme: Weston Blue (Expressive)
Browswer: Firefox
Account type: Paid

Alright, I just started using this layout for the first time and have a few questions.

1. I want to move the date close to the entry title and in turn move everything in the entry up as well.

2. I'd like to move the text to the right of my userpic more to the right (maybe about 5px) and movie the text that wraps under my userpic by about the same, to make it look a bit tighter.

3. I have a border around my userpics on my entry and I'd like one around my default userpic on the sidebar as well.

4. I have a special icon for the "user" instead of the default from LJ but it doesn't appear next to my username on the navigation strip.

5. I want to remove the blue/purple outline from around tags when I hover over them.

6. I need to center the mood theme pic next to the word "Mood" and then move the text for the mood (i.e. happy, sad, etc.) underneath the mood theme pic instead of next to it.

This is the only code I'm using:

.archive-widget ul.widget-list .item,
.widget a,
#alpha .asset-meta-list a { color: #ffffff;}
.widget .widget-header, .widget .widget-header a { color: #ffffff;}
a, a:link, a:visited, a:active {color: #ffffff; font-weight: normal; text-decoration: underline; outline: none;}
a:hover {text-decoration: none;}
.ljuser {display: inline !important;}
.ljuser a {background: transparent; color: #ffffff; border: 0px;
}
.asset-meta-list .item span {margin: 0px 0px 0px 15px; font-size: 10pt;}
}
.user-icon {float: left;}
.user-icon img {border: 3px solid #ffffff;}
}

/* Generated by Malionette's Tiny Icon Generator */

img[src*="img/userinfo.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i89.photobucket.com/albums/k213/LivingDeadGirl223/user01_darkgrey.png) no-repeat; padding: 16px 0 0 16px !important; }
img[src*="img/community.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i89.photobucket.com/albums/k213/LivingDeadGirl223/star.png) no-repeat; padding: 16px 0 0 16px !important; }
img[src*="img/syndicated.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i89.photobucket.com/albums/k213/LivingDeadGirl223/badge_rss.png) no-repeat; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i89.photobucket.com/albums/k213/LivingDeadGirl223/lock.png) no-repeat; padding: 18px 0 0 15px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i89.photobucket.com/albums/k213/LivingDeadGirl223/key.png) no-repeat; padding: 18px 0 0 15px !important; }


Any help would be much appreciated. Thank you!

Comments

( 3 comments — Leave a comment )
av8rmike
Feb. 10th, 2010 01:22 am (UTC)
First of all, you should probably get rid of the extra closing braces ("}") you have floating around, because that is interfering with the browser's parsing of your stylesheet.

1) Try .page-header2 { margin-bottom: 0;}
2) .user-icon {margin-right: 10px;} (or whatever number you think looks good)
3) Change this:
.user-icon img {border: 3px solid #ffffff;}
to this:
.user-icon img, .widget .user-pic img {border: 3px solid #ffffff;}
4) The specifier needs to look like this: img[src*="img/userinfo.gif"], #lj_controlstrip img[src*="img/userinfo.gif"] { ... }
5) Change the colors here to whatever you want:
.asset-tags-list a:hover { background-color: #dee2f6; color: #566876; }
6) I'm not sure what you mean with this one.

Also, for lots of little tweaks like this, may I suggest Firefox's Firebug or Web Developer extension? With those, it takes about 5 minutes to figure these things out.
dreadfulpenny81
Feb. 10th, 2010 06:55 am (UTC)
Thanks for the extension suggestions! I installed Web Developer and it's actually teaching me a lot.

What I want to do is move the mood theme picture down without it affecting any of the writing below it so the middle of the picture is centered with the words on either side. Flexible squares does it, but I couldn't find what in the code would denote how to move the mood theme image for Expressive.

Edited at 2010-02-10 08:42 am (UTC)
av8rmike
Feb. 11th, 2010 02:54 pm (UTC)
OK, I see. The way Flexible Squares does that is with some customized HTML in the layer source itself that Expressive doesn't have. Therefore, the only way to change it is to change the Entry::print_metadata() function through a custom theme layer. I'd probably have to show you how to set that up, if you wanted.
( 3 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars