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.

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?

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.

Znuny and ((OTRS)) Community Edition

Don't like orange?

Don't like orange?

Re: Don't like orange?

Re: Don't like orange?