Code Snippets

The quickest way to use this section is to search using a search term.

Snippets include php, javascript or css code to help customise your site.

If you wish to add some helpful bit of code you can submit it here for review.

All contributions welcome!

Submit Snippet

Here are the X Theme CSS Class Selectors

Search Here

Search by type of code:         or by Keyword:   




Make column heights equal with some JS

It goes in the customizer javascript box, and you apply the class “equalize” to the columns you want to be equal height.

/*Make columns equal height*/
(function($){
$(window).bind(‘ready load resize’, function(){
var max = 0,
mobile = $(window).width();

if ( mobile > 767 ){
$(“.equalize .x-column”).each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(“.equalize .x-column”).css(‘height’, max);
}
});
})(jQuery);

Submitted by: XAdmin
Custom Javascript

Vertically Align Button to bottom of Column

Add this CSS to the Child Theme styles.css file.

.x-btn.col-btn.x-btn-global {
position: absolute;
bottom: 10px;
}

Then each button you want to align to the bottom of the column add col-btn to the class property.

Submitted by: Rick M
Custom CSS

Add a Logo to WP Cost Estimation & Payment Forms Builder

Add this in the CSS field under the “Design” tab
#estimation_popup #startInfos:before {
content: url(“//discovermessina.it/wp-content/uploads/2016/11/Discover-messinaLOGO-e1478963151555.png”);
}
If you want to add the logo after the introductory message and before the button then change #estimation_popup #startInfos:before to #estimation_popup #startInfos:after
P.S: The image must be under 480px in order to show well in every single device because unfortunately i don’t seem to find a way to resize the image.

Courtesy of https://www.facebook.com/groups/xthemeusers/ and Alejandro Sanchez

Submitted by: XAdmin
Custom CSS

Center footer widgets

To Center all the footer widgets, regardless of number add the following CSS to your Child Theme style.css

.x-colophon.top .x-container .x-column img {float: none !important;}
.x-colophon.top .x-container .x-column {text-align: center;}

.x-colophon .inline-images img {
display: inline-block;
left: auto;
right: auto;
}

Submitted by: Rick Malkin
Custom CSS

Show Site Favicon in Admin Area

add_action( ‘admin_head’, ‘x_site_icons’ ); //admin favicon

You can show your website favicon in the WP Admin area by adding the above code snippet to your child theme’s functions.php
(Of course, you’ll need to have added your Site Icons in [Appearance -> Customizer -> Site Icons] for this to work)

Submitted by: Conor Seed
Custom PHP

Style Woo Commerce Account Page

Go to your account page and edit it in cornerstone (I use container but remove the row container and remove all the section padding)
Add this shortcode to a text box

Login


then add this CSS to the in page custom CSS

/*
No need for style tags here;
simply get started by writing
CSS! Watch as your changes
are reflected live in the
preview area. Have fun!
*/
.woocommerce-MyAccount-navigation-link a {
margin: 5px 5px 0 0;
padding: 15px;
font-size: 14px;
}
.woocommerce-MyAccount-navigation-link.is-active a:before {
background-color: #cdcdcd;
opacity:0.25;
}
.woocommerce-account .button {
font-size: 90%;
margin-right: 5px;
border-radius: 0px;
padding: 5px 10px;
background-color: #1f89e5;
border: 0px;
}
.woocommerce-MyAccount-navigation-link {
width:190px;
}
.woocommerce-MyAccount-navigation-link:before{
font-family: FontAwesome;
margin:5px 5px 0px 0px;
float:left;
padding: 5px 10px;
font-size:20px;
background-color:#f5f5f5;
border-right:1px solid #cdcdcd;
}
.woocommerce-MyAccount-navigation-link–dashboard:before{
content:”\f0e4″;
z-index:10;
}
.woocommerce-MyAccount-navigation-link–orders:before{
content:”\f07a”;
}
.woocommerce-MyAccount-navigation-link–downloads:before{
content:”\f019″;
}
.woocommerce-MyAccount-navigation-link–edit-address:before{
content:”\f07a”;
}
.woocommerce-MyAccount-navigation-link–payment-methods:before{
content:”\f283″;
}
.woocommerce-MyAccount-navigation-link–edit-account:before{
content:”\f007″;
}
.woocommerce-MyAccount-navigation-link–appointments:before{
content:”\f073″;
}
.woocommerce-MyAccount-navigation-link–customer-logout:before{
content:”\f08b”;
}

Submitted by: XAdmin
Custom CSS

Rotating Logo

.masthead .x-navbar .x-brand {
width: 110px;
position: absolute;
left: 50%;
margin-left: -55px;
transition-duration: 0.8s;
transition-property: transform;
z-index: 99999;
}

.masthead .x-navbar .x-brand:hover {
-webkit-transform: rotate(1440deg);
-moz-transform: rotate(1440deg);
-o-transform: rotate(1440deg);
}

Submitted by: XAdmin
Custom CSS

Customize the wp-login page

There are multiple ways to customize the wp-login page, and one of it is using the White Lable CMS plugin which plays nice along with X-theme. It doesn’t feature Wysiwig editor. Instead, it accepts CSS so I have wrote a user-friendly version with comments for my own reference which I have decided to share. 🙂

The logo can be changed from the admin panel of the plugin.

/*630 px logo*/
body.login div#login h1 a {
background-size:contain!important;
}

/* — form — */
.login form {
background-color:DarkCyan
}
.login label {
color:white
}
/* — button — */
.wp-core-ui .button-primary {
background-color:orange;
border-color:DarkGoldenRod;
text-shadow:none;
box-shadow:none;
}
.wp-core-ui .button-primary:hover {
background-color:DarkOrange;
color:white;
border-color:DarkGoldenRod
}
/* — end of button — */
/* — end of form — */

/* — main background — */
#wlcms-login-wrapper, body.login {background-color:Aquamarine
}
/* — end of main background — */

/* — logout-error message — */
.login #login_error, .login .message {
border-left: 4px solid orange;
background-color:DarkCyan;
color:white
}
/* — end of logout-error message — */

/* — bottom text — */
.login #backtoblog a, .login #nav a, .login h1 a, #nav {
color:DarkCyan
}
.login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {
color:white
}
/* — end of bottom text — */

Submitted by: Miroslav Mišo Medurić
Custom CSS

CSS – Section Slope

Adjust as necessary.
Just add the class “slope” to whatever section you to apply this too.

.x-section.slope{
transform: skewY(-3deg);
background-color: #1c1c1c !important;
margin-top: -40px !important;
padding-top: 5em !important;
}
.slope .x-containerr{
transform: skewY(3deg);
}

Submitted by: XAdmin
Custom CSS

Edit Focus Border

Remove focus border surrounding buttons on click.

.x-btn:focus, .button:focus, [type=”submit”]:focus {
outline: none !important;
}

Submitted by: Martin Mosley
Custom CSS

CSS : target internet explorer

I found out that some SVG files and svg code doesnt display correctly on internet explorer . so I started looking for a way to add css style only for internet explorer in x-theme.
Maybe this is not the right approach but this is the best way I found. And I tried alot of options 🙂

/* Target your custom class only on internet explorer */
.no-support .your-class {
Enter your style here 
}

As always, you need to change the green to your setup 🙂

Hope this helps….

Submitted by: Baroninn
Custom CSS

Horizontally Centre Footer Widgets Inside Container

This works on 3 or less widgets, have not tried 4 as yet.

.x-colophon.top .x-container .x-column img {float: none !important;}
.x-colophon.top .x-container .x-column {text-align: center;}

Submitted by: Rick Malkin
Custom CSS

SSL your site in 2 minutes

# BEGIN WordPress

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://XXXXXXXXXXX/$1 [R,L]
RewriteBase /
RewriteRule ^index\.php$ – [L]

1. In CPanel file manager – use .htaccess to force SSL from http:
2. Simply copy a backup and name it .htaccess-preSSL
3. in .htaccess in the editor ADD this text and the correct DOMAIN.XX or it will redirect to the wrong one (or XXX a 404)
4. Copy and paste from # to the [L] so nothing is missed – then forces SSL
5. smile – job done. and if any issues resort to your backup .htaccess til u figure it out what u did wrong. Save the erroneous one as .htaccess-postSSL-stuffup till u get it right

Submitted by: Jason Hopkinson
Custom htaccess

Fade Fixed Navbar on scroll

var opacity = 1;
var lastScrollTop = 0;
jQuery(window).scroll(function(){

var st = jQuery(this).scrollTop();

if(st == 0)
jQuery(‘.x-navbar’).css(‘opacity’,’1′);

if (opacity > 0.7 && (st > lastScrollTop)){
jQuery(‘.x-navbar’).css(‘opacity’,’-=0.01′);
opacity -= 0.01;
}
else if(opacity < 1)
{
jQuery(‘.x-navbar’).css(‘opacity’,’+=0.01′);
opacity += 0.01;
}
lastScrollTop = st;
});

Submitted by: xsirc
Custom Javascript

Add Cart with Item Count in Menu

Add this to your child theme functions.php file.

//* Make Font Awesome available
add_action( ‘wp_enqueue_scripts’, ‘enqueue_font_awesome’ );
function enqueue_font_awesome() {

wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css’ );

}

/**
* Place a cart icon with number of items and total cost in the menu bar.
*
* Source: http://wordpress.org/plugins/woocommerce-menu-bar-cart/
*/
add_filter(‘wp_nav_menu_items’,’sk_wcmenucart’, 10, 2);
function sk_wcmenucart($menu, $args) {

// Check if WooCommerce is active and add a new item to a menu assigned to Primary Navigation Menu location
if ( !in_array( ‘woocommerce/woocommerce.php’, apply_filters( ‘active_plugins’, get_option( ‘active_plugins’ ) ) ) || ‘primary’ !== $args->theme_location )
return $menu;

ob_start();
global $woocommerce;
$viewing_cart = __(‘View your shopping cart’, ‘your-theme-slug’);
$start_shopping = __(‘Start shopping’, ‘your-theme-slug’);
$cart_url = $woocommerce->cart->get_cart_url();
$shop_page_url = get_permalink( woocommerce_get_page_id( ‘shop’ ) );
$cart_contents_count = $woocommerce->cart->cart_contents_count;
$cart_contents = sprintf(_n(‘%d item’, ‘%d items’, $cart_contents_count, ‘your-theme-slug’), $cart_contents_count);
$cart_total = $woocommerce->cart->get_cart_total();
// Uncomment the line below to hide nav menu cart item when there are no items in the cart
// if ( $cart_contents_count > 0 ) {
if ($cart_contents_count == 0) {
$menu_item = ‘<li class=”right”><a class=”wcmenucart-contents” href=”‘. $shop_page_url .'” title=”‘. $start_shopping .'”>’;
} else {
$menu_item = ‘<li class=”right”><a class=”wcmenucart-contents” href=”‘. $cart_url .'” title=”‘. $viewing_cart .'”>’;
}

$menu_item .= ‘<i class=”fa fa-shopping-cart”></i> ‘;

$menu_item .= $cart_contents.’ – ‘. $cart_total;
$menu_item .= ‘</a></li>’;
// Uncomment the line below to hide nav menu cart item when there are no items in the cart
// }
echo $menu_item;
$social = ob_get_clean();
return $menu . $social;

}

Submitted by: Donald McGuinn
Custom PHP

Embed video in Custom Page Template using ACF

Create an ACF URL Field (eg “video_link” )
Then use this code to add it anywhere in a page template.

if( get_field( ‘video_link’ ) ) {
$videoURL = get_field( “video_link” );
$videoShortcode = ‘[video width=”1280″ height=”720″ src=”‘ . $videoURL . ‘”]’;
echo do_shortcode( $videoShortcode );

The code checks if there is a value, then stores that value as a variable (for easier use), then it stores the completed shortcode as a variable . It finally displays the output of the shortcode.

Submitted by: Jonathan
Custom PHP

Add parallax to all devices (touch or non-touch enabled)

You will need to add this script after the cornerstone-site-body script gets enqueued
Use “cornerstone-site-body” as a dependency when registering via wp_register_script/wp_enqueue_script
For reference: https://community.theme.co/forums/topic/parallax-not-working-in-chrome-and-windows-8/#post-1194968

(function($){
xData.api.map(‘section’, newSectionSetup);
function newSectionSetup( params ) {
var $this = $(this);
var backgroundSetup = function() {
if ( $this.hasClass(‘parallax’) ) {
if ( $this.hasClass(‘bg-image’) ) speed = 0.1;
if ( $this.hasClass(‘bg-pattern’) ) speed = 0.3;
if ( speed ) $this.parallaxContentBand(‘50%’, speed);
}
};
if ( document.readyState === ‘complete’ ) {
backgroundSetup();
} else {
jQuery(window).load( backgroundSetup );
}
}
})(jQuery);

Submitted by: Mike
Custom Javascript

Image Behind NavBar

.x-navbar{
background: url(YOUR IMAGE URL HERE) no-repeat;
background-size: cover;
}

Submitted by: Donald McGuinn
Custom CSS

Social Buttons twist – Remove the Tooltip Hover Over and Border Lines

/* 
   Social Buttons - Remove the Tooltip Hover Over 
   By default, your social buttons will have a Tooltip hover over when someone hovers each button.
   Easily remove it by adding the following CSS:
*/

.x-share-options .tooltip {
display: none !important;
}

/* 
   Social Buttons - Border Lines 
   By default, X Theme’s social share buttons have a top and bottom border-line.
   You can change this with a simple bit of CSS: 
*/
.x-entry-share{
border: none;
padding-left: 2%;
padding-right: 2%;
}
Submitted by: gorgonzola73
Custom CSS

Show Mobile Menu Sooner

This will hide the desktop site and show the mobile menu button. This is particularly great for sites with more links in their navigation menu so it does not go to a second row.

@media (max-width: 979px){ /*<--- Change this number based on when you want the change to happen*/ .x-navbar { text-align: Center; } .x-navbar .desktop { display: none !important; } .x-navbar .x-btn-navbar { display: inline-block; } .x-nav-wrap.mobile.collapse.in { display: block; } }

Submitted by: Donald McGuinn
Custom CSS

Show Today’s Date with a Shortcode

Put this in your child theme’s functions.php file.

// [date]
function displaydate(){
return date(‘l, F jS, Y’);
}
add_shortcode(‘date’, ‘displaydate’);
// end date

SHORTCODE:
[date]

Submitted by: Donald McGuinn
Custom PHP

Blog in Breadcrumb trail

For Posts, when using a breadcrumb trail and clicking on tags, categories – all you see is “Home” > Tag or Category Name.

The following snippet will allow you to see -: Home > Blog > Tag or Category Name. Where “Blog” upon click will drive you back to the Blog url.

Use a child theme and add this to your functions.php file.

Please note -: a freshly created PHP will need <?php to begin with else if you have other code added, then just add the following …

Personalized code to drive to your particular blog url is in RED. The crux of the add is ” $blog_home_url . $delimiter . ” wherever you see an appropriate (post,tag) echo statement.

Hope this helps you

 

// Breadcrumbs Display Category Name
// =============================================================================

function get_breadcrumb_category( $cat ) {
GLOBAL $post;
$post = get_post( $post->ID );
$post_type = $post->post_type;
$taxonomy = $cat;

$f_categories = wp_get_post_terms( $post->ID, $taxonomy );
$f_category = $f_categories[0];

if ( $f_category->parent != 0 ) {
$f_category_id = $f_category->parent;
$parent_array = get_term_by(‘id’, $f_category_id, $taxonomy, ‘ARRAY_A’);
$f_category_name = $parent_array[“name”];
$term_link = get_term_link( $f_category_id, $taxonomy );
} else {
$f_category_id = $f_category->term_id;
$f_category_name = $f_category->name;
$term_link = get_term_link( $f_category_id, $taxonomy );
}

if ( $f_categories && ! is_wp_error($f_categories) ) {
return ‘<a href=”‘ . $term_link . ‘”>’ . $f_category_name . ‘</a>’;
} else {
return ”;
}
}

function x_breadcrumbs() {

if ( x_get_option( ‘x_breadcrumb_display’, ‘1’ ) ) {

GLOBAL $post;

$is_ltr = ! is_rtl();
$stack = x_get_stack();
$delimiter = x_get_breadcrumb_delimiter();
$home_text = x_get_breadcrumb_home_text();
$home_link = home_url();
$current_before = x_get_breadcrumb_current_before();
$current_after = x_get_breadcrumb_current_after();
$page_title = get_the_title();
$blog_title = get_the_title( get_option( ‘page_for_posts’, true ) );
$blog_url = get_permalink( get_option( ‘page_for_posts’, true ) );
$post_parent = $post->post_parent;
$blog_link = ‘http://abc.com/blog/’;
$blog_home_url = ‘<a href=”‘ . $blog_link .'”>’ . ‘Blog’ . ‘</a>’;

if ( X_WOOCOMMERCE_IS_ACTIVE ) {
$shop_url = x_get_shop_link();
$shop_title = x_get_option( ‘x_’ . $stack . ‘_shop_title’, __( ‘The Shop’, ‘__x__’ ) );
$shop_link = ‘<a href=”‘. $shop_url .'”>’ . $shop_title . ‘</a>’;
}

echo ‘<div class=”x-breadcrumbs”><a href=”‘ . $home_link . ‘”>’ . $home_text . ‘</a>’ . $delimiter;

if ( is_home() ) {

echo $current_before . $blog_title . $current_after;

} elseif ( is_category() ) {

$the_cat = get_category( get_query_var( ‘cat’ ), false );
if ( $the_cat->parent != 0 ) echo ‘<a href=”‘.get_permalink(102).'”>’.get_the_title(102) .'</a>’;
echo $blog_home_url . $delimiter . $current_before . single_cat_title( ”, false ) . $current_after;

} elseif ( x_is_product_category() ) {

if ( $is_ltr ) {
echo $shop_link . $delimiter . $current_before . single_cat_title( ”, false ) . $current_after;
} else {
echo $current_before . single_cat_title( ”, false ) . $current_after . $delimiter . $shop_link;
}

} elseif ( x_is_product_tag() ) {

if ( $is_ltr ) {
echo $shop_link . $delimiter . $current_before . single_tag_title( ”, false ) . $current_after;
} else {
echo $current_before . single_tag_title( ”, false ) . $current_after . $delimiter . $shop_link;
}

} elseif ( is_search() ) {

echo $current_before . __( ‘Search Results for ‘, ‘__x__’ ) . ‘“’ . get_search_query() . ‘”’ . $current_after;

} elseif ( is_singular( ‘post’ ) ) {

if ( get_option( ‘page_for_posts’ ) == is_front_page() ) {
$f_category = get_the_category();

if ( $f_category[0]->category_parent != 0 ) {
$f_category_id = $f_category[0]->parent;
$f_category_name = get_cat_name( $f_category_id );

$f_subcategory_id = $f_category[0]->cat_ID;
$f_subcategory_name = get_cat_name( $f_subcategory_id );

echo $blog_home_url . $delimiter . ‘<a href=”‘ . get_category_link( $f_category_id ) . ‘”>’ . $f_category_name . ‘</a>’ . $delimiter
.'<a href=”‘ . get_category_link( $f_subcategory_id ) . ‘”>’ . $f_subcategory_name . ‘</a>’ . $delimiter . $current_before . $page_title . $current_after . $delimiter . ‘<a href=”‘ . $blog_url . ‘”>’ . $blog_title . ‘</a>’;
} else {
$f_category_id = $f_category[0]->term_id;
$f_category_name = $f_category[0]->name;
echo $blog_home_url . $delimiter . ‘<a href=”‘ . get_category_link( $f_category_id ) . ‘”>’ . $f_category_name . ‘</a>’ . $delimiter . $current_before . $page_title . $current_after ;
}
} else {
if ( $is_ltr ) {

$f_category = get_the_category();

if ( $f_category[0]->category_parent != 0 ) {
$f_category_id = $f_category[0]->parent;
$f_category_name = get_cat_name( $f_category_id );

$f_subcategory_id = $f_category[0]->cat_ID;
$f_subcategory_name = get_cat_name( $f_subcategory_id );

echo $blog_home_url . $delimiter . ‘<a href=”‘ . $blog_url . ‘”>’ . $blog_title . ‘</a>’ . $delimiter . ‘<a href=”‘ . get_category_link( $f_category_id ) . ‘”>’ . $f_category_name . ‘</a>’ . $delimiter
.'<a href=”‘ . get_category_link( $f_subcategory_id ) . ‘”>’ . $f_subcategory_name . ‘</a>’ . $delimiter . $current_before . $page_title . $current_after;
} else {
$f_category_id = $f_category[0]->term_id;
$f_category_name = $f_category[0]->name;
echo $blog_home_url . $delimiter . ‘<a href=”‘ . $blog_url . ‘”>’ . $blog_title . ‘</a>’ . $delimiter . ‘<a href=”‘ . get_category_link( $f_category_id ) . ‘”>’ . $f_category_name . ‘</a>’ . $delimiter . $current_before . $page_title . $current_after;
}
} else {
echo $current_before . $page_title . $current_after . $delimiter . ‘<a href=”‘ . get_permalink( get_option( ‘page_for_posts’ ) ) . ‘”>’ . $blog_title . ‘</a>’;
}
}

} elseif ( x_is_portfolio() ) {

echo $current_before . get_the_title() . $current_after;

} elseif ( x_is_portfolio_item() ) {

$link = x_get_parent_portfolio_link();
$title = x_get_parent_portfolio_title();

if ( $v = get_breadcrumb_category(‘portfolio-category’) ) {
$portfolio_category = $delimiter . $v;
} else {
$portfolio_category = ”;
}

if ( $is_ltr ) {
echo ‘<a href=”‘ . $link . ‘”>’ . $title . ‘</a>’ . $portfolio_category . $delimiter . $current_before . $page_title . $current_after;
} else {
echo $current_before . $page_title . $current_after . $portfolio_category . $delimiter . ‘<a href=”‘ . $link . ‘”>’ . $title . ‘</a>’;
}

} elseif ( x_is_product() ) {

if ( $v = get_breadcrumb_category(‘product_cat’) ) {
$product_category = $delimiter . $v;
} else {
$product_category = ”;
}

if ( $is_ltr ) {
echo $shop_link . $product_category . $delimiter . $current_before . $page_title . $current_after;
} else {
echo $current_before . $page_title . $current_after . $product_category . $delimiter . $shop_link;
}

} elseif ( x_is_buddypress() ) {

if ( bp_is_group() ) {
echo ‘<a href=”‘ . bp_get_groups_directory_permalink() . ‘”>’ . x_get_option( ‘x_buddypress_groups_title’, __( ‘Groups’, ‘__x__’ ) ) . ‘</a>’ . $delimiter . $current_before . x_buddypress_get_the_title() . $current_after;
} elseif ( bp_is_user() ) {
echo ‘<a href=”‘ . bp_get_members_directory_permalink() . ‘”>’ . x_get_option( ‘x_buddypress_members_title’, __( ‘Members’, ‘__x__’ ) ) . ‘</a>’ . $delimiter . $current_before . x_buddypress_get_the_title() . $current_after;
} else {
echo $current_before . x_buddypress_get_the_title() . $current_after;
}

} elseif ( x_is_bbpress() ) {

remove_filter( ‘bbp_no_breadcrumb’, ‘__return_true’ );

if ( bbp_is_forum_archive() ) {
echo $current_before . bbp_get_forum_archive_title() . $current_after;
} else {
echo bbp_get_breadcrumb();
}

add_filter( ‘bbp_no_breadcrumb’, ‘__return_true’ );

} elseif ( is_page() && ! $post_parent ) {

echo $current_before . $page_title . $current_after;

} elseif ( is_page() && $post_parent ) {

$parent_id = $post_parent;
$breadcrumbs = array();

if ( is_rtl() ) {
echo $current_before . $page_title . $current_after . $delimiter;
}

while ( $parent_id ) {
$page = get_page( $parent_id );
$breadcrumbs[] = ‘<a href=”‘ . get_permalink( $page->ID ) . ‘”>’ . get_the_title( $page->ID ) . ‘</a>’;
$parent_id = $page->post_parent;
}

if ( $is_ltr ) {
$breadcrumbs = array_reverse( $breadcrumbs );
}

for ( $i = 0; $i < count( $breadcrumbs ); $i++ ) {
echo $breadcrumbs[$i];
if ( $i != count( $breadcrumbs ) -1 ) echo $delimiter;
}

if ( $is_ltr ) {
echo $delimiter . $current_before . $page_title . $current_after;
}

} elseif ( is_tag() ) {

echo $blog_home_url . $delimiter . $current_before . single_tag_title( ”, false ) . $current_after;

} elseif ( is_author() ) {

GLOBAL $author;
$userdata = get_userdata( $author );
echo $current_before . __( ‘Posts by ‘, ‘__x__’ ) . ‘“’ . $userdata->display_name . $current_after . ‘”’;

} elseif ( is_404() ) {

echo $current_before . __( ‘404 (Page Not Found)’, ‘__x__’ ) . $current_after;

} elseif ( is_archive() ) {

if ( x_is_shop() ) {
echo $current_before . $shop_title . $current_after;
} else {
echo $current_before . __( ‘Archives ‘, ‘__x__’ ) . $current_after;
}

}

echo ‘</div>’;

}

}

Submitted by: Steve Goldberg
Custom PHP

Video Loop

If you wish to add loop to your videos, use the code below

[x_video_player loop=“true” m4v=“http://yourdomain.com/video.mp4” poster=“http://yourdomain.com/image.jpg”]

Submitted by: Schauk
Custom CSS

Add a Slider Above Blog

// Adding a Slider on top of the Blog Page
// =============================================================================

add_action(‘x_before_view_integrity__landmark-header’, ‘slider_above_blog_page’);

function slider_above_blog_page() {
if ( is_home() ) {
echo do_shortcode(‘[rev_slider alias=”slider_alias”]’);
}
}

 

Looks like this is for integrity.

Submitted by: Donald McGuinn
Custom PHP

How to add terms and conditions checkbox for email form extension

You have to add in /wp-content/plugins/x-email-mailchimp/email-integration/views/site/shortcode-x-suscribe.php in line 185:
&nbsp;
<span class=”tag”>&lt;fieldset&gt;</span> <span class=”tag”>&lt;input</span> <span class=”atn”>type</span><span class=”pun”>=</span><span class=”atv”>”checkbox”</span> <span class=”atn”>name</span><span class=”pun”>=</span><span class=”atv”>”terms”</span> <span class=”atn”>value</span><span class=”pun”>=</span><span class=”atv”>”ok”</span> <span class=”atn”>required</span><span class=”tag”>&gt;</span> <span class=”tag”>&lt;span</span><span class=”tag”>&gt;</span><span class=”pln”>I accept </span><span class=”tag”>&lt;a</span> <span class=”atn”>href</span><span class=”pun”>=</span><span class=”atv”>”#”</span> <span class=”atn”>target</span><span class=”pun”>=</span><span class=”atv”>”_blank”</span><span class=”tag”>&gt;</span><span class=”pln”>terms and conditions</span><span class=”tag”>&lt;/a&gt;</span> &lt;/span&gt;<span class=”tag”>&lt;/fieldset&gt;</span>

Submitted by: Delerean
Custom PHP

Add Custom Post Type to the Recent Posts Element in Cornerstone

function add_event_post_type( $types ) { $types[post_type_name] = post_type_name; return $types; } add_filter( ‘cs_recent_posts_post_types’, ‘add_event_post_type’, 999 );

Add this in your child theme functions.php file.

Submitted by: Donald McGuinn
Custom PHP

Hyperlink Featured List Item

/* Place the following code in your page’s Custom Javascript area and make sure you add my class to the specific featured list item that you will want to link. */
=======================
(function($){
var data = {
‘.my-class .x-feature-box-title’: ‘http://yourlinkhere’,
‘.my-class2 .x-feature-box-title’: ‘‪#‎yoursecondlinkhere‬’,
// for additional links, copy the above line and replace the first class and the link
}
$.each(data, function(i, v) {
var text = $(i).text();
$(i).html(‘<a href=”‘ + v + ‘”>’ + text + ‘</a>’);
});
=========================

Submitted by: Esther Grace
Custom Javascript

Remove Arrows from Nav Bar Links

Add this CSS to your Child Theme Styles.css file

.x-navbar .desktop .x-nav li>a>span:after{display:none !important;}

Submitted by: XAdmin
Custom CSS

Nav over revolution Slider

.home .x-logobar {
position: absolute;
width: 100%;
top: 46px;
background: transparent;
border-bottom: 0;
}

.home .x-navbar {
float:left;
width: 80%;
margin-left: 10%;

top: 101px;
text-align: center;
background: rgba(255,255,255,0.8);
}

.home .x-navbar.x-navbar-fixed-top {
position:fixed !important;
top:0;
width: 100%;
margin-left: 0px !important;
}
.home .x-topbar {
background: none;
border-bottom: 0
}
@media (min-width: 980px) {
.rev_slider_wrapper, a.x-img-thumbnail:hover, .x-slider-container.below, .page-template-template-blank-3-php .x-slider-container.above, .page-template-template-blank-6-php .x-slider-container.above {

margin-top: -140px;
}}

Submitted by: ImpulseDev
Custom CSS

Remove Border and Padding from Posts Featured Image

Add this CSS to your Child Theme style.css file

This will also remove the blue line that appears on smaller screen sizes. If you do not want to do this, remove the body from the css

/* Remove Border and Padding from Posts Featured Image */
body .entry-featured {
border: none;
padding: 0;
}
/* End Remove Border and Padding from Posts Featured Image */

Submitted by: XAdmin
Custom CSS

Change hover text on Social Sharing Shortcode

Adding this PHP code to your Child Themes functions.php file will allow you to change the hover text when you are using the Social Sharing Shortcodes.

add_filter(‘gettext’, ‘translate_text’, 20 );
function translate_text($translated) {
$translated = str_ireplace(‘Share on Facebook’, ‘Your new text 1’, $translated);
$translated = str_ireplace(‘Share on Twitter’, ‘Your new text 2’, $translated);
$translated = str_ireplace(‘Share on Google+’, ‘Your new text 3’, $translated);
$translated = str_ireplace(‘Share on LinkedIn’, ‘Your new text 4’, $translated);
$translated = str_ireplace(‘Share via Email’, ‘Your new text 5’, $translated);
return $translated;
}

 

IMPORTANT: For GoDaddy users, you may have to disable the mu-plugins folder located in your /wp-content folder on your server. In order to do this, rename the folder mu-plugins.bak. This will disable the caching system and other management control that GoDaddy has for your server. Continue at your OWN RISK. Please be sure to BACKUP your website before changing any files.

Submitted by: XAdmin
Custom PHP

Change Font Size in Social Sharing Element

Add this CSS to your Child Theme style.css file

.x-entry-share p {
font-size: 14px; /* changes font size of text about icon */
}

.x-entry-share .x-share i {
font-size: 20px; /* changes Social Icon size */
color: blue; /* Changes Icon colour */
}

.x-entry-share .x-share {
margin-right: 8px; /* Adds space to the right of each Icon (if you have more than one Icon on line */
}

Submitted by: XAdmin
Custom CSS

Insert Bullets into Nav Bar between Menu links, with no link / hover state

Add this CSS to your Child Theme style.css

.x-navbar .desktop .x-nav > li::after {
bottom: 18px; /*Position from bottom of Nav Bar */
color: #e1b14b;
content: “\2022”; /* Bullet Unicode */
font-size: 16px;
position: absolute;
right: -10px;
}

Submitted by: XAdmin
Custom CSS

Open an Accordion list item from a link (Updated 2nd Jan 2017)

My sincere apologies, wrong code was placed originally: NOW UPDATED Rick M

If you want to open an accordion list item from a link on a different page, ADD this to Appearance > Customize > Custom > Edit Global Javascript:

jQuery( function( $ ) {

var target_hash = window.location.hash;

var id_index_table = {
‘#faq1’ : 1,
‘#faq2’ : 2,
‘#faq3’ : 3,
};

$(document).ready( function() {

var target_index = id_index_table[ target_hash ];

if ( target_hash !== ” && target_index > 0) {

$( $( ‘a.x-accordion-toggle’ ).get( target_index – 1 ) ).click();

$(‘html,body’).stop().animate({scrollTop: $( $( ‘a.x-accordion-toggle’ ).get( target_index – 1 ) ).offset().top – ( $(‘.x-navbar’).height() – 43 )},700 ,’swing’);

}

} );

} );
Then your links should look like http://www.YOURDOMAIN.COM/YOUR-PAGE/#faq1. List items are numbered from top down 1 2 3 4 etc, target the one you want to have open by changing the 2 to suit.

Live working example Scroll down to the FAQs and try them out.

Submitted by: Rick M
Custom Javascript

Add Menu for pages in Cornerstone Admin Bar

Add this code to your functions.php in your child theme.

// =============================================================================
// Add Menu for pages in Cornerstone Admin Bar
// =============================================================================
function create_pages_menu() {
global $wp_admin_bar;$menu_id = ‘pages’;
$wp_admin_bar->add_menu(array(‘id’ => $menu_id, ‘title’ => __(‘Pages’), ‘href’ => ‘/’));
$pages = get_pages();
foreach ( $pages as $page ) {
$wp_admin_bar->add_menu(array(‘parent’ => $menu_id, ‘title’ => $page->post_title, ‘id’ => $page->ID, ‘href’ => get_permalink( $page->ID ), ‘meta’ => array(‘target’ => ‘_blank’)));
}
}

Submitted by: XAdmin
Custom PHP

Change Custom Headline Accent Color

.h-custom-headline.accent span:before,
.h-custom-headline.accent span:after {
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}

Submitted by: Martin Mosley
Custom CSS

Image Hover Effect Without CSS

This jQuery javascript and html can be dropped in anywhere, it requires no css, so if you need to create an image hover effect in just a couple places on your site simply edit to match your content and insert this code. Great for custom hover social icons.

<a href=”TARGET URL GOES HERE”><img src=”URL OF FIRST IMAGE GOES HERE”
onmouseover=”this.src=‘HOVER IMAGE URL GOES HERE'”
onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE AGAIN'” /></a>

Submitted by: K Cooper
Custom Javascript

Set Navigation Menu Break Point

/* navigation menu break point */

@media (max-width: 1180px)  {
body .x-nav-wrap.desktop {display: none;}
body .x-nav-wrap.mobile.collapse {display: none;}
body .x-nav-wrap.mobile.collapse.in {display: block;}
body .x-btn-navbar {display: block;  width: 50px;   height: 47px;   margin: 0 auto;}

}

Notes:
Change max width as required.
To center the button remove the float property.
Change the block fixed width and height as required.

Submitted by: K Cooper
Custom CSS

Center Button

/*   Center a button  */

.center-button {

margin: 0 auto;

display:table;

}

Got this code from user Sean Piper on X Facebook Group

Submitted by: Schauk
Custom CSS

Fixed Position Up – Down Button allowing visitors to jump automatically through sections clicking same button

Add a script to your X Theme web pages, tied to a fixed-position “down/up arrow” button, allowing the visitor to jump automatically through the sections of a long page, simply through repeated clicks of the same button? If you want this to work only on one page then add all code to the page custom CSS and JS

(1) Two fixed-position buttons are created, with up and down icons. They float at the edge of the home page, on top of other content, using fixed positioning and z-index. These will need to be styled accordingly.

CSS for this (added to Child Theme Styles.css)

.x-btn.my-fixed-button-d {
position: fixed;
top: 30%;
right: 50px;
display: block;
color: #fff;
background: #474d5d;
width: 100px;
padding: .9375rem;
text-align: center;
line-height: 1;
border-radius: 20px 0 0 20px;
transition: all 300ms ease-out;
z-index:2000;
}

.x-btn.my-fixed-button-u {
position: fixed;
top: 50%;
right: 50px;
display: block;
color: #fff;
background: #474d5d;
width: 100px;
padding: .9375rem;
text-align: center;
line-height: 1;
border-radius: 20px 0 0 20px;
transition: all 300ms ease-out;
z-index:2000;
}

Custom Script (added to Child Theme Functions.php)

function insert_fixed_button_d() { ?>
<a class=”x-btn my-fixed-button-d next-section-btn”><span>Down Button</span></a>
<?php }
add_action( ‘x_after_site_end’, ‘insert_fixed_button_d’ );
function insert_fixed_button_u() { ?>
<a class=”x-btn my-fixed-button-u prev-section-btn”><span>Up Button</span></a>
<?php }
add_action( ‘x_after_site_end’, ‘insert_fixed_button_u’ );

(2) Add a new row to the top of EACH section of the home page Add a Raw Content Element with the following inside:

<‘div class=”offset-section-target”‘>”<‘/div’>

This creates a target within each section for the scripts to use when the buttons are clicked. REMOVE single quotes from code.

(3) The custom CSS for the new target div is:

.offset-section-target {
display: block;
position: absolute;
top: -48px; // ** see note below ** //
left: 0;
width: 0;
height: 0;
background: transparent;
margin: 0;
padding: 0;
}

** The negative top value corresponds to the height of the navbar (48px in my design). This pushes the new target div up above the actual starting point of the x-section, so that the script scrolls the x-section to the bottom edge of the navbar.

(4) And, finally, the custom script for the two fixed buttons:

jQuery(‘.next-section-btn’).click(function() {
var target;
jQuery(‘.offset-section-target’).each(function(i, element) {
target = jQuery(element).offset().top;
if (target – 10 > jQuery(document).scrollTop()) {
return false; // break
}
});
jQuery(“html, body”).animate({scrollTop: target}, 850, ‘easeInOutExpo’);
});

jQuery(‘.prev-section-btn’).click(function() {
var target;
jQuery(‘.offset-section-target’).each(function(i, element) {
current = jQuery(element).offset().top;
if (current + 10 > jQuery(document).scrollTop()) {
if (i == 0){
target = 0;
}
else {
target = jQuery(‘.offset-section-target’).eq(i-1).offset().top
}
return false; // break
}
});
jQuery(“html, body”).animate({scrollTop: target}, 850, ‘easeInOutExpo’);
});

Submitted by: XAdmin
Custom CSS, Javascript

How to remove the border of mobile navbar menus.

.x-navbar {
-webkit-box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
}
.x-navbar .mobile .x-nav li>a {
border: none;
}
a.x-btn-navbar {
background-color: transparent !important;
box-shadow: none !important;
}

Submitted by: Dream Web Indonesia
Custom CSS

Change width of button outlines

/* button outline width */

.x-btn {
border-width:1px !important;
}

Submitted by: KCG
Custom CSS

Fade In Navigation

.x-navbar{
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:2s;
-moz-animation-duration:2s;
animation-duration:2s;
}
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

Submitted by: Donald McGuinn
Custom CSS

Visited Accordions Colour Change when Visited

add the following code under Customizer > Custom > Global Javascript:

jQuery(function($){
$(“.x-accordion-heading .x-accordion-toggle”).on(‘click touchend’, function(event) {
event.preventDefault();
if( $(this).hasClass(‘first-click’) ){
$(this).removeClass(‘first-click’).addClass(‘sencond-click’);
} else {
$(this).addClass(‘first-click’);
}
});
});

add the following CSS under Customizer > Custom > Global CSS:

.x-accordion-heading .x-accordion-toggle.sencond-click {
background-color: green !important;
color: #fff;
}

This will only change the state for the current page session.

Submitted by: XAdmin
Custom CSS, Javascript

Adding Skew before and after section.

1 – Give sections a class name
2 – Use this code to target the class
3 – Mess with the skew to get the slant you want
***Note****
 You target the first header section with a bottom slant, then each section after with a top slant. After that change bottom: 0 to top: 0 and changed the -2.5 to 2.5 to get the back and forth slant.

—-First Section Header—-
.firstsectionheader {
color: ‪#‎fff‬‬;
position: relative;
z-index: 1;
}
.firstsectionheader:after {
background: inherit;
bottom: 0;
content: ”;
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-2.5deg);
transform-origin: 100%;
z-index: -1;
}
—-Very Next Section—–
.sectionname {
background: ‪#‎41ade5‬‬;
color: #fff;
position: relative;
z-index: 1;
}
.sectionname:before {
background: inherit;
top: 0;
content: ”;
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(2.5deg);
transform-origin: 100%;
z-index: -1;
}
—-next section after—-
.nextsection {
color: #fff;
position: relative;
z-index: 1;
}
.nextsection:before {
background: inherit;
top: 0;
content: ”;
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-2.5deg);
transform-origin: 0 100%;
z-index: -1;
}

Submitted by: XAdmin
Custom CSS

Auto-collapse sibling menus in mobile menu

`jQuery(document).ready(function($) {
var closedMenuLink = $(‘.x-navbar .mobile .x-nav li.menu-item-has-children>a’);

closedMenuLink.click(function(e) {
e.preventDefault();
if ($(this).parent(‘.menu-item-has-children’).hasClass(‘open’)) {
$(this).parent(‘.menu-item-has-children’).removeClass(‘open’);
} else {
$(this).parent(‘.menu-item-has-children’).addClass(‘open’);
}

});
});

jQuery(document).ready(function($) {
var newClosedMenuLink = $(‘.x-navbar .mobile .x-nav li.menu-item-has-children>a’);

newClosedMenuLink.click(function(e) {
e.preventDefault();
$(this).parent(‘.menu-item-has-children’).siblings(‘.menu-item-has-children.open’).find(‘.sub-menu.collapse’).slideToggle(300);
$(this).parent(‘.menu-item-has-children’).siblings(‘.menu-item-has-children.open’).removeClass(‘open’);
});
});`

Submitted by: Bobby Bosler
Custom Javascript

Yet Another Related Posts Plugin (YARPP) Template for XTheme

Hi,

I am using YARPP for my site so I modified the default YARPP template to make it look more like the “Recent Posts” shortcode.

1. Use this code to replace the content of “yarpp-template-example.php”
2. Select “X Theme” as your YARPP template file.
3. Enjoy 🙂


<?php /* YARPP Template: X Theme Author: Roman Lifshits Description: X Theme YARPP template. */ ?><h3>Related Posts</h3> <?php $yarpp = “<div class=”x-recent-posts cf man” style=”text-align: right;” data-x-element=”recent_posts” data-x-params=”{&quot;fade&quot;:false}” data-fade=”false”>”; if (have_posts()) : while (have_posts()) : the_post(); $image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘entry-cropped’ ); $bg_image = ( $image[0] != ) ? ‘ style=”background-image: url(‘ . $image[0] . ‘);”‘ : ; $image_yarpp = ‘<div class=”x-recent-posts-img”‘ . $bg_image . ‘></div>’; $image_yarpp_class = ‘with-image’; $yarpp .= ‘<a class=”x-recent-post4 ‘ . $image_yarpp_class . ‘” href=”‘ . get_permalink( get_the_ID() ) . ‘” title=”‘ . esc_attr( sprintf( __( ‘Permalink: “%s”‘, csl18n() ), the_title_attribute( ‘echo=0’ ) ) ) . ‘”>’ . ‘<article id=”post-‘ . get_the_ID() . ‘” class=”‘ . implode( ‘ ‘, get_post_class() ) . ‘”>’ . ‘<div class=”entry-wrap”>’ . $image_yarpp . ‘<div class=”x-recent-posts-content”>’ . ‘<h3 class=”h-recent-posts”>’ . get_the_title() . ‘</h3>’ . ‘<span class=”x-recent-posts-date”>’ . get_the_date() . ‘</span>’ . ‘</div>’ . ‘</div>’ . ‘</article>’ . ‘</a>’; endwhile; endif; $yarpp .= ‘</div>’; echo $yarpp; ?>


 

Submitted by: Roman Lifshits
Custom PHP

Default X-theme breaking points

/* While there are 5 breaking points in responsive view in Cornerstone, only three are active by default in the theme. */

@media (max-width: 480px) {
}

@media (max-width: 767px) {
}

@media (max-width: 979px) {
}

Note that you don’t need media queries to hide individual elements in Cornerstone. You can use these classes. Just add them to elements, columns, rows… To hide on more widths, you can combine classes with a space between them. Put them into the Class field.

x-hide-xs | 480 & smaller
x-hide-sm | 481px to 767px
x-hide-md | 768px to 979px
x-hide-lg | 980px to 1199px
x-hide-xl | 1200px & up

(Since some people are marking this as “not working”, it may be that they are pasting “x-hide-xs | 480 & smaller” instead of “x-hide-xs”. Please make sure that you are pasting in the Class field of the element that you wish to hide, and only the class, not the pipe and the explanation.)

Submitted by: Miroslav Meduric Misho
Custom CSS

Replace hamburger icon with word ‘Menu’ UPDATED: 16th Oct 2016

/* Replace hamburger icon with word ‘Menu’ – ALL stacks */
.x-btn-navbar i:before {
content: “Menu”; /* Your Choice of Words */
font-family: “Raleway”,sans-serif; /* font-family is required for this snippet to work – Remember to change to your preferred font */
font-size: 24px; /* Choose your font-size */

}

Submitted by: KCG
Custom CSS

Add word ‘Menu’ after hamburger icon – Updated Oct 2016

/* Add word ‘Menu’ after hamburger icon – ALL stacks */
.x-btn-navbar i:after {
content: “MENU”;
font-size: 24px;
padding-left: 12px;
}

Note: It is possible when copying directly from and inserting directly to your Styles sheet the quotation marks around Menu may need to be replaced.
At least that made the code work for me. Rick M

Submitted by: KCG
Custom CSS

Right align logo in Header in stacked layout

/*  Right align logo in Header in stacked layout  */
.x-logobar {
text-align: right;
}

Submitted by: K Cooper
Custom CSS

Left align logo in header in a stacked layout

/*  Left align logo in header in a stacked layout  */
.x-logobar  {
text-align: left;

}

Submitted by: K Cooper
Custom CSS

Sticky Mobile Navbar

/*  Make the nav bar sticky at the top on mobile  */

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}

Submitted by: TK
Custom CSS

Make button text have no shadow

/* remove shadow on button font */

.x-btn, .x-btn:hover, .button, .button:hover, [type=”submit”], [type=”submit”]:hover {

text-shadow: none;  }

Submitted by: K Cooper
Custom CSS

Make head transparent

/* this code for sure works on RENEW stacks, not sure about others */

 

.xlogobar { backgroundcolor: transparent; }

.xmain.full { backgroundcolor: #fff; }

.site { backgroundcolor: transparent; }

Submitted by: Andrew Muller
Custom CSS

Styling Accordions

/*Style every aspect of the Cornerstone Accordion element*/

/*heading color – collapsed*/
.x-accordion-heading .x-accordion-toggle.collapsed{
Background-color:#DC143C;  color:#fff;
}
/*heading color – open*/
.x-accordion-heading .x-accordion-toggle{
Background-color:#4682B4;  color:#fff;
}
/*heading hover text color*/
.x-accordion-heading .x-accordion-toggle.collapsed:hover, .x-accordion-heading .x-accordion-toggle:hover{
color:#32CD32;
}
/*accordion body colors*/
.x-accordion-inner{
background-color:transparent;color:#fff;
}
/*icon color – open*/
.x-accordion-heading .x-accordion-toggle::before {
color:#FFD700;
}
/*icon color – collapsed*/
.x-accordion-heading .x-accordion-toggle.collapsed::before {
color:#4B0082;
}

Submitted by: Miroslav Mišo Medurić
Custom CSS

Hide X menu button from nav bar on mobile

/*Hide X menu on mobile*/
.x-btn-navbar, .x-nav-wrap.mobile {display: none !important;}

Submitted by: Piccia Neri
Custom CSS

Hide X menu from nav bar on desktop

/*Hide X menu on desktop*/
.masthead-inline .desktop .x-nav {
display: none;
}

Submitted by: Piccia Neri
Custom CSS

Real Boxed Layout On Top

/* turn top of site into boxed layout */

.site, .x-navbar.x-navbar-fixed-top.x-container.max.width {
margin-top: 50px;
}

/*for example see georgemullerauto.com. Creates space on top of site for background to show through. Used on Renew stack */

Submitted by: Andrew Muller
Custom CSS

Show and hide certain sections based on button click

Make sure to add the class section-expandable and id #services to your section
Then add services-trigger-button as ID of your button.

jQuery(document).ready(function($){
$(‘#services.section-expandable’).slideToggle(0);
$(‘#services-trigger-button’).on(‘touchend click’, function(){
$(‘#services.section-expandable’).slideToggle( “slow” );
});
});

Submitted by: Donald McGuinn
Custom Javascript

Transparent Nav Bar with Slider Behind

.masthead-inline .x-navbar,
.masthead-inline .x-navbar .sub-menu {
background-color: transparent !important;
position: absolute;
width: 100%;
}

Step 1.) Make a slider and set it as “Below Masthead”

Step 2.) Add this style to your Custom CSS

Step 3.) Make sure you header is “Inline” and not “Stacked”.

Submitted by: Donald McGuinn
Custom CSS

Image Below/Attached to Nav Bar

.x-navbar:after{
background: url(YOUR IMAGE URL HERE) repeat-x;
content: “”;
display: block;
height: 60px;
padding: 10px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}

This custom CSS allows you to put a repeating image below the navbar or just have a basic image that spans across.

You may have to adjust the “height” to fit the height of your image and possibly the width.

I also had to add a margin to the top of the first container on my pages.

Submitted by: Donald McGuinn
Custom CSS

Hide Sidebar on Search Results Page

/* Hiding Sidebar on Search Results Page */
.search-results .x-sidebar {
display: none;
}
.search-results .x-main {
float: none;
width: 100%;
}
.search-no-results .x-sidebar {
display: none;
}
.search-no-results .x-main {
float: none;
width: 100%;
}

Submitted by: Rob Webster
Custom CSS

Remove Sidebar From Blog Category Pages

/* Removing Sidebar From Blog Category Pages*/
.archive.category .x-main {
width: 100%;
}
.archive.category .x-sidebar {
display: none;
}

Submitted by: Rob Webster
Custom CSS

remove Sidebar from Post

/* Removing Sidebar From the Single Post */
.single-post .x-main {
width: 100%;
float: none;
}
.single-post .x-sidebar {
display: none !important;
}

Submitted by: Rob Webster
Custom CSS

Turn the first 10 icons in the icon list into NUMBERS!

.x-icon-500px:before {
content: “1”;
}
.x-icon-adjust:before {
content: “2”;
}
.x-icon-adn:before {
content: “3”;
}
.x-icon-align-center:before {
content: “4”;
}
.x-icon-align-justify:before {
content: “5”;
}
.x-icon-align-left:before {
content: “6”;
}
.x-icon-align-right:before {
content: “7”;
}
.x-icon-amazon:before {
content: “8”;
}
.x-icon-ambulance:before {
content: “9”;
}
.x-icon-anchor:before {
content: “10”;
}

Submitted by: Michael Burton
Custom CSS

Custom Icon List Icon

.x-ul-icons li i:before {
content: url(http://url/of/your/icon/image/);
}

Submitted by: Donald McGuinn
Custom CSS

Hang your logo below the Navbar (Only when inline)

@media(min-width: 768px) {
.x-navbar .x-brand {
position: absolute;
top: 0;
left: 0;
z-index: 1100;
}

Submitted by: Robert M
Custom CSS

Show / Hide sections of text

Add this id to the text you want to hide
<p id=”toggleMe”>Look, I’m a fascinating bit of text…</p>
Then add this to the custom JS for the page in cornerstone
var toggleMe = document.getElementById(‘toggleMe’);
var toggleContent = ‘<span onclick=”toggleIt();” class=”toggleLink”>Click to hide</span><br />’+toggleMe.innerHTML;
var toggleMsg = ‘<span onclick=”toggleIt();” class=”toggleLink”>Click to read more</span>’;
function toggleIt(){
if (toggleMe.innerHTML!=toggleMsg)
toggleMe.innerHTML = toggleMsg;
else toggleMe.innerHTML = toggleContent;
}
toggleIt();

The text will start hidden. This will only work for a single paragraph of text.

Submitted by: Robert M
Custom Javascript

Left Align Top Bar Social Icons

.x-topbar .x-social-global {
float: left;
}

Submitted by: Donald McGuinn
Custom CSS

Sub Menu Background Color

.x-navbar ul.sub-menu{
background: XXXXXX !important;
}

Submitted by: Donald McGuinn
Custom CSS

Image Behind Logo Bar

.x-logobar {
background: url(https://your/image/url/115/115/) no-repeat center;
background-size: auto 100%;
}

Submitted by: Donald McGuinn
Custom CSS

Hide Yellow Category Counter for Woocommerce

.count{
display: none;
}

Submitted by: Donald McGuinn
Custom CSS

Right Align Top Bar Text

.x-topbar .p-info {
float: right;
margin-left: 10px;
}

Submitted by: Donald McGuinn
Custom CSS

Add Logo to Under Construction Page

jQuery(document).ready(function($){
$(“.x-under-construction h1”).html(“<img src=’https://path/of/your/logo.png’ alt=’logo’ /><br><br><span>Jacob</span>”)
});

Submitted by: Donald McGuinn
Custom Javascript

Skew a section and keep the content straight

/* Skew a section */
.skew-box {
-moz-transform: skewY(-2.5deg);
-ms-transform: skewY(-2.5deg);
-o-transform: skewY(-2.5deg);
-webkit-transform: skewY(-2.5deg);
transform: skewY(-2.5deg);
margin:-2% 0!important;
}
.skew-box> *{
-moz-transform: skewY(2.5deg);
-ms-transform: skewY(2.5deg);
-o-transform: skewY(2.5deg);
-webkit-transform: skewY(2.5deg);
transform: skewY(2.5deg);
}
Add class skew-box to the section, and place the CSS in the Cornerstone CSS editor if you use it only on one page, or place it in the Child theme’s style.css if you use it site-wide.
This method targets all direct children of the section (rows) to revert them back. Check if margin 2% needs adjusting in your case.

Note that lines may look jagged when skewed. To avoid this, add a border the same color as the neighboring section above and below the skewed section, like this;

border-top: 1px solid white;
border-bottom: 1px solid white;
(add the borders to the style-box of the skewed section). (Thanks Robert Mongomery for the smoothing tip).

Submitted by: Miroslav Mišo Medurić
Custom CSS

Remove Menu Oval Outlines – Icon Stack

/* Remove Menu Oval Outlines – Icon */
.x-navbar .desktop .x-nav>li>a>span {
border:0;
}

Submitted by: KCG
Custom CSS

Remove Menu Underlines

Add to customiser not css editor
/* Remove menu item underlines */
.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: none;
}

Submitted by: KCG
Custom CSS

Hidden Email Addresses

Add this code to your javacript editor:

jQuery(document).ready(function($) {
var $appendmail = $(‘.appendmail’);
if ( $appendmail.length ) {
var username = “someone”;
var hostname = “somewhere.com”;
var linkemail = username + “@” + hostname;
var linktext = “Send a Message”;
$(“<a class=’hiddenemail’ href=’mailto:” + linkemail + “‘>” + linktext + ” </a>”).appendTo( $appendmail );
}
});
Place this code on page where you want the email address to be:

 <span class=”appendmail”></span>

The class used in the link script ‘hiddenemail’ is there so you can style the link with CSS how you choose (should you choose).

This has been tested on Renew and works. It should work on all X Stacks. That said if you make changes to the code it may not work as expected.

Submitted by: KCG
Custom Javascript

Inline Footer Images

/* Inline footer images */

.x-colophon .inline-images img {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
}

Submitted by: K Cooper
Custom CSS

Add Code to Footer in X Theme

Add the following code to the functions.php file of your child theme:

function my_custom_footer_output() {
?>
…replace with required code…
<?php
}
add_action( ‘wp_footer’, ‘my_custom_footer_output’, 99999 );

Submitted by: K Cooper
Custom Javascript

Add Code to Header in X Theme

Add the following code to the functions.php file of your child theme:

function my_custom_head_output() {
?>
…replace with required code…
<?php
}
add_action( ‘wp_head’, ‘my_custom_head_output’, 99999 );

Submitted by: K Cooper
Custom Javascript

Add Shadow to Text

/* Add shadow to text */
.txtshadow { text-shadow: 1px 1px #ddd; }

Submitted by: K Cooper
Custom CSS

Add Copyright and auto date

/* Customisable Copyright and auto change date */
&copy; 2016<script>new Date().getFullYear()>2015&&document.write(“-“+new Date().getFullYear());</script>, Company.

Which will give you:
© 2016-2016, Company

Remember to change company to something of your choice.

NOTE
If you are starting out with the current year (2016 is current) then the highlighted year should be the year BEFORE the current year. If your company started before 2016 you can change this highlighted year to the start Year.

Submitted by: K Cooper
Custom Javascript

Border on Bottom of Navigation

/* Border on Bottom of Navigation */
.x navbar {
border-bottom: 2px solid white;
}

Submitted by: Donald McGuinn
Custom CSS

Footer Background Image

/* Footer Background Image */
.x-colophon.bottom {
background: url(https://path/of/your/logo.png) no-repeat center;
background-size: auto 100%;
}

Submitted by: Donald McGuinn
Custom CSS

Customize Scroll to Top Anchor

/* Customize Scroll to Top Anchor */
.x-scroll-top { color: #f37121; }
.x-scroll-top { border: 2px solid #f37121; }

Submitted by: Donald McGuinn
Custom CSS

Center Images

/* Center Images */
.image-center {
display: block;
margin-left: auto;
margin-right: auto;
}

Submitted by: Donald McGuinn
Custom CSS

Change Color of Menu Item

/* Change Color of Menu Item */
#menu-item-XX a {
background-color: #000000;
color: #ffffff;
}

Submitted by: Donald McGuinn
Custom CSS

Left Align Stacked Logo

/* Left Align Stacked Logo */
.x-logobar { text-align: left; }

Submitted by: Donald McGuinn
Custom CSS

Change header font sizes

/* Change h tag sizes and spacing */
h1, .h1 { font-size: 35px; margin-top: -25px;}
h2, .h2 { font-size: 28px; padding-bottom: 15px;}
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 10px; }

Submitted by: Karen C.
Custom CSS