Xing Design Hacks – Lean Header and Clean Home Page

Improved User Experience for xing.com

Xing’s recent relaunch introduced a couple of new features and design updates. I definitely appreciate that Xing continues to develop and improve my main networking platform. I would like to share my design hacks to get an even better usability with less clutter and more space for the content.

Before: Xing Home Page

After: Xing Home Page with Design Hack

How to Apply the Design Hack?

How to apply the design hack in Firefox?

  1. Install Stylish for Firefox.
  2. Go to userstyles.org: xing.com - lean header and home page and follow the instructions.

How to apply the design hack in Chrome?

  1. Install Stylish for Chrome.
  2. Go to userstyles.org: xing.com - lean header and home page and follow the instructions.

How to apply the design hack in Safari and Opera?

The design hack can also be applied for Safari and Opera. There you have to create a local cascading style-sheet text file, and select it directly from Safari Preferences-Advanced-Style Sheet or Opera Preferences-Advanced-Content-Style Options. Here is my CSS:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("xing.com") {

/* http://www.mprove.de/script/10/xing/, 26-May-2011, v1.9 */

/* Removed Elements */
#myxing .user-pic, #myxing h4,
#welcome-box-container > a:first-child,
#welcome-box .smalltxt2nd,
#welcome-box h1,
li[data-activity-cat="7"] .activity-preview,
li[data-activity-cat="7"] .actions,
li.date:only-child,
#startpage-quickinvite, #stats-contacts, #content .col_one .teaser
  { display: none !important }

/* Header */
.logged-in { background-position: 0 -344px !important; } 
.logged-in.pagepeel { background-position: 0 -304px !important; } 
.logged-in #header { height: 60px !important; } 
.logged-in #main-logo {
  background-position: -108px 0px !important; 
  padding: 0px !important; 
  top: 10px !important;
  } 

#header .usearchform { top: 14px !important; left: 200px  !important; } 

#myxing {
  top: 25px; width: 255px !important;
  background: transparent !important;
  -webkit-box-shadow: transparent 0px 0px 0px !important;
  -moz-box-shadow: transparent 0px 0px 0px !important;
  }

/* Menu Labels */  
#nav-main a { text-transform: capitalize !important; }

#nav-main .selected a,
#nav-main strong a:hover,
#nav-main li.hover strong a,
#nav-main li:hover strong a { color:#006567 !important; }
#nav-main strong a { color:#ebebeb !important; } 

/* Welcome Box and Counter */
#welcome-box {padding: 0px 0px 15px 80px !important}
#welcome-box-container {padding: 0px !important}
#welcome-box h3 span {font-size: 42px !important}

/* News Feed */
.activity-item > .actor > img {
  width: 46px !important;
  height: auto !important;
  }

#news-feed .activity-item { min-height: 90px }
#news-feed li[data-activity-cat="7"] { height: 75px !important; min-height: 75px !important }

/* Info Text */
.meta-info,
.smalltxt2nd
  { font-size: 9px !important; }

/* Group Header */
#content #gr-header h1 { color: #dfdfdf !important; font-weight: bold !important; }

/* buttons: New Article, message actions */
button[value="write new article"],
.message-action,
#delete-button {
  position:absolute; left: 65%; z-index: 10;
  }
button[value="write new article"] {top: 296px;}
.message-action {top: 140px;}
#delete-button {top: 130px;}

/* End of Xing Design Hack */
}
If you are happy, then I will be happy about a donation of 1 Euro:

How to apply the design hack in Internet Explorer?

No way. Change your browser instead.

Feedback – please leave a message

Continue the discussion in the UXForum on Xing.