3 Questions

Sep 14, 2005 01:47

Ok, I've got three hopefully easy questions to fix - I've tried on my own, checked the mems, the search engine, slogged through as many entries as I could, and yet:

1. Can anyone tell me if it's possible to stretch the sidebar titles and the comment bar to the width of sidebar and entry, respectively? -SOLVED2. Adjust the space between the ( Read more... )

comments, sidebar, header and footer

Leave a comment

afuna September 14 2005, 14:28:17 UTC
1. - stretching the comment bar

The space around the comment bar is there because of the padding within .entry. But if you just remove that padding, your entry text and metadata will look funny so you need to apply padding elsewhere to compensate. Thus:

.entry {
padding: 10px 0px 10px 0px;
}

.entry_text, .currents {
padding-left: 10px;
padding-right: 10px;
}

As a side note, it wouldn't have worked if you'd had left and right borders around your entry, since the entry border would have been visible right outside the comment bar, but since you've taken out that border already, everything should be just perfect :)

- sidebar titles
As with the comment bar, the space around the title isn't handled by the title but rather comes from its container's padding. Thus:

/*remove the space around the sidebar*/
.sbarbody {
padding-left: 0px;
padding-right: 0px;
}

/*optional, increase the padding around li.sbaritem
so that it will look exactly the same as before
20 = 15 (base value) + 5 (padding removed from sbarbody)*/
li.sbaritem {
padding-left: 20px;
padding-right: 20px;
}

3. There are two things that are causing the extra space: #footer has a margin-top:15px, and the presence of a clearfoot div which adds a couple of pixels. You can remove the bulk of the extra space by using css to set the footer's margin-top to 0.

However, clearfoot is used both above and below the footer, so setting its height to 0px also reduces the height between the bottom of the footer and the bottom border of the content div. Take a look at it after taking out the 15px from the footer's margin-top, and if the extra pixels bother you, comment back and we'll fix it :D

Reply

blackestfaery September 14 2005, 17:52:37 UTC
I'm almost there, and I'm really thankful for your help so far :)

The comment bar and sidebar titles are fully stretched out now - but I ran into another slight glitch.

The coding to take out the left and right borders that worked fine on my .entry, .comment, and #sidebar won't work for my sidebar titles. Am I just putting it in the wrong place?

And for 3:

I took out the 15px from margin-top, but wasn't sure if I was supposed to just set it to 0px. Was I supposed to take it out completely?

It just ended up looking the same, I think.

Also, I couldn't find the clearfoot div part you'd mentioned.

Reply

afuna September 14 2005, 18:12:07 UTC
Try making it more specific by using li.sbartitle instead of just .sbartitle. The reason you're having a problem is that the code in the base layout stylesheet uses the more specific li.sbartitle, so you have to be at least that specific in order to override it.

For #3, it doesn't really matter, since there's no other css in either your stylesheet or the base layout's stylesheet that sets footer's margin-top to any value.

You can find the clearfoot by viewing source and then looking around the footer near the bottom. By the way, I just realized that you can set .clearfoot{ height: 0px;} #footer{ margin-bottom: (something)px;}, in order to remove a bit more space at the top while still keeping a decent space at the bottom :)

Reply

blackestfaery September 14 2005, 18:33:59 UTC
Well that did it - li.sbartitle and adding .clearfoot took out the rest of the space I needed.

You're. Amazing.

Reply

afuna September 14 2005, 19:32:21 UTC
I'm glad to help ^_^ Can't design layouts myself, but it's soothing to help others try to make theirs perfect :D

Reply

blackestfaery September 14 2005, 17:55:10 UTC
And shoot - one more thing, I swear!

Is there any way to take out the space between my first sidebar title and the top sidebar border? If not, it's okay...

Reply

afuna September 14 2005, 19:19:20 UTC
Did a bit of poking around, and even with all padding/margin at the top set to 0, there's still a bit of space because the title is in a block element.

Ahh came up with a workaround but I'm not sure how well it works with all browsers.

I'm presuming that you have something that looks like this in your print_sidebar function. Add in the text in blue:

"""
    id="sidebartop">
  • $p.journal.username
""";

And then add this to your print_custom_head (you might already have some of them set. I'm not sure though; I was switching back and forth between your style and mine for testing)

/*remove default layout top padding*/
#sidebar {
padding-top: 0px;
}

/*remove topmargin from first sbartitle*/
#sidebartop li.sbartitle {
margin-top: 0px;
}

/*make the title inline instead of block*/
#sidebartop {
display: inline;
}

If that doesn't work, there's another way, which involves taking away the uls for that first title and just relying on a div, but I'm leery of using that because you'd have to copy-paste some settings from the layout stylesheet (so that it would work with .sbartitle and not just li.sbartitle) and that might make it harder to maintain. Er.

Reply

blackestfaery September 14 2005, 19:39:26 UTC
I really hate being a pain, but I have no divs inside or out of my print_sidebar function. I did find it in when I did page source, but can I add it in there?

The other codes compiled without problem, but I'm guessing that I need that div in there to see any changes.

Reply

afuna September 14 2005, 19:45:40 UTC
Don't worry, it's not a problem. Umm without looking at your code, I can't be sure but I'm guessing that you have a print_sidebar_box just before your print_userpic?

If so, replace that with the line I gave you above :)

Reply

blackestfaery September 14 2005, 20:13:40 UTC
Yeah, I have that print_sidebar_box before print_userpic.

Just for clarification, though. I replace print_sidebar_box with the div code you gave me?

Reply

afuna September 14 2005, 20:15:49 UTC
Yup! (although you could probably get rid of the empty
  • , come to think of it...)

    Reply

    blackestfaery September 14 2005, 20:29:08 UTC
    I got this when I did it concerning the div:

    Compile error: line 264, column 83: Unknown local variable $p
    S2::NodeVarRef, S2/NodeVarRef.pm, 178
    S2::NodeVarRef, S2/NodeVarRef.pm, 151
    S2::NodeTerm, S2/NodeTerm.pm, 162
    S2::NodeTerm, S2/NodeTerm.pm, 66
    S2::NodeSum, S2/NodeSum.pm, 65
    S2::NodeSum, S2/NodeSum.pm, 64
    S2::NodeTerm, S2/NodeTerm.pm, 76
    S2::NodeTerm, S2/NodeTerm.pm, 66
    S2::NodeExpr, S2/NodeExpr.pm, 46
    S2::NodePrintStmt, S2/NodePrintStmt.pm, 55
    S2::NodeStmtBlock, S2/NodeStmtBlock.pm, 101
    S2::NodeFunction, S2/NodeFunction.pm, 230
    S2::Checker, S2/Checker.pm, 339
    S2::Compiler, S2/Compiler.pm, 34

    If it's too much trouble, then don't worry about it. You've helped me out so much as it is, I can't help but think I'm harping on you :(

    Reply

    afuna September 14 2005, 20:34:14 UTC
    Don't worry, totally my fault :)

    Add a var Page p = get_page(); at the very top of your print_sidebar()

    Sorry about that, I stuck one in mine long ago, and I keep forgetting that not everyone has it :)

    Reply

    It. WORKED. blackestfaery September 14 2005, 20:44:27 UTC
    I'd seriously hug you if I could. I never thought I'd say this, but My LJ's complete.

    I know I said this already but you really are amazing >3

    Reply

    Re: It. WORKED. afuna September 14 2005, 21:10:24 UTC
    I don't know whether to say "Thank you" or "You're welcome", so maybe both? :)

    And congratulations on getting your layout exactly to your liking!

    Reply


    Leave a comment

    Up