2.2

PrintShop Web Skinning Guide | 24
User information
The User Info block displays the name of the logged on user, an option that lets the user edit his or her
personal information and the Log off option. The Edit User Info is optional and depends on the users
role.
In the default the user User Info block is dark blue and placed just above the Menu bar
In the default skin the User Info bar is placed just above the Menu bar. Using styling parameters the
two seem to be surrounded by border. This is achieved by adding a border to the top, left and right of
the User Info bar and a border to the bottom, left and right of the Menu bar.
CSS Lists
The User Info bar is created using an HTML list. This allows you to easily change its orientation from
horizontal to vertical using CSS styling. Below the CSS code for the user info items in the Style.php file.
#userinfo ul{
padding-right: 5px;
float: right;
}
#userinfo li{
display: inline;
border: 1px;
margin: 0;
}
#userinfo li a{
text-decoration: none;
line-height: 2em;
padding: 5px 5px;
color: #FFFFFF;
}
#userinfo li a:hover{
background-color: <? generateSkinMainColorHighLight(0.8); ?>;
}
By removing the display: inline attribute of the <li> tag the orientation is changed from horizontal to
vertical.