Page 1 of 1
Picture titles formatting with CSS
Posted: Thu Apr 04, 2019 2:50 pm
by MyMoon
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.
Re: Picture titles formatting with CSS
Posted: Thu Apr 04, 2019 3:40 pm
by Dan
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:
The default is 'top', you can change it to 'bottom'.
Many regards,
Dan
Re: Picture titles formatting with CSS
Posted: Mon Apr 08, 2019 2:10 pm
by MyMoon
Sorry, the expression <figcaption class="figcap"> is not recognized.
Invalid format for "class" attribute. An initial "-" or "+" character should be present.
Sincerely,
Dmitry
Re: Picture titles formatting with CSS
Posted: Mon Apr 08, 2019 4:41 pm
by Costin
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
Re: Picture titles formatting with CSS
Posted: Tue Apr 09, 2019 10:03 am
by MyMoon
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