d40742559166e6ddd621cdfab0b992def7a5948f
FAQ/Questions/Overriding-page-level-css.md
| ... | ... | @@ -0,0 +1,52 @@ |
| 1 | +#Overriding page level css |
|
| 2 | + |
|
| 3 | +[[_TOC_]] |
|
| 4 | + |
|
| 5 | +##Report Viewer |
|
| 6 | + |
|
| 7 | +###Toolbar |
|
| 8 | + |
|
| 9 | +To edit the CSS for the toolbar on the Report Viewer page, follow the steps below: |
|
| 10 | + |
|
| 11 | +* Create a new file in your **resources/css** directory on your website called reportviewer.css |
|
| 12 | +* Open ReportViewer-Head.ascx in **Resources/html** |
|
| 13 | +* Insert the following line into the page: ``<link rel="stylesheet" type="text/css" href="./Resources/css/reportviewer.css" />`` |
|
| 14 | +* Insert the following class overrides into the reportviewer.css file |
|
| 15 | + |
|
| 16 | +```css |
|
| 17 | +/*Controls the style of the entire toolbar*/ |
|
| 18 | +.nav-tabs { |
|
| 19 | + |
|
| 20 | +} |
|
| 21 | + |
|
| 22 | +/*Controls the style of just the buttons section of the toolbar*/ |
|
| 23 | +.btn-toolbar { |
|
| 24 | + |
|
| 25 | +} |
|
| 26 | + |
|
| 27 | +/*Controls each button's div element*/ |
|
| 28 | +.btn-toolbar div { |
|
| 29 | + |
|
| 30 | +} |
|
| 31 | + |
|
| 32 | +/*Controls the tabs on the toolbar: Filters, Fields, Pivots*/ |
|
| 33 | +.nav-tabs li { |
|
| 34 | + |
|
| 35 | +} |
|
| 36 | +``` |
|
| 37 | + |
|
| 38 | +##Report Designer |
|
| 39 | + |
|
| 40 | +###Tabs |
|
| 41 | + |
|
| 42 | +Download the [[css.zip|http://www.izenda.com/Site/KB/uploads/attachments/css.zip]] file and extract the tabs.css file to a folder within your application. Make sure that it is named tabs.css, then enter the dynamically generated tabs.css link into your browser (example: "/izenda/css/tabs.css"). |
|
| 43 | + |
|
| 44 | +There are two ways that you can set this property in your application. |
|
| 45 | + |
|
| 46 | + A. Set [[TabsCssUrl|/API/CodeSamples/TabsCssUrl]] = "your_site_url/css/tabs.css" in ``InitializeReporting()`` in your global.asax. |
|
| 47 | + B. On the Settings.aspx page, go to the **images and css** tab and insert the absolute path to the tabs.css file in the **Tabs CSS URL** text box (example: your_site_url/css/tabs.css) |
|
| 48 | + |
|
| 49 | +Once you have set the path to tabs.css, you can use the program of your choice to edit it to match your company's colors or fonts. |
|
| 50 | + |
|
| 51 | +##Report List |
|
| 52 | + |