tough stuff for the real stuff - advanced puzzlers to try

[forfear]

Finding Flare abit non-challenging?
Things getting a bit too easy? a bit of an unusual post

i wonder if the pros have any tough Flare/Blaze example scenarios, that we can practice with. hints are fine.

this was by Dave Lee. It was posted on another forum topic quite a long while ago. but i just had see if i could do it. it wasn't easy. and yes...there's value in figuring out how to do these yourself in Flare. Though be warned, you've gotta really master the basics.

Sage200help_3.png

I just had to try and figure out that floating 'In this section' box. Also because i thought this was quite an impressive example done in Flare, from the entire look and feel. Still haven't figured out how to do the coloured bullets thing yet, though.

Any tough examples out there?

[KevinDAmery]

I haven't tried for coloured bullets, but if I had to do it here's what I would try:

1) Create a paragraph class that uses an autonumber.
2) Set the autonumber to use a span for formatting.
3) Set the span up to use Wingdings in green.
4) Set the autonumber to use whichever character in Wingdings corresponds with the square.

[LTinker68]

Be careful if you do something like that, though. I'm not sure if Wingdings is a supported font on Macs, so if you're building online help then some of the audience may not see the bullet, or worse yet, see a really wonky character instead of the character you want them to see.

[forfear]

Curved corners in your DIVs for your help files anyone?

[Andrew]

Curved corners in your DIVs for your help files anyone?

I've managed to kludge that together in the past. Never figured out a nice, clean way to do it in Flare.

[LTinker68]

It's usually done via JavaScript or CSS isn't it? At least, if you don't want to build tables.

When I've tried it in the past, though, I've never gotten results that looked good in both IE and FF.

[Andrew]

I did it with CSS, and it worked in HTML Help...didn't try it out in Firefox. I'm going to try to find some of my test projects for that and see if I can't work out what I did, at least.

[MC Hammer]

I have tried rounded corners in Flare for HTML output and have decided not to retain them as although they look snazzy, it is tricky to implement and seems to be rather browser-dependent (IE/FF).
I have tried pure CSS (no images used) and CSS + corner images (one image per corner). Both solutions are quite cumbersome & difficult to implement (to me anyway!), they use nested divs and VERY complex selectors.
This is what I have achieved in Flare (paragraphs inside have not been optimised padding-wise or re: font size and colour):

Rounded_corners.png

I would recommend the following websites (not sure they are the best ones, but I had a look at them for ideas):
http://www.sitepoint.com/article/css-ro ... es-curves/
http://www.tutorialized.com/view/tutori ... ages/36513

If anyone knows of a simpler way of implementing rounded corners, please let me know!

[MC Hammer]

Still haven't figured out how to do the coloured bullets thing yet, though.

Not sure I understand the question correctly but have you tried using custom images for bullets?
As I came to tech authoring via graphic design, I have designed my own bullets. Example below.

OL.png

Still finding Flare challending and struggling with the positioning of the bullets though.

[LTinker68]

Be warned that if you use custom images for bullets and you're using a standard HTML list, then Word does not pull your image for the list. You can open the output in Word and modify the list style to use the same image, but without the after-build modification your bullet image won't appear in Word output.

[MC Hammer]

Didn't know that but then I only deal with HTML Help output ...

[NorthEast]

The green bullets are images, which works fine for WebHelp, HTML Help and PDF.
We only use Word output internally, and for that target/medium I don't use a bullet image.

As for the 'In this section' box (the mini-TOC proxy); I set it to float on the right, the heading is inserted using an auto-number style, and the icon in the top left comes from an auto-number span class.

[forfear]

Also in the TOC,

How did they bold the fonts for books and leave the rest as Regular.

[NorthEast]

Also in the TOC,
How did they bold the fonts for books and leave the rest as Regular.

I did that by applying a style class to those items in the TOC. Set up a class for TocEntry in the skin, then open the TOC item's properties Basic tab and choose the Style class.

[MC Hammer]

I did that by applying a style class to those items in the TOC. Set up a class for TocEntry in the skin, then open the TOC item's properties Basic tab and choose the Style class.

This only works for WebHelp, or am I wrong?
Plus, just being curious here, is your "In this section" a div and it is of a set width?

[NorthEast]

I did that by applying a style class to those items in the TOC. Set up a class for TocEntry in the skin, then open the TOC item's properties Basic tab and choose the Style class.

This only works for WebHelp, or am I wrong?
Plus, just being curious here, is your "In this section" a div and it is of a set width?

Yep, it's WebHelp only (as are a lot of things in the skin). HTML Help has it's own TOC, and (rather surprisingly) it doesn't work for DotNet help.

The "In this section" box is the miniTOC, not a div, so I set the width (as a %) for MadCap|miniTocProxy. The "See also" box below that is a div in the topic, with the same formatting as the miniTOC.

[MC Hammer]

Thank you Dave, for satisfying my curiosity...and BTW, very sleek and snazzy look-and-feel .

[forfear]

Thank you Dave, for satisfying my curiosity...and BTW, very sleek and snazzy look-and-feel .

agreed!

Appreciate this very much. I've been using it since Flare v3.1 and didn't know you could do that. Brilliant!

I did that by applying a style class to those items in the TOC. Set up a class for TocEntry in the skin, then open the TOC item's properties Basic tab and choose the Style class.

[doc_guy]

Anything set in the skin will only affect online output. It won't affect printed output.

[DurtyMat]

i made this today applying rounded corners to the elements i wanted in the master page ... built the project (with one topic) and the corners were applied automatically. i dont know if people still like doing the whole rounded content bubbles but i just wanted to try my hand at round corners and creating a fool proof way to implement (if need be) to a team.

rnded.jpg

[forfear]

that is amazing! nice.
Now I've got to do some research to figure it out.

question: how many rounded corner images were used?4?

[DurtyMat]

[edit] i removed how i did it, i will post it if you want, but i figured i would let you poke around a bit.
[edit2] the way i did this doesnt translate well to CHM based help systems :-/


and you only need 1 img, you reference it for each corner (so 12 times i think), leaving out the corners you dont need. i used a 32x32 px img, just so you know

[DurtyMat]

1 rounded corner image is used, but referenced a bunch
here are some excerpts of code:

"inline styles in the masterpage" this can prolly be added and referenced into a regular CSS:

Code: Select all

 <style type="text/css">
body {background-color: #616870;}
.section {margin: 2em; padding: 1em 2em; color: black; background-color: white; position: relative;}
	.corner {position: absolute;}
	#topleft {top: 0px; left: 0px; overflow: hidden; clip: rect(0px, 16px, 16px, 0px); }
	#topright {top: 0px; right: 0px; overflow: hidden; clip: rect(0px, 32px, 16px, 16px); }
	#bottomleft {bottom: 0px; left: 0px; overflow: hidden; clip: rect(16px, 16px, 32px, 0px); }
	#bottomright {bottom: 0px; right: 0px; overflow: hidden; clip: rect(16px, 32px, 32px, 16px); }
</style>

Deal for the Header

Code: Select all

 <div class="section">
            <img src="../../Image1.png" class="corner" id="topleft">
            </img>
            <img src="../../Image1.png" class="corner" id="topright">
            </img>
            <MadCap:pageHeader>
                HEADER STUFF 
            </MadCap:pageHeader>
            <MadCap:breadcrumbsProxy class="breadcrumbsProxy" />
            <img src="../../Image1.png" class="corner" id="bottomleft">
            </img>
            <img src="../../Image1.png" class="corner" id="bottomright">
            </img>
        </div>

Deal for the Body

Code: Select all

<div class="section">
            <img src="../../Image1.png" class="corner" id="topleft">
            </img>
            <img src="../../Image1.png" class="corner" id="topright">
            </img>
<MadCap:bodyProxy /><img src="../../Image1.png" class="corner" id="bottomleft">
            </img>
            <img src="../../Image1.png" class="corner" id="bottomright">
            </img>
        </div>
     

Deal for the Footer

Code: Select all

<div class="section">
            <img src="../../Image1.png" class="corner" id="topleft">
            </img>
            <img src="../../Image1.png" class="corner" id="topright">
            </img>
<MadCap:pageFooter></MadCap:pageFooter>
 <img src="../../Image1.png" class="corner" id="bottomleft">
            </img>
            <img src="../../Image1.png" class="corner" id="bottomright">
            </img>
        </div>

[MC Hammer]

Deleted post as duplicate of subsequent one.

[MC Hammer]

[edit2] the way i did this doesnt translate well to CHM based help systems :-/

Hi there
Just wondering what you meant by that (do the rounded corners appear or not?) and is the behaviour in your opinion browser-dependent?
Just being curious as I have managed to implement rounded corners (see some of my previous posts on this thread) on HTML Help output but have decided not to use them as they are too cumbersome.
Thanks,