Changing bullet color

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
nsemple
Propeller Head
Posts: 86
Joined: Wed Feb 08, 2006 9:24 am

Changing bullet color

Post by nsemple »

Using custom images for bullets (graphic file needs to be located in Content Explorer/Resources/Images) does not always work for some reason and they will not carry over into Microsoft Word or Adobe Framemaker.

So, we're looking at using the default circle or square images for our bullet symbols. However, we would like the bullet symbol to be one color and the text that appears after the symbol to be another color. Does anyone know how to do this?

I cannot find any documentation on having bullets be one color and the text be another color in Flare's Help files, knowledgebase, etc.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Changing bullet color

Post by LTinker68 »

I started writing a whole description of how to use span classes to get the effect you want, but it's a PITA to select a portion of the text, apply the span class, replace the last character then delete the extra character, and so on. But I think you can do this a lot easier by setting up an auto-numbering scheme. This post explains how to apply a bold effect just to the auto-numbering text (their auto-numbering text was "Note:" but yours would be a bullet icon(ALT + 0149)) --> http://forums.madcapsoftware.com/viewto ... d&start=25

You might have to play with it a bit, but you can probably do the same thing but by specifying a color for the bullet.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
nsemple
Propeller Head
Posts: 86
Joined: Wed Feb 08, 2006 9:24 am

Re: Changing bullet color

Post by nsemple »

Thanks Lisa. I'll try it.

(Though it would be really nice if you could just select the properties of the bullet list from the Flare interface and change its color... sigh)
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Changing bullet color

Post by LTinker68 »

nsemple wrote:(Though it would be really nice if you could just select the properties of the bullet list from the Flare interface and change its color... sigh)
That's actually not a Flare thing, it's a CSS thing. You can specify the type of bullet used (circle, square, etc.) but as far as CSS is concerned, the bullet/number is part of the list item and there's not a way to separate the appearance of the bullet/number from its text. At least, not that I'm aware of.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
nsemple
Propeller Head
Posts: 86
Joined: Wed Feb 08, 2006 9:24 am

Re: Changing bullet color

Post by nsemple »

That's why we had previously used customized graphic images for the bullet symbols. (The bullet circles were various colors.) But now that I'm reading a lot about graphic images that are used as bulllet symbols not being converted when you go from Flare to Word or Framemaker, we're looking at using default Flare-supplied symbols. Just wish there was an easy way to specify a color for them. I thought that the developers would have figured out a way to compile some code together (perhaps in the way you suggest) under the covers to give users that ability and to then provide the property setting for bullet symbols as a simple interface option...
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Changing bullet color

Post by LTinker68 »

Have you (or anyone else) confirmed that custom bullet images don't appear in Framemaker output? I know it doesn't work for Word, but I don't have Framemaker so I can't test it. However, I think this is the first time I've heard that it doesn't work for Framemaker.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
nsemple
Propeller Head
Posts: 86
Joined: Wed Feb 08, 2006 9:24 am

Re: Changing bullet color

Post by nsemple »

Hi Lisa,

I have not tested it, but the following statement is made in the Madcap Flare Knowledgebase article Flare > XML Editor > XML1016-F - Use Custom Bullet Image :

Please Note: Custom bullet images will not be exported to Microsoft Word or FrameMaker.
enricosavazzi
Propeller Head
Posts: 58
Joined: Wed Apr 09, 2008 2:10 am

Re: Changing bullet color

Post by enricosavazzi »

Well, the way got it done is by defining the text color in a <ul> class (which changes the color of all lists, including bullet and text), then using a <span> inside each <li> to return the text color to black:

ul{color: #1F497D;}
li.bullet1{list-style-type: disc; margin-left: 10mm;}
span.black{color: #000000;}

<li class="bullet1"><span class="black">The text goes here.</span> <![CDATA[ ]]></li>

As already mentioned in another reply, to apply the span in the Flare editor you must have an extra character at the end of the text (I use a space), which you don't select when applying the span (if you select everything, you see only the li. classes in the Styles window). I know this is a hack, but short of inserting manually the <span> tags in a text editor, I don't know of another way. The <![CDATA[ ]]> tag is created by Flare, by the way, probably as a way to tell the editor that there is a real space between the </span> and </li> tags. You don't need it if you add the <span> manually.
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: Changing bullet color

Post by bonnie »

Using custom images for bullets (graphic file needs to be located in Content Explorer/Resources/Images) does not always work for some reason and they will not carry over into Microsoft Word or Adobe Framemaker.
Once you have a graphic in Content Explorer/Resources/Images, where/how do you call/reference/enter the graphic to use it as a bullet?

I would like to use custom bullets in table cells.
The best thing I have come up with so far is to use a blue closing angle bracket as a bullet. I do this by using an auto-numbered <p> class defined as follows:

Code: Select all

padding-left: 26px
mc-auto-number-format: {color blue}{size 110%}>{/size}{/color}
mc-auto-number-offset: 16px
mc-auto-number-position: outside-head
I tried entering a Webding as a bullet using the below auto-numbering method.

Code: Select all

padding-left: 26px
mc-auto-number-format: {family Webdings}{color blue}{size 110%}4{/size}{/color}{/family}
mc-auto-number-offset: 16px
mc-auto-number-position: outside-head
It showed up nicely in the previewer, but the Webding font isn't supported by the browser I'm using (Firefox 2) (I ended up with a blue 4 as a bullet.)

One other thing. Using the auto-numbering method above, I was able to change the bullet color to blue, red, etc., but if I attempted to enter another color (e.g., #008080;), the bullet didn't change color.

Thanks,
Bonnie
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Changing bullet color

Post by NorthEast »

bonnie wrote:Once you have a graphic in Content Explorer/Resources/Images, where/how do you call/reference/enter the graphic to use it as a bullet?
Use the list-style-image property, e.g.:

Code: Select all

list-style-image: url('../Images/bullet.gif');
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: Changing bullet color

Post by bonnie »

Oh, good.
Thanks, Dave!!
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: Changing bullet color

Post by bonnie »

Have you (or anyone else) confirmed that custom bullet images don't appear in Framemaker output? I know it doesn't work for Word, but I don't have Framemaker so I can't test it. However, I think this is the first time I've heard that it doesn't work for Framemaker.
Just for the record: I tried using a custom graphic as a bullet. I found that it DOES work for WebHelp but DOES NOT carry over to the FrameMaker output.

Bonnie
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: Changing bullet color

Post by bonnie »

I would like to use custom bullets in table cells.
The best thing I have come up with so far is to use a blue closing angle bracket as a bullet. I do this by using an auto-numbered <p> class defined as follows:

Code: Select all
padding-left: 26px
mc-auto-number-format: {color blue}{size 110%}>{/size}{/color}
mc-auto-number-offset: 16px
mc-auto-number-position: outside-head
I found out that the above method doesn't carry over to FrameMaker output either. The angle bracket that I entered as an auto-number doesn't show up in FrameMaker.

Bonnie
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Changing bullet color

Post by LTinker68 »

bonnie wrote:Just for the record: I tried using a custom graphic as a bullet. I found that it DOES work for WebHelp but DOES NOT carry over to the FrameMaker output.
Doesn't work for Word output either, although in Word it's fairly easy to open the Word output, select the style, and respecify the graphic for the bullet. Annoying that you have to do an after-build modification, but not as bad as it could be.

I don't know/use FM, so I don't know if it would be as easy to open the FM output and respecify the bullet graphic or not.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Changing bullet color

Post by NorthEast »

LTinker68 wrote:
bonnie wrote:Just for the record: I tried using a custom graphic as a bullet. I found that it DOES work for WebHelp but DOES NOT carry over to the FrameMaker output.
Doesn't work for Word output either, although in Word it's fairly easy to open the Word output, select the style, and respecify the graphic for the bullet. Annoying that you have to do an after-build modification, but not as bad as it could be.

I don't know/use FM, so I don't know if it would be as easy to open the FM output and respecify the bullet graphic or not.
Just a quick point - if your bullet is a Webding character, then you could set the print medium for the bullet style to use that Webding character (instead of an image). I use that for my Word outputs, although I'm not sure if it works in FM outputs (I think it should, but I don't use them).
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: Changing bullet color

Post by bonnie »

if your bullet is a Webding character, then you could set the print medium for the bullet style to use that Webding character (instead of an image). I use that for my Word outputs, although I'm not sure if it works in FM outputs (I think it should, but I don't use them).
Good idea! For the WebHelp bullet I used an image of a Webding character (list-style-image) and for the FrameMaker target, I used the Webding character itself (mc-auto-number-format).

For those people just learning about autonumbering, be aware that you cannot format the bullet meant for a FrameMaker target directly using the mc-auto-number-format property. You have to define a span style for the formatting, which you then enter as the mc-auto-number-class property. Since this was my first attempt at autonumbering, It took me quite a long time to figure that out.

Bonnie
mamarachel
Propeller Head
Posts: 39
Joined: Fri Mar 23, 2007 7:27 am

Re: Changing bullet color

Post by mamarachel »

Does anyone know if it IS possible to change bullet color in Flare 4.0 AND have the new color appear in Word output?
betelgeuse
Propeller Head
Posts: 25
Joined: Fri Mar 07, 2014 2:43 am
Location: Cambridge

Re: Changing bullet color

Post by betelgeuse »

Apologies for resurrecting a very old topic, but I couldn't find many topics on changing the colour of bullet points.
Note: I'm working in Flare 10.

Objective
My aim was to change the colour of the bullet points and numbers in Flare but keep the black text after the bullet point.
I know it is possible to create custom formats (On Home ribbon>Paragraph section>Click the bullet icon and click Custom Format)
but to access these you have to go through more sub menus than I wanted. I just wanted to click the bullet icon and select Flares default bullet options and have them display my coloured bullets.

Well, turns out that Flare doesn't make this so easy! Or am I missing something? Choosing the colour of a bullet point should be an option surely?

Workaround
I edited the stylesheet.css to achieve my goal.
Below is the ORIGINAL code;

Code: Select all

ul
{
	font-size: 10pt;
	font-family: 'Open Sans';
	color: #000000;
	
}

ol
{
	font-size: 10pt;
	font-family: 'Open Sans';
	color: #000000;
}

li
{
	font-size: 10pt;
	font-family: 'Open Sans';
	color: #000000;
And here is the amended code;

Code: Select all

ul
{
	list-style-type: disc;
}

ol
{
	list-style-type: decimal;
}

ol > li::marker
{
	color: #008b8b;
	font-weight: bold;
	font-style: normal;
	content: counter(MattsNumbers) '.';
}	

ul > li::marker
{
	color: #008b8b;
	font-size: 10pt;
	font-weight: bold;
	font-style: normal;
	content: '•';
}
This works but is there an easier way to do this?

Thanks

Matt
daphna
Propeller Head
Posts: 36
Joined: Fri Feb 03, 2006 1:00 pm

Re: Changing bullet color

Post by daphna »

This looks promising. The numbered list items work out great.

For unordered list where you've put the following under ul > li::marker:

content: '•';

Do you then need to use a custom bullet image?

Thanks,

daphna
ajpeck123
Propeller Head
Posts: 37
Joined: Tue Mar 07, 2017 6:01 am

Re: Changing bullet color

Post by ajpeck123 »

I have done this, but I always put paragraphs inside lists (as they are often more than one paragraph long - numbered steps, especially). I colour the list as others have said, then set the colour of a paragraph when within a list item to be the default colour. It works...
Alison
Lone technical author - Flare user since March 2017
Currently using Flare 2020
Post Reply