• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home ยป CSS

CSS

Use SVG Icons – the correct way

.icon {
	display: inline-block;
	min-width: 5px;
	min-height: 5px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.icon.icon-print {
	background-image: url('../images/icons/print.svg');
    min-width: 20px;
    min-height: 20px;
}
<i class="icon icon-print"></i>

Filed Under: Free Tagged With: CSS, SVG

Hamburger menu for WordPress custom theme

View Demo

Filed Under: Free Tagged With: CSS, JavaScript, PHP

Shadow Divider with CSS

divider

Filed Under: Free Tagged With: CSS

How to change the color of Ninja Form placeholder

.nf-field-container .field-wrap .nf-element::placeholder {
	color: orange;
}

Filed Under: Free Tagged With: CSS

How to set different CSS on WPML languages

.your_selector:lang(de) {
	display: none !important;
}

Filed Under: Free Tagged With: CSS, WPML

CSS only for IE10+ – Internet Explorer

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}


Filed Under: Free Tagged With: CSS

Vertical centering with flexbox

.cover {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
}

Filed Under: Free Tagged With: CSS

How to hide WordPress Update notification on admin panel?

add_action('admin_menu','hide_wordpress_update_nag');

function hide_wordpress_update_nag() {
    if (is_admin()) {
        remove_action('admin_notices', 'update_nag', 3);
    }
}

Filed Under: Free Tagged With: CSS

Responsive Header Top Bar Contact Info with Icons

HTML

<ul class="top-header">
    <li class="address">
       <a href=""><i class="fas fa-map-marker"></i>
            <span></span>
        </a> 
    </li>
    <li class="tel">
        <span>
           <a href="tel:"><i class="fas fa-phone"></i>
                
            </a> 
        </span>
    </li>
    <li class="mail">
        <a href="mailto:"><i class="fas fa-envelope"></i>
            <span></span>
        </a>
    </li>
    <li>
        <a target="_blank" href="">
            <i class="fab fa-facebook-f"></i> <span>Facebook</span>
        </a>
    </li>
</ul>

CSS

/* Mobile First */
.top-header li a:hover, 
.top-header li a i:hover{
    color: #EA6F22
}
.top-header{
    display: flex;
    background: #151211;
    color: white;
}

.top-header {
	margin-bottom: 0;
	padding: 10px;
	font-size: 1.6rem;
	color: rgba(255,255,255,.8);
	justify-content: space-around;
}
.top-header span{
    display: none;
}
.top-header .fab,
.top-header .fas {
	margin: 0 10px;
	font-size: 3rem;
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
    .top-header .fas,
    .top-header .fab{
	font-size: 1.5rem;
}

Filed Under: Free Tagged With: CSS, HTML

How to target Explorer, Safari and Edge with CSS

/*CHROME, IE*/
@media screen and (-webkit-min-device-pixel-ratio:0) { 
   
}

/*EDGE*/
@supports (-ms-ime-align: auto) {

}

Filed Under: Free Tagged With: CSS

How to set featured image as background cover

Echo the return value from wp_get_attachment_image_src(). It also returns an Array(), so you need to grab the needed part from that array. In this case it’s the first/0 value. Example:

<?php $bgImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>

Include tha variable inside the inline stylesheet

<section class="contact-cover" style="
    background: url('<?php echo $bgImage[0]; ?>');
    background-size: cover;
    background-attachment: fixed;
    padding: 60px 0;">
</section>

Filed Under: Free Tagged With: CSS, PHP

Contact Form 7 Placeholder Hide on Focus


jQuery(document).ready(function(){

   jQuery('input,textarea').focus(function(){
       jQuery(this).data('placeholder',jQuery(this).attr('placeholder'))
              .attr('placeholder','');
    }).blur(function(){
       jQuery(this).attr('placeholder',jQuery(this).data('placeholder'));
    });
    
});

Syntax of CF7 placeholder

[text* your-name placeholder "NAME"]

CSS for placeholder


::-webkit-input-placeholder { /* WebKit browsers */
color: #fff !important;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff !important;
opacity: 1;
}

Filed Under: Free Tagged With: CSS

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved