Page 1 of 1
To achieve a specific header for the chapter
Posted: Mon Jan 09, 2023 2:25 pm
by SunilCP
Hello Team,
I am trying to create CSS for this chapter header
image.png
I am using the following code
Code: Select all
@page chapter:first:left {
size: A4;
padding:0%;
margin-top:3cm;
margin-bottom: 2cm;
margin-left: 1.06cm;
margin-right: 0.81cm;
/* border: 0.1cm dotted red;*/
@top-left {
content: "Chapter\A0\A0\A0\A0\A0" string(chaptertitle)"\A0\A0\A0";
background-image: url(../images/FirstPageHeaderBlock.png);
background-repeat: no-repeat;
background-position: 0 0.5cm;
background-size: 100% 100%;
margin: 0cm;
text-align:right;
font-weight: bold;
font-size: 24pt;
border: 0cm;
}
}
*[class ~= "topic/topic"][is-chapter]:not([is-part]) > *[class ~= "topic/title"] {
string-set: chaptertitle counter(chapter);
}
The output I got was
image.png
I was able to get the required contents. But, how to have different formatting for "Chapter" and "counter of chapter" like 1, 2, 3... Because the requirement is to have font color of "Chapter" is black and the font color of "1" is white. Here is where I am stuck.
If anyone can provide the details, it will be really helpful.
Re: To achieve a specific header for the chapter
Posted: Mon Jan 09, 2023 3:30 pm
by chrispitude
Hi Sunil,
You could try the
oxy_label() feature:
How to Style a Part of the Text from the Header
although it looks like there is a limitation with
string() that will affect how you must apply the CSS.
Re: To achieve a specific header for the chapter
Posted: Fri Jan 13, 2023 10:15 am
by SunilCP
Thanks, Chrispitude, for the insights.
But, the string limitation is impacting.
Both the content on the header are not static, so how to style both string content differently?
Re: To achieve a specific header for the chapter
Posted: Fri Jan 13, 2023 10:57 am
by julien_lacour
Hello,
From the topic Chris gave you, in the same note explaining the string() limitation, there's an example on how to style the dynamic text:
You cannot use string() inside an oxy_label(). As a workaround, to apply styling on the dynamic text retrieved by a string() function you can define some overall styles for the entire page margin box and then use the oxy_label to style differently the static text.
In your case you will obtain something like:
Code: Select all
@top-left {
color: white;
content: oxy_label(text, "Chapter", styles, "color:black;") "\A0\A0\A0\A0\A0" string(chaptertitle) "\A0\A0\A0";
background-image: url(../images/FirstPageHeaderBlock.png);
background-repeat: no-repeat;
background-position: 0 0.5cm;
background-size: 100% 100%;
text-align:right;
font-weight: bold;
font-size: 24pt;
border: 0cm;
}
Where white applies on the string(chaptertitle) and the oxy_label is black.
I suppose the "FirstPageHeaderBlock.png" image contains the red to violet line with the violet square.
Regards,
Julien
Re: To achieve a specific header for the chapter
Posted: Fri Jan 13, 2023 11:52 am
by SunilCP
Thanks julien_lacour . I was able to reach to this. But, in another case, where there is 2 string sets (Chapter Title and Chapter Number ) which needs to be in Header and in different style. How to manage this? Because String is not allowed in oxy_path.
image.png
Re: To achieve a specific header for the chapter
Posted: Wed Jan 18, 2023 7:04 pm
by SunilCP
Any one can provide any suggestion to achieve this?
Re: To achieve a specific header for the chapter
Posted: Thu Jan 19, 2023 11:11 am
by julien_lacour
Hello,
If your string-sets should have different styles (color, font, etc.) you can't, the only solution is to have them in different page-margin boxes (top-left and top-center for example).
Regards,
Julien
Re: To achieve a specific header for the chapter
Posted: Mon Jan 23, 2023 2:39 pm
by SunilCP
Thanks Julien for the clarity