Creating a style with an image

[KSUWildcat]

I always place a notepad or lightbulb icon before writing a note or tip. In Flare training, Rob showed us how to do this using styles, so notes/tips are consistent (so they always include the icon), but I do not remember how to do this. Help!

[LTinker68]

It kind of depends on how big the image is in relation to the text. If it's a relatively small icon, then you can do it by creating a custom <li> style and setting it to use an image for the bullet. When you're ready to use it in a topic, click on the list icon to go into a list, then click on the custom style from the Styles pane or drop-down list.

[KSUWildcat]

Thanks for the help. I looked at this thread http://forums.madcapsoftware.com/viewtopic.php?t=3795 and then the knowledge base article to figure out how to setup the custom icon. It worked perfectly!

[jcoria]

is there a way to change just the color of the bullet without affecting the text (font) after the bullet is in place?

JCoria

[LTinker68]

Haven't tried this (and I don't have Flare running to test it), but try setting the color on the <ul> tag to red and set the color on the <li> tag to black. Since <ul> versus <ol> specifies whether you're using a bullet versus a number, then the bullet style should be pulled from the <ul> tag and the text style should be pulled from the <li> tag. Like I said, haven't tried it, but give it a shot. If that works, then you can create custom <ul> tags for the various colors you want to use.

[helen]

Thanks for the help. I looked at this thread http://forums.madcapsoftware.com/viewtopic.php?t=3795 and then the knowledge base article to figure out how to setup the custom icon. It worked perfectly!

I don't suppose anyone knows where this post of the KB article is hiding do they? I want to set up a Note style too but I'm struggling with a few things. Thanks

Edit - this is what I have in my non-print part of the CSS (publishing to CHM), but I'm not getting an image displayed where I've used the p.warning style. Can anyone tell me what am I missing please?

Code: Select all

	
p.Warning
	{
		mc-auto-number-class: noteimage;
	}
	
	span.noteimage
	{
		mc-image: url('../Images/icons/warning.png');
	}

[lacastle]

Are you talking about a KB article about custom bullets?

http://kb.madcapsoftware.com/Content/Fl ... ed|Bullets

[helen]

Are you talking about a KB article about custom bullets?

http://kb.madcapsoftware.com/Content/Fl ... ed|Bullets

I'm not entirely sure! I've just read that and got it working but it looks a bit rubbish:

warning.png

I want that icon (32x32) to be in the red box but to the left of the "Warning" + text. I guess it looks rubbish as it's 32 x 32, but I can't seem to get it working using the autonumbering either.

[lacastle]

I think this is closer to what you're looking for:

http://forums.madcapsoftware.com/viewto ... ction+note

[helen]

I think this is closer to what you're looking for:

http://forums.madcapsoftware.com/viewto ... ction+note

Ah ha! Thank you. Well, I'm getting there, I think:

warning.png

I'd like the text to hang now, I've been playing with indenting it but that's not working too well. It seems to hang in that example though. Is there a way to make it hang inline with the start of the "Warning"?

[lacastle]

Can you change the padding to move all the text over to the right? How is "Warning" moved over?

[helen]

I'm not sure, I appear to have accidently achieved a half decent result with:

Code: Select all

	padding-left: 100px;
	text-indent: -100px;

Which is possibly a bit of a hack.

[lacastle]

i don't know if it's possible (since i haven't tried this div), but can you float the image left?

[helen]

i don't know if it's possible (since i haven't tried this div), but can you float the image left?

I don't know, I'm out of css depth I'm afraid. It looks okay, but not great, it would look better without the word "Warning" now the image is in place but of course I can't get rid of that as then it would have no reference to call the image with.

[helen]

Sorry, here's my code, it's a mess

Code: Select all

    div.note
    {
       	margin-left: 20px;
	margin-right: 20px;

       	padding-top: 4px;
       	padding-bottom: 4px;
       	padding-left: 4px;
       	padding-right: 8px;


       	border-color: #FF382D;
       	border-width: 4px;
       	border-style: double;

      	mc-auto-number-class: noteTitle;
  	mc-auto-number-format:'* ';

	padding-left: 53px;
	text-indent: -53px;
    }

    span.noteTitle
    {
       color: #084081;
       font-weight: bold;
       vertical-align: top;

       background-image: url('../Images/icons/prerequisite.png');
    
       line-height: 10px;
       background-position: top left;
       background-repeat: no-repeat;
       padding-left: 40px;
       padding-bottom: 50px;	

    }

What I would like to do now is get rid of the word as the icon does the job just as well but if I remove the "mc-auto-number-format:'* ';" or just leave it empty, my icon vanishes. That gives me this currently:

warning.png

Which would be okay - without that star! I'm guessing that now I've implemented it this way I must have the "mc-auto-number-format:'* ';" in there with something in. Can anyone confirm if that is indeed the case?