Page 1 of 1
Custom icons before the text
Posted: Tue Dec 06, 2022 10:05 am
by [Stupid]_[User]
Hello everyone!
I want to customize some parts of my document. Now I'm trying to add icons before blocks of text (for example I have a lot of tips in my document and I really want to separate them from the normal text). I found a lot of amazing icons in the Internet for this, but I can't add them before the text. Example below:
exmpl.JPG
Re: Custom icons before the text
Posted: Tue Dec 06, 2022 3:28 pm
by chrispitude
Hello Mr. User,
This looks like you are trying to customize <note> elements.
The customization work depends on which transformations you are using. Each transformation is configured differently. The CSS-based transformations (pdf-css-html5, html, and webhelp-responsive) are the easiest to configure.
Re: Custom icons before the text
Posted: Thu Dec 08, 2022 8:50 am
by [Stupid]_[User]
Hello chrispitude!
I trying to customize
note elements but haven't such result as I want. Is it any way to delete background "
speech buble" and add
my own icon before the text? I using "
DITA PDF - Based on HTML5 &CSS" transformation scenario.
At this moment I resolve my problem simpler and banausic:
1. I add output class for
<p> that will be used as note.
2. I add following code to my
css file:
*[class~='topic/p'][outputclass="NOTE"]:before{
content:url("NOTE_icon.png");
width:20px;
height:20px;
}
*[class~='topic/p'][outputclass="NOTE"]{
font-size: 14px;
font-family: arial;
line-height:100%;
margin-top:4px;
margin-bottom:2px;
margin-left:1cm;
}
Customize standard note sounds better and not so banausic. I'll be grateful if you'll help me with it
.
Re: Custom icons before the text
Posted: Thu Dec 08, 2022 10:51 am
by julien_lacour
Hello,
If you want to change standard DITA <note> element, you can follow
this topic from our user-guide.
If this topic is unclear, don't hesitate to give your feedback, it will help us make the user-guide better!
Regards,
Julien
Re: Custom icons before the text
Posted: Tue Dec 20, 2022 1:12 pm
by [Stupid]_[User]
Hello,
If you want to change standard DITA <note> element, you can follow
this topic from our user-guide.
If this topic is unclear, don't hesitate to give your feedback, it will help us make the user-guide better!
Regards,
Julien
Hello, Julien!
I read the topic, which you are linked for, but I didn't found answers for my questions.
First of all I didn't understand how I can delete "speech buble" (I wrote this earlier in this post).
Secondly I can't dele "NOTE" text before my NOTE (I apologize for the pun).
Thirdly I didn't inderstand how to change standart icon to my own icon.
I don't need my NOTE have background image, I only need my custom icon near.
I show all my questions on the pic below. Hope it'll help to unerstand my strange requirements.
Capture.PNG
Re: Custom icons before the text
Posted: Tue Dec 20, 2022 2:27 pm
by chrispitude
Hi Mr. User,
Whenever I want to change something in the CSS, my first step is to see what rules are applied and where they are coming from,
using the CSS inspector of my favorite browser.
I suggest using the CSS inspector to see how the default icon is applied, then apply your own icon
using the same CSS selector. For example, I can see that the default note icon is applied like this:
image.png
so perhaps you could either apply your own image in the same way to override the default image by setting
background-image to your icon, or you could suppress that image (perhaps setting
background-image to
none), then apply your icon in some different way, such as using a
::before CSS selector or something like that. (But generally, I try to override default styles in the same way that they were originally applied.)
I see that the topic Julien mentioned covers exactly these suggestions, so it is a good reference.
For the note title, the CSS inspector will show the following structure:
image.png
so perhaps you could apply a rule like
Code: Select all
span.note__title { display: none; }
to hide it.
Re: Custom icons before the text
Posted: Thu Dec 22, 2022 6:20 pm
by [Stupid]_[User]
chrispitude wrote: ↑Tue Dec 20, 2022 2:27 pm
Hi Mr. User,
Whenever I want to change something in the CSS, my first step is to see what rules are applied and where they are coming from,
using the CSS inspector of my favorite browser.
I suggest using the CSS inspector to see how the default icon is applied, then apply your own icon
using the same CSS selector. For example, I can see that the default note icon is applied like this:
image.png
so perhaps you could either apply your own image in the same way to override the default image by setting
background-image to your icon, or you could suppress that image (perhaps setting
background-image to
none), then apply your icon in some different way, such as using a
::before CSS selector or something like that. (But generally, I try to override default styles in the same way that they were originally applied.)
I see that the topic Julien mentioned covers exactly these suggestions, so it is a good reference.
For the note title, the CSS inspector will show the following structure:
image.png
so perhaps you could apply a rule like
Code: Select all
span.note__title { display: none; }
to hide it.
Hi, Chrispitude!
CSS Inspector helped me a lot! Now I resolved most of my style problems.
BIg thanks for your advice!!