I may have asked this in the past, but I have an instance where I need custom bullets. I basically styled the text as a list with Unbulletted and then pasted in small graphic boxes and that seems to work.
BUT…how can get the text on the second line of a bullet to “hang indent”, as in line up with the text on the first line and not the bullet.
The other caveat is, all the bullets are different colors.
Right now, I just used option-space to line up the second line.
Have a look at Tim Plumb’s List Item Styler (I think that’s the name) on http://freewayactions.com. What you’ve done is actually hurting your page in terms of its semantic value (think about blind people and google) as well as not making it easy for you to get the visual style you want. Avoid the “unbulleted” list styles in Freeway – they are semantically broken.
You will need to add custom CSS through Extended dialogs. Is there an example online that shows the lists you want to style? It’s really not that difficult.
Todd
Maybe there’s a way to add some code via Markup Item or similar.
Hi Bob,
That is quite a challenge - but then I like challenges.
Given the time I would do this using an Action and wrap each list item in a class that you can then style with regular CSS styles. What I’ve done, however, is created a sample Freeway Pro file that does the bullet styling using nth child selectors which should work well in most modern browsers. Anything before IE 9, however, will display all of the bullets in a single colour (orange in this case).
Download the file and take a look at the CSS styles defined for the list. If it proves to be a little too complex to follow let me know and I’ll try and pick up on this again after the holiday break.
Regards,
Tim.
On 22 Dec 2012, at 19:51, Robert B wrote:
My girlfriend is always testing me when she designs!
Maybe there’s a way to add some code via Markup Item or similar.
Hi Bob,
I’ve got to dash in a second and wrap presents but as Todd says the before pseudo style is so I can specify the size of the bullet in the CSS. The default square bullet was too small and I could have done it another way but it would have meant making the list items large (just to get the bullets the right size) and then wrap the text in span tags to reduce the text to the correct size.
If you get totally stuck with the CSS get back in touch (either direct or through the contact form on the site link below) and I’ll see how easily I can pull this into an Action for you. Will the bullet colours always be in this order and what happens if you have more than in your example? Does the colour sequence repeat itself?
Regards,
Tim.
So far, that’s the only list like that. VERY small site, but I know she will do this again on other sites, so I will be doing it again at some point. For this, I think she just picked random colors for each bullet.
I’m running out myself, but I’ll see what I can do with it tomorrow.
Tim, this is beautiful and inspiring. Very well done, sir!
–
Ernie Simpson
aka The Big Erns
On Sat, Dec 22, 2012 at 4:03 PM, Tim Plumb email@hidden wrote:
Hi Bob,
That is quite a challenge - but then I like challenges.
Given the time I would do this using an Action and wrap each list item in
a class that you can then style with regular CSS styles. What I’ve done,
however, is created a sample Freeway Pro file that does the bullet styling
using nth child selectors which should work well in most modern browsers.
Anything before IE 9, however, will display all of the bullets in a single
colour (orange in this case).
Download the file and take a look at the CSS styles defined for the list.
If it proves to be a little too complex to follow let me know and I’ll try
and pick up on this again after the holiday break.
Regards,
Tim.
On 22 Dec 2012, at 19:51, Robert B wrote:
My girlfriend is always testing me when she designs!
Maybe there’s a way to add some code via Markup Item or similar.
If you are using color names, they have to be valid CSS color names - not just any name. You can also use hex color designations like #99AC33, or RGB and RGBa.
bottom line, whatever color designation you use, must be in valid syntax for that form.
When you set your colors in FWP Style Editor, the app converts to the appropriate hex color code.
–
Ernie Simpson
On Dec 23, 2012, at 11:46 AM, “Robert B” email@hidden wrote:
OK. I made all the new styles for my site. I used colors I made up for my site, but they don’t seem to work.
Everything else seemed to work, except I wound up with all black squares.
My colors have names like “xx_red”. If I used “red” it seemed to work.
