Don't like orange?

Dont create your support topics here! No new topics with questions allowed!

Moderator: crythias

Post Reply
crythias
Moderator
Posts: 10109
Joined: 04 May 2010, 18:38
OTRS Version?: 5.0.x
Location: SouthWest Florida, USA
Contact:

Don't like orange?

Post by crythias » 21 Jul 2012, 15:40

Some things to change if you don't like orange but want to make your own skin.

otrs/var/httpd/htdocs/skins/Agent/default/img/action_hover.png
otrs/var/httpd/htdocs/skins/Agent/default/img/attachment_sprite.png
otrs/var/httpd/htdocs/skins/Agent/default/img/controlrow_sprite.png
otrs/var/httpd/htdocs/skins/Agent/default/img/dialog_alert.png
otrs/var/httpd/htdocs/skins/Agent/default/img/dialog_close.png
otrs/var/httpd/htdocs/skins/Agent/default/img/controlrow_sprite.png
otrs/var/httpd/htdocs/skins/Agent/default/img/logout_sprite.png
otrs/var/httpd/htdocs/skins/Agent/default/img/navigation_sprite.png
otrs/var/httpd/htdocs/skins/Agent/default/img/table_large_hover.png
otrs/var/httpd/htdocs/skins/Agent/default/img/table_medium_hover_bottom.png
otrs/var/httpd/htdocs/skins/Agent/default/img/table_medium_hover.png
otrs/var/httpd/htdocs/skins/Agent/default/img/table_small_hover_bg.png
otrs/var/httpd/htdocs/skins/Agent/default/img/toolbar_sprite.png

css/Core.Agent.Admin.css
color: #F92;
color: #F72;

css/Core.Default.css
color: #F92;
color: #F72;

css/Core.Form.css
border-color: #F92;

css/Core.Header.css
background-color: #F2B13E; (twice)
background-color: #F92; (twice)

css/Core.Table.css (optional: change or comment out)
background: -moz-linear-gradient(center top, #FFE7BD, #FBBA49 20%, #F6AD3E 51%, #F3960D 51%, #E98207 95%, #E07006);
background: -webkit-gradient(linear, left top, left bottom, from(#FFE7BD), to(#E07006), color-stop(20%, #FBBA49), color-stop(51%, #F6AD3E), color-stop(51%, #F3960D), color-stop(95%, #E98207));

css/Core.WidgetMenu.css
color: #F92


If you want to see all the images in a given folder, you can make a quick list of files in the folder, something like
ls > filelist.txt

Copy the following to a makepics.awk file

Code: Select all

BEGIN {
print "<html>"
print "<body>"
}
{
print "<img src=\"" $1 "\"\\>" " " $1 "<br />"
}
END {
print "</body>"
print "</html>"
}
run this:

Code: Select all

awk -f makepics.awk filelist.txt > pics.html
then use your browser to go to /path/of/img/folder/pics.html
(for instance, http://yourotrsdomain/otrs-web/skins/Ag ... /pics.html)

Here's an example to make your own pics.html (I can't upload .html). copy into a pics.html file in your Agent/default/img directory.

Code: Select all

<html>
<body>
<img src="action_hover.png"\> action_hover.png<br />
<img src="actionrow_wrapper.png"\> actionrow_wrapper.png<br />
<img src="actions_line.png"\> actions_line.png<br />
<img src="arrow_left.png"\> arrow_left.png<br />
<img src="arrow_outlined_left.png"\> arrow_outlined_left.png<br />
<img src="arrow_outlined_right.png"\> arrow_outlined_right.png<br />
<img src="arrow_right.png"\> arrow_right.png<br />
<img src="arrows.png"\> arrows.png<br />
<img src="arrow_top.png"\> arrow_top.png<br />
<img src="articlefilter.png"\> articlefilter.png<br />
<img src="articleview.png"\> articleview.png<br />
<img src="attachment_dummy1.jpg"\> attachment_dummy1.jpg<br />
<img src="attachment_dummy2.jpg"\> attachment_dummy2.jpg<br />
<img src="attachment_dummy3.jpg"\> attachment_dummy3.jpg<br />
<img src="attachment_header.png"\> attachment_header.png<br />
<img src="attachment_sprite.png"\> attachment_sprite.png<br />
<img src="blank.gif"\> blank.gif<br />
<img src="bubble_tongueleft.png"\> bubble_tongueleft.png<br />
<img src="bubble_tongueright.png"\> bubble_tongueright.png<br />
<img src="button_bg.gif"\> button_bg.gif<br />
<img src="contexthelp.png"\> contexthelp.png<br />
<img src="controlrow_isolator.png"\> controlrow_isolator.png<br />
<img src="controlrow.png"\> controlrow.png<br />
<img src="controlrow_sprite.png"\> controlrow_sprite.png<br />
<img src="datepicker_vacation_days.png"\> datepicker_vacation_days.png<br />
<img src="dialog_alert.png"\> dialog_alert.png<br />
<img src="dialog_close.png"\> dialog_close.png<br />
<img src="dialog_content.png"\> dialog_content.png<br />
<img src="dialog_footer_em.png"\> dialog_footer_em.png<br />
<img src="dialog_footer.png"\> dialog_footer.png<br />
<img src="dialog_header.png"\> dialog_header.png<br />
<img src="direction_header.png"\> direction_header.png<br />
<img src="direction_incoming.png"\> direction_incoming.png<br />
<img src="direction_internal.png"\> direction_internal.png<br />
<img src="direction_outgoing.png"\> direction_outgoing.png<br />
<img src="dnd_placeholder_bg.png"\> dnd_placeholder_bg.png<br />
<img src="empty_background.png"\> empty_background.png<br />
<img src="empty.png"\> empty.png<br />
<img src="feature_add_ons.png"\> feature_add_ons.png<br />
<img src="filelist.txt"\> filelist.txt<br />
<img src="filter_add_hover.png"\> filter_add_hover.png<br />
<img src="filter_add.png"\> filter_add.png<br />
<img src="filter_remove_hover.png"\> filter_remove_hover.png<br />
<img src="filter_remove.png"\> filter_remove.png<br />
<img src="flag_shadow.png"\> flag_shadow.png<br />
<img src="gradient_lightdark.png"\> gradient_lightdark.png<br />
<img src="gradient_light.png"\> gradient_light.png<br />
<img src="GradientSmallBlack.png"\> GradientSmallBlack.png<br />
<img src="GradientSmall.png"\> GradientSmall.png<br />
<img src="handle.png"\> handle.png<br />
<img src="header_bg.png"\> header_bg.png<br />
<img src="loader.gif"\> loader.gif<br />
<img src="loginlogo_default.png"\> loginlogo_default.png<br />
<img src="logo_bg.png"\> logo_bg.png<br />
<img src="logout_sprite.png"\> logout_sprite.png<br />
<img src="navigation_hover.png"\> navigation_hover.png<br />
<img src="navigation_isolator.png"\> navigation_isolator.png<br />
<img src="navigation_shadow_bottom.png"\> navigation_shadow_bottom.png<br />
<img src="navigation_shadow.png"\> navigation_shadow.png<br />
<img src="navigation_shadow_top.png"\> navigation_shadow_top.png<br />
<img src="navigation_sprite.png"\> navigation_sprite.png<br />
<img src="navigation_underline_bg.png"\> navigation_underline_bg.png<br />
<img src="overviewcontrol_checkbox.png"\> overviewcontrol_checkbox.png<br />
<img src="overviewcontrol_line.png"\> overviewcontrol_line.png<br />
<img src="ProgressBarArrowActive.png"\> ProgressBarArrowActive.png<br />
<img src="ProgressBarArrow.png"\> ProgressBarArrow.png<br />
<img src="ProgressBarIsolator.png"\> ProgressBarIsolator.png<br />
<img src="search_bg.png"\> search_bg.png<br />
<img src="small_border.png"\> small_border.png<br />
<img src="SmallDarkGradient.png"\> SmallDarkGradient.png<br />
<img src="stars.png"\> stars.png<br />
<img src="tab_isolator_light.png"\> tab_isolator_light.png<br />
<img src="tab_isolator.png"\> tab_isolator.png<br />
<img src="table_large_hover.png"\> table_large_hover.png<br />
<img src="table_medium_hover_bottom.png"\> table_medium_hover_bottom.png<br />
<img src="table_medium_hover.png"\> table_medium_hover.png<br />
<img src="table_small_hover_bg.png"\> table_small_hover_bg.png<br />
<img src="tabs_active_bg.png"\> tabs_active_bg.png<br />
<img src="tabs_active_door.png"\> tabs_active_door.png<br />
<img src="tabs_door_bg.png"\> tabs_door_bg.png<br />
<img src="thead_isolator.png"\> thead_isolator.png<br />
<img src="thead_sortdown_bg.png"\> thead_sortdown_bg.png<br />
<img src="thead_sortdown_bg_rtl.png"\> thead_sortdown_bg_rtl.png<br />
<img src="thead_sortup_bg.png"\> thead_sortup_bg.png<br />
<img src="thead_sortup_bg_rtl.png"\> thead_sortup_bg_rtl.png<br />
<img src="toggle_arrow.png"\> toggle_arrow.png<br />
<img src="toolbar_sprite.png"\> toolbar_sprite.png<br />
<img src="triangle_bg.png"\> triangle_bg.png<br />
<img src="widget_bg_100.png"\> widget_bg_100.png<br />
<img src="widget_close.png"\> widget_close.png<br />
<img src="widget_settings.png"\> widget_settings.png<br />
<img src="zoom_active1.png"\> zoom_active1.png<br />
<img src="zoom_active2.png"\> zoom_active2.png<br />
<img src="zoom_sprite.png"\> zoom_sprite.png<br />
</body>
</html>
A helpful tool is Gimp to colorize the png files to match your desired color scheme.
OTRS 5.0.x (private/testing/public) on Linux with MySQL database. Also on github.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask

crythias
Moderator
Posts: 10109
Joined: 04 May 2010, 18:38
OTRS Version?: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Don't like orange?

Post by crythias » 21 Jul 2012, 16:07

A video on the images in defaults: http://screencast.com/t/KBKh2j4cvB

(Why a video?)
How would you do the same thing?
OTRS 5.0.x (private/testing/public) on Linux with MySQL database. Also on github.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask

crythias
Moderator
Posts: 10109
Joined: 04 May 2010, 18:38
OTRS Version?: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Don't like orange?

Post by crythias » 04 Sep 2012, 03:24

"This is all well and good, but how do I keep *my* css skin uptodate when there are bug fixes applied in updates?"

I'm glad you asked.

You can use the default theme, and put a folder under the default theme. ... maybe call it "custom" and only put css *changes* in that theme.

example: mkdir otrs/var/httpd/htdocs/skins/Agent/default/css/custom/

now we'll make a custom/Core.Agent.Admin.css that adjusts the color #F92 and #F72
(incidentally, this changes the colors the headings of the entries in the "Admin" tab.)

Code: Select all

.Admin .Size1of2 h4 {
color: #00F;
}

.Admin .Size1of2:hover h4 {
color: #fff;
background-color: #073;
}
Now, the only thing you'll need to remember is to include it, for instance, in your HTML/Standard/HTMLHead.dtl before the <title>

Code: Select all

    <link rel="stylesheet" type="text/css" href="$Config{"Frontend::WebPath"}skins/Agent/default/css/custom/Core.Agent.Admin.css" />
You can include all the changes in one file, or multiple link rel="stylesheet" for each entry you want to change.

The key thing to remember is that what we're doing here survives updates in principle. Oh, there's probably a name tweak here or there that will render a change obsolete, but if, for instance, you're only interested in a few cosmetic changes (color?) but want to allow the source to update for bug and aesthetic changes, this is a way that allows you to make those changes, survive updates, and reduce headaches on upgrade.
OTRS 5.0.x (private/testing/public) on Linux with MySQL database. Also on github.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask

Post Reply