[Pro] Customizing indents on bulleted lists

Is there a way to customize how far in the indents begin on bulleted lists? The default is approximately 26px and I want it to be much less. Thanks.


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

If there is a “Freeway” way to do this, I haven’t heard of it. This is how
I do it.

The first thing to do is make your list. Type out your list items in FWP,
select them, then click the right indent level once under the List section
of the Text Inspector. Choose the bullet type (round or square). I know
this sounds basic, but it is important to properly make the list so you can
control it.

The next step is to create a style for your list. Open the Style Editor and
click the + symbol at the window bottom to create a new style. Give it a
memorable name (I usually start it with “LIST” so I can find it easily).
You can set the font, font-size, and other characteristics - the most
important of which is the List type. I know we already set that in the Text
Inspector, but it is vital to also set it here. Once you have your style,
then use the text cursor to select your list items and apply the style from
the palette.

Now, it is important to understand that with HTML lists, the spacing on the
left is controlled by a property known as padding. But in Freeway Pro,
there is no direct way I know of to affect this property on a list.
Fortunately, FWP allows users to extend or custom edit style properties.

Open the Style Editor and select your list style, then click the Extended
button in the upper right of the window. Create a new style declaration
with the property name padding-left and whatever value you want.

Exit back to your workspace and preview the result.

Tip: Sometimes you need to Force Republish your page (from the Page menu)
to make FWP update changes made with the Style Editor.

Best,

Ernie Simpson

On Tue, Jul 29, 2014 at 12:58 PM, qhrider email@hidden wrote:

Is there a way to customize how far in the indents begin on bulleted
lists? The default is approximately 26px and I want it to be much less.
Thanks.


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

Thank you, Ernie. It worked!


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

There is sort of another way to do this where by you can adjust the left margin and then space after the bullet and the text and the colour of the bullet independent from the text and the size of the bullet as well

its not a standard list but it can all be done within freeway and its perfectly valid

create a list and choose unindented in the inspector palette
then change the automatic style1 name to something memorable e.g. mycustomlist
then add an extra attribute e.g. colour e.g. black THIS IS VERY important
What have you have done is created an unindented list and now it has a class added to it of mycustomlist

next create a new style and name it in the tag field NOTHING MUST BE ADDED IN THE NAME FIELD

.mycustomlist dd::before

Next add the amount margin left you wish the list to have e.g. 8px
and also add margin right, and lets say 4px (this is the space between the bullet and the text…
if you want to add a colour then do that now and also add a font style of arial as well
Also add a size as well to control the size of the bullet so add 13px
now click on the extended button and add this in the name field:

content

and in the value field add this

"25CF"

save and publish

now you have complete control of list position space between the bullet and the text the colour its size and even the character used… you could use any symbol you wanted e.g. a coloured dash

From what I can remember I think this works this works from IE8+

all the best max

example of this using fw7
https://dl.dropbox.com/u/4274685/FileChute/special-bullet.zip


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

Thanks, Max, I’ll definitely try that…good to have options. As a matter of fact, I was going to ask how to decrease the space between the bullet and text.


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

Max, if you’re going to those lengths, you may as well just make a style for a “real” bulleted list. The dd in Freeway is used incorrectly – and non-semantically – when you make the “unbulleted” list. (I have filed repeated bugs against this usage.) DD is an actual tag with a correct context and meaning, and if you mean to have bullets, using an unordered list is the semantic choice to make. You can use the same set of accessors (and the ::before trick) to style the bullets in a bulleted list – that’s actually how they get there in the first place.

Walter

On Jul 31, 2014, at 6:14 AM, max wrote:

There is sort of another way to do this where by you can adjust the left margin and then space after the bullet and the text and the colour of the bullet independent from the text and the size of the bullet as well

its not a standard list but it can all be done within freeway and its perfectly valid

create a list and choose unindented in the inspector palette
then change the automatic style1 name to something memorable e.g. mycustomlist
then add an extra attribute e.g. colour e.g. black THIS IS VERY important
What have you have done is created an unindented list and now it has a class added to it of mycustomlist

next create a new style and name it in the tag field NOTHING MUST BE ADDED IN THE NAME FIELD

.mycustomlist dd::before

Next add the amount margin left you wish the list to have e.g. 8px
and also add margin right, and lets say 4px (this is the space between the bullet and the text…
if you want to add a colour then do that now and also add a font style of arial as well
Also add a size as well to control the size of the bullet so add 13px
now click on the extended button and add this in the name field:

content

and in the value field add this

“25CF”

save and publish

now you have complete control of list position space between the bullet and the text the colour its size and even the character used… you could use any symbol you wanted e.g. a coloured dash

From what I can remember I think this works this works from IE8+

all the best max

example of this using fw7
https://dl.dropbox.com/u/4274685/FileChute/special-bullet.zip


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

Thank you everyone for your input.

Ernie, is there a ways to adjust the spacing between the bullet and text in your model?


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

Hi walter I know it isn’t specifically correct but I was trying to do it all within freeways environment without the use of multiple extended dialogues. + zeroing out the default bullet attributes etc.
Rightly or Wrongly this method does use what’s already available within the freeway ui with just one small exception which is the content “•” which is added via extended. but I agree it would be better if we could use the standard li rather than resorting to the dd

all the best max


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

But you don’t need to add the bullets back in to change the indent from the left of the bullets or the text after the bullets. It’s all one thing:

#myElement li {
	margin-left: 50px; /* space left of bullet */
	padding-left: 5px; /* space between bullet and text */
}
#myElement ul {
	padding-left: 0;
}

You’d only need to change the marker if you wanted it to appear differently, and before you try that, you still have list-style-item: square, circle, disc (default), not to mention all the other versions for ordered lists. You can also modify the existing list item marker with the ::before syntax, which gets you a reference to the marker itself, so you can make it a different color, make the font different, or the size larger or smaller, all without replacing the marker with your own element.

Walter

On Jul 31, 2014, at 12:34 PM, max wrote:

Hi walter I know it isn’t specifically correct but I was trying to do it all within freeways environment without the use of multiple extended dialogues. + zeroing out the default bullet attributes etc.
Rightly or Wrongly this method does use what’s already available within the freeway ui with just one small exception which is the content “•” which is added via extended. but I agree it would be better if we could use the standard li rather than resorting to the dd

all the best max


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

qhrider wrote:

Ernie, is there a ways to adjust the spacing between the bullet and text
in your model?

Walter may have given you an idea about that already, but let me also give
an example…


##Indents and Left Spacing

The key to controlling list styling in Freeway Pro 6 is a basic
understanding of how HTML lists are put together, then using FWP to create
the necessary tags and styles for the output. Let’s review:

HTML list components for bulleted lists:

  <ul> tag - the unordered list tag… identifies the scope of the list
  <li> tags - list item tags… identifies the individual items that make

up the list

Okay, that’s fairly simple… an HTML list isn’t just visually identifiable,
but has special tags to tell browsers what kind of list it is, and which
items belong to that list. Let’s keep it simple by just discussing bulleted
(unordered) lists for the moment. To recap how I make lists in FWP, here is
that link - Lists, List Styles, in Freeway Pro 6

##Methods of Spacing

Padding and Margin are two very common CSS properties which add space
around HTML items. There’s no law about using one or the other, as long as
you understand the difference and that FWP doesn’t always tell you which is
being used.

Basically, margins are spaces around items while padding are spaces
added-to them…

So in the previous example - Lists, List Styles, in Freeway Pro 6 - I
covered how to set the left-spacing of the list using the padding property
of CSS. We could have used the margin property for that, but in my
experience margin and padding sometimes have unexpected results when
interacting with other page elements. Remember, this is about how I would
do these things… feel free to experiment and exploit the flexibility of
CSS.

##So What Exactly are We Spacing?

How do browsers seem to interpret margin and padding? Let’s take a look…

Breaking it down, padding-left CSS property on the entire List element (

    ) moves the whole list container to the right by increasing the overall width of the element on its left side. The margin-left CSS property applied to the List Items (
  • ) adds space before both bullet and text, while the padding-left CSS property widens the text space on its left-side between the text and bullet. To separate the text from the bullets, we will want to affect the padding-left CSS property of the list items for this list.

    ##Okay, So How Can We Make Freeway Do This?

    In the previous example ( Lists, List Styles, in Freeway Pro 6 ) we set up
    our list with a special CSS style which we called “LISTsquare”. Whatever
    the name you give your list style, we will want to use that name to help
    Freeway find those items – which is different than affecting all lists
    universally, but let’s just focus on this list for now.

    We will do this in FWP by creating a special style to target just the list
    items that belong to lists with this style. This is a little advanced, so
    don’t try to apply this new style to anything and don’t freak out when
    nothing changes in the FWP workspace. It may feel “wrong” but trust me, it
    is absolutely right.

    Open the Style Editor and create a New CSS style. Now, the tricky part is
    in the naming of this new style… we are going to have to be very picky
    about it. First, take the name of the list style - LISTsquare - and type
    that into the TAG field. Then add a period (or “full-stop” as our
    english-impaired cousins call it) to the beginning. Next, add a space and
    lower-case LI (li) to the end. Finally, delete whatever automatic name FWP
    puts in the Name field and make sure it stays empty. It should look like
    this…

    To set the padding-left property, open the Extended Style interface using
    the button top-left. Create a new style declaration named “padding-left”
    with a value of your choosing. Don’t forget to indicate the unit kind (px,
    em, etc.)

    And that’s it! Although FWP can’t show this custom code applied in the
    workspace, it will show in the preview and on output to your browser.

    ##Bonus Tip

    Many users ask how to adjust the space between list items… this is the same
    style I use to achieve just that - by using the margin-bottom CSS property.
    The margin-bottom is the same property used to separate blocks of
    paragraphs… you can set it in the Extended interface if you like, but FWP
    has a control for it in the regular Style Editor paragraph controls - under
    the clumsy name of Space After. Don’t fret as FWP will use the correct
    terminology when it outputs the page code.


    Ernie Simpson


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

Hi Walter
Obviously I am doing something wrong but that method never works for me across all brewsers!
I can never get the list to be aligned right over to the left of a div with no spacing or over hang without using the list style position and even then the space between the bullet and text doesn’t reduce to 0 plus more often than not I usually need this to be reused
Thats why I use a simple class on a definition list and adding the bullet back in but if you can point me in the right direction on the no spacing between the bullet and list text then I would like to know how its done

#item1 ul { padding-left:0px }
#item1 li { margin-left:0; padding-left:0px; list-style-position:inside; }

All the best max


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

It would be simpler if there were options in the Inspector to do these things right there where the indent list options reside. Without this forum, I think most users would never figure this stuff out. Thank you guys for sharing this.


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

You want the bullets to touch the edge of the paragraph, and you want the text right of the bullet to touch the other side of the bullet? You’re right, I don’t see a way to do that without removing the bullet and putting it back again. You can get the bullet to touch the outside edge of the left side of the box by using a padding of 16px (for 16px type) on the UL tag. That governs the spacing to the left of the bullet. But I can’t (despite my encouragement yesterday) get the space between the bullet and its associated text to change using margins or padding on the LI. This is generated content, and it’s not behaving as you would expect literal content to do. I need to do more research on this. Here’s what I did for a test:

ul.tight {
  border: 1px solid red;
  padding-left: 20px;
  margin-left: 0;
  font-size: 20px;
}
.tight li {
  margin-left: 0;
  padding-left: 0;
}

Walter

On Aug 1, 2014, at 3:08 AM, max wrote:

Hi Walter
Obviously I am doing something wrong but that method never works for me across all brewsers!
I can never get the list to be aligned right over to the left of a div with no spacing or over hang without using the list style position and even then the space between the bullet and text doesn’t reduce to 0 plus more often than not I usually need this to be reused
Thats why I use a simple class on a definition list and adding the bullet back in but if you can point me in the right direction on the no spacing between the bullet and list text then I would like to know how its done

#item1 ul { padding-left:0px }
#item1 li { margin-left:0; padding-left:0px; list-style-position:inside; }

All the best max


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

Hi Cosjr
The problem is there are so many attributes in css styling of different elements that (in its present form) trying to add this sort of control within the inspector palette would become just visualy massive and cumbersome.

In reality most people don’t really try to style lists that much… apart from maybe changing the colour size and leading. So what Walter, Erns and I have been discussing falls outside the norm.
The way Walter and Erns are describing how to change certain aspects of a lists layout is the correct approach. Its the way it should be done…. What I have described is a way around certain problems that I have come across due to certain aspects of a lists stubbiness to be styled conventionally.
So probably the rule of thumb for the moment is: use the correct type of list first and style it conventionally but if that doesn’t suite the design you are trying to reflect then you have a fall back that does away with some of a conventional lists styling problems.

All the best max


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

Here’s what I did. No styling, no indenting, no HTML. And it’s responsive.

  1. Start with an HTML box. Give it a Fixed (%) width.

  2. Click inside, Insert another HTML box. Give that a Fixed (%) width as well. Float it left. Resize it to 10px x 10 px square. Give it a margin of 3% all around. Color it. Mine are dark red. That’s your square bullet.

  3. With the bullet selected, hit the right arrow key. Insert insert another HTML box. Give that a Fixed (%) width as well. Insert text. Float it left, flexible height.

  4. Rinse and repeat.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

  1. Start with an HTML box. Give it a Fixed (%) width.

  2. Click inside, Insert another HTML box. Give that a Fixed (%) width as well. Float it left. Resize it to 10px x 10 px square. Give it a margin of 3% all around. Color it. Mine are dark red. That’s your square bullet.

  3. With the bullet selected, hit the right arrow key. Insert insert another HTML box. Give that a Fixed (%) width as well. Insert text. Float it left, flexible height.

  4. Rinse and repeat.

I admire your spirit of inventiveness, but it should never be done this way.

The ends never justify the means.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options