Custom icons before the text

Having trouble installing Oxygen? Got a bug to report? Post it all here.
[Stupid]_[User]
Posts: 16
Joined: Mon Dec 05, 2022 9:35 am

Custom icons before the text

Post 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
exmpl.JPG (21.49 KiB) Viewed 293 times
chrispitude
Posts: 717
Joined: Thu May 02, 2019 2:32 pm

Re: Custom icons before the text

Post 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.
[Stupid]_[User]
Posts: 16
Joined: Mon Dec 05, 2022 9:35 am

Re: Custom icons before the text

Post 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 :P .
julien_lacour
Posts: 375
Joined: Wed Oct 16, 2019 3:47 pm

Re: Custom icons before the text

Post 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
[Stupid]_[User]
Posts: 16
Joined: Mon Dec 05, 2022 9:35 am

Re: Custom icons before the text

Post 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
Capture.PNG (18.72 KiB) Viewed 205 times
julien_lacour wrote: Thu Dec 08, 2022 10:51 am
chrispitude
Posts: 717
Joined: Thu May 02, 2019 2:32 pm

Re: Custom icons before the text

Post 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
image.png (4.46 KiB) Viewed 197 times

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
image.png (5.51 KiB) Viewed 193 times

so perhaps you could apply a rule like

Code: Select all

span.note__title { display: none; }
to hide it.
[Stupid]_[User]
Posts: 16
Joined: Mon Dec 05, 2022 9:35 am

Re: Custom icons before the text

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