“Compact Fit” CSS for WPMU site list

Having to much padding on design elements, especially databases, can drive me mad. Padding and space is supposed to make things “beautiful” but more most people it just makes consuming large lists of data slower. It’s annoying. Thankfully in apps like Gmail they created a setting for users to choose “Display Density” (see image at the end with Gmail’s options) but with the world’s leading publishing platform, WordPress, you still have to customize this stuff with your own CSS. And this is just what I did to alter the display of site’s listed in a multisite setup. I’ll include the CSS after the images.

Before:

After:


Much better!

CSS:

I just dropped this CSS in a plugin in the “mu-plugins” folder.

		
		/** This will truncate them if they are too long to keep everything even **/
		.widefat td.blogname strong {
		  font-weight: 500 !important;
		  width: 340px !important;
		  display: block !important;	
		  white-space: nowrap;
		  overflow: hidden !important;
		  text-overflow: ellipsis;
		}
		
		
		/** Height Mods ***/
		th.check-column { padding-top: 4px !important; }
		
		
		.widefat td, .widefat td ol, .widefat td p, .widefat td ul {
			padding-top: 4px !important;
			padding-bottom: 4px !important;
		}
		
		.row-actions {
			xline-height: 1.5em;
			position: absolute; 
			left: -1000px;
			bottom: 0px;
		}
		.widefat td, .widefat th {
			padding: 14px 10px 2px 10px;
		}

And here are Gmail’s settings which you can find by clicking on the settings widget: