MOSTLY SOLVED: Tweaking my Remodel: side spacing, space around userpic, bullet lists

Jul 25, 2009 12:33

I just converted my journal from Component (the style it has had since 2004) to Minimalist Green (Expressive). Reading through this community, I've found a few tricks already: changing the background color for the body, and making it so bullets don't go into the user picture. There are still some things I'd like to do: I've searched the community and tags to see if I could find the answer, but I must not be using the right terms. I'm an old-time HTML user, but not super-familiar with CSS.

  1. For lack of a better term, the journal has margins, a thin sidebar, and the wide content. I'd like to figure out how to shrink the margins and add the extra space to the content.

    What I realized was that there wasn't a margin, but that the design was centered on the page. Thus, I solved it with:

    #page, #header, #content, #footer {
    position: absolute;
    left: 0;
    }
    #content {
    top: 150px;
    }
    #header-inner {
    width: 1280px;
    }

    The position:absolute moved stuff to the right; the top: 150px moved the content down so it wasn't overlapping the header, and increasing the header width moved the header to the right.

  2. The text of an entry is too close to the userpic for my comfort. I'd like to figure out how to increase that space.

    I solved this by increasing the margin and padding:

    .user-icon {
    float: left;
    margin-right: 8px;
    padding-left: 5px;
    padding-right: 15px;
    font-size: 10px;
    }

    But this still may not be the best way, as list items seem to have their bullets move closer to the icon, and I'm not sure why.

  3. Although I fixed the bullets from overlapping the userpic for lists (OL, UL), it seemed to break hanging indent. I'd like to have the bullets not go into the userpics, but with hanging indents.

    I partially solved this with:
    .asset-body ol { margin-top: 10px; list-style: decimal inside; }
    .asset-body ul { margin-top: 10px; list-style: disc inside; }

    It prevents the bullet from repeating in the image, but it still doesn't give me true hanging indents: I have the bullet in with the text. Suggestions?

  4. Component seemed to put a blank line before lists and blockquotes, whereas expressive doesn't. How might I get the component behavior?

    Fixed with the "margin-top: 10px;" above, and

    .asset-body blockquote {
    margin-top: 10px;
    }

    but blockquote still seems to put some odd quote graphic in.

The only other thing I want to do (change the header image) needs to wait until I craft the image I want -- I think I've found the entries that tell me how to fix that.

Thanks in advance for any help or pointers.

entries:blockquotes, page:alignment, entries:misc, page:size

Previous post Next post
Up