/ Development  

Transform your cluttered UI instantly with these simple CSS hacks

Hi there AppWorks fans,

Welcome to a new installment of AppWorks tips.

This post is one week too early online (I know!), but I have my reasons (administration wise!)…You’re the lucky one benefitting from it! 🤗
…
And before I forget…
Have a great “Old Year’s Eve”, or is it “New Year’s Eve”, or “Old Year’s Day”! 🙃
We (in Dutch), just say “Fijne oude-jaars-avond”!

We all know how hard it is with OpenText AppWorks to create a solid UI with the principles of “What You See; Is What You Get” #WYSIWYG. Each project struggles with it and this post is not a magic antidote to solve it all. This post will show how a UI can look like with some simple CSS changes which make the UI more solid and consistent. I know it’s a basic UI with less complex stuff (where yours is much more complex), but still, it’s interesting to see what minor changes can have a substantial impact on the User eXperience in runtime.

Let get right into it…

First follow this post to have a head start on a smart CSS implementation!

Now have a look at this UI…It’s just an out-of-the-box implementation with basic styling on labels (from a form perspective).

css_001

This is where I see UI improvements:

css_002

…

  • Gray/black labels…Why?
  • Asterisk icon for required field in front…I don’t know who invented this?
  • Rounded buttons…Do it minimalistic these days!
  • The enlargement icon…Who ever used it? Comment me!
  • White space in the lifecycle panel
  • Inconsistent header colors
  • Bread-crumb text/icon colors
  • A custom font-type

Have a look at this:

css_003

Doesn’t this look cleaner?…with just small CSS selector updates:

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
/*Button radius*/
button.au-target.btn {
	border-radius: 7px;
}

/*Button colors*/
body action-bar-tmp.panel bs-button button:hover {
	background-color: #3F72AF !important;
}

body action-bar-tmp.panel bs-button button {
	background-color: #112D4E !important;
}

/*Labels all black*/
label.ot-label,
span.ot-label {
	color: black;
}

/*Hide expand buttons*/
bs-image-button.panel-maximize.expandPanel.expand-panel.au-target {
	display: none;
}

/*Required asterisk behind text*/
span.input-required {
	order: 1;
	margin-left: -13px;
}

/*Overall font style*/
body,
body.desktop,
span.ot-label.ot-header-label.au-target,
body.mobile,
body.tablet,
body .custom-select,
body input,
body textarea {
	font-family: verdana !important;
}

/*Headerbar background*/
body .navbar-inner,
body .layout-drawer,
body .layout-drawer-item:active,
body .layout-drawer-item:hover {
	background: #112D4E !important;
}

/*Breadcrumb background*/
.au-target.button-strip-container.breadcrumbContainer,
body .layout-drawer-section-header,
body .layout-drawer-section-header:hover {
	background: #3F72AF !important;
}

/*Breadcrumb separator*/
.singleBreadcrumb .overflow-menu-breadcrumbs .hor-over-menu .item-arrow {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4L10.4 7.9L7 11.8' stroke='%23F9F7F7' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center;
	width: 10px;
}

/*Equal font-size across components*/
span.ot-label.ot-header-label.au-target,
input[class="au-target ot-control"],
.rg-table,
.ot-control,
.ot-control:disabled,
.ot-option-radio-container-single .ot-label:disabled,
label.ot-label.ot-radio-label.au-target,
.au-target.ot-drop-box-item-text {
	font-size: 12px;
}

/*Container headers*/
.results-grid .header-menu,
action-bar-tmp.results .hor-over-menu .button-strip {
	background-color: white !important;
}
.overflow-menu-breadcrumbs .hor-over-menu .button-strip button {
	color: white;
}

/*lifecycle progression panel*/
.life-cycle-progress,
.life-cycle-progress div {
	zoom: 95%;
}
.lbb-overflow-menu .button-strip {
	margin-left: -150px;
}

/*Duration icon*/
.au-target.duration-icon {
	background-color: white;
}

/*Allign currency left*/
input[aria-label *='Currency'] {
	text-align: left !important;
}

/*Dropdown icon*/
.ot-drop-arrow.au-target {
	background-color: #1a2d4e !important;
}
.ot-drop-arrow {
	background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9571 7.48283C14.3476 7.87336 14.3476 8.50652 13.9571 8.89705L10.0091 12.845L6.14525 8.98121C5.75473 8.59068 5.75473 7.95752 6.14525 7.56699C6.53578 7.17647 7.16894 7.17647 7.55947 7.56699L10.0091 10.0166L12.5429 7.48283C12.9334 7.09231 13.5666 7.09231 13.9571 7.48283Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A") !important;
	width: 22px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	margin-right: 0px;
}

/*Task icons...Fill the blanks with your Base64 image!*/
.task-created {
	background-image: url('data:image/png;base64,...');
}
.task-completed {
	background-image: url('data:image/png;base64,...');
}
.task-obsoleted {
	background-image: url('data:image/png;base64,...');
}
.task-assigned {
	background-image: url('data:image/png;base64,...');
}
.task-suspended {
	background-image: url('data:image/png;base64,...');
}

My resources:

Nicely “DONE”, you see what a little CSS powder does with the UI. It makes it less busy and steady in usage. Give it a shot yourself; It’s no rocket science…Just try out the things, see the outcome, and implement it into the solution. Share your UI in the comments below, and we’ll have a collaboration around it in the chat. CU in 2025…cheers! 🍺

Don’t forget to subscribe to get updates on the activities happening on this site. Have you noticed the quiz where you find out if you are also “The AppWorks guy”?