| rev |
line source |
|
erjo@2
|
1 How to create a theme:
|
|
erjo@2
|
2
|
|
erjo@2
|
3 Part 1: CSS / Design
|
|
erjo@2
|
4 ================================================================================
|
|
erjo@2
|
5 1. Copy this "default" theme folder and rename it to your new theme name.
|
|
erjo@2
|
6 2. Open the "about.php" file and edit the information to reflect your theme. Be
|
|
erjo@2
|
7 sure to change the array key like this: $ThemeInfo['YourThemeNameHere'].
|
|
erjo@2
|
8 3. Create a "design" subfolder and copy /applications/dashboard/design/style.css
|
|
erjo@2
|
9 and /applications/vanilla/design/vanilla.css into it.
|
|
erjo@2
|
10 4. Any background images you want to continue using (like the star png images
|
|
erjo@2
|
11 for bookmarking) should be copied along with their respective stylesheets.
|
|
erjo@2
|
12 5. Go to your Dashboard, Themes, and apply your new theme.
|
|
erjo@2
|
13 6. Edit the copied CSS files to look however you wish!
|
|
erjo@2
|
14
|
|
erjo@2
|
15 Other things you should know:
|
|
erjo@2
|
16
|
|
erjo@2
|
17 + All non-forum pages should be edited in the global "style.css" file.
|
|
erjo@2
|
18
|
|
erjo@2
|
19 + If you want to edit the look & feel of the administrative screens, also
|
|
erjo@2
|
20 copy /applications/dashboard/design/admin.css in step 3. Similarly, you can
|
|
erjo@2
|
21 copy other CSS files like /applications/vanilla/design/vanillaprofile.css to
|
|
erjo@2
|
22 customize those pages as well.
|
|
erjo@2
|
23
|
|
erjo@2
|
24
|
|
erjo@2
|
25 Part 2: HTML / Views
|
|
erjo@2
|
26 ================================================================================
|
|
erjo@2
|
27 If you want to customize the HTML, you can edit that too.
|
|
erjo@2
|
28 Our pages are made up of two parts:
|
|
erjo@2
|
29
|
|
erjo@2
|
30 1. Master Views - these represent everything that wraps the main content of the
|
|
erjo@2
|
31 page. If all you want to do is add a menu or banner above Vanilla, this is
|
|
erjo@2
|
32 all you need to alter. To do so, copy the default master view from
|
|
erjo@2
|
33 /applications/dashboard/views/default.master.php to
|
|
erjo@2
|
34 /themes/yourtheme/views/default.master.php and edit it there.
|
|
erjo@2
|
35
|
|
erjo@2
|
36 2. Views - these represent all of the content in each page. Every application
|
|
erjo@2
|
37 has a "views" folder that contains all of the HTML for every page. So, for
|
|
erjo@2
|
38 example, if you wanted to edit the HTML for the Discussions list, you could
|
|
erjo@2
|
39 copy the views from /applications/vanilla/views/discussions to
|
|
erjo@2
|
40 /themes/yourtheme/views/discussions and edit them there.
|
|
erjo@2
|
41
|
|
erjo@2
|
42 You can avoid naming conflicts between applications' views and specify which
|
|
erjo@2
|
43 app a view is for by optionally adding a subfolder with the app's name in
|
|
erjo@2
|
44 /themes/yourtheme/views/ (e.g.: /themes/yourtheme/views/appname/) and placing
|
|
erjo@2
|
45 views there rather than directly in the "views" folder. |