Highlighted

Background Shading for Notes

Community Beginner ,
Oct 16, 2019

Copy link to clipboard

Copied

I'm working on a Help File and the customer has requested me to include all notes with a lime green background. Trouble is that the shading extends to the end of the line. I have created a Note Style for the shading and a Note snippet for the image and Note:

image (1).png

 

Is there any way to make the background to wrap with the text.

 

Please see the image for reference.

 

Cheers 

TOPICS
Documentation

Views

103

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Background Shading for Notes

Community Beginner ,
Oct 16, 2019

Copy link to clipboard

Copied

I'm working on a Help File and the customer has requested me to include all notes with a lime green background. Trouble is that the shading extends to the end of the line. I have created a Note Style for the shading and a Note snippet for the image and Note:

image (1).png

 

Is there any way to make the background to wrap with the text.

 

Please see the image for reference.

 

Cheers 

TOPICS
Documentation

Views

104

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 16, 2019 0
Adobe Community Professional ,
Oct 16, 2019

Copy link to clipboard

Copied

I suspect you have created a style with a name like p.green. As that is a paragraph style it will apply to the whole paragraph/line.

 

If you create a style named just .green (note the dot) it becomes a character style that will only apply to the text.

 

You will have to rework all the existing notes. If you just rename the p.green, in your project all the notes will revert to white as whilst they would have p.green in the code, that would no longer be in the CSS. You would therefore have trouble locating them.

 

You need to locate each note, reset it to to just P, select the text and then apply .green.

 

Just check it work OK on multi-line paragraphs. If not, use p.green there.

 

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2019 1
Community Beginner ,
Oct 16, 2019

Copy link to clipboard

Copied

Hi Peter

 

Thank you for the response. I just had to add convert the note icon to an image style with the same background. 

 

Cheers!

 


 
Updating Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2019 0
Community Beginner ,
Oct 22, 2019

Copy link to clipboard

Copied

...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2019 0
Adobe Community Professional ,
Oct 16, 2019

Copy link to clipboard

Copied

With this code

.pink{
background-color: fuchsia;
}

 

I selected the image below and the text, then went to the Style pod and applied Pink from character styles. This is what I got.

 

clipboard_image_0.png

 

Is your code different other than the colour?

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2019 0
Community Beginner ,
Oct 21, 2019

Copy link to clipboard

Copied

Well I did not type in code. Here's what I did.

  1. I created a snippet and created a text box with proper indentation.
  2. I created a character style for the text and changed the highlight colour to green.
  3. For my note image, I created an image style and applied the same fill for the image style. I did this step because the image looked out of place with a white background.
  4. I created a text box with the same green fill.

 

Now it looks good. However since the image size is small, longer text do show some troubles in spacing. I might replace the note image with the same image with a green color square at the bottom, so that it doesn't look out of place.image.png

 Let me know if there are improvements. This is for reference for others.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 21, 2019 0
Adobe Community Professional ,
Oct 22, 2019

Copy link to clipboard

Copied

I'm confused now as your original post required that only the text had the background and the problem was the whole paragraph had the background. Whilst your solution does not go full width across the screen, it does highlight more than just the text and image. I had thought of suggesting a fixed size borderless table cell but that didn't seem to fit the requirement.

 

Also you say you have created a snippet which means the content is always the same. If that's not the case then why a snippet?

 

Whatever works for you is the important thing.


www.grainge.org

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2019 0