Highlighted

Can I change the background color a table lies on?

Participant ,
Oct 25, 2016

Copy link to clipboard

Copied

Hi guys, I recently (about 2 months ago) started working with RoboHelp 2015 V12.0.2.384.  I was employed as a Technical Document Writer and RoboHelp was given to me to use.  So far, so good.  I love working with RoboHelp (bar a few tiny issues) and I love learning as I go along.  Usually I can figure stuff out using online HTML code to fix what I need to do (like creating tabs), but this one issue has me stumped.  Here is the breakdown:

I'm making tables to summarize related data.  Now the tables are customized obviously to comply with company fonts and colors, but here I have an issue with an option I can't seem to change.

Placing a table allows me to change the font, font size and font color.  It also allows me to change the background colors of individual cells, which is working perfectly.  However, placing a table on a colored background gives the table two large white margins on either side which looks crap.  Is there a way I can fix this?  I can't change the entire topic's background color/shading, because it doesn't solve my issue.

Question:  How can I just change the background color or shading of a small part of a topic?  Here's an example of what the table looks like (I marked the white spots I have an issue with with red squiggles):

2016-10-25 11-53-38 AM.png

Can anyone assist?

Hmmm, WRT the list tags, that seems a bit unusual to me. Are you hand coding them in HTML or using the RoboHelp buttons to apply them?

As for the styling of them, I do know that in the CSS you are able to treat OL and UL differently and have different attributes. But from the RoboHelp standpoint, when you configure them using the RoboHelp CSS editor, they are lumped together in the actual CSS code as shown below:

TMP1.png

As for styling the drop-down area, you might try this:

Open the CSS in the RoboHelp CSS editor. Click to expand the Div section, then click on the Drop-down text item ( 1 ).

Then click the Paint Bucket tool ( 2 ) and choose the background color you want.

tmp2.png

Cheers... Rick

TOPICS
HTML5 layout

Views

532

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

Can I change the background color a table lies on?

Participant ,
Oct 25, 2016

Copy link to clipboard

Copied

Hi guys, I recently (about 2 months ago) started working with RoboHelp 2015 V12.0.2.384.  I was employed as a Technical Document Writer and RoboHelp was given to me to use.  So far, so good.  I love working with RoboHelp (bar a few tiny issues) and I love learning as I go along.  Usually I can figure stuff out using online HTML code to fix what I need to do (like creating tabs), but this one issue has me stumped.  Here is the breakdown:

I'm making tables to summarize related data.  Now the tables are customized obviously to comply with company fonts and colors, but here I have an issue with an option I can't seem to change.

Placing a table allows me to change the font, font size and font color.  It also allows me to change the background colors of individual cells, which is working perfectly.  However, placing a table on a colored background gives the table two large white margins on either side which looks crap.  Is there a way I can fix this?  I can't change the entire topic's background color/shading, because it doesn't solve my issue.

Question:  How can I just change the background color or shading of a small part of a topic?  Here's an example of what the table looks like (I marked the white spots I have an issue with with red squiggles):

2016-10-25 11-53-38 AM.png

Can anyone assist?

Hmmm, WRT the list tags, that seems a bit unusual to me. Are you hand coding them in HTML or using the RoboHelp buttons to apply them?

As for the styling of them, I do know that in the CSS you are able to treat OL and UL differently and have different attributes. But from the RoboHelp standpoint, when you configure them using the RoboHelp CSS editor, they are lumped together in the actual CSS code as shown below:

TMP1.png

As for styling the drop-down area, you might try this:

Open the CSS in the RoboHelp CSS editor. Click to expand the Div section, then click on the Drop-down text item ( 1 ).

Then click the Paint Bucket tool ( 2 ) and choose the background color you want.

tmp2.png

Cheers... Rick

TOPICS
HTML5 layout

Views

533

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 25, 2016 0
Adobe Community Professional ,
Oct 25, 2016

Copy link to clipboard

Copied

Is this the output view or the RH topic? I would suspect that background coloring could be controlled by your CSS applied to the topic.

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 25, 2016 0
LEGEND ,
Oct 25, 2016

Copy link to clipboard

Copied

Hi there

To expound on what Jeff brought up, I'll ask a similar question in a different way.

How exactly are you coloring the elements of the page above and below the table? What did you do to coax the dark blue background above and below the table?

Normally, if you style things via CSS and you set the overall background color, the table behaves a bit differently than what you have shown here.

Cheers... Rick

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 25, 2016 0
Participant ,
Oct 25, 2016

Copy link to clipboard

Copied

Captiv8r​ and Jeff thanks for responding (I can't mention you, for some reason, Jeff).  The above image has a simple highlight colour under the text (and font colour changed to look good, obviously).

This is both in RH itself and also when I output the project (primary output is Responsive HTML5).  What I did so far was to place a ton of spaces/line breaks, colour them all dark blue and then paste the table right in the middle of the line breaks.  This is, in my mind, supposed to keep the highlight colour on the background, but it doesn't, it introduces those white bars.

Now, I know I can do it in the HTML editor, but why can't I just select it as an option or change it in the Table Format tab?  The reason for the question is simple - the HTML editor does it's own thing.  I changes the format I put in and does with it what it wants.

I have tried to edit the CSS, but it doesn't seem to work.  It's ignoring the background colour I assign to the elements.

I'm a bit lost here right now, I don't understand how such a simple operation can be so difficult to complete with RoboHelp...  😕

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 25, 2016 0
LEGEND ,
Oct 26, 2016

Copy link to clipboard

Copied

Hello again

Most likely you are simply overthinking the problem.

Hang on a bit and I'll put together a brief video showing you what you need to do.

Cheers... Rick

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 26, 2016 0
LEGEND ,
Oct 26, 2016

Copy link to clipboard

Copied

As I'm building the video showing you what to do with CSS, you might want to use the video linked below to remove any inline styling that has been applied.

Click here to view

Cheers... Rick

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 26, 2016 0
LEGEND ,
Oct 26, 2016

Copy link to clipboard

Copied

Okay, see if this quick and dirty video helps you out.

Click here to view

Cheers... Rick

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 26, 2016 0
Participant ,
Oct 27, 2016

Copy link to clipboard

Copied

Hi Captiv8r​, thanks a mil for that video.  It works fine using that method if you want the entire background of the topic to be one colour (as per the CSS).  However, it doesn't solve the problem of having one part a specific colour and others not.

Let me explain it further:  I'm making DropDown Text spots in the manual in order to give more info where needed.  I want to place the ENTIRE block of the DropDown Text on a dark blue background so that it stands out.  Now, it works fine using inline styling like you mentioned I am using (just the highlight colour of the text), but I need to figure out how to do it with the table as well.  I have an option to right-click on the DropDown Text edit box and then change the entire edit box's background shading to the right colour, but it doesn't pull through when the project it sent to output.  It's like RH sees what I'm doing (because it looks fine until I save or output) and then decides to ignore what I changed, discard the changes and then save before outputting to Responsive HTML5.  I have no idea why it's doing that.

By the way, that issue (RH does what it wants) is present when you build unordered lists in the HTML editor with the <ul> tags as well.  It automatically changes them to <ol> tags.  A day's worth of work took me to just figure that out, and it can't be changed.  In the end I resorted to building my tabs with OL tags instead of UL tags, because RH refused to work with UL tags.  I'm a bit dumbfounded as to why it does that, to be honest.

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 27, 2016 0
LEGEND ,
Oct 27, 2016

Copy link to clipboard

Copied

Hmmm, WRT the list tags, that seems a bit unusual to me. Are you hand coding them in HTML or using the RoboHelp buttons to apply them?

As for the styling of them, I do know that in the CSS you are able to treat OL and UL differently and have different attributes. But from the RoboHelp standpoint, when you configure them using the RoboHelp CSS editor, they are lumped together in the actual CSS code as shown below:

TMP1.png

As for styling the drop-down area, you might try this:

Open the CSS in the RoboHelp CSS editor. Click to expand the Div section, then click on the Drop-down text item ( 1 ).

Then click the Paint Bucket tool ( 2 ) and choose the background color you want.

tmp2.png

Cheers... Rick

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 27, 2016 0
Participant ,
Nov 21, 2016

Copy link to clipboard

Copied

OK so the stylesheets worked, but only to an extent.  It messed up the view of some other things as well.  Changing the background color forces the table to the left of the screen so it can't be centered, for example.

However, I've taken this "bug" on the chin and resorted to accepting this as one of those weird "bugs" in RH 2015, and took the table out of the drop-down text and placed it on the page instead.  I'll just refer to it in the dropdown instead.

Thanks for the assistance guys, I appreciate the time and trouble (with the people sleeping in the house) you guys put into this! 

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...
Nov 21, 2016 0
Adobe Community Professional ,
Nov 21, 2016

Copy link to clipboard

Copied

What about inserting the dropdown inside a div, and using a style on the div? That would colour the background of the drop-down hyperlink too and I'm not sure if you want that.

Or if you only want the content of the dropdown coloured, once you enter your dropdown text, go into code, and wrap the contents of the dropdown in a styled div.

e.g. using inline styling

<?rh-droptext_start class="droptext" id="POPUP467950971" style="display: none;" ?>

  <div style="background-color: orange;">

  <p>Type your drop-down text here.</p>

  <p>&#160;</p>

  <p>&#160;</p>

  </div><?rh-droptext_end ?>

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...
Nov 21, 2016 0
Toxxyc LATEST
Participant ,
Nov 21, 2016

Copy link to clipboard

Copied

Yeah that changes things I don't want changed that much, actually.

Not to worry though, I'm just going to ignore my need for this at this stage and bypass it with a different solution.  Thanks for the reply though, it's appreciated indeed!

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...
Nov 21, 2016 0