1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
=head1 Customizing the Look of Your RT
While the default RT color scheme nicely matches the Best Practical colors,
you may want to personalize your RT instance to make it better fit with
your company colors.
=head1 Selecting a Theme
The fundamental look of RT comes from the selected theme. Different
RT versions have a default, and the RT admin can set the system-wide
theme with the C<$WebDefaultStylesheet> configuration value in the
F<RT_SiteConfig.pm> file.
RT comes with the following themes:
=over
=item elevator-light
The default light theme for RT 5.0
=item elevator-dark
The dark theme for RT 5.0
=back
If you have granted the ModifySelf right to users on your system,
they can pick a different theme for themselves by going to
Logged in as -> Settings -> Preferences and selecting a different theme.
=head1 RT Theme Editor
RT has some built-in controls to manage the look of the theme you select.
To use the Theme Editor, log in as a SuperUser (like root), and navigate
to Admin -> Tools -> Theme.
=for html <img alt="RT theme editor, defaults" src="../images/theme_editor_defaults.png">
=for :text [RT theme editor image at F<docs/images/theme_editor_defaults.png>]
=for :man [RT theme editor image at F<docs/images/theme_editor_defaults.png>]
=head2 Logo and Colors
From there you can upload a logo and pick colors for the various page
sections. RT will automatically pick out the six most frequent primary
colors from your logo and offer them as options next to the color wheel.
In less than a minute, you can upload a logo and set a few colors.
Until you click "Save", color changes are temporary and are only shown
to you. When you find the color scheme you want, click Save to make it
the new theme for the entire RT instance. If you ever want to wipe the
slate clean, you can use one or both of the "Reset to default" buttons.
=head2 Basic CSS Customization
The theme editor lets you do a bit more if you know your way around CSS
or have a web designer who does. By writing your own styles in the
Custom CSS box, you can quickly customize the RT look and feel pretty
extensively. The primary RT elements are stubbed out for you in the
edit box.
After making CSS changes, click Try to see how they look, and click Save
when you're done.
=head1 Advanced CSS Customization
If you're more ambitious and good at CSS, you can go even further and
create your own theme. As with all modifications to RT, it's a bad idea
to just change the CSS for one of the standard RT themes in place. When
you upgrade, if you protect your modifications from being over-written,
you may miss out on updates that are required for new features. In the
worst case, an upgrade might wipe out all of your changes.
Below are a few approaches to customizing RT's CSS.
=head2 Additional files
RT allows you to conveniently include additional CSS files after the
default CSS styles, via the C<@CSSFiles> configuration option. To add
an extra CSS file, for example F<my-site.css>, create the local overlay
directory:
$ mkdir -p /usr/local/share/request-tracker5/static/css/
And place your F<my-site.css> file in it. Finally, adjust your
C<@CSSFiles> in your F<RT_SiteConfig.pm>:
Set( @CSSFiles, ('my-site.css') );
CSS added this way is included across all themes.
If you are writing an extension, see L<RT/AddStyleSheets> for how to
simply and programmatically add values to C<@CSSFiles>.
=head2 Customizing Bootstrap
Bootstrap supports easy theming with built-in Sass variables. Here is how to
create your own version of bootstrap.css
=over
=item Install Node.js and necessary packages
brew install node
npm install -g node-sass postcss postcss-cli
cd devel/third-party/bootstrap-4.6.1
npm install autoprefixer
=item Create bootstrap_customized.scss
For example:
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "scss/bootstrap";
=item Generate new bootstrap.css
node-sass --output-style expanded --precision 6 bootstrap_customized.scss bootstrap.css
postcss --config postcss.config.js --replace bootstrap.css
=item Use new bootstrap.css
It's not suggested to override bootstrap.css in official RT themes as it
will get overridden during RT upgrade. Instead, you can put the new created
bootstrap.css to your new own theme. See below.
=back
=head1 Designing Your Own Theme
The above approaches work well if you need to change the look of
part of RT, but you may want to design your own RT theme
and leave the standard RT themes available to users unmodified. In
this case, you'll want to create your own CSS directory.
As shown above, the C<local> directory is the place to put
local modifications to RT. Run the following commands in your
C</usr/local/share/request-tracker5> directory to get started:
$ mkdir -p static/css/localstyle
$ cp -R /usr/share/request-tracker5/static/css/elevator-light/* static/css/localstyle/
$ mkdir -p html/NoAuth/css/localstyle
$ cp -R /usr/share/request-tracker5/html/NoAuth/css/elevator-light/* html/NoAuth/css/localstyle/
You can call your "localstyle" directory whatever you want and you don't
have to copy the elevator-light theme to start from, but it's a good place
to start off for RT 5.
Now set C<$WebDefaultStylesheet> in RT_SiteConfig.pm to the new directory
name you selected, for example:
Set( $WebDefaultStylesheet, 'localstyle' );
If you restart your RT it should look just the same (assuming you copied
your current default theme), but if you go to your Preferences page you'll
see that the system default theme is now your new "localtheme."
If you look at the CSS being loaded, you'll also see that the main css
file is now being loaded from your local directory.
You can start modifying things by editing the CSS files in your new
localstyle directory. When you upgrade RT, you'll want to look specifically
at any changes to the style you started from to see if there are any new
styles you want to merge into your new style.
|
