[Pro] Custom Bullets and Aligning

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.

Thanks!

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, Walt. I’ll take a look.

Yeah, I kind of figured I was doing hack. That where I usually start, where it “looks” good, then I have to construct it correctly.

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK. Checked it out and it’s sort of what I need.

But, I have each bullet a different color. This action looks like it replaces all bullets with one image.

Is there a way to get different bullet styles in one list?

Thanks.

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Lists can be styled anyway you like but you will need to do it by hand, I doubt there’s an action to do it for you. But I’m often wrong.

Todd

Is there a way to get different bullet styles in one list?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

My girlfriend is always testing me when she designs!

Maybe there’s a way to add some code via Markup Item or similar.

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s an image taken from the INDD document:

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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).

http://www.freewayactions.com/test/multi-coloured-list/

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.


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks very much, Tim, for taking the time.

I’ll download and have a look.

It’s nice to know she not just challenging me this time!

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I understand your methodology (somewhat), but I don;t understand why it works.

The .list li:before style has me really stumped.

Would be neat if it were Actionable.

Thanks so much for working it out.

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The :before pseudo-selector refers to what precedes the list item

  • . Tim used it to insert the ‘square’ and specify it’s default size and color. Pseudo selectors (of which there are several) are very powerful.

    Todd

    I understand your methodology (somewhat), but I don;t understand why it works.

    The .list li:before style has me really stumped.


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

  • 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.

    On 22 Dec 2012, at 21:55, Robert B wrote:

    The .list li:before style has me really stumped.

    Would be neat if it were Actionable.


    FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    Hey, 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.

    Thanks again, Tim.

    Bob


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    Tim, this is beautiful and inspiring. Very well done, sir! :slight_smile:


    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).

    List

    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.


    FreewayActions.com - Freeware and commercial Actions for Freeway Express &
    Pro - http://www.freewayactions.com


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    Here are other bullet shapes you can make with this method…


    Ernie Simpson


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    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.

    Bob


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    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.

    Bob


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    My colors have names like “xx_red”. If I used “red” it seemed to work.

    There are certain colors where you can use red, green, purple etc

    xx-red is not one of those - have a look at http://www.w3schools.com/html/html_colornames.asp

    If you want to use other colors then use their hex value like #FF5522

    David


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    I figured it was a naming problem.

    I’ll copy the hex numbers from the color styles.

    Thanks, guys.

    Bob


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options