How to Hide Featured Images on WordPress Posts

Featured images can add a great visual element to your WordPress posts, but there may be times when you want to hide them. For example, you might want to hide the featured image if it's not relevant to the content of the post, or if you're using a plugin that already displays an image.

If your WordPress theme doesn't provide an option to hide featured images, don't worry - you can easily achieve this by adding a few lines of code to your site. Here's how you can do it:

Step 1: Access the Admin Panel

First, log in to your WordPress dashboard and go to the Admin Panel.

Step 2: Navigate to Additional CSS

Next, navigate to the Appearance section and click on Customize. From there, select Additional CSS.

Step 3: Add the Code

Copy and paste the following code into the Additional CSS section:

.entry-content img {

  display: none;

}

This code will hide the featured image for all single posts on your website.

Step 4: Hide the Featured Image for a Particular Post

If you want to hide the featured image for a specific post, you can do so by adding the post ID to the code. To do this, use the following code:

.post-12345 .post-image {

  display: none;

}

Make sure to replace "12345" with the actual post ID of the post where you want to hide the featured image.

Note: Keep in mind that this code will only hide the featured image from the specific page or post. The image will still be available in your media library.

Read More

Force the DIVI secondary to not merge with the mobile menu and remain even on mobile

You can force the menu items to remain visible in the secondary header on mobiles using this CSS:

@media screen and (max-width: 980px) {

#page-container {

padding-top: 0px !important;

}

#top-header {

position: static !important;

display: block !important;

}

#top-header .container {

padding-top: 0.75em !important;

}

#page-container #main-header {

position: relative !important;

top: 0 !important;

}

#top-header #et-secondary-menu,

#top-header #et-secondary-nav {

display: block !important;

}

#top-header #et-secondary-nav li {

text-align: center !important;

}

#et-main-area {

padding-top: 1px;

}

}

Read More

Handy CSS hacks for Gravity Forms

Gravity Forms is a popular plugin for WordPress that allows you to create custom forms for your website. The plugin includes a wide range of styling options, but you can also use CSS to further customize the appearance of your forms. Here are some handy CSS hacks you can use to customize your Gravity Forms:

1. Change the font: You can change the font of your forms by adding the following code to your site's CSS: "font-family: 'your font name';"
2. Change the form color: You can change the color of your form by adding the following code to your site's CSS: "background-color: #hexcode;"
3. Change the button color: You can change the color of your submit button by adding the following code to your site's CSS: "input[type='submit'] {background-color: #hexcode;}"
4. Center the form: You can center your form on the page by adding the following code to your site's CSS: "form.gform_wrapper {margin: 0 auto;}"
5. Change the input field width: You can change the width of your input fields by adding the following code to your site's CSS: "input[type='text'] {width: pixels;}"
6. Add a border to the form: You can add a border to your form by adding the following code to your site's CSS: "form.gform_wrapper {border: 1px solid #hexcode;}"
7. Add a hover effect: You can add a hover effect, such as changing the color of a button when someone hovers over it, by adding the following code to your site's CSS: "input[type='submit']:hover {background-color: #hexcode;}"
8. Style radio and checkboxes: You can customize the appearance of radio and checkboxes in your form by adding the following code to your site's CSS: "input[type='radio'], input[type='checkbox'] {property: value;} "

It's important to note that to add custom CSS to your Gravity Forms, you will need to access your WordPress site's CSS editor and add the code to the appropriate area. Additionally, Gravity forms allow for custom styling for specific forms via the settings. It's also recommended to back up your website before making any changes to the site's code, in case something goes wrong. It's also a good idea to have a general understanding of CSS and its syntax before making any major changes, as it can make debugging and troubleshooting easier.

Read More

How to prevent people copying content from your website

To disable the copy content on all pages of your website with CSS, just follow the steps below to add the CSS snippet to your main CSS style page.

1. Open your website main css file (style.css or default.css)
2. Add the below code to the top of the .css file.

body{-webkit-touch-callout:none;-webkit-user-select: none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} 

Read More

Increase pricing text size on WooCommerce products

Looking to increase the size of the pricing text on the woocommerce pages?

You can use the following CSS rule in your themes custom CSS:

.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price, .woocommerce-page ul.products li.product .price del {

font-size: 18px;

}

Read More

Custom CSS for Thank you message on Divi Contact Form

When the user submits the contact form on the Divi contact form they get the 'thank you message', however to change the font and justification of this message, add the below custom CSS and edit to suit:

#page-container .et_pb_contact_form_0.et_pb_contact_form_container .et-pb-contact-message {
color:aquamarine;
text-align: center;
border: 1px solid lightgreen;
background: orange;
}

Read More

Remove extra padding on Divi blog grid layout rows

The Divi blog module in grid mode may sometimes add padding between rows of posts. No matter what you do (adjust padding/margins/gutter width, etc on each the section, row, and module) it can be a challenge to get rid of it.

The solution is to add the following CSS code to your custom CSS (Divi > Theme Options > General tab > Custom CSS box): 

.et_pb_gutters1.et_pb_row .et_pb_column .et_pb_blog_grid .column.size-1of3 .et_pb_post:last-child {
margin-bottom: 0 !important;
}

Read More

Divi Contact form full-width submit button

With the Divi theme to make the submit button on the contact form module full width. See CSS code below.

Desktop only CSS code:

body #page-container .et_pb_contact_form_0.et_pb_contact_form_container .et_pb_button {
width: 97%;
margin-left: 7px;
margin-top: 6px;
}
body #page-container .et_pb_contact_form_0 .et_contact_bottom_container {
width: 100%;
}

Mobile only CSS code:

@media (max-width: 479px){
.et_contact_bottom_container {
width: 100%!important;
}
.et_pb_contact_submit {
width:100%!important;
}
}

Read More

Add a background and change the font of your WordPress blockquote

In a previous post, I demonstrated how to center align your WordPress blockquote, if you are looking for some additional styling, take a look at this custom CSS:

blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
font-family: Helvetica Neue,Helvetica,sans-serif;
font-size: 22px;
color: #95a5a6;
background: #ccc;
}

Read More

How to center align your WordPress blockquote

With most of the content on your WordPress page or post being left aligned. Center aligning a blockquote is a great way to have them stand out.

To center align your WordPress blockquote, all you need to do is add this custom CSS code to the additional CSS box in your WordPress theme:

blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
}

Read More

Change DIVI mobile menu background color

Looking to change the background color of the menu different just for mobile interface.
For desktop, you enter the color by the theme customizer.

This will change just for mobile, add this code to the Custom CSS area from Theme Options:

@media only screen and (max-width: 767px) {
#mobile_menu {background-color: PLACE THE COLOR HERE;}
}

Read More

Hide search bar on wpDataTables

By default the wpDataTables plugin may display a search bar on all of your tables. I added this simple CSS code to hide it:

.dataTables_filter {display: none; }

Read More

Center DIVI Footer Menu Links

Login to WordPress admin and add this css code to Divi > Theme Options > General Panel > Custom Css:

.bottom-nav {
text-align: center;
}

 

Before

 

After 

 

Read More

Move DIVI Fullwidth Slider Text to Left or Right

Simply add the following CSS code to custom CSS box in theme options.

.et_pb_fullwidth_slider_0 .et_pb_slide_1 .et_pb_slide_description{
text-align:left!important;
}
.et_pb_slide_description {
float: left;
padding-left: 0;
width: 65%;
padding-bottom: 0px;
}
.et_pb_slider .et_pb_container {
max-width: 100%;
width: 100%;
float: left;
}

Read More

Remove logo on mobile only with Elegant Themes

This works with DIVI, Extra and other themes from Elegant Themes.

Just add the following code to the Custom CSS field in ePanel:

@media (max-width: 980px) {
#logo {
display: none !important;
}
}

Read More

No menu on homepage only

To make DIVI not display the menu on Homepage only.

Login to WordPress admin and add this CSS to: Divi > Theme Options > General > Custom CSS

.home #top-header, .home #main-header{display: none;}

Read More

Disable pause on hover for DIVI slider module

UPDATE: There is now a more simple solution. Add et_slider_auto_ignore_hover in Gallery Module Settings > Custom CSS tab, as shown below.

The DIVI slider now defaults to "pause on hover" and there is no setting currently available to disable pause on hover. To turn in off you need to login to your web hosting control panel or FTP to: wp-content/themes/Divi/js/custom.js

 From this file you can remove the following:

if ( settings.slideshow && et_slides_number > 1 ) {
$et_slider.hover( function() {
$et_slider.addClass( 'et_slider_hovered' );

if ( typeof et_slider_timer != 'undefined' ) {
clearInterval( et_slider_timer );
}
}, function() {
$et_slider.removeClass( 'et_slider_hovered' );

et_slider_auto_rotate();
} );
}

Read More

Disiable Mobile Menu from showing with DIVI theme

To disable the mobile menu. Add this css code in the custom css field of the epanel:

@media only screen and (min-width: 981px){
#main-header div#et_mobile_nav_menu {
display: none;
}
}

Read More

Add drop shadow to image

To add drop shadow to an image, go on that image module -> custom css -> main element and add this code :

-webkit-box-shadow: -29px 35px 35px -11px rgba(0,0,0,0.61);
-moz-box-shadow: -29px 35px 35px -11px rgba(0,0,0,0.61);
box-shadow: -29px 35px 35px -11px rgba(0,0,0,0.61);
border-radius: 50% !important;

Read More

Custom logo for mobile devices

To set up a custom logo for mobile devices, add this css code to Divi->Theme Options->General Panel->Custom Css and change the marked value:

@media only screen and (max-width: 767px) {
.et_fixed_nav #logo {
content: url('http://www.thexyz/images/logo.png') !important;
}
}

Read More