![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
turlough posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
style_systemFor the first time I'm trying to adapt a native DW style (Heads Up) for a comm instead of working with a ported-from-LJ one. I've been sticking to custom CSS and so far I seem to have managed to change most of the things I wasn't happy with. There are a couple of things I seem to be completely unable to fix however.
They both concern entry headers as you can see in this screencap:
A) I can't seem to be able to align the top of the title and the top of the usericon. When the title is short enough to only cover one line the icon protrudes above it and when the title is long enough for two lines the icon doesn't reach high enough.
B) No matter what I try I can't seem to make the username line up under the title and date to the right. It just stays stubbornly on the left.
Is there someone who can help me fix these? All help gratefully accepted!
This is what the custom CSS looks like at the moment (and here you can see it in action).
Mods: There's no tag for the Heads Up style.
They both concern entry headers as you can see in this screencap:
A) I can't seem to be able to align the top of the title and the top of the usericon. When the title is short enough to only cover one line the icon protrudes above it and when the title is long enough for two lines the icon doesn't reach high enough.
B) No matter what I try I can't seem to make the username line up under the title and date to the right. It just stays stubbornly on the left.
Is there someone who can help me fix these? All help gratefully accepted!
This is what the custom CSS looks like at the moment (and here you can see it in action).
Mods: There's no tag for the Heads Up style.
This might need some work, but...
Date: 2012-09-12 04:22 am (UTC)Remove the minusing out on the userpic margin; try this instead:
.entry .contents .inner{
margin-top: -60px !important;
}
The above code makes the title and content look bad; the following fixes it up:
.entry .header
{
padding-bottom:1em!important;
}
.entry-content
{padding-top:3em;}
Make your entry poster sit under the userpic like a good little entry poster:
.entry-poster {float:right;clear:both;}*Disclaimers: these might not be the best fixes but there are much better coders than me in this community so if not, they might always swoop in to suggest something else. I just thought I'd try my hand at the first issue because it seemed impossible at first glance, which is like, my favorite sort of issue to tackle...*feels glee at at least getting somewhere*
Re: This might need some work, but...
Date: 2012-09-12 06:14 pm (UTC)I'm starting to think that the only way this problem can be solved is by mucking about with s2 so the whole combo of entry title - userpic - entry content is ordered differently. In which case the comm I'm making a layout for will have to make do with the half-assed version - I don't have time to start poking into DW's s2 right now. I don't know nearly enough for it to be other than a very slow and labourious process.
Your solution for the second problem works perfectly, if I want the username under the icon - which I totally want myself so I'm saving that solution for when I'm working on my own layout - but in this case I wanted it under the title and date.
In any case, thank you very much for taking the time and trying to solve my problems for me. I really appreciated it!
Re: This might need some work, but...
Date: 2012-09-14 03:53 am (UTC)And sorry the other code was for the wrong spot (reading comprehension took a partial crap on me), but at least it will work for you in the another spot eventually (another delightful instance of me being correct only in the future, brought to you by The Working Half of My Brain)
Re: This might need some work, but...
Date: 2012-09-14 06:40 am (UTC)The code I gave you the other night works perfectly as long as you take out the -50px on .userpic *and* take out ninetydregree's code for .entry-poster (a new addition to your code that's been added since my reply was made). Just tested my code again and the title text wraps to a second line without the userpic moving even one little pixel. So it works without anything moving on both one and two line titles. Screencaps (first one with a two-line title, second one is me switching you back to a one line title in Web Dev):
http://i.imgur.com/9JtSe.png
http://i.imgur.com/z1UvK.png
Problem is, where you have .entry-poster now breaks the code I gave you very badly (the .entry-poster CSS I gave you, meanwhile, does not) but my brain is tired and I can't fix it now. I did try. Sorry. :(
no subject
Date: 2012-09-12 12:33 pm (UTC).entry-poster {
display: block;
text-align: right;
}
Tip: elements which are within SPAN tags first need to be displayed as blocks if you want them to be as wide as a DIV element (which you need to push them to the far right for example).
no subject
Date: 2012-09-12 06:16 pm (UTC)no subject
Date: 2012-09-12 06:35 pm (UTC)no subject
Date: 2012-09-12 07:59 pm (UTC).page-recent .entry-poster,
.page-read .entry-poster,
.page-entry .entry-poster {
display: block;
text-align: right;
}
I think that should covered it.
no subject
Date: 2012-09-12 08:52 pm (UTC)no subject
Date: 2012-09-12 08:55 pm (UTC)no subject
Date: 2012-09-12 08:57 pm (UTC)no subject
Date: 2012-09-14 03:46 am (UTC)