Sidebar blocking banner and icon border issues

[promethia_tenk]

Hello all,

I'm on a devious mission to convert my friend to DW make my friend happier with her DW by helping make her layout closer to her LJ one (she uses Compact over there). I've made my own journal into a testing lab with Librarian's Dream as my base. This community's archives have been deeply helpful, but I'm running up against the limits of my hunt-and-fiddle knowledge of CSS and I still need to get my laundry done today.

Here is a screen grab of where I am now.

Is anyone able to help me with:


1) That sidebar: Ideally I'd like the banner to run completely across the top with everything else on the page underneath it. I've inserted the banner with this code:

#canvas {
background-image: url(https://s20.postimg.org/r3spht7y5/japanese_cliff_city_banner.png);
background-repeat: no-repeat;
background-position: top center;
padding-top: 350px;
margin-top: 10px;
}

And I've been trying to push the sidebar down to be level with the main column. So far I have found about 12 ways to push the modules themselves down, but the background box surrounding them remains stubbornly behind. I've got a backup plan in case it can't be done, but a banner that goes clear across the top would be preferred.

2) Borders on icons: My friend's journal has small borders around all the icons. I've done so with .userpic{border: 1px solid #000000;} but this layout seems to have a small white margin on the bottoms of the icons (I assume for spacing? Or something to do with the link?) that I can't work out how to remove from the outline.

3) Profile module userpic: I recognize there's some more complicated formatting going on with the profile module that I don't understand and am basically trashing. By default the userpic is 1/4 size. I've embiggened it with .module-userprofile .userpic img {height: 100px; width: 100px;} but as you can see the icon border remains at 1/4 height. It would also be nice to be able to center the icon, though not essential. Have tried a few things to do that with no effect.

Thank you in advance for any insight you're able to provide!

Comments

[momijizukamori]

Hmm. Can you put up a screenshot of Compact or link to a journal that has it set? I'm not finding it looking through LJ's layouts, so it's hard for me to get a sense of what you're going for.

That said, answers to your questions!
1) #secondary { margin-top: 350px; }
2 and 3) .userpic img {border: 1px solid #000000;}

Because the .userpic div has a link in it, too (the link to the icons page), it ends up with that little extra bit of padding because of some silliness with how CSS classifies different types of elements. There's ways to hide it if you really, really have to (site-scheme comment pages have to), but in this case it's a lot simpler to just put the border on the image itself and not the container. And you are correct about the formatting - Librarian's Dream has some layout-level overrides to get the tiny userpic and have it stay proportional no matter the icon dimensions.

[promethia_tenk]

Thanks very much for your help!

Here is a screenshot of her journal.

The big thing I'm looking to achieve is to keep the top of the modules sidebar even with the top of the main column, with the header image above everything. Unfortunately #secondary { margin-top: 350px; } doesn't seem to be doing it, nor does adding !important--the column stays fixed at the top.

The .userpic img bit worked perfectly, though. Thank you! And thanks for the explanation about the difference between the .userpic and .userpic img elements, that's helpful.

[momijizukamori]

Looks like it might be getting overridden by something with a higher precedence/specificity, which is a confusing topic in CSS I don't pretend to fully understand. But try

.multiple-columns #secondary, .three-columns-left #tertiary, .three-columns-right #tertiary, .three-columns-sides #tertiary {
top: 350px !important;
}

which should be enough to override. And you're welcome! I've done a lot of the CSS coding for journal styles and for the site at large over the last few years, so I've picked up a lot.

[promethia_tenk]

IT WORKS!!!

thankyouthankyouthankyouthankyouthankyouthankyou

[momijizukamori]

You're welcome! Let me know if you have any other CSS bits you need help with.

[l_isa]

Thank you!