Converting from DITA and writing my own CSS files

[dfess1]

Bit of a background. Unfortunately, our company has shrunk considerably over the past few years, and finally has changed direction with a completely new product. We have gone from a doc team of 15 down to 1 (not sure if it's a good thing I'm the last man standing or not, but that's a different discussion). About five years ago, we did a complete DITA conversion from unstructured Frame and Word files. At the time, we had a dedicated resource to handle our DITA OT and necessary output scripts, but lost him in one of the early rounds. We had been making do with what we had until the company decided to go in a different direction. We no longer will have the large docbase we had, and needed to be able to deliver the output in HTML5 as well as pdf/word outputs. So I started looking at Flare, and it has been able to do most of what I want out of the box.

That said, I'm trying to create new CSS files to make it match what we had. Traditionally, we handed this part off to a 3rd party vendor. But I'm trying to take that control back (and budget), as I don't have to figure out how to make it work with the DITA OT anymore. Obviously I can modify the CSS files, and I'm trying to set them up correctly from the get go. But I'm not sure how to handle what would be I guess inline styling. I have been successful in modifying the p tag to be the font and size we want, along with indentation. What I am struggling with is when I want to format some of the text in the p tag to be something else, but still be able to be modified at a stylesheet level, not embedded. So that I can change it from one place should I choose to do so.

DITA example: <step>At the prompt, enter <userinput>su - root</userinput></step>
which would be output as: 1. At the prompt, enter su - root

I believe I can do either of the following:

• Create a new p style called "step" and set the auto-numbering

• modify an <ol> element so it'll be justified where I want it and use the font family I want

Personally, I'd lean toward the first option. Regardless. I want to be able to apply within that style (step), another style that would set the font to x family, and weight bold. Currently, I've made a new "class", called p.userInput. When I make the style, it won't let me apply it within the normal p style. All it does is apply "p.userInput" to the entire element (changing the "p" to a "p.userInput", and thus the entire element is now a bold weight).

So what am I doing wrong? I'd like to be able to do this all from the css, as opposed to in the topic itself. I get the the power of the CSS. Just not sure how to do what I want.

Any input is greatly appreciated.

[Nita Beck]

Welcome to the forums!

If you want to apply a style only to part of the content within a paragraph, then the style needs to be a character style (aka a span style), not a paragraph style.

Open your stylesheet in the internal text editor so you can edit it "by hand". Then change p.userInput to span.userInput. You'll then be able to apply that span style to characters or words you select within a p block. BTW, you'll be able to use that span style as well for selected content within a heading or list item, too.

[kwag_myers]

Your company sounds like the one I worked for a while back where we replaced RoboHelp and FrameMaker with XMetal. I still use DITA tags for wintitle, uicontrol, userinput, and a few more. Just to echo what Nita said, for these I use a span tag. You only want to use p for the entire paragraph.

As for steps and step, I'd recommend using Flare's Find and Replace (on the Home tab) to convert them into ol and li (respectively).

[dfess1]

Welcome to the forums!

If you want to apply a style only to part of the content within a paragraph, then the style needs to be a character style (aka a span style), not a paragraph style.

Open your stylesheet in the internal text editor so you can edit it "by hand". Then change p.userInput to span.userInput. You'll then be able to apply that span style to characters or words you select within a p block. BTW, you'll be able to use that span style as well for selected content within a heading or list item, too.

Thank you, that's exactly the way I wanted it to work.

[dfess1]

Ok, how do I create a style that will allow me to set the positioning of my <ul> and <ol>? I tried to createa new class as part of the <ol>, and there is no ability to set indentation. Does this need to be a "div" tag? That didn't seem to work as I had expected. I'd like to be able to make a ol.step and a ol.substep level. That make sense? same thing for <ul> I guess, even though they aren't really a step.

[ChoccieMuffin]

Ok, how do I create a style that will allow me to set the positioning of my <ul> and <ol>? I tried to createa new class as part of the <ol>, and there is no ability to set indentation. Does this need to be a "div" tag? That didn't seem to work as I had expected. I'd like to be able to make a ol.step and a ol.substep level. That make sense? same thing for <ul> I guess, even though they aren't really a step.

You can define how a list within a list behaves. To do this, use complex selectors. Here's a selection of styles from my stylesheet.

Code: Select all

	p
	{
		font-size: 100%;
		font-family: Arial;
		line-height: 1.5;
		color: #555555;
		margin-top: 0%;
		margin-left: 1%;
		margin-right: 1%;
		margin-bottom: 2%;
	}


	ol
	{
		list-style: outside;
		line-height: 1.5;
		margin-bottom: 2%;
		margin-top: 2%;
		margin-right: 1%;
		margin-left: 2%;
	}

	ul
	{
		list-style-type: square;
		list-style: outside;
		color: #555555;
		line-height: 1.5;
		margin-left: 1%;
		margin-bottom: 2%;
		margin-right: 1%;
		margin-top: 2%;
	}

	ol ul
	{
		list-style: square;
		margin-bottom: 2%;
		margin-top: 2%;
		margin-left: 0%;
		line-height: 1.5;
		color: #6464ff;
	}

	ul ul,
	ol ul ul
	{
		list-style: disc;
		margin-bottom: 2%;
		margin-left: 0;
		margin-top: 0;
		color: #555555;
		line-height: 1.5;
	}

	ul ol,
	ol ol,
	ol ul ol
	{
		list-style: outside;
		line-height: 1.5;
		margin-bottom: 2%;
		margin-top: 2%;
		margin-right: 1%;
		margin-left: 1%;
	}

	li
	{
		font-size: 100%;
		list-style: outside;
		color: #555555;
		line-height: 1.5;
		margin-top: 0%;
		margin-right: 1%;
		margin-bottom: 2%;
		margin-left: 2.5%;
		page-break-inside: avoid;
	}

	li p
	{
		font-size: 100%;
		line-height: 1.5;
		margin-top: 0%;
		margin-left: 0;
		margin-right: 1%;
		margin-bottom: 1%;
	}

	li table
	{
		margin-left: 0;
	}