Comments: 10
Steve, I don't see anything under points 2 and 3.
I see it now.
Steve McKinney 5 years ago
Fixed, I think. I'm still trying to find the best way to add code snippets to a post. I was trying out in this one, and it looked great when I previewed it, but the code snippets disappeared when I actually posted it! So I decided to go with plain text for the time being. It's not pretty, but it's there. :-)
Steve, the BookLikes folks should just go ahead and hire you, for all the ways you're volunteering to help to making this site more accessible alone. :) Another great tutorial! And I have a feeling you'll eventually figure out how to paste straight code into a post without it being eaten at an edit or repost, too ...
>Settings (little cog in the upper right hand corner of your page)
> Tab "Blog"
> Theme: "customize" (green button about halfway down the "Blog" settings page
> "Edit HTML" (also a green button)
> select "Shelf" in the white-background drop down menu embedded in the black bar horizontally splitting the screen you're now seeing (the drop down menu's default setting is "blog")
> This takes you to another split screen, which has the HTML for your shelf page at the top and a preview screen at the bottom.

Btw., the preview screen has some of your own settings/features, e.g. your own profile pic, blog theme etc., but the contents (i.e. on this page, the books on your shelf) are preset and chosen so you can double check the effect that each of your edits has on the appearance of elements that MIGHT appear on this type of page.
Steve McKinney 5 years ago
It appears to have worked; I just visited your Shelf and the green book covers have titles and authors. :-)
I actually like that you've set your blog as a sort of visual blank slate from which to start. Does wonders for accessibility! :)
For horizontal lines, use < hr / > (minus spaces after the < and before the > -- I'm inserting those only to make sure the tags remain visible).

As for vertical lines, a lot of the elements on BookLikes are formatted as containers ("div"). So what should work for vertical lines (also shorter horizontal lines) separating those elements at least in theory would be defining the left or right borders of those containers (or top and bottom borders, for horizontal lines) as solid lines of 1px or whatever width you want to use. I've recoded a fair bit of individual elements over the weekend, so let me know which ones you're looking at (I'm assuming vertical line between the side bar and the main text portion of the page, for example)? If I've already found them, I'll be happy to share. (PM me on GR if you prefer that.) I was thinking about writing a tutorial about creating vertical and horizontal separators via CSS anyway, I might as well use this as a reason to actually do it :) Also, Krazykiwi said she was thinking about mapping the code for the 5 types of pages we get here, but that's a HUGE undertaking and I don't know whether she's actually started doing it yet.
:( I feel your pain.

Alright, PM me whenever. :/
Which it would be for me, too, I suppose -- I've never even tried to use Stylebot yet ...