marahmarie: Sheep go to heaven, goats go to hell (Default)

Don't quote me, of course, because I do a lot of Reading list reading and it was just a few comments I saw somewhere, but at any rate the exchange focused on why Dreamwidth doesn't have a Like or +1 button and [possibly] [personal profile] firecat responded that we have this: subject icon thumbs up and everyone was like, really? Someone else commented that it's a shame the feature isn't exposed so more Dreamwidthians can use it, which made both a bell and a light bulb go off in my head.

So on my DW today, I exposed it:

DW comment form subject icons, exposed

Now it takes just one click to select any of the icons that are normally hidden in the comment form. Once your comment's posted the icon will show up above your comment alongside the title (or in place of the title, if you so choose; I'm pretty sure the feature isn't dependent upon a title being used or the "no subject" title being enabled).

Once you post your comment, the subject icon will display above it like this:

DW subject icon alongside comment title

Here's the CSS I used to expose the icons:

#subjectIconList table {display: block!important; margin-left: -.2em; margin-bottom: -2.5em;}
#subjectIconList table, #subjectIconList {border: 0!important; background: none; display: inline!important;}
#subjectIconList:before {float: left; margin-left: .1em; margin-right: 1em; content:" Click on any subjectline icon below to select it"; margin-top: .3em; font-size: 80%;font-weight :bold;}

Here's what that code does (all uses of !important are to override DW's default CSS):

#subjectIconList table {display: block!important; margin-left: -.2em; margin-bottom: -2.5em;}The icon table (actually, it's a blockquote but uses both table and text-list CSS!) is set to display: none unless you click on the lone greyed-out smiley face that's normally present on the "more options" comment form, then the entire table just drops out of nowhere like, "BAM! Need an icon table?". Setting this to visibly display at all times (which can be through an inline or block setting) fixes this.

#subjectIconList table, #subjectIconList {border: 0!important; background: none; display: inline!important;} For aesthetics I removed the border and background that are inherited from my custom .entry .blockquote CSS and set subject icons to display: inline.

#subjectIconList:before {float: left; margin-left: .1em; margin-right: 1em; content:" Click on any subjectline icon below to select it"; margin-top: .3em; font-size: 80%; font-weight :bold;} Here I used content:""; to add visible text that points you to the icons and tells you how to add them to your comments and floated it left.

To get the filled-circle backgrounds behind subject icon images on page replies I added: .comment-subjecticon {float: right; margin-top: -2em;} .comment-subjecticon img {width: 16px; height: 16px; border-radius: 100%; background: #333; padding: 5px;} I wasn't sure where to set the icon image because by default it lands top left and lays on top of my comment titles, so I pushed it right to get it out of the way and set it to line up with comment title text accordingly, then added a background color and border-radius.

Pretty easy, overall. I'm thinking about passing along what I've done as a DW suggestion (with the addition that, if adopted, we'd probably have to run it on site-scheme comment pages, too, to be fair to everyone who doesn't use a custom layout) since it's just a few CSS changes and replicating it site-wide could work as a stopgap until we do get +1 or Like buttons (also, if you want those, vote here for Like and here for +1.)

marahmarie: Sheep go to heaven, goats go to hell (Default)

Because some of you just don't like the one-column look (and beyond that I'm not going to comment, but personally I kind of like it - with a few caveats about breakpoint choices or lack thereof that I won't bore you with because breakpoints are hard, but even given that, some of the breakpoint choices I'm seeing really suck) I've whipped up some CSS (Cascading Style Sheet code that controls how web pages look) to free you from your one-column prison. Jailbreak time!

Things to Keep In Mind

  • These instructions will work only if you're using a DW layout straight of the box without any changes made using your own CSS overrides, so if you've added any shape-shifting code to the Custom CSS box or made any shape-shifting changes in the Wizard your success is not guaranteed (nor is it even probable).
  • The changes made for the one column look are a combination of an HTML meta tag that's been added to your DW, some specialized s2 that's been added on the backend (s2 is LiveJournal's and Dreamwidth's programming language, based on the nifty Perl programming language) and the CSS that we'll be changing. Luckily, just changing the CSS will undo the one-column look completely because the meta tag just tells your browser what size viewport to use (viewport is like "what size window") and the s2 just tells DW's backend how to use the CSS! Neato.
  • There's no guarantee that as your DW page loads it won't arrange into the one column look ever-so-briefly, just for a few seconds, before the CSS here changes it back to however many columns it's supposed to have. There's an explanation for this that's a bit technical, so let's just say your browser loads text and entry images first and CSS pretty much dead last, so that's why you might see the style quickly change instead of simply loading as multi-column to begin with, like it always did.

How to Change Back to Multi-Column Layout With Just CSS

  1. First, get thyself to a CSS editor. Trust me, you don't have to "know CSS" or any code. Modern browsers have a live CSS editor built-in; you can get to it by going to the browser's "Tools" menu or clicking on your little gear-thingy in the Google Chrome browser, then looking for a menu item that says "Web Developer" (Firefox), "Developer" (Chrome), or "Developer Tools" (IE8 and up).
  2. Get thyself to a Notepad. Any Notepad with basic search will work just fine. On Windows systems Notepad is built right into your operating system so just hit Start-->Run, type notepad into the little box you'll see and hit OK to open Notepad up. If you don't have the Run feature handy, go to My Computer/Local Disk (C/or whatever drive letter your computer uses here)/WINDOWS (or Windows) then look for notepad or notepad.exe and click to open it up.
  3. Open your DW page in your browser, then open your browser's built-in or add-on CSS editor (I use the Web Developer add-on for Firefox simply because I used it long before live browser editing became a thing and I just can't even, but don't let that stop you). Regardless of which editing tool you're using, go the CSS or Style Editor menu or tab it includes and start looking for a Dreamwidth stylesheet with this in its name: res/123456/stylesheet, where "123456" is the exact number of your style sheet and probably won't be "123456" (in the Web Developer for Firefox add-on, this will show up simply as "stylehseet" so just look for that).
  4. Copy and paste the entire style sheet into Notepad. Now using the Search feature in your Notepad program paste or type in the following: @media with no quotes or other punctuation, just like that. The search feature will jump to the first instance of @media in the code you just copied, which will look something like this (maybe not exactly like this, but don't worry about that):
  5. @media only screen and (min-width: 30em) {
        .two-columns-left #content,
        .three-columns-sides #content {
            border-left: 15em solid transparent;
        }
        .two-columns-right #content,
        .three-columns-sides #content {
            border-right: 15em solid transparent;
        }
        .three-columns-left #content {
            border-left: 30em solid transparent;
        }
        .three-columns-right #content {
            border-right: 30em solid transparent;
        }
        .column-right #content {
            min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
        }
    }
    
  6. Copy the entirety of this code - from @media to the very last bracket, just as you see I did above - then go back to Notepad's toolbar and click File-->New and open a new blank window to paste this chunk of code into. Go back to your first Notepad window, hit Next or F3 to find the next chunk of @media CSS, then paste it into the other Notepad window beneath the first chunk. Keep rinsing and repeating but there should be no more than 4-5 chunks of this code to copy over.
  7. Now what you want to do is remove the @media commands and the very first and last brackets from each chunk of code you just pasted into your second Notepad window. So that when you're done, your code looks like this:
  8. 
        .two-columns-left #content,
        .three-columns-sides #content {
            border-left: 15em solid transparent;
        }
        .two-columns-right #content,
        .three-columns-sides #content {
            border-right: 15em solid transparent;
        }
        .three-columns-left #content {
            border-left: 30em solid transparent;
        }
        .three-columns-right #content {
            border-right: 30em solid transparent;
        }
        .column-right #content {
            min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
        }
  9. Take these chunks of code that you've removed all the @media commands and first and last brackets from and copy and paste them into the big box on this page, then hit the Save Changes button. Reload your DW and now you should have a perfectly unresponsive layout.

Ask me some questions about this! Or tell me the Easier Way To Do It because there probably IS one and I'm all ears! I'll do what I can to answer you in the comments and/or to update my post with better/easier steps as needed.

marahmarie: MM straightenin' ur blog & stuff (alignment)

I've known it all along, but outside of re-installing my last Bloggish layout (it was on Anti-AOL, but my custom code for it no longer works, which I know because I have an LJ account that exists just to help me fix it, which I haven't gotten around to doing in three years) I could never think of a good reason to put myself through all this just to install any Mixit/Expressive layout currently in existence. For reference, I used nothing but Bloggish and Mixit on LJ for EE (this blog) but of the two layouts, I found Mixit the hardest to work with and the least stylish (but I liked it because its code base is more modern than Bloggish's, which was created in, I don't know, 2001, I guess).

Then I saw The Croatian Magician, and even though I'm banned forever from commenting on layouts at The Fulcrum, I fell really hard for it. So I've installed it, without comment of course, as a theme layer. You can see it live on my Dreamwidth (well, sort of live - you have to keep that "?s2id=764192" part of the URL after the last backslash of whatever page you're on, or you won't see it at all). I had meant to add the theme layer it uses to [community profile] css_code but I done screwed up (forgot to switch users) but owing to this issue I can't. I'm not sure if I have to buy paid time for my comm to install and use it, but I'll look into that another day. In the meantime I'm going to play with it like I play with all pre-made layouts I use, before going absolutely live with it in either location.

Which all came about because I can't go a day without coding or re-coding something anymore - it's an addiction. It's how I 1) relax, 2) continue to feel somewhat productive and 3) keep my brain moving so it doesn't completely rot from lack of math/spatial challenges/moar pretty. I've recoded this layout to the point there's almost nothing left to do (I don't like my comment-page titles, and I have a huge bug I haven't unraveled in the edit box attached to comment forms, but besides that, it's starting to bore me) and I won't be updating the layout on [community profile] css_code because I don't like it, and I'm taking a seriously long break from Greasemonkey coding because Google's pushed me waaaaay past the point where I can suffer along with all the changes they're making, so my new Mixit layer should keep me busy trying to fix the un-fixable and/or spiff things up for a while (in fact, I imagine Core 1 will drive me crazy before long - which is kind of how I like my challenges to work).