• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Background Shading for Notes

Community Beginner ,
Oct 16, 2019 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 

Views

288

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
community guidelines
Community Expert ,
Oct 16, 2019 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.

 

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Community Beginner ,
Oct 16, 2019 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

Votes

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
community guidelines
Community Beginner ,
Oct 22, 2019 Oct 22, 2019

Copy link to clipboard

Copied

...

Votes

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
community guidelines
Community Expert ,
Oct 16, 2019 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?

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Community Beginner ,
Oct 21, 2019 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.

Votes

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
community guidelines
Community Expert ,
Oct 22, 2019 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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Community Beginner ,
Oct 22, 2019 Oct 22, 2019

Copy link to clipboard

Copied

LATEST

Hi Peter


I tried just the character style and the image style, however I was told that the highlighted region was a tad too small. Hence I made the switch to boxes.


Regarding snippets, they are originally just the textbox, the image and Note: I convert the snippet to HTML. This saves me from having to apply the styles and having to copy the images.

Votes

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
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp