Picture titles formatting with CSS

MyMoon
Posts: 23
Joined: Thu Feb 28, 2019 2:19 pm

Picture titles formatting with CSS

Post by MyMoon » Thu Apr 04, 2019 2:50 pm

Hi again.
My picture titles looks like a standard paragraph text. I analyzed HTML output and found that this format is inherited from "topic/p".
Then I went to CSS Inspector and coped to my custom CSS this:

Code: Select all

*[class~='topic/fig'] > *[class~='topic/title'] {
font-style : italic ;
font-size : 1em ;
}
But it doesn't affect.
What I have to do to override current format?

(And second question - how to move that title to row after picture, instead before by default?)

Thanks in advance!

Dmitry.

Dan
Posts: 416
Joined: Mon Feb 03, 2003 10:56 am

Re: Picture titles formatting with CSS

Post by Dan » Thu Apr 04, 2019 3:40 pm

Hello,

First of all, you need to use the CSS inspector over the merged HTML file, as it explained here:

https://www.oxygenxml.com/doc/versions/ ... e_css.html

Next, read:

https://www.oxygenxml.com/doc/versions/ ... aid-title8

In conclusion:

For a figure, this file contains snippets like this:

Code: Select all


<figure class="- topic/fig fig fignone" id="unique_1_Connect_42_fig_cqz_2hx_hhb" nd:nd-id="fig_cqz_2hx_hhb">
<figcaption class="figcap">
<span class="figtitleprefix fig--title-label">Figure<span class="fig--title-label-number"> 1</span>: </span>This is a figure title.</figcaption>
...
</figure>
So you need to match the figcaption element, with the class figcap:

Code: Select all


.figcap {
font-style : italic ;
font-size : 1em ;
}
Regarding the second aspect, there is a parameter in the transformation scenario that controls the placement of the title. This is supported in oXygen v 21.0:

Code: Select all


figure.title.placement
The default is 'top', you can change it to 'bottom'.

Many regards,
Dan

MyMoon
Posts: 23
Joined: Thu Feb 28, 2019 2:19 pm

Re: Picture titles formatting with CSS

Post by MyMoon » Mon Apr 08, 2019 2:10 pm

Sorry, the expression <figcaption class="figcap"> is not recognized.

Invalid format for "class" attribute. An initial "-" or "+" character should be present.

Sincerely,
Dmitry

Costin
Posts: 603
Joined: Mon Dec 05, 2011 6:04 pm

Re: Picture titles formatting with CSS

Post by Costin » Mon Apr 08, 2019 4:41 pm

Hello,

Have you followed Dan's instructions?

So you need to match the figcaption element, with the class figcap:

Code: Select all

.figcap {
font-style : italic ;
font-size : 1em ;
}
If you use specifically this rule in your customization CSS, it is not possible to receive that error message.

Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support

MyMoon
Posts: 23
Joined: Thu Feb 28, 2019 2:19 pm

Re: Picture titles formatting with CSS

Post by MyMoon » Tue Apr 09, 2019 10:03 am

Solved.
I've just prepared outputclass

Code: Select all

*[outputclass ~= "picture_caption"] > * {
text-align: center;
font-style:italic;
margin-top: 6pt;
}
and applied it to <fig> tag:

Code: Select all

            <fig outputclass="picture_caption" id="fig_l1x_p1x_hhb">
<title>Main Window areas</title>
<image placement="break" href="../images/main_window_areas.png" align="center"
id="image_m1x_p1x_hhb"/>
</fig>
Thank you for guiding my thoughts!

Regards,
Dmitry

Post Reply