Hi guys, I recently (about 2 months ago) started working with RoboHelp 2015 V184.108.40.2064. 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?
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.
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.
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... 😕
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.
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.
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!
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>
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!