CSS: Negatives' accidental bulleted lists

[cimorene]

I thought I'd write up what I consider the main problems with the Negatives DW style and how I fixed them using CSS (not because I think that's in any way necessary, just mainly because I've spent so much goddamned time thinking about it already that I've got snippets of CSS swimming around in my brain). This will be meaningless to you if you don't know anything about CSS, but if you know some basic CSS it should be comprehensible: I'm hardly a guru, I just squint at things and use Google.



First off, there's a hard-coded element: the white double border at the top and bottom of the page which separates the entries in #primary and the sidebar (aka #secondary) in the middle from the page navigation on top and the "powered by" infos underneath. You can't change the colour of this using the set color commands as detailed in part 1 of my earlier Styling DW instruction post. It's fairly easy to fix in the CSS, so I'm sure the style team will have it fixed by the end of Closed Beta. In other words, don't lose any sleep over this if you don't have the know-how to manually fix it yourself.

Then there's:

1. The buttons in the userinfo module (ie the icon, name, and add-this-user links) in the sidebar display vertically as a bulleted list.


2. The tags in each entry display vertically as a bulleted list.


3. The metadata (ie mood and music) in each entry display vertically as a bulleted list.


4. A little double arrow displays before the subject line of each entry which is actually a Spanish-style closing quotation mark aka a "right angle quote": », html escape sequence & raquo ;

(The colors are easier to fix and the page layout (eg where the navigation goes, what order the sidebar modules display) is harder, which is why I don't list them here.)

(1) is the simplest to fix purely via CSS. The userinfo module is contained in the div class .module-section-one. You have to apply "list-style-type:none" (to get rid of the bullets) and "display:inline" (to put the list on one line) to .module-section-one ul, and then apply "float:left" to .module-section-one ul li (to make the individual list items - ie images - actually line up, since they seem to naturally want to form new lines).

(2) and (3) are a little tougher. The problem is that the metadata and tags aren't currently contained inside a div of their own in Negatives. Each entry's div structure is like [entry div] [subject div][/subject div] [datetime div][/datetime div] [text div] [/text div] METADATA! TAGS! [/entry div]. As you can see, this is stupid. It means that if you take the bullets off of bulleted lists for the div containing the metadata and tags - aka the ENTRY div - you also take the bullets off of any future bulleted lists posted in your journal. To fix (2) with CSS, you have to make unordered lists display inline, which would mean that your mood and music were inline too since they're in the same div right now.

SO. To fix that you have to venture out of the CSS section of the layer and add two divs (one for the metadata and one for the tags) in the entry. You can do it entirely with copy & paste, though, if you want to! Like so. [ETA: though it should be noted that the official DW Style Team Dudes officially recommend that you don't touch that shit, because they are still in the process of rearranging and renaming parts, for now. If you do touch non-CSS stuff, just be aware that your whole layout is liable to break in a later code push and require fixing.)

1. The function that contains the code for generating entries is called Page::print_entry() in the left-hand navigation panel of the layerediting page. If you click on it, it will scroll to the right place.



2. The divs need to be named so that you can style them, so it's simplest to copy the line 4th from the top that starts print "[div class=\ "subject\"]. There's a right-angle quote (& raquo ;) in there after the \"] and before the ";. That's the line that prints "[div class= "subject"]" in the page html. Remove the "& raquo ;" but leave the "; after it.



3. Also copy-paste two copies of println "[/div]"; to close the divs.



4. Move the line that prints the metadata - which looks like $e->print_metadata(); - between the "print div class metadata" line and a "println /div" line; move the line that prints the tags (same with print_tags) between the "print div class tags" and "println /div" lines.



5. Now you can style .metadata and .tags in the CSS - for .metadata ul, applying "list-style-type:none" will remove the bullets.



6. The tags are a little more complex. You need to apply "list-style-type:none" to .tags ul to remove the bullets, but you also need them to display in a single line. Applying "display:inline" to .tags ul li will make them display on a single line, but the list will still be a line below the little header that says Tags:, so you also need to apply "display:inline" again to .tags ul. To make the tags not run together like one long word, you need to apply a small margin or padding to .tags ul li as well.

Comments

[aveleh]

zvi pointed me here. I'll try to come back later to give a more complete answer, but on skimming, it looks like much of the problems you're having are already being fixed in our next push to production. That div problem is driving all of us crazy. I'm a little worried about recommending people to edit layers themselves though, because we've done some renaming of items. I don't have a good solution for people who need it fixed right away, just a warning to bookmark dw_styles and the /customize/ page.

Also, yup, a lot more stuff is coming. One of my biggest goals with this overhaul is to make styles easier for everyone to edit, whether it's the people who want the clicky-clicky wizard, people who want to copy CSS, or people who want to edit the S2 source itself.

In a couple of days, once we get this next stage of updates out with more styles, we're going to be posting in dw_styles looking for people who are comfortable in CSS and S2, so I hope there will be plenty of stuff you're be interested in playing with (as opposed to frustrated that you have to).

Wow, the staff is so prompt to jump in over here.

[cimorene]

You guys are doing great work! I'm not impatient, here - I know it's early and am perfectly willing to mess around with the code myself. It already broke once with the last code-renaming push, but I was able to figure out how to fix it fairly easily. I don't mind doing it all over again three or four times and I'm eagerly watching dw_styles for the call for volunteers. :)