FAQ/Questions/Overriding-page-level-css.md
... ...
@@ -6,7 +6,7 @@
6 6
7 7
###Toolbar
8 8
9
-To edit the CSS for the toolbar on the Report Viewer page, follow the steps below:
9
+Izenda does not currently offer a simple method of editing this portion of the report viewer. However, it is still possible. To edit the CSS for the toolbar on the Report Viewer page, follow the steps below:
10 10
11 11
* Create a new file in your **resources/css** directory on your website called reportviewer.css
12 12
* Open ReportViewer-Head.ascx in **Resources/html**
... ...
@@ -35,18 +35,30 @@ To edit the CSS for the toolbar on the Report Viewer page, follow the steps belo
35 35
}
36 36
```
37 37
38
+To override other classes that are not included in this sample, you can easily add the appropriate override by using the developer tools that come with different browsers to inspect the HTML and pick out the elements you wish to modify the CSS for.
39
+
38 40
##Report Designer
39 41
40 42
###Tabs
41 43
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").
44
+Download the [[css.zip|http://www.izenda.com/Site/KB/uploads/attachments/css.zip]] file and extract the **tabs.css** file to the resources/css folder within your application. Make sure that it is named tabs.css, then enter the dynamically generated tabs.css link into your browser (example: "/your_site_url/resources/css/tabs.css").
43 45
44 46
There are two ways that you can set this property in your application.
45 47
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
+A. Set [[TabsCssUrl|/API/CodeSamples/TabsCssUrl]] = "your_site_url/resources/css/tabs.css" in ``InitializeReporting()`` in your global.asax.
49
+
50
+**-OR-**
51
+
52
+B. On the Settings.aspx page, go to the **Appearance (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/resources/css/tabs.css) . We recommend option A to adhere to best practices.
48 53
49 54
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 55
56
+##Toolbar
57
+
58
+With the zip file you downloaded from the last section, extract the **toolbar.css** file into the resources/css folder within your application. Ensure the file is still named toolbar.css, then enter the link generated into your browser (example /your_site_url/resources/css/toolbar.css).
59
+
60
+You can either set the [[ToolbarCssUrl|/API/CodeSamples/ToolbarCssUrl]] setting to your new URL or you can enter it into the **Toolbar CSS URL** text box on **settings.aspx**
61
+
51 62
##Report List
52 63
64
+To use custom CSS for the Report List page, you can use the method described above for the Report Viewer to obtain the desired results. However, the file will be called ``reportlist.css`` and the page it should be included on is **ReportList-Head.ascx**. The CSS classes you will have to override will also be different than the ReportViewer page CSS classes.
... ...
\ No newline at end of file