Skip to content

Instantly share code, notes, and snippets.

@SiGaCode
Last active March 8, 2017 14:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save SiGaCode/01ae780463681c7ed6b5634d2e5ff7ae to your computer and use it in GitHub Desktop.
Save SiGaCode/01ae780463681c7ed6b5634d2e5ff7ae to your computer and use it in GitHub Desktop.
AMARE Dynamik Skin Code Snippets: Widget content samples, CSS samples, video shortcode....
a.button{
background: #C31B42;
color: #FFFFFF !important;
display: inline-block;
font-family: inherit;
font-size: inherit;
margin: 10px 0;
padding: 10px 20px;
border:1px solid #911D00;
border-radius: 5px;
text-decoration:none;
box-shadow: inset 0 0 3px 0 rgba(255, 255, 255, 0.8);
}
a.button:hover {
background: #FA3953!important;
color: #ffffff!important;
}
<p style="margin-bottom:15px;"><i class="fa fa-map-marker" aria-hidden="true" style="width:28px; color:#C31B42; display:inline-block;"></i>123 Somewhere in Austria</p>
<p style="margin-bottom:15px;"><i class="fa fa-phone" aria-hidden="true" style="width:28px; color:#C31B42; display:inline-block;"></i>(123) 456 789</p>
<p style="margin-bottom:15px;"><i class="fa fa-clock-o" aria-hidden="true" style="width:28px; color:#C31B42; display:inline-block;"></i>Working Hours: 9.00 AM - 6.00 PM</p>
<p style="margin-bottom:15px;"><i class="fa fa-envelope" aria-hidden="true" style="width:28px; color:#C31B42; display:inline-block;"></i><a>hellothere@xxx.com</a></p>
/* Quick way to have one section look like a full-width-row with different bg color - EZ Middle sample */
.home .site-inner {
overflow:visible;
}
#ez-home-middle-container, #ez-home-middle-container .ez-home-wrap {
clear: both;
display: block;
}
#ez-home-middle-container {
margin: 50px -10000px;
padding: 50px 10000px;
background: #E8E8E8;
}
jQuery(function( $ ){
// Does NOT account for secondary nav, goes best with only header right nav
// Function to automatically set the height of #ez-feature-top-container-wrap to viewport height.
function after_header_height() {
// Account for WordPress admin bar height, if present
var barHeight = $('#wpadminbar').outerHeight();
// Viewport height
var windowHeight = window.innerHeight;
// Viewport height minus WordPress admin bar height is new height of Feature Top
var newHeight = windowHeight - barHeight;
$( '#ez-feature-top-container-wrap' ).css({'height': newHeight + 'px'});
}
// http://stackoverflow.com/a/1974797/778809
// Bind to the resize event of the window object
$(window).on("resize", function () {
after_header_height();
// Invoke the resize event immediately
}).resize();
});
<h4 style="font-size:30px; font-size:3rem; text-align:center;">
<i class="fa fa-file-image-o fa-3x" aria-hidden="true" style="display:block; margin:0 0 20px 0;"></i>
Image</h4>
<p style="font-size:20px; font-size:2rem;text-align:center;">A picture is worth a thousand words and that´s all you need?<br>
<a class="button" href="http://sg-demo.com/amare-basic/feature-top/image-hero/" title="Image hero demo" style="font-size: 20px; margin:25px 0 0 0;">Image demo</a></p>
[vidbg container="#ez-feature-top-container-wrap" mp4="...full url to your mp4 video...." webm="...full url to your webm video...." poster="...full url to your replacement picture...." loop="true" overlay="false" muted="false"]
Just a static image? Or a pattern? A slider maybe? <br>
Or even a background video? It´s your choice!
<a class="button" href="http://sg-demo.com/amare-basic/feature-top/" title="Whatever" style="font-size: 20px; margin:25px 0 0 0;">Read more</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment