[Solved] Userheads, currents, resizing and more...

[domino]

Alright so I have several questions here and I hope someone can help me if you find yourself with some spare time in your hands. :)

1)

Comments

[tuff_ghost]

1. To overwrite userheads you are getting all elements of the "ljuser" class and checking them by source to set their style. In their style blocks, you can set however much extra padding you like:

.ljuser img[src*="userinfo"],.ljuser img[src*="userhead"] {
width: 0!important;
height: 0!important;
background: transparent url(http://i194.photobucket.com/albums/z181/goat_layout_bits/blue_ghost.gif) no-repeat center top!important;
padding: 17px A BILLION px 0 0!important;
}

2. You could try ".currentgroups strong" as a selector and then style that. Dunno if it works I just looked at the element in Firebug.

3. Try getting iframes inside the entry class: ".entry iframe".

4. I am not certain about this, but I have never known whitespace to matter in CSS, except for a single space to designate inheritance. Other than that...anything goes?

[domino]

Thank you so much for your response. I am not that well versed in this type of coding however, so if you could explain this to me (1 through 3) like you would explain it to a Golden Retriever, I would be forever thankful. :[

EDIT: On number one I understand the code but, how can I implement it if I don't want to use a replacement userhead? Should I remove the ljuser code altogether?

[tuff_ghost]

The ljuser part is the name of the class, it selects all "img" elements within elements of class "ljuser" that have a source containing "userinfo" or "userhead". If you only care about padding, remove everything but the padding:

.ljuser img[src*="userinfo"], .ljuser img[src*="userhead"], .ljuser img[src*="community"] {
padding: 17px 14px 0 0!important; }

Play with the numbers until you get what you want.

For #2, I would try hiding the groups label and adding a bg image to the currentgroups class:

.currentgroups strong { display: none; }
.currentgroups { padding-left: 20px; background: url("imgsrc.png") no-repeat left top; }

And for #3, select elements of type iframe, img, object within class "entry" and apply a max-width:
.entry iframe, .entry img, .entry object { max-width: 400px; }

[domino]

Thank you so much. I'm a little late but I'm trying all of these.

[ennifer_jay]

No help, unfortunately, but I'm trying to do the same thing with number 4!

[domino]

I know right! Good luck!

[1671]

CSS doesn't really mind if lines are separated. The first image you posted is technically right, as is the second; they're just organised differently. It all depends on how you work. In the first image, it's arranged more in terms of what has certain properties (e.g. font-family:Georgia;) - you want input and textarea to be in Georgia, so those two are grouped together to save on writing input {font-family:georgia;} and textarea {font-family:georgia;}. Personally, I don't code this was as it can be easier to overlook some ids and classes and therefore be harder to fix/customise things if they go wrong

[domino]

I hope your headache went away quickly! This definitely helped A LOT! Thank you so much for the nice explanation!

[yourxpridex]

Just something else to consider for point 4: it takes a browser more time to parse CSS with a ton of whitespace. However, unless you're dealing with a very large css file, this additional time is not really noticeable. I personally feel that readability trumps any addition time it may take for the css to be processed.

[domino]

I didn't know that, thanks for the tip! I agree, I think being able to read it easy is worth any extra loading time.