Angela @ Touch the Night

My to-do list is growing!

**************************************************

I've been too busy collecting everybody else's tutorials so far to really do much formatting and coding of my own, but one thing I managed to tinker with thanks to a bit of code graciously shared by Ian a/k/a If wishes were horses... in this GR discussion post is to create a scrolling quotes marquee:

It's a nifty little feature that is fairly easy to create, and which you can insert into your blog even if, like me, you haven't done much else yet.

In my blog, the marquee is currently only featured on my main blog page because I'd like to add a few more quotes before copying it to the other pages, but anyway, for anybody who'd like to create one too, here's what you do:

On your Dasboard, go to Settings (this part most of us are familiar by this time I think but just in case):

In "Settings," hit the "Blog" tab.

Scroll down to "Theme: customize" and click the green button.

In the screen then opening, find the quadrangle where the model blog screenshot is surrounded by four green buttons, saying "Themes," "Settings," "Save" and "Edit HTML."

"Edit HTML" is the one you want.

(Apologies to all those who've been through this before and know all the steps up to here by heart -- I'm figuring as long as new people keep coming to the site, better take things one step at a time, though.)

You're now seeing a split screen, with your blog's code at the top and a sort of model image of your blog at the bottom (right theme, header and profile picture, but not your own content -- I suspect the content is chosen so you're able to preview how each of your editing decisions is going to affect the way individual features of your blog will display.)

Find the code for the spot where you want to place your marquee.  I've put mine below the preview of my bookshelves, so I needed to find this bit of code:

... which if you haven't done much with the design of your blog yet, should be right around lines 215 or 216 through 240.

Now create one or more new, empty lines below the last line of the code for the preview of your shelves (simply hit "return").

In the new lines, insert the below code and text:

Pay particular attention to the bit in braces (curly brackets): That's CSS, which is tricky because you have to get the syntax exactly right.  Omit a single symbol, especially the colon between property and attribute or the semi-colon after the attribute (or the braces -- they're part of the code, too!), and your browser is going to ignore the whole damned thing and you'll just sit there staring at your screen and wondering why it's not displaying the way you meant it to.  (Trust me, I speak from repeated painful experience.)

So:  The basic CSS syntax is ALWAYS and UFAILINGLY:

"element {property:attribute;property:attribute;}"

You can include as many properties as you want in between the braces; just be sure to end the last "property:attribute" sequence with a semi-colon as well.

The HTML < style > tags before and after the CSS code tell your browser that the code between those tags is not HTML but CSS; they're necessary because but for them, the browser would not recognize that bit of code and ignore it, too. (Again apologies to everybody who already knows this.)

If you use the CSS properties provided in the above model code taken from Ian's post on Goodreads, those are going to give you a slightly different-looking marquee from mine. FWIW, here's what I used instead:

In other words, I added:

* A top margin of 20px to make sure the marquee wouldn't stick too closely to the bookshelves under which it is posted;

* A "justify" text-align property (the default is "left-align" -- if this is what you want, you don't need to set any text-align property at all);

* And a bit of padding around my text (10px) to make sure it wouldn't stick too closely to the marquee's borders, which is easily bound to happen if you set your text-align property to "justify."

I also modified:

* The marquee's width and height properties (you can set your marquee's height as big or small as you want, but a width greatly in excess of 225px is probably not going to work with the overall width of the BookLikes side bar);

* The font-family: The first one is the one you actually see displayed; the next ones are my standard backup solutions in case that, though I wouldn't really expect that any longer today, "Century Gothic" should fail to be recognized as a font-family;

* The font-size: Century Gothic at 14 or 15px looks fairly large in a box only between 200px and 220px in width and height, so I made it smaller (12px);

* The border-style (one solid line instead of a double line)

* And the border-width (1 instead of 4, which would be enormous in a single-line solid border.)

To find out what other properties you can use and which attributes you can give them, see this CSS reference page: http://www.w3schools.com/cssref/

Once you're happy with the basic settings for your marquee, you can start filling it with quotes.  So now replace the two placeholder quotes with two quotes you actually want to use yourself.  After that, you can add as many further quotes as you like -- all quotes should however be properly separated by "paragraph" and/or "line break" tags (< p > and < b >, respectively).  Also, do remember that if you add very many quotes, you're giving your (and everybody else's) browser a lot of content to parse, so a LOT of extra lines of code might slow down the load of your page.

Since your quotes are being entered into an area formatted in HTML, it is probably easiest to also format their appearance in HTML, e.g. by adding < b > < /b > and < i > < /i > tags for bold text and italics, instead of coding that bit in CSS as well (which of course you could).

Don't forget that you MUST close the HTML marquee tag after your last quote with < /marquee > (as always, minus the spaces -- I'm using those only to make the tags display in this tutorial; if I wouldn't use them, the browser would treat this bit of text as actual (and hence, invisible) tags).  If you don't close the marquee, all the rest of your blog page is going to be squeezed into the marquee's tiny space.  (Which is the kind of thing, trust me, that has happened to me more than once, too.  Either for completely forgetting a closing tag -- which may easily happen if you embed several elements inside each other -- or for a malformatted closing tag, e.g. "(/marquee>" or something similar.)

You may want to preview (see "1" below) your marquee's appearance from time to time during the editing process to make sure you're not doing something you're going to regret once you've saved it.

When you're done, though, don't forget to actually hit "save" as well! ("2" below -- both buttons are on the right side of your split screen).

Eh voilà -- you've added a feature all of your own to your blog that is not already provided for in BookLikes's templates. Congratulations!

Original Post: Adding a Scrolling Quotes Marquee to your Blog