Skip Navigation

Scribbling Bullets

Travel Forums System Talk Scribbling Bullets

1. Posted by Isadora (Travel Guru 13926 posts) 7y

I just uploaded the latest Foundation blog entry and used a few bullet points. Because I thoroughly love the Scribbles background design, that's the one I use to view blogs. In viewing the entry I posted, the design and the bullet points don't work all too well together... Yes, I realize I can choose another template (and I checked others out and they work well) but I like Scribbles. I also realize it is a Phu Ly (not TP) creation. (Please correct me if I have not remembered the artist correctly.) I just thought I would point it out and maybe it's where I placed the bullet points but it's not very pretty... I also have my monitor set to 1280 x 1024.

(I just have a thing for VW Microbuses...)

ps: I do know the answer is going to be "change templates" but... ;)

2. Posted by Sander (Moderator 4808 posts) 7y

This is simply a problem with the CSS, which wasn't quite thought through.
There's a rule in 9.css:
#blogcontent ul li {margin-top: 2px;background: url(img/9/bullet.gif) 0% 50% no-repeat;text-indent:15px;}
where the 50% means that the bullet appears at 50% height of the total list item. That's perfect when the list item is one line high, but when it's more than one line, as is the case for most of your list items, it breaks.

You can fix this yourself by customizing that template and changing the line to:
#blogcontent ul li {margin-top: 2px;background: url(img/9/bullet.gif) 0% 0.5em no-repeat;text-indent:15px;}
where the 0.5em means that the bullet appears half a line's height from the top of the list item, exactly the behaviour we want.

Or if you can't quickly find the line to edit, just add the following line way at the bottom:
#blogcontent ul li { background-position: 0% 0.5em; }

I assume Sam or Peter will make this same change to the overall template once they see this topic.

[ Edit: Edited on 01-May-2009, at 14:00 by Sander ]

3. Posted by Isadora (Travel Guru 13926 posts) 7y

Thanks Sander!

I did the following and none of the actions have fixed it:

1) Replaced the old #blogcontent ul li line with the new one only.

2) Returned that line to the original and added the second code to the bottom of the page.

3) Replaced old line with new and added second code to bottom of page.

Yes, I'm obviously code-challenged...

Edit: Just on lark, I quit Safari and opened it again. I then went to the blog and changed the template to Adventurer. Clicking the "View my new template" - the blog still has the Scribbles background even though Adventurer is showing as the chosen template. Damn - I've broken TP again!

(ps: Apologies to Phu Ly and John Oxton for confusing their templates. Adventurer is my second favorite done by Phu Ly.)

[ Edit: Edited on 02-May-2009, at 07:17 by Isadora ]

4. Posted by Sander (Moderator 4808 posts) 7y

Currently the blog is set to Adventurer. Could you just change it back to Scribble, make that change I suggested (either one), save the edited template, and leave it like that? It's possible I overlooked something with my instruction, but it's impossible for me to tell while you have this other style selected.

5. Posted by Isadora (Travel Guru 13926 posts) 7y

Quoting Sander

Currently the blog is set to Adventurer. Could you just change it back to Scribble, make that change I suggested (either one), save the edited template, and leave it like that? It's possible I overlooked something with my instruction, but it's impossible for me to tell while you have this other style selected.

Done and done. Changed the #blogcontent ul li line only.

Though it was still set to Adventurer, it kept the Scribbles template in place. I have changed back to Scribbles and made the change mentioned above (and only to the #blogcontent ul li line).

Thank you again. Guess I was too eager for results... Or, I've really broken something again... (I'm great for finding problems or screwing things up - take your pick.)

6. Posted by Sander (Moderator 4808 posts) 7y

So the design looks "fixed" to me now. Before, the bullets would overlap the text of a line in the middle of each list item, now they're placed correctly in front of the first line.

Maybe you're somehow seeing a cached version of the page? (try hitting ctrl-shift-reload). Or maybe I misunderstood what you meant originally when you wrote that things were "not very pretty", and you just want to get rid off the fuzzy bullets? If so, you can replace them with bullets from any other design.
For example, change:
#blogcontent ul li {margin-top: 2px;background: url(img/9/bullet.gif) 0% 0.5em no-repeat;text-indent:15px;}
to:
#blogcontent ul li {margin-top: 2px;background: url(img/8/arrow.gif) 0% 0.4em no-repeat;text-indent:15px;}
to use the red arrows from the postcard design (which actually work surprisingly well there).

Or to:
#blogcontent ul li {margin-top: 2px;list-style-type:square;}
to get just plain black squares.

[ Edit: Edited on 02-May-2009, at 16:33 by Sander ]

7. Posted by Isadora (Travel Guru 13926 posts) 7y

Thank you one more time, Sander!!! And, I have (mostly) "fixed" the problem. I emptied my cache yesterday, thinking the same thing but that didn't help. Here is how it was coming up for me even this morning:

TPF Blog Screen Shot

The bullets are misaligned so they are stuck between the lines of text (hence "not very pretty"). I have since figured out what caused that hiccup. I used asterisks for the bullets, hoping they would be the gray dot bullets when published. When I previewed my entry, the bullets remained as asterisks. Thinking I was smart, I used the list function which then showed the bullets as the gray dots when I previewed again. When I published it, the asterisks were still there (no gray dots) and misaligned. I have now edited out the list code from the entry and the asterisks are lining up and not looking quite so fuzzy.

I like the idea of the red arrows and will now try to change my fuzzies to arrows. At least things are aligned which is what I wanted the most.

Thank you again for all of your help!!! Cheesecake?? ;)

(ps: this is why I think a blogging tutorial wiki would be wonderful - for blog/code-challenged people like me!!)

Edit: I have just replaced the bullet code to:

#blogcontent ul li {margin-top: 2px;background: url(img/8/arrow.gif) 0% 0.4em no-repeat;text-indent:15px;}

I still see asterisk bullets. I also emptied my cache again but no arrows. Oh well - asterisks will have to do for today.

[ Edit: Edited on 03-May-2009, at 08:38 by Isadora ]

8. Posted by Sander (Moderator 4808 posts) 7y

Quoting Isadora

Here is how it was coming up for me even this morning:

TPF Blog Screen Shot

The bullets are misaligned so they are stuck between the lines of text (hence "not very pretty").

Okay, that is what my first CSS fixed. (And it really did fix it.) I don't understand why it didn't fix it for you, but that problem was purely on your end. Maybe you'd somehow forced it to use the original scribble template, rather than the customized one? (Could you manually select "default" in the template select box on the right hand side of the blog? And then leave it.)

Thinking I was smart, I used the list function which then showed the bullets as the gray dots when I previewed again. When I published it, the asterisks were still there (no gray dots) and misaligned. I have now edited out the list code from the entry and the asterisks are lining up and not looking quite so fuzzy.

You want to put back the list code. That's what made them real bullets rather than the current asterisks, and what would allow changing those bullets to red arrows or squares. Without the list code it's impossible to turn them into anything else.

So, to recap, you should:
1) put back in the list code and submit.
if you now see red arrows, you are done.
if you don't see red arrows:
2) select "Default" in the selectbox under Change style and submit.
if you now see red arrows, you are done.
if you don't see red arrows:
3) view source on the page, and look for the very first line which starts like this:
<link rel="stylesheet" type="text/css" href="
tell me exactly what comes after 'href="'

Don't change anything else.

9. Posted by Isadora (Travel Guru 13926 posts) 7y

Quoting Sander

So, to recap, you should:
1) put back in the list code and submit.
if you now see red arrows, you are done.
if you don't see red arrows:
2) select "Default" in the selectbox under Change style and submit.
if you now see red arrows, you are done.

I'm DONE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I performed steps 1 & 2 for both blog entries and I now have red arrows!!!!!!! They do look cool!!!!

You are definitely a very patient man, Sander, and for that, I am very very grateful!! ;)

Isa now removes her dunce cap and can quit sitting on the stool in the corner...