[Pro] Custom Bullets and Aligning

OK. Copied the hex values, still not working.

Also, I see the second line of the bulletted item doesn’t indent. It stays under the bullet instead of “hanging” under the text.

Bob


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

Can u put it online so I can see whats wrong with the code?


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

Here’s a bare bones version of the page.

http://k923.net/Freeway/ss_about.html

Bob


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

OK. That one doesn’t have the hex values in there. I did this so many times, I guess I didn;t save the other one.

You get the idea, though.

Bob


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

OK. I think I figured out why the hex color wasn’t working. I need to put a “#” in front of it.

Still can’t figure out why the indents don’t work on the second line, though.

Bob


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

Thanks for your patience Robert. I just had a quick look at your code and
it is very close to what it needs. I have a couple of suggestions that I
hope will make it easier for you.

First, it looks like you made the styles in Freeway Pro’s Style Editor -
like

list li:nth-child(2):before

If so, then use the Style Editor’s interface to set the color and FWP will
automatically write the color code for you. The reason your extended color
code is not working is you have not written the syntax correctly and the
browser isn’t seeing it. That is why I say if you have indeed created these
styles in the Style Editor, you would have an easier go using the Style
Editor interface to set the color of the bullets.

The indent problem can be fixed too, because the colored bullets are not
“real” html bullets… with the help of the css text-indent property.

Download includes all the css named colors in the Freeway file:

http://cssway.thebigerns.com/workbench/color-bullets/

Best,


Ernie Simpson

On Sun, Dec 23, 2012 at 2:37 PM, Robert B email@hidden wrote:

OK. That one doesn’t have the hex values in there. I did this so many
times, I guess I didn;t save the other one.

You get the idea, though.

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

I can’t believe I did the colors the hard way. Didn’t even think of using the attribute in the styler!

The indent worked great, too.

Thanks Ernie and Dave for YOUR patience and the files. And, thanks for that link, Dave.

It’s a Festivus miracle!

Now…not doing it on this site, BUT, what if I needed different bullet list styles in the same site or even on the same page?

This is all pretty neat. I’ve seen a few examples of changing the colors of bullets but none showed how to make each one different.

Bob


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

what if I needed different bullet list styles in the same site or even on the same page?

Then you will need to be more specific with targeting your CSS styles

http://www.deltadesign.co/fw_examples/CSSstuff/multicolorlist.html

#item1 .list li:before { content:" 25A0"; font-size: 140%; padding-right: 10px; color: orange }
#item1 .list li:nth-child(2):before { color:cyan }
#item1 .list li:nth-child(3):before { color:yellow }
#item1 .list li:nth-child(4):before { color:green }
#item1 .list li:nth-child(5):before { color:red }
#item1 .list li:nth-child(6):before { color:purple }
#item2 .list2 li:before { content:" 25A0"; font-size: 140%; padding-right: 10px; color: green }
#item2 .list2 li:nth-child(2):before { color:red }
#item2 .list2 li:nth-child(3):before { color:blue }
#item2 .list2 li:nth-child(4):before { color:purple }
#item2 .list2 li:nth-child(5):before { color:yellow }
#item2 .list2 li:nth-child(6):before { color:orange }
.list { font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.5; list-style:none }
.list2 { font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.5; list-style:none }

Where item1 and item2 are the two html containers holding the lists

D


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

So, you just made another list style, .list2.

Simple enough. As I’m not a coder, I don;t understand all the rules. Most of the time, I understand the answer, I just can’t get to it myself.

Thanks again. It’s been an educational thread!

Bob


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

So, you just made another list style, .list2.

No - not just

The important thing to differentiate as to which ‘box’ to apply this to is the #item1 or #item2 at the start (selector)

Which means: in a box with the ID ‘item1’ find the text with the class ‘list’ of the type ‘li’ and do some stuff to it.

D


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

Box??

.list(x) is a style to apply to a text list, as a paragraph style.

1- type a “list” of things

2- hilite and press the right arrow on the List pane in the Inspector

3- apply the .list1 (or .list2, or whichever style)

And that’s how we do the List :slight_smile:


Ernie Simpson

On Dec 24, 2012, at 4:11 AM, “DeltaDave” email@hidden wrote:

So, you just made another list style, .list2.

No - not just

The important thing to differentiate as to which ‘box’ to apply this to is the #item1 or #item2 at the start (selector)

Which means: in a box with the ID ‘item1’ find the text with the class ‘list’ of the type ‘li’ and do some stuff to it.

D


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

Box??

My point was Ernie that you have to add more specificity if you want to target different Html containers with different styles. Hence #item1 targets the ‘box’ that has the title in FW of item1 etc.

D


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

The different styles (.list1, .list2, .list3, etc.) handle that specificity
just fine. Adding container id’s to the style is absolutely unnecessary.


Ernie Simpson

On Mon, Dec 24, 2012 at 8:28 AM, DeltaDave email@hidden wrote:

Box??

My point was Ernie that you have to add more specificity if you want to
target different Html containers with different styles. Hence #item1
targets the ‘box’ that has the title in FW of item1 etc.

D


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

Agreed, all other things being equal. But imagine if you wanted to have one or two minor points of difference between two or more complex styles. Rather than duplicating everything about those styles, I would put everything they have in common into a single class style, and then override the few unique things by dint of one or more ID-based styles. Then you apply the classname style to everything that you want to share the core attributes, and let the ID carry the few differences (and by virtue of the overwhelming specificity of ID-based styles, not have to worry about which one came first in Freeway’s resolutely alphabetized stylesheets).

Walter

On Dec 24, 2012, at 8:43 AM, Ernie Simpson wrote:

The different styles (.list1, .list2, .list3, etc.) handle that specificity
just fine. Adding container id’s to the style is absolutely unnecessary.


Ernie Simpson

On Mon, Dec 24, 2012 at 8:28 AM, DeltaDave email@hidden wrote:

Box??

My point was Ernie that you have to add more specificity if you want to
target different Html containers with different styles. Hence #item1
targets the ‘box’ that has the title in FW of item1 etc.

D


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


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