caption

[julie]

Hi
I want the caption of an image in two different colors. For example, in figure 1: Login Page, I want the 'Figure 1' to be displayed in red and the 'Login Page' to be displayed in black color. Is this possible?
Regards
Julie

[Radu]

Hi Julie,

In the OXYGEN_INSTALL_DIR/frameworks/dita/DITA-OT/resource" folder there is a CSS stylesheet called commonlrt.css. You can edit it to change the styles for the generated HTML documentation.
You can search for '.figcap' and see the styles that are associated to it.
After the figcap line add this one:

Code: Select all

.figcapRed{color:red;font-style:italic;}

To differentiate between two 'fig''s you have to set an attribute to one of them. For example set the importance="high" attribute on the figures whose captions should be displayed in red.
Then open the OXYGEN_INSTALL_DIR/frameworks/dita/DITA-OT/xsl/xslhtml/dita2htmlImpl.xsl stylesheet in Oxygen and replace the

Code: Select all

 <span class="figcap">

line with

Code: Select all

<xsl:variable name="spanValue">

        <xsl:choose>

          <xsl:when test="@importance='high'">

            figcapRed

          </xsl:when>

          <xsl:otherwise>

            figcap

          </xsl:otherwise>

        </xsl:choose>

      </xsl:variable>

      <span class="{$spanValue}">

In this way, figures with importance='high' set on them will have a span class of 'figcapRed' which after the CSS is modified will render the caption in red.

Regards,
Radu

[julie]

Hi Radu
Thanks for the reply. I think I was not clear in my question. I want the two parts of the same caption in different colors. For example, in the caption 'Figure 1: Log in Screen' I want the 'Figure 1:' part to be displayed in red color and bold and the 'Log in Screen' to be displayed in black color and bold. Please help.
Regards
Julie

[Radu]

Hi Julie,

Perform the modifications in the CSS file as I described in the last post.
Then, in the XSL file specified in the last post replace the whole

Code: Select all

<span class="figcap">

element with this code:

Code: Select all

      <span class="figcapRed">

        <xsl:choose>      <!-- Hungarian: "1. Figure " -->

          <xsl:when test="( (string-length($ancestorlang)=5 and contains($ancestorlang,'hu-hu')) or (string-length($ancestorlang)=2 and contains($ancestorlang,'hu')) )">

            <xsl:value-of select="$fig-count-actual"/><xsl:text>. </xsl:text>

            <xsl:call-template name="getString">

              <xsl:with-param name="stringName" select="'Figure'"/>

            </xsl:call-template><xsl:text> </xsl:text>

          </xsl:when>

          <xsl:otherwise>

            <xsl:call-template name="getString">

              <xsl:with-param name="stringName" select="'Figure'"/>

            </xsl:call-template><xsl:text> </xsl:text><xsl:value-of select="$fig-count-actual"/><xsl:text>. </xsl:text>

          </xsl:otherwise>

        </xsl:choose>

      </span>

      <span class="figcap">

        <xsl:apply-templates select="./*[contains(@class,' topic/title ')]" mode="figtitle"/>

      </span>

Basically, instead of a span, now you have two, one for the "Figure NO" and one for "Title", each span with a different class name.
After that, you can configure more styles for the ".figcapRed" selector in the CSS.

Regards,
Radu

[julie]

Hi Radu
It worked, but when I compiled the file and generated the output, the images and links which were on the center and the right side of the window moved to the left. Why does it happen? Also, there appeared an additional period between the figcap and the description, like this, 'Figure 1..Log in page' How do I remove this period?

Regards
Julie

[sorin_ristache]

Hello,

Just remove the element

Code: Select all

<xsl:text>. </xsl:text>

from the fragment that you added to the XSLT stylesheet. This should remove the second period from 'Figure 1..Log in page'.

Did you add also other styles in your CSS or other modifications to the XSLT stylesheet? The modifications suggested by Radu should not move any image or link to the left of the page. Did you modify also the XML content on which you apply the transformation since the images were displayed in the center/right of the page?


Regards,
Sorin

[julie]

Hi Sorin
Thank you for the reply. As you said, I think I did some changes in the CSS by mistake.
I want to know about glossentry. What should I do to create a glossary page using glossentry. Is the page automatically generated or do I need to create a glossary topic as creating other topics? Please help.

Regards
Julie

[sorin_ristache]

Hello Julie,

Yes, you need to create a glossary topic and link it in the topic that uses the term defined in the glossary topic. The link is added to a section Related information of the topic that references the glossentry as explained in this forum topic.


Regards,
Sorin