Custom icons before the text

[[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

[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.

[[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 .

[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

[[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

[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.

[[Stupid]_[User]]

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!!