Skip to main content
Toxxyc
Toxxyc
Inspiring
October 25, 2016
Answered

Can I change the background color a table lies on?

  • October 25, 2016
  • 2 replies
  • 1338 views

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):


Can anyone assist?

This topic has been closed for replies.
Correct answer Captiv8r

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.


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:

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.

Cheers... Rick

2 replies

Toxxyc
ToxxycAuthor
Inspiring
November 21, 2016

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! 

A
Community Expert
AmebrCommunity Expert
Community Expert
November 22, 2016

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

Toxxyc
ToxxycAuthor
Inspiring
November 22, 2016

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!

Jeff_Coatsworth
Community Expert
Jeff_CoatsworthCommunity Expert
Community Expert
October 25, 2016

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.

Captiv8r
Captiv8r
Legend
October 25, 2016

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices