Using a Custom CSS file

[Anonymous]

Hello all,

I needed some help with customizing the reports generated by simulations. Here's a brief on my situation-

A big part of the work we do on simulation include reporting the results. We like having a particular format for the reports generated by simulations (I mean fonts, margins etc). I know that I can edit various formatting options and create a custom CSS file and then use that file to generate a report as per my particular requirements. I was able to generate a custom CSS file, but I wasn't able to use it to generate reports. 

While I am in the 'Reports' tab and the 'Use custom CSS file' option is highlighted and even though I have set the default CSS file to be the one I intend to use, using application tools still the report generated does not match the formatting I have set. 

I appreciate any and all help that I could get here!

Thanks in anticipation,

Vikita.

[John_Holtz]

Hi Vikita. Welcome to the Simulation Mechanical forum.

I am seeing some changes when I use a custom CSS file, so let me ask you some questions to make sure I understand what you are doing, etc.

1. After you define your custom CSS file, and in the Sim Mech interface you indicate that you want to use the custom CSS file. Then when you Refresh the report, are you not seeing any changes?
2. If you "Save As" to HTML and open the file "report name_rpt.htm" with a browser (Chrome, Firefox, Internet Explorer, etc), do the manual changes from the CSS appear?
3. One problem that I have is knowing what needs to be changed in the "Tools > Application Options > Reporting > Modify Cascading Style Sheet Information". It is hard to know where the various options (body formatting, table formatting - level N, header formatting, etc) are used. What are you changing? (See my image below for some things that are easy to change and see the effect.)
4. It appears that if you "Save As" to any other format, the other formats do not use the custom CSS. Even if you open the "report name_rpt.htm" file directly with Word, Word is not using the CSS file. If you are saving the report and opening it outside of Sim Mech, what are you saving it as?
5. The least likely problem is the version of Sim Mech. But for completeness, what version of Sim Mech are you using?

If you are still having problems getting your changes to appear, please do the following:

• Save your report as an HTML file. This will write 4 files to the folder: report name.htm, report name_rpt.htm, report name_toc.htm, and the custom css file.css
• Compress (zip, rar, Windows "Send to Compressed (zipped) folder") the .css and _rpt.htm files.
• Attach those to your reply.

Isn't my report nice?

1. "HTML Body Formatting > Select Background Color". I see that it does not use the color that I selected!
2. "HTML Body Formatting > Select Font"
3. "HTML HeaderFormatting > Select Font H1".

[Anonymous]

Thank you!

The reply was pretty helpful to understand some of the things going on. I still am not able to use the CSS file to get formatting as I intend to. Here are specific answers to your questions. 

1. No. I do not see any changes.

2. No, they do not.

3. the back ground color changed, but it was a different color than what I selected. (I selected a shade of purple and a shade of green got actually used, if that helps.) The fonts did not change.

4. earlier I was trying to save it as a pdf. But after reading your reply, I have been working with 'report name_rpt.html" file. (All the responses correspond to the 'report name_rpt.html" file). 

5. I am using Simulation Mechanical 2018

Thanks again

Vikita

[John_Holtz]

Hi Vikita,

You should see some changes in the Sim Mech interface and in your browser when you save the report to HTML and open it. But there are many problems involved which make it difficult to really know what is going on.

For example, here are some problems:

1. In the .css file that is created when you save the report, the "margin-" commands in the BODY section are missing a ";" at the end of the line. Thus, changing the margins have no effect.
2. In the .css file that is created when you save the report, all of the lines that give a font-size have the wrong syntax. The "=" character should be a ":" character (as in "font-size:10pt;" instead of "font-size=10pt;") Thus, changing the font size has no effect.
3. Different sections of the report use different styles, so a change that affects one item in one table (for example) may have no affect on a different section or different table. The image below shows just the beginning of the report and what section of the .css file controls it. There are 9 different settings (if I counted correctly) that control this one small section!
4. Some sections of the report are controlled by multiple sections of the .css file. (Maybe that is why it is called "cascading".) Something set for the BODY style can be overruled by the same thing set for a TABLE style, or a combination of a change in BODY and TABLE affect an entry.

I started to decipher the .css file and recorded my findings in the image below and the Word document attached. It is a massive job to get it all figured out. If you really want to untangle it, the easiest thing to do is something like the following:

• Save the report to HTML. This also creates the .CSS file.
• Open the report with a browser (Chrome, Internet Explorer, etc)
• Open the .css file with Notepad.
• Correct the errors I mentioned above.
• Change the first location that gives a "color:" in the .css file to red.
• Refresh the report. Note what changes in the report and write it down somewhere.
• Change the color back to black, and move on to the next line with the word color.
• Repeat changing one line to red, refreshing, finding the changes, etc.....
• When you get a .css file that you like, save it to a safe place. Then replace the .css file created when you save a report with your final version. (In other words, do not worry what it looks like in the Sim Mech interface because you are going to replace the .css file that is created when you save the report.)

After you figure all of that out, the .css file includes two sections: a section that affects what you see on the screen (@media screen), and what happens when you print it (@media print)! So you may need to make changes in two different locations.

sections of .css file that affect the report

Good luck.

(edit 6/11 changed one step that said "change color back to red". It should have been "change color back to black".)

[John_Holtz · Accepted solution]

Hi @Anonymous

I wanted to make sure that you saw my post. Do you have any follow-up questions about the CSS file and report?

[Anonymous]

Thanks a lot John!

Your post was indeed very helpful. I now have an idea of how to go around and try to make changes that I want to.

Thanks again!

-Vikita