MND Fan Sidebar is a pack of custom widgets for your WordPress powered fansite.

Current widgets available:

• Latest Projects
• Featured Albums
• Elite Affiliates
• Welcome Message

Check out more details, screenshots and prices at the plugin’s official page 🙂

Styling

Styling #01: Latest Projects Widget

Add this to your theme’s style.css file:

.mndfs-project-title,
.mndfs-project-role,
.mndfs-project-status {
	font-family: Inconsolata;
	padding-left: 15px;
	color: #fff;
}

.mndfs-project-role,
.mndfs-project-status {
	text-transform: lowercase;
}

.mndfs-project-title {
	margin-top: -75px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.mndfs-project-year {
	letter-spacing: 0;
}

.mndfs-project-role:before {
	font-style: normal;
	margin-right: 4px;
	content: 'amy adams as';
}

.mndfs-project-synopsis {
	margin-top: 15px;
}

.mndfs-project-links a {
	font-family: Inconsolata;
	text-transform: uppercase;
	color: #121212;
}

.mndfs-project-image img,
.mndfs-project-image img:hover {
	opacity: 1;
}

To use the font Inconsolata, like in the example screenshot, add this to your header.php file:

<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">

Styling #02: Latest Projects Widget

Add this to your theme’s style.css file:

.mndfs-project-image {
	float: left;
	padding-right: 10px;
}

.mndfs-project-image img {
	width: 75px;
	height: 75px;
	border-radius: 100%;
}

.mndfs-project-title {
	font-family: Playfair Display;
	display: table;
	margin-top: 5px;
	padding: 0 3px;
	color: #fff;
	background: #222;
}

.mndfs-project-role {
	margin-top: 3px;
	color: #cea525;
}

.mndfs-project-role:before {
	margin-right: 4px;
	content: 'Amy as';
}

.mndfs-project-status {
	text-decoration: none;
}

.mndfs-project-synopsis {
	clear: both;
	padding-left: 20px;
	color: #999;
	border-left: 1px solid #ccc;
}

.mndfs-project-links a {
	font-family: Playfair Display;
	color: #222;
}

To use the font Playfair Display, like in the example screenshot, add this to your header.php file:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">

Styling #03: Welcome Message Widget – with background image

Add this to your theme’s style.css file:

.mndfs-welcome-message {
	background-position: top center;
}

.mndfs-welcome-text {
	padding: 30px 25px!important;
	text-align: justify;
	color: #fff;
	background-color: rgba(0, 0, 0, .3);
}