How to add a color overlay to a background image?

0

#Header_wrapper {
background-image: url(https://yourwebiste.com/image.jpg);
position: relative;
}

#Header_wrapper:before {
content: “”;
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: rgba(0,0,0,.5);
}

Fancy Checkmark Icons

0

ul li{
list-style-type:none;
padding: 0 0 0 45px;
position:relative;
}
ul li:before{
content:”\00a0″;
display: block;
border: solid 9px #000;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
height: 0;
width: 0;
position: absolute;
left: 7px;
top: 40%; /*14px*/
margin-top: -8px;
}
ul li:after{
content:”\00a0″;
display:block;
width: 3px;
height: 6px;
border: solid #fff;
border-width: 0 2px 2px 0;
position:absolute;
left: 14px;
top: 40%; /*14px*/
margin-top: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

Contact Form 7 drop down required field customize

0

function custom_wpcf7_form_elements($html) {
function cf7_replace_include_blank($name, $text, &$html) {
$matches = false;
preg_match(‘/<select name=”‘ . $name . ‘”[^>]*>(.*)<\/select>/iU’, $html, $matches);
if ($matches) {
$select = str_replace(‘<option value=””>—</option>’, ‘<option value=””>’ . $text . ‘</option>’, $matches[0]);
$html = preg_replace(‘/<select name=”‘ . $name . ‘”[^>]*>(.*)<\/select>/iU’, $select, $html);
}
}
cf7_replace_include_blank(‘menu-780’, ‘How many sets would you like?’, $html);
cf7_replace_include_blank(‘menu-781’, ‘Which of the awesome sets would you like?’, $html);
cf7_replace_include_blank(‘menu-782’, ‘How many days would you like to rent some awesome clubs?’, $html);
return $html;
}
add_filter(‘wpcf7_form_elements’, ‘custom_wpcf7_form_elements’);

Contact form 7 date picker fix

0

Contact Form 7 Date Picker problem

Add the below code to the theme function.php file:

add_filter( ‘wpcf7_support_html5_fallback’, ‘__return_true’ );

Ask facebook to re-scrape old page title

0

open-graph-object-debugger

Vertically align an image inside div

0

#divid {position:relative}
#divid img {position:absolute; top:0; bottom:0; margin:auto; height:122px}

images

Mobile-friendly responsive design with an embedded iframe video

0

<div class=”embed-content”><iframe id=”player” src=”http://www.youtube.com/embed/……” height=”240″ width=”320″ allowfullscreen=”” frameborder=”0″></iframe></div>

.embed-content {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;}

.embed-content iframe,
.embed-content object,
.embed-content embed {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }

Advanced CSS attributes

0

div[id^=”attachment_”] {display:none !important;}

http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

How to automatically use resized images instead of originals

0

Simply paste the following code on your functions.php file and save it. No other action is needed!

function replace_uploaded_image($image_data) {
// if there is no large image : return
if (!isset($image_data[‘sizes’][‘large’])) return $image_data;

// paths to the uploaded image and the large image
$upload_dir = wp_upload_dir();
$uploaded_image_location = $upload_dir[‘basedir’] . ‘/’ .$image_data[‘file’];
$large_image_location = $upload_dir[‘path’] . ‘/’.$image_data[‘sizes’][‘large’][‘file’];

// delete the uploaded image
unlink($uploaded_image_location);

// rename the large image
rename($large_image_location,$uploaded_image_location);

// update image metadata and return them
$image_data[‘width’] = $image_data[‘sizes’][‘large’][‘width’];
$image_data[‘height’] = $image_data[‘sizes’][‘large’][‘height’];
unset($image_data[‘sizes’][‘large’]);

return $image_data;
}
add_filter(‘wp_generate_attachment_metadata’,’replace_uploaded_image’);
Ref link: http://www.wprecipes.com/how-to-automatically-use-resized-image-instead-of-originals

Display published and future post

0

$args = array(
‘post_status’ => ‘publish,future’,
);

Go to Top

Page optimized by WP Minify WordPress Plugin