Quick CSS / S2 questions!

[jewelfox]

1. CSS: How do I get the main title / header on my journal to align with the white boxes that make up most of the layout? There's some kind of offset that I can't figure out how to control, even after looking at this, and it's there in both IE and Firefox.

2. CSS: How do I make list items and the numbers / bullet points appear on the same line? Right now they're appearing on separate lines in the Fruit Salad theme for some reason. Heh, and this one. >_>

3. S2: How do I turn that title / header into a link to my Recent Entries page?

4. S2: How do I add a "Share to Tumblr" link to the usual "add memory" / "share this entry" / "track this" buttons?

Many thanks in advance, and for answering the other questions I keep pestering everyone with :)

Comments

[ninetydegrees]

1.

#primary > .inner:first-child {
padding: 1em 1em 1em 0;
}

I think.

2. Looking at http://jewelfox.dreamwidth.org/2013/12/16/pathfinder-is-effed-up.html that's because some items are within P tags. P tags add margins by default. This is not specific to fruit salad.

3.

function Page::print_global_title() {
    if ($.global_title) {
        """<h1 id="title"><span><a href='$.base_url'>""" + $.global_title + """</a></span></h1>""";
    }
}
function FriendsPage::print_global_title() {
    if ($.friends_title) {
        """<h1 id="title"><span><a href='$.base_url'>""" + $.friends_title + """</a></span></h1>""";
    }
    else {
        """<h1 id="title"><span><a href='$.base_url'>""" + $.global_title + """</a></span></h1>""";
    }
}

[carene_waterman]

1. ninetydegrees is close on this one.

There are two conflicting padding settings causing your problem.

#header, #footer has padding: 0.5em
#primary > .inner:first-child has padding: 1em

you need to make the left padding on both of these the same in whatever way looks best to you.

2. This is actually a browser bug/differing interpretation of the standards that you can't fix by any means I can discover other than using

.entry-content li, 
.comment-content li {
  list-style-position: outside;
}

Most DW styles use list-position: inside here so a bulleted list looks nicer next to a floated object, and many styles have floated icons inside the entry itself, just like yours.

I saw this on a post in my style and thought I'd done something wrong so I looked into it.

If you put p tags inside li tags, which is not considered correct html, but people want to use it for the effect it produces, you get this problem.

I tried various margin tricks to fix it, but no dice, I ended up switching the list style position since so many people on DW use the p tag thing.

technical tl;dr follows:

Firefox and I think Chorme, produce the bullet and the text in inside and outside lists differently (it's a separate block level object on inside, but not on outside). They should pick one method and stick to it for both, but the people who decide these things are still at the arguing about it being a bug at all stage.

On outside bullets, the p tag doesn't cause a problem, on inside it does because of the way the block level items interact.

[momijizukamori]

Hmmm. I think the html tags may be an RTE thing (as not that many people hand-code whitespace tags, I think?). I'll test and maybe poke Fu because I kept seeing it on my reading list and thought it was a CSS bug in TR - they show up in journal style but not site-scheme. Thank you for the tl;dr!

EDIT: Ah, site-scheme uses 'outside' - that's why it looks fine there. Now to see if the RTE is the culprit!

Amazing...

[marahmarie]

[...] (it's a separate block level object on inside, but not on outside)

I would totally think this should be the other way around.

If you put p tags inside li tags, which is not considered correct html, but people want to use it for the effect it produces, you get this problem.

Wondering if there could be a more correct answer, like li > li with second nested item set in CSS to not show bullets/numbers and with margins and padding set accordingly...

Re: Amazing...

[carene_waterman]

It might actually be the other way round, this was months ago I looked this up. I think they should be the same and the same across all browsers, but that's a long process.

I think the HTML standard assumes that list items are singular things, so you shouldn't need any nested block level elements in them--and an li inside an li is wronger (it's totally a word) than the p tag is.

So if you want a list of multi-paragraph text sections, you likely should separate each with headings. A rule which I totally break because posting culture here favours the multi-paragraph list item post. I often just code in the bullet at the start of the first paragraph.

Re: Amazing...

[marahmarie]

Yeah, I've broken at least always wanted to break the rules around this myself. My preferred format for lists is often paragraph, some bullets/numbers, 'nother paragraph, more bullets/numbers; rinse/repeat 'til I don't feel like don't feel like making lists anymore. Of course you can't pull this off without validators throwing fits because it's not correctly nested HTML.

But a list item that runs on for many lines is blocky, unattractive and hard to read; coincidentally, my list items can run on (or I'll want them to run on) for many sentences, so I'll want to paragraph-break at least some of the list items themselves. Which of course I can't. Or I'll want introductory or explanatory paragraphs (or at least some kind of short lead-in sentences) before each list item, another no-no without correctly nesting the list, but doing so means p tags will break the continuity (and in the case of numbered lists, it will visibly reset them altogether - not the desired effect).

I've come up with a few so-so workarounds to sort of get what I want that involve careful margins, padding and list nesting, but none of these are a substitute for being able to mix li and p tags more freely (something I literally dream of...but this desire of mine wanders knee-deep into the debate on why coding in HTML/CSS can't be more like doing magazine/newspaper print work, which I actually, very deeply, wish it was).

[jewelfox]

Very, VERY belated replyingness and thanking you. >_>b I think that fixed the problems. The header's still not completely aligned, but I suspect there's something else at work here, and it's a lot closer than it was before.

I'm not actually messing with tags at all, although it's possible that my theme is. I see what you mean about the "nicer next to a floated object" thing, though; now the bullets are crammed up against my icon in a recent entry. I guess there's no way to fix that though.

I'm actually using IE 11, and have the same problem here.

[foxfirefey]

#4 depends -- is it possible to give a template for the share to tumblr link aka tumblr.com/share?url=ENTRYURL or does it rely on Javascript?

[marahmarie]

4. Maybe try a variation of this: http://style-system.dreamwidth.org/21823.html

(I did; you can see the result of it on my DW at this username. Only one problem with it that I know of - according to matgb it's not supposed to print on locked friend's entries on your Reading Page but it does. I have let him know about this but he's never responded.)

[jewelfox]

Ah, that's unfortunate :\

I'm pretty sure my readers are mature enough not to abuse that function, but it would be nice if that were added in. Unfortunately I don't know S2 well enough to fix that.

Thank you for the link :) Do you have any suggestions for where I should look to find out how to mod my header into a link to the Recent Entries page?

[marahmarie]

Yes, I do; you can swipe my code for that (it's a mod of something carriep63 long ago helped me do on LJ):

function Page::print_global_title() {
        if ($.global_title) {
                """<h1 id="title">
<span><a href="YOUR DW'S URL HERE" title="YOUR HOVER TITLE TEXT HERE">YOUR JOURNAL NAME HERE</a></span></h1>""";
        }
}
function FriendsPage::print_global_title() {
        var string title = $.friends_title ? $.friends_title : $.global_title;
        """<h1 id="title">
<span><a href="YOUR READING PAGE'S URL HERE">$title</a></span></h1>""";
}

function Page::print_head_title() 
{
    if ($this isa FriendsPage) {
        print """<title>""" + $this->view_title() + $*text_default_separator + $.global_title + """</title>n""";
    }
    elseif ($this isa RecentPage) {
        print """<title>""" + $.global_title + $*text_default_separator + $.global_subtitle + """</title>n""";
    }
    else {
        print """<title>""" + $this->view_title() + $*text_default_separator + $.global_title + """</title>n""";
    }
}

You can see how I have my journal URL and title, Reading Page URL and my hover text set up here:

http://www.dreamwidth.org/customize/advanced/layersource?id=116552&fmt=html (I've set it to be viewable to everyone).

I'm not great with troubleshooting or changing the s2 so much, so if you run into any issues with it you might want to make a new top-level post for more help. Good luck. :)

(Also, as I'm sure you can probably tell by looking, and also to ed-ah-mah-cate anyone else reading, any URL in the above code can be changed to point to wherever, but you'll want to change any descriptive text and hover text as well so as not to confuse people about to click on those links).

[jewelfox]

Ah, thank you :)

[marahmarie]

You're welcome! :)

[marahmarie]

I'm pretty sure my readers are mature enough not to abuse that function, but it would be nice if that were added in. Unfortunately I don't know S2 well enough to fix that.

Ah, I see what you're saying - I'm not sure if it prints on your friend's/subscriber's Reading Pages! I *do* know that it prints on my own Reading Page, both on my friend's/subscriber's public and access-locked posts, but (everyone has to take my word on this, so imagine my hand on a Bible or whatever it is floats your boat) I don't abuse that function. :)

[jewelfox]

Do you know any way of fixing this? I was thinking I could do it with CSS selectors, like "child of" ones.

[marahmarie]

For my specific version of the code, I'd add this to my custom CSS:

.page-read .security-protected .share{display:none;}


Also, fairly big caveat, the source code will still show those links. If you really want them gone maybe you could make a new top-level post to this community; it's probably just a few more lines of s2 to hide them.