?

Log in

No account? Create an account

Previous Entry | Next Entry

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.

Comments

( 13 comments — Leave a comment )
av8rmike
Jul. 27th, 2009 01:10 pm (UTC)
Sorry, I was away all weekend and couldn't respond to posts. Which of these questions are still unresolved?
cahwyguy
Jul. 27th, 2009 02:06 pm (UTC)
Re: #1. Solved, although I would still like to figure out how to widen the alpha box a bit, but I can live with thing.

Re: #2: Solved.

Re: #3: I still don't have true hanging indents -- when I remove the "inside", the bullet moves closer to the userpic box, or goes into the userpic box, or repeats on both sides.

Re: #4: Solved.

Feel free to look at my journal to see how things are working out so far. You should find some bulleted lists a few days ago to see what I mean. As noted above, I'm using mimimalist green with the following custom CSS:

body, #page-inner, #header, #footer, .asset-name-hover
{ color: black; background-color: #E6FFE6; }
.asset-body ol { margin-top: 10px; list-style: decimal inside; }
.asset-body ul { margin-top: 10px; list-style: disc inside; }
.user-icon {
float: left;
margin-right: 15px;
padding-left: 5px;
padding-right: 15px;
font-size: 10px;
}
.asset-body blockquote {
margin-top: 10px;
}
body {
font-family: lucida sans;
}
#page, #header, #content, #footer {
position: absolute;
left: 0;
}
#content {
top: 150px;
}
#header-inner {
width: 1280px;
}
#header-inner {
background: url("http://www.cahighways.org/lj-images/lj-journal-head.jpg");
height: 140px;
}
.post-asset .asset-body blockquote {
background: inherit;
}
.widget-header {
font-weight: bold;
}

av8rmike
Jul. 28th, 2009 01:26 pm (UTC)
For #1, what you have will work, but I like to point people to the tutorial for changing the header image, which also includes a section on changing the width of the layout to match. You can use this CSS:
#header-inner, #container-inner { width: 1280px; }
#alpha { width:1090px; }
.layout-tw #alpha-inner { width:1050px; }

although, you'll need to remove the part in your current CSS that does the absolute positioning.

For #2 and #3, I know there have been problems with list bullets intruding into floated images (like userpics). Although I can't find the posts now, I'm almost positive it's an issue across several browsers, not something specific to LJ or Expressive. I'm not sure what effect you're trying to achieve, though ...?
cahwyguy
Jul. 28th, 2009 02:35 pm (UTC)
For #1, I tried that, but that got rid of the sidebar. However, I did retain the widening of layout-tw and alpha-inner, which helped. Of course, I'd love it if the width could auto resize, but I don't think that will happen.

As for the hanging bullets, it could be a browser issue. What I want is bullets that look like:
o tes tes test tes tes test
  tes tes tes tes tes tes 
  tes tes tes tes tes tes

instead of:

o tes tes tes tes tes tes tes
tes tes tes tes tes tes tes
tes tes tes tes tes
tes tes


Still, I think how I have tweaked things is starting to look better. Thanks.


Edited at 2009-07-28 02:35 pm (UTC)
av8rmike
Jul. 29th, 2009 06:39 pm (UTC)
OK, I know what you mean now. Find this in your CSS:
.asset-body ol { margin-top: 10px; list-style: decimal inside; }
.asset-body ul { margin-top: 10px; list-style: disc inside; }


and change the "inside" to "outside".
cahwyguy
Jul. 29th, 2009 06:50 pm (UTC)
That gets you the hanging, but as you can see from this entry, the bullets are now to the left of the margin of the first paragraph. It seems one can't get both (i.e., the first paragraph and the bullet having the same margin).
av8rmike
Jul. 29th, 2009 07:07 pm (UTC)
CSS only allows those two choices for list markers. I don't understand how else you could place it.
cahwyguy
Jul. 29th, 2009 07:20 pm (UTC)
Ideally, you would like something that would change the left margin for the entire OL or UL to move it to the right some pixels. Think about how you define such paragraphs in word processors: The first line has a different left margin than the subsequent lines of the paragraphs.
av8rmike
Jul. 30th, 2009 12:49 pm (UTC)
Ah, once again, I spent too long mucking about with pseudo-classes and other weird stuff, when the easy answer was right there. Add text-indent: 1em; to your .asset-body ol/ul rules (you can change the 1em to whatever you want).
cahwyguy
Jul. 30th, 2009 02:05 pm (UTC)
No, that indents the text at the beginning of the paragraph, giving:

   Heres the line introducing the list:

o    abc abc abc acb acb
   abc abc acba


What I want is:

Here's the line introducing the list:

o jfklds jfklds jfkls fjklds 
  jfkdlsf jdksl fjklds fjskl
  jfkdls fjdksl fdjskl fdsjkl


What I get, at least next to the userpic, is:

   Here's the line introducting the list:

o  Jjkflds jklfds jfklds fjklds jffds
   jfklds jkl fjdsklf jdskl fjkdsl
   fjdskl fjkdls; fjksld; fjkdslf jskl;

av8rmike
Jul. 30th, 2009 04:42 pm (UTC)
OK, I'm sorry, I thought you wanted to indent the first line of every bullet list item. The reason the first paragraph and first list item have the same left offset is because that's where the right margin on the userpic ends. If I'm reading the CSS2.1 spec correctly, it's not possible to have a list marker inside the containing block and pad the remaining lines in the list item so they're flush with the first line (what you wrote in your first example in the above comment). "Outside" will put the list marker in the paragraph's margin, but attempting to use padding to shift the text to the right won't affect the marker, because it's outside the containing block. Am I making sense?
cahwyguy
Jul. 30th, 2009 04:50 pm (UTC)
You're making sense ... it's just a problem with CSS, and it is probably the reason people used tables in the past (as they did in component, which doesn't have this problem). When dealing with HTML and CSS, you can't always get what you want :-)
htbthomas
Jan. 22nd, 2011 04:48 am (UTC)
Thank you for this entry - through it I figured out how to fix my unordered list problem! (Bullets overlapping the userpic)
( 13 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars