X Theme Snippets

I add in a few CSS or JavaScript snippets around the site to help me get the desired effect, so, I thought I’d share them. These can go in the global or local CSS / JS sections.

I will be adding to this as time goes on, but if you do want to contribute you’ll get a shout out and have your snippet shown here.

Default Bottom Margin – Mobile View Only

CSS only.

/* MOBILE */
@media only screen and (max-width: 767px) {
  .x-column {
    margin-bottom:5%;
  }
}

Use button element instead of standard Contact Form 7 submit

This takes a bit more to set up, but the JavaScript you need to add is:

jQuery(function($){
$(document).ready(function(){

// Check if class exists 
if ($(".as-submit").length) {
  
  // Hide the original button
  $(".form-holder form input[type='submit']").hide();
 	
  // Grab the button
  var button_code = $(".as-submit").clone();
  
  // Delete the button 
  $(".as-submit").remove();
  
  // Paste the code in the form
  $(button_code).insertBefore(".form-holder form input[type='submit']");
  
}
  
// This triggers the form to submit
$(document).on("click", ".as-submit", function(e) {
  e.preventDefault();
  $(".form-holder form input[type='submit']").trigger("click");
});

});
});

Before and after:

Add the class form-holder to the column your form is in.

Add the class as-submit to the button you want to use as the form submit button.

You should also add in ‘style=”display:none”‘ to your contact form 7 button to stop it from flashing up.

NOTE: Only tested to work with one form on the page.

Remove the Portfolio option

X Theme automatically adds a Portfolio post type, but not all of us want that, so here is a way to remove it.

First you need to make sure that you have a child theme activated.

Then, in your child theme functions.php file, add in this code snippet:

// HIDE UNWANTED ADMIN MENU ITEMS
function hide_unwanted_admin_menu_items() {
    remove_menu_page( 'edit.php?post_type=x-portfolio' );
}
add_action( 'admin_menu', 'hide_unwanted_admin_menu_items' );