dreamwidthlayouts | Layout: Abstractia

Step 4: Color scheme. Pick one and throw it in at the bottom. Save again and let me know if your problem persists!

It worked. :) There are still many things I want to change because I want the layout to look like something between what you did, and wiring's layout. But here's what I want to change now:

I need more padding between the tags and .page-read .poster, .page-network .poster, because right now it's too close to the tags. I presume I'd need o fix its margin and/or padding. Ideally, I want it to be to the right of the userpic, as shown here: http://aidadesigns.dreamwidth.org/read?s2id=665976

I much prefer your entry borders and entry backgrounds, but I want the fonts and link styles of the other Motion edit. I also want their ordered, unordered and definition lists and tables, but your blockquote.

And finally, where exactly did I make mistakes? Because copy/pasting is great, but I'd like to understand what I did wrong so I don't repeat that mistake in my other journals.

In any case, thank you so much for all the patience and hand-holding!

Issue the first: For the padding...

In the CSS, find:

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox { width: 80%; clear: both; float: left; } #canvas #content #primary .footer .multiform-checkbox { margin-top: 8px; }

Below it, add:

#canvas #content #primary .entry .tag { margin-bottom: 8px; }

(Adjusting the 8px as needed.)

For the positioning of the ENTRY POSTER...

In the theme layer, find:

$e->print_poster(); $e->print_userpic();

and reverse the order. Save & compile.

In the CSS, find:

#canvas #content #primary .entry .entry-poster, #canvas #content #comments .comment .comment-poster { display: block; font-size: .85em; margin: 0 0 1em 0; clear: both; }

and remove clear: both;. This should do what you want it to; let me know if it doesn't.

If you also want the TAGS to be to the right of the userpic, the steps are similar.

In the theme layer, find:

$e->print_tags(); $e->print_userpic(); $e->print_poster();

and put tags either before or after poster. Save & compile.

In the CSS, find:

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox { width: 80%; clear: both; float: left; }

And remove clear: both.

IMPORTANT NOTE: IF YOU WANT THE ENTRY_POSTER TO COME FIRST, LEAVE clear: both ON THE TAGS. IF YOU WANT TAGS TO COME FIRST, LEAVE clear: both ON THE ENTRY_POSTER.

Issue the second: I wish you the best of luck! My CSS should be a little easier to read, but our organization structure doesn't match up. I spread out the lists / definition lists / tables, doing it a little differently in each section but leaving things within entries mostly alone so that users can make their own tables / lists without interference from my theme.

Issue the third: If I could be sure, I would have had you just fix that. But I know you didn't have my tweak to make the tags inline, so I assume we missed each other somehow when I was updating the text on my journal.

It's almost there, but not quite: just removing clear: both throws poster to the right of the entry, adding float: left puts it to the right of the userpic, but pushes the entry text to the right. Any ideas?

I will leave tags where they are at the moment, but it's good to know it's possible if I want to try it later.

As for the lists, can I have them go back to the defaults? You have the style set to square, which I dislike, and I want to be able to nest the lists. I tried them before, but I couldn't get the numbered uppercase and lowercase lists to show up. I'll add them back to my test post for, well, testing.

I also need more space in the tables; right now the table I have here is all squeezed together. Also, it has bullets, which I don't want.

As for the CSS, I must admit I'm more used to having colors together with other selectors, but I understand it makes more sense to keep them separate for a multi-colored theme. I'm just having some trouble finding the fonts and their colors to change.

Yeah, probably just a question of posting at the same time, and missing edits within a fraction of a second. :)

First, for the bullets: Those are there because you have a list inside your table.

This is the source code when I view source:

Additionally, the "spacing" and "padding" declarations aren't going to work. You want "cellspacing" and "cellpadding".

If you look for "square" and just delete the lines that refer to them, it'll go back to bullets. The nesting problem is caused by removing all the padding and margins on them. In the finished version, I won't be "resetting" so many things.

And yeah, sorry for doing the colors that way. I think I'm gonna work it up as a real theme layer now and that should solve a lot of the remaining problems. ♥

Edited 2012-01-15 19:55 (UTC)

Aha, that's why. I swiped the text from one of thefulcrum's test posts on LJ because there were a lot of styling elements there ad I didn't have time to write my own. I will definitely change that entry once customizations are done.

Would it be possible to have a list inside a table, and not have bullets? (And of course, cellspacing and cellpadding!)

No need; like I said, it's easier to have colors separate for someone who just wants to try out different colors -they just look for Images and colors ad replace that part. Makes perfect sense. Is it possible to have two people submit the same layout as a theme layer? Because I'm sure I saw it at

dreamscapes. Yes, here.

Nesting I will definitely need for a future post listing art supplies, references and stock photos I use. I figure if I make myself post (somewhat) regularly, I might actually (gasp!) improve my skills. :)

I don't know, but it's not the same theme. I coded it from scratch, so it's not a problem.

If you would like the bullets to not show up, your best bet is probably inline styles. <ul style="list-style-type:none">

The lack of ability to nest is definitely a problem and I'll fix it when I make it a theme. ♥

That's good then; it's always a good thing to have more choices rather than less.

I think I've reached my final questions before I try my hand at custom layers and themes for the other edit:

- I just added some differently styled ordered lists from W3schools, but they all show as the same type. Is there something in the css that's causing that? - How would I reduce the line spacing for lists?

I think that's it, at least for the time being. :crosses fingers:

That's not my CSS, that's Dreamwidth!

The type declaration has been deprecated, so use CSS instead.

<ol style="list-style-type: lower-latin">

like that.

Well dang it, Dreamwidth! OK, I'll have to keep that in a document somewhere. Perhaps I'll make a "styled elements" private post from where I can copy these codes. :(

Or, would I be able to add that to the css box and then apply to individual lists as needed?

I just noticed you don't have .page-read .poster, .page-network .poster but #canvas #content #primary .entry .entry-poster, #canvas #content #comments .comment .comment-poster and changing margin: 0 0 1em 0; to margin: 1em 0 1em 0; didn't make any difference. Would adding padding change it?

It won't make any difference there, because the tags are coming first. It's one of those things about floats.

Add the margin as a margin-bottom to the #canvas #content #primary .entry .tag declaration and it should work much better!

Actually adding padding: 1em 0 1em 0; to that did work, but I'll take your advice since you have more experience in this than I do.

Ah, yeah. Padding... Padding is kind of my nemesis because of the box model problem. X3 I avoid adding it except as strictly necessary, but the important part is that you get the layout working for you!

Totally random bug:

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox { margin-top: 8px; width: 80%; clear: both; float: left; }

change to

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox { margin-top: 8px; width: 98%; clear: both; float: left; }

so that the tags span the full width of the entry!

Layout: Abstractia

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

sorry i keep doing that orz

Re: sorry i keep doing that orz

no subject

no subject

no subject

no subject

no subject