Universal Block Widget CSS and Template files

a_universal_blocks.md

Blocks - Universal Edition

Here's the CSS and four templates for my new universal blocks code.

It includes one CSS file that works with four different templates:

• fancy: Image is posted above.
• fancy_extra: Looks like this. Same as fancy but with the social icons and stuff.
• simple: Looks like this in a sidebar. Has two columns when used on an actual page.
• simple_extra: Same as **simple **but with the social icons and stuff.

You can see it in action on https://runementors.com/ - you can see fancy on the homepage and simple on the forum sidebar.

The template uses thumbnails to reduce image file sizes. You need to set the correct sizes in the admin CP. If you have issues and want to disable these, read here.

Enjoy!

Todo List:

• Make thumbnails optional. Too many issues.
• Add a version of the fancy template without the top 3 items (flex)
• Improve the look of the extra versions and minimise the CSS used.

blocks.css

/* Custom "blocks" news widget - universal edition */
.rm_GridItem {
	margin-bottom: 15px;
}

	.rm_GridV .rm_GridItem:last-child {
		margin-bottom: 0px;
	}

.rm_GridItem > a {
	display: block;
	height: 200px;
	position: relative;
	color: #fff;
	background-color: #333;
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	overflow: hidden;
}
	/* "main" grid item for the fancy layout */
	.rm_GridItemPrimary > a {
		min-height:415px !important; 
	}

	/* Collapse on mobile */
	@media screen and (max-width: 767px) {
		.rm_GridItemPrimary > a {
			min-height:0 !important; 
		}
	}

.rm_GridItem > a:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 53px;
	
	/* Tip: Edit this line to change the color of the title box! */
	background: rgba(0,0,0,0.8);
}

.rm_itemTitle, .rm_itemSub {
	color: #fff;
	position: absolute;
	left: 7px;
	right: 7px;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
}

	.rm_itemTitle  {
		bottom: 23px;
		font-size: 20px;
		line-height: 24px;
		font-weight: 400;
		display: inline-block;
		margin: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis; 
	}

	.rm_itemSub {
		bottom: 7px;
		font-size: 12px;
	}

		/* This handles text truncating for both vertical and horizontal rmGrids
		Horizontal needs less text to allow for post date, eg */
		.rm_itemSub li:first-child {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.rm_GridH .rm_itemSub li:first-child {
			width: 60%;
		}

		.rm_Grid3 .rm_itemSub li:first-child {
			width: 90%;
		}

		.rm_GridV .rm_itemSub li:first-child {
			width: 80%;
		}

/* REMOVE EVERYTHING BELOW HERE IF YOU DON'T NEED THE _EXTRA TEMPLATES */
/* Extra Templates - Corner Info Text */
.postinfo_portal {
	position: relative;
	bottom: -5px;
	left: 5px;
	text-align: center;
	font-size: 12px;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
}

.datestamp_portal {
	position: relative;
	bottom: -5px;
	left: -5px;
	font-size: 12px;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
}

/* Extra Templates - Media Indicator */
.media_indicator {
	position: relative;
	top: 25px;
	left: 37%;
	opacity: 0.7;
}

.media_indicator:hover {
}

.media_indicator:nth-child(2n) {
	animation-name: keyframes1;
	animation-iteration-count: infinite;
	transform-origin: 50% 10%;
}

.media_indicator:nth-child(2n-1) {
	animation-name: keyframes2;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	transform-origin: 30% 5%;
}

.media_indicator_top {
	position: relative;
	top: 25px;
	left: 40%;
	opacity: 0.7;
}

.media_indicator_top:hover {
}
 
.media_indicator_top:nth-child(2n) {
	animation-name: keyframes1;
	animation-iteration-count: infinite;
	transform-origin: 50% 10%;
}

.media_indicator_top:nth-child(2n-1) {
	animation-name: keyframes2;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	transform-origin: 30% 5%;
}

@keyframes keyframes1 {
	0% {
		transform: rotate(-1deg);
		animation-timing-function: ease-in;
	}
	50% {
		transform: rotate(1.5deg);
		animation-timing-function: ease-out;
	}
}
 
@keyframes keyframes2 {
	0% {
		transform: rotate(1deg);
		animation-timing-function: ease-in;
	}
	50% {
		transform: rotate(-1.5deg);
		animation-timing-function: ease-out;
	}
}

/* Extra Templates - Share Links */
.share_links_portal {
	position: relative;
	bottom: 80px;
	right: 5px;
	font-size: 12px;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
	margin-bottom:-12px;
}

.share_links_portal_top {
	position: relative;
	bottom: 80px;
	right: 5px;
	font-size: 12px;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
	margin-bottom:-80px;
}

.cShareLink_google_portal {
	color: #fff;
	background: transparent;
}

.cShareLink_twitter_portal {
	color: #fff;
	background: transparent;
}

.cShareLink_facebook_portal {
	color: #fff;
	background: transparent;
}

.fa_portal {
	display: inline-block;
	font: normal normal normal 15px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}

fancy.html

<!-- FANCY RMGRID - HAS COOL LAYOUT, NOT FOR SIDEBAR -->

<!-- Note: All file counts start at zero. After the else statement on the second div container, everything within will contain the class for that row using the ipsGrid_span. I have 4 of the mainly used spans already built down below. If you need more than these 4 spans, just add in another row item (ie $rowstyle5, $rowstyle6, etc) and toss in another elseif statement before the else using this same method as below. -->
<!-- Fill in the id # of the file you wish to start the second row -->
{{$defaultsize = "ipsGrid_span3";}}
<!-- Do Not alter this variable as it will break the display of the first row -->
{{$startrow = 3;}}
{{$endrow = $startrow-1;}}
<!-- Fill in the id #s of the files you wish to start the following rows -->
{{$rowstyle1 = array();}} <!-- ipsGrid_span3 -->
{{$rowstyle2 = array();}} <!-- ipsGrid_span4 -->
{{$rowstyle3 = array();}} <!-- ipsGrid_span6 -->
{{$rowstyle4 = array();}} <!-- ipsGrid_span12 -->
<!-- Fill in the id #s of the files you wish to end the grid on and start with a new one -->
{{$endstyles = array();}}
{{if count( $records )}}
<div class='ipsGrid ipsGrid_collapsePhone rm_Grid3'> 
{{foreach $records as $id => $record}}
    <div class='rm_GridItem ipsSpacer_bottom {{if ($id == 0)}}rm_GridItemPrimary ipsGrid_span8{{elseif ($id == 1 | $id == 2)}}ipsGrid_span12{{else}}{{if ($id < $startrow )}}ipsGrid_span4{{elseif (in_array($id,$rowstyle1))}} ipsGrid_span3{{elseif (in_array($id,$rowstyle2))}} ipsGrid_span4{{elseif (in_array($id,$rowstyle3))}} ipsGrid_span6{{elseif (in_array($id,$rowstyle4))}} ipsGrid_span12{{else}}{$defaultsize}{{endif}}{{endif}}'>           
		<a href="{$record->url()}" style="background-image: url({{if ($id == 0)}}{file='$record->record_image' extension='cms_Records'}{{else}}{file='$record->record_image_thumb' extension='cms_Records'}{{endif}}); width:100%;">
			<h2 class="rm_itemTitle" title="{lang="read_more_about" sprintf="$record->_title"}">{wordbreak="$record->_title"}</h2>
          	    <ul class="ipsList_inline ipsType_left rm_itemSub">
                  <li>{$record->customFieldDisplayByKey('subtitle', 'processed')}</li>
			</ul>
		</a>        
  	{{if ($id == 0)}}
  	</div>
  	<div class='ipsGrid_span4'>

    {{elseif ($id == 2)}}
		</div>
	</div>      
    {{else}}
    </div>
  	{{endif}}
{{if ($id == $endrow OR in_array($id, $endstyles))}}
</div>
<div class='ipsGrid ipsGrid_collapsePhone rm_Grid3'> 
{{endif}}
{{endforeach}}
</div>
{{endif}}

fancy_extra.html

<!-- FANCY RMGRID - HAS COOL LAYOUT, NOT FOR SIDEBAR (THIS ONE HAS SOCIAL AND DATES AND STUFF)  -->

<!-- Note: All file counts start at zero. After the else statement on the second div container, everything within will contain the class for that row using the ipsGrid_span. I have 4 of the mainly used spans already built down below. If you need more than these 4 spans, just add in another row item (ie $rowstyle5, $rowstyle6, etc) and toss in another elseif statement before the else using this same method as below. -->
<!-- Fill in the id # of the file you wish to start the second row -->
{{$defaultsize = "ipsGrid_span3";}}
<!-- Do Not alter this variable as it will break the display of the first row -->
{{$startrow = 3;}}
{{$endrow = $startrow-1;}}
<!-- Fill in the id #s of the files you wish to start the following rows -->
{{$rowstyle1 = array();}} <!-- ipsGrid_span3 -->
{{$rowstyle2 = array();}} <!-- ipsGrid_span4 -->
{{$rowstyle3 = array();}} <!-- ipsGrid_span6 -->
{{$rowstyle4 = array();}} <!-- ipsGrid_span12 -->
<!-- Fill in the id #s of the files you wish to end the grid on and start with a new one -->
{{$endstyles = array();}}
{{if count( $records )}}
<div class='ipsGrid ipsGrid_collapsePhone rm_Grid3'> 
{{foreach $records as $id => $record}}
    <div class='rm_GridItem ipsSpacer_bottom {{if ($id == 0)}}rm_GridItemPrimary ipsGrid_span8{{elseif ($id == 1 | $id == 2)}}ipsGrid_span12{{else}}{{if ($id < $startrow )}}ipsGrid_span4{{elseif (in_array($id,$rowstyle1))}} ipsGrid_span3{{elseif (in_array($id,$rowstyle2))}} ipsGrid_span4{{elseif (in_array($id,$rowstyle3))}} ipsGrid_span6{{elseif (in_array($id,$rowstyle4))}} ipsGrid_span12{{else}}{$defaultsize}{{endif}}{{endif}}'>           
		<a href="{$record->url()}" style="background-image: url({{if ($id == 0)}}{file='$record->record_image' extension='cms_Records'}{{else}}{file='$record->record_image_thumb' extension='cms_Records'}{{endif}}); width:100%;">
			<h2 class="rm_itemTitle" title="{lang="read_more_about" sprintf="$record->_title"}">{wordbreak="$record->_title"}</h2>
          	    <ul class="ipsList_inline ipsType_left rm_itemSub">
                  <li>{$record->customFieldDisplayByKey('subtitle', 'processed')}</li>
			</ul>
                         <ul class="ipsList_inline ipsType_left">
                {{if $record instanceof \IPS\Content\Reputation and settings.reputation_enabled}}
                    <li class="postinfo_portal"><i class="fa fa-user"></i> {$record->author()->name} <span title="{$record->reputation()} {lang="rep_system_like"}"><i class="fa fa-heart"></i> {$record->reputation()}</span>  <span title="{$record->record_comments} {lang="category_comments_and_reviews"}"><i class='fa fa-comment'></i> {$record->record_comments}</span></li> 
                <li class="datestamp_portal ipsPos_right"><i class="fa fa-clock-o"></i> {datetime="$record->record_publish_date"}</li>
                {{endif}}
                </ul>
                <!-- Start Media Indicator --> 
                <ul class="ipsList_inline ipsType_left">
                    <li class="media_indicator_top"> 
                    {{if ($record->customFieldDisplayByKey('video', 'raw')) }}
                        <img class="media_indicator_top" style="animation-delay: -0.55s; animation-duration: .25s" height="52" src="http://salfordsoapbox.co.uk/images/youtube.png" width="52" title="Click To Watch">
                    {{elseif ($record->customFieldDisplayByKey('soundcloud', 'raw')) }}
                        <img class="media_indicator_top" style="animation-delay: -0.55s; animation-duration: .25s" height="52" src="http://salfordsoapbox.co.uk/images/soundcloud.png" width="52" title="Click To Listen">
                    {{endif}}
                    </li>
                </ul>
            </a>
            <!-- Start Shared Links -->         
            <ul class="ipsPos_right share_links_portal_top ipsList_inline" data-controller="core.front.core.sharelink">
                <li>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={$record->url()}" class="cShareLink cShareLink_facebook_portal" target="_blank" data-role="shareLink" title='{lang="facebook_text"}'>    <i class="fa_portal fa-facebook"></i></a>
                    <a href="http://twitter.com/share?text={$record->_title}&url={$record->url()}" class="cShareLink cShareLink_twitter_portal" target="_blank" data-role="shareLink" title='{lang="twitter_text"}'> <i class="fa_portal fa-twitter"></i></a>
                    <a href="https://plus.google.com/share?url={$record->url()}" class="cShareLink cShareLink_google_portal" target="_blank" data-role="shareLink" title='{lang="googleplus_text"}'><i class="fa_portal fa-google-plus"></i></a>
                </li>
            </ul>           
            <!-- End Shared Links -->
		</a>        
  	{{if ($id == 0)}}
  	</div>
  	<div class='ipsGrid_span4'>

    {{elseif ($id == 2)}}
		</div>
	</div>      
    {{else}}
    </div>
  	{{endif}}
{{if ($id == $endrow OR in_array($id, $endstyles))}}
</div>
<div class='ipsGrid ipsGrid_collapsePhone rm_Grid3'> 
{{endif}}
{{endforeach}}
</div>
{{endif}}

simple.html

<!-- SIMPLE RMGRID - WORKS IN SIDEBAR AND MAIN PAGE -->
{{if !empty( $records ) }}
	{{if $orientation == 'horizontal'}}
	<div class='ipsGrid ipsGrid_collapsePhone rm_GridH'>
        {{foreach $records as $record}}
  			<div class='rm_GridItem ipsGrid_span6'>
              <a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}" style="background-image: url({file='$record->record_image_thumb' extension='cms_Records'})">
                <h2 class="rm_itemTitle">{wordbreak="$record->_title"}</h2>
                <ul class="ipsList_inline ipsType_left rm_itemSub">
                	<li>{$record->customFieldDisplayByKey('subtitle', 'processed')}</li>
                  	<li class="ipsPos_right"><i class="fa fa-clock-o"></i> {datetime="$record->record_publish_date"}</li>
                </ul>
              </a>
      		</div>
        {{endforeach}}
    </div>
	{{else}}
	<div class='rm_GridV'>
        {{foreach $records as $record}}
  			<div class='rm_GridItem'>
              <a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}" style="background-image: url({file='$record->record_image_thumb' extension='cms_Records'})">
                <h2 class="rm_itemTitle">{wordbreak="$record->_title"}</h2>
                <ul class="ipsList_inline ipsType_left rm_itemSub">
                	<li>{$record->customFieldDisplayByKey('subtitle', 'processed')}</li>
                </ul>
              </a>
      		</div>
        {{endforeach}}
    </div>
    {{endif}} 
{{endif}}

simple_extra.html

<!-- SIMPLE RMGRID - WORKS IN SIDEBAR AND MAIN PAGE (THIS ONE HAS SOCIAL AND DATES AND STUFF) -->
{{if !empty( $records ) }}
	{{if $orientation == 'horizontal'}}
	<div class='ipsGrid ipsGrid_collapsePhone rm_GridH'>
        {{foreach $records as $record}}
  			<div class='rm_GridItem ipsGrid_span6'>
              <a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}" style="background-image: url({file='$record->record_image_thumb' extension='cms_Records'})">
                <h2 class="rm_itemTitle">{wordbreak="$record->_title"}</h2>
                <ul class="ipsList_inline ipsType_left rm_itemSub">
                	<li>{$record->customFieldDisplayByKey('subtitle', 'processed')}</li>
                  	<li class="ipsPos_right"><i class="fa fa-clock-o"></i> {datetime="$record->record_publish_date"}</li>
                </ul>
                                         <ul class="ipsList_inline ipsType_left">
                {{if $record instanceof \IPS\Content\Reputation and settings.reputation_enabled}}
                    <li class="postinfo_portal"><i class="fa fa-user"></i> {$record->author()->name} <span title="{$record->reputation()} {lang="rep_system_like"}"><i class="fa fa-heart"></i> {$record->reputation()}</span>  <span title="{$record->record_comments} {lang="category_comments_and_reviews"}"><i class='fa fa-comment'></i> {$record->record_comments}</span></li> 
                
                {{endif}}
                </ul>
                <!-- Start Media Indicator --> 
                <ul class="ipsList_inline ipsType_left">
                    <li class="media_indicator_top"> 
                    {{if ($record->customFieldDisplayByKey('video', 'raw')) }}
                        <img class="media_indicator_top" style="animation-delay: -0.55s; animation-duration: .25s" height="52" src="http://salfordsoapbox.co.uk/images/youtube.png" width="52" title="Click To Watch">
                    {{elseif ($record->customFieldDisplayByKey('soundcloud', 'raw')) }}
                        <img class="media_indicator_top" style="animation-delay: -0.55s; animation-duration: .25s" height="52" src="http://salfordsoapbox.co.uk/images/soundcloud.png" width="52" title="Click To Listen">
                    {{endif}}
                    </li>
                </ul>
            </a>
            <!-- Start Shared Links -->         
            <ul class="ipsPos_right share_links_portal_top ipsList_inline" data-controller="core.front.core.sharelink">
                <li>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={$record->url()}" class="cShareLink cShareLink_facebook_portal" target="_blank" data-role="shareLink" title='{lang="facebook_text"}'>    <i class="fa_portal fa-facebook"></i></a>
                    <a href="http://twitter.com/share?text={$record->_title}&url={$record->url()}" class="cShareLink cShareLink_twitter_portal" target="_blank" data-role="shareLink" title='{lang="twitter_text"}'> <i class="fa_portal fa-twitter"></i></a>
                    <a href="https://plus.google.com/share?url={$record->url()}" class="cShareLink cShareLink_google_portal" target="_blank" data-role="shareLink" title='{lang="googleplus_text"}'><i class="fa_portal fa-google-plus"></i></a>
                </li>
            </ul>           
            <!-- End Shared Links -->
              </a>
      		</div>
        {{endforeach}}
    </div>
	{{else}}
	<div class='rm_GridV'>
        {{foreach $records as $record}}
  			<div class='rm_GridItem'>
              <a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}" style="background-image: url({file='$record->record_image_thumb' extension='cms_Records'})">
                <h2 class="rm_itemTitle">{wordbreak="$record->_title"}</h2>
                <ul class="ipsList_inline ipsType_left rm_itemSub">
                	<li>{$record->customFieldDisplayByKey('subtitle', 'processed')}</li>
                </ul>
                                                        <ul class="ipsList_inline ipsType_left">
                {{if $record instanceof \IPS\Content\Reputation and settings.reputation_enabled}}
                    <li class="postinfo_portal"><i class="fa fa-user"></i> {$record->author()->name} <span title="{$record->reputation()} {lang="rep_system_like"}"><i class="fa fa-heart"></i> {$record->reputation()}</span>  <span title="{$record->record_comments} {lang="category_comments_and_reviews"}"><i class='fa fa-comment'></i> {$record->record_comments}</span></li> 
            		<li class="datestamp_portal ipsPos_right"><i class="fa fa-clock-o"></i> {datetime="$record->record_publish_date"}</li>
                {{endif}}
                </ul>
                <!-- Start Media Indicator --> 
                <ul class="ipsList_inline ipsType_left">
                    <li class="media_indicator_top"> 
                    {{if ($record->customFieldDisplayByKey('video', 'raw')) }}
                        <img class="media_indicator_top" style="animation-delay: -0.55s; animation-duration: .25s" height="52" src="http://salfordsoapbox.co.uk/images/youtube.png" width="52" title="Click To Watch">
                    {{elseif ($record->customFieldDisplayByKey('soundcloud', 'raw')) }}
                        <img class="media_indicator_top" style="animation-delay: -0.55s; animation-duration: .25s" height="52" src="http://salfordsoapbox.co.uk/images/soundcloud.png" width="52" title="Click To Listen">
                    {{endif}}
                    </li>
                </ul>
            </a>
            <!-- Start Shared Links -->         
            <ul class="ipsPos_right share_links_portal_top ipsList_inline" data-controller="core.front.core.sharelink">
                <li>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={$record->url()}" class="cShareLink cShareLink_facebook_portal" target="_blank" data-role="shareLink" title='{lang="facebook_text"}'>    <i class="fa_portal fa-facebook"></i></a>
                    <a href="http://twitter.com/share?text={$record->_title}&url={$record->url()}" class="cShareLink cShareLink_twitter_portal" target="_blank" data-role="shareLink" title='{lang="twitter_text"}'> <i class="fa_portal fa-twitter"></i></a>
                    <a href="https://plus.google.com/share?url={$record->url()}" class="cShareLink cShareLink_google_portal" target="_blank" data-role="shareLink" title='{lang="googleplus_text"}'><i class="fa_portal fa-google-plus"></i></a>
                </li>
            </ul>           
            <!-- End Shared Links -->
              </a>
      		</div>
        {{endforeach}}
    </div>
    {{endif}} 
{{endif}}