Videos and Useful Tutorials

Here are a just few of some really excellent videos on X theme and Cornerstone. If you have a tutorial video or link you would like to share on this page, please get in touch.

Cornerstone Seperators!

A short video tutorial from Donald McGuinn explaining how to add separator effects between page sections using Cornerstone.

https://www.youtube.com/watch?v=KOe5WaBuM_s&t=6s

Build a Sticky Header in X Pro

Donald McGuinn shows us how to build a sticky heady using the new tools in X Pro. And as a bonus, adds a few nice tricks in too.

https://www.youtube.com/watch?v=R7QYFLfjPxQ&t=12s

Hero Headers with a Video Background using X Pro

Donald is back with a helpful video tutorial explaining how to build a full height header using a video background.

https://www.youtube.com/watch?v=xD7DaIXrvOg&t=3s

X Pro Header builder and Template Options

Our own Donald McGuinn explains how to use the new header and footer builders in X Pro. And how to get the most from the template options built into the theme.

https://www.youtube.com/watch?v=Cxn0MAGntLY&t=44s

Upgrade from X Theme to X Pro

This video by Donald McGuinn shows you how to upgrade your X themed WordPress site to the new X Pro theme.

https://www.youtube.com/watch?v=Imsbzsvg63k

Donald was working specifically with X v4.6.4 moving to X Pro v1.0.4

Replace Default Archives Page Using ‘The Grid’ Plugin

This great tutorial from Ian Izaguirre explains in clear, easy steps, how you can customise your archives page using the ‘Grid’ plugin which comes packaged with X.

http://izaguir.re/how-to-replace-x-theme-index-pages-using-the-grid-plugin/

Cornerstone Tips & Tricks

A collection of Tips and Tricks from 10X Layouts

https://10xlayouts.com/tutorials/

Cornerstone Video Tutorial

An introduction Cornerstone 1.1.3. This tutorial is aimed for beginners, but even if you’re an experienced Cornerstone user you may pick up a few things. We go over the layout and every sections.

https://www.youtube.com/watch?v=z1u4Ey3pYjM

Cornerstone – How to use it

CornerStone, a standalone plugin for WordPress with a custom tailored, 100% Drag and Drop Frontend interface for building pages and posts with personal and custom integrated shortcodes.

https://www.youtube.com/watch?v=skiA0Naiq_0

Utility & Helper Classes and how to Use Them

The various X Theme Helper/Utility Classes and how to best use them to improve your workflow with Cornerstone and X.

https://www.youtube.com/watch?v=RceKp6qgQfo

X Theme Extensions for Beginners

A brief overview of X Themes plugins. This video is meant to give you a basic understanding of what the over 20 X Theme Extensions do and how to use them.

https://www.youtube.com/watch?v=TYZyikLdtSg

Introduction to X Theme and Cornerstone for WordPress

Create beautiful websites using X Theme and Cornerstone with WordPress.

Instructed by Jerad Hill Design / Web Design

Visit the page

Introduction to
X Theme and Cornerstone for WordPress

Create beautiful websites using X Theme and Cornerstone with WordPress.

Instructed by Jerad Hill Design / Web Design

Visit the page

Fancy Floating Contact Button

One of the easiest ways to convert a visitor to your page is through a contact page. Unfortunately not all visitors are willing to look around your site for the appropriate link. Why not just make it easier for them with a floating vertical button.

This is very simple, clean, and easy to implement no matter what platform you are on. Here we will strictly use HTML5 and CSS3 to achieve our goal. One of the nice things about the floating navigation bar is it even works great on mobile. So lets jump right in and create a floating navigation button.

Note: These instructions will be using Cornerstone, but can the button can be easily achieved in Visual Composer or on any other site.

We need to start off by locating the pages that we would like to add the button. In some cases you may want to add the button to every single page, but we will be doing this on a page by page basis. for this example we will be adding the button to the home page of a website.

First thing is first, we will need to add a Raw Content block. This will allow us to add our HTML to the page. It really doesn’t matter where you place the Raw Content block since we will be controlling the position later on I like to place it as far to the top of the page as possible as to not interfere with the rest of the layout in Cornerstone.

Add a raw content block to cornerstone

Once you have the Raw Content block added to your page, we will add the HTML for our button. Click on the Raw Content in Cornerstone, and in the left-hand options panel add the following HTML:

<div class="contactUs-float" >
<a href="#" alt="contact us for your next web job">Contact Us</a>
</div>

If we break this down we can see that we have created a div (container) called “contactUs-float”. Inside that container we added a link that says “Contact Us”. For right now this is all of the HTML that we will be creating. Pretty simple right? Right now it doesn’t look correct, but that’s where the CSS will come in.

code to add a floating button

There are a few ways that we can add the CSS for our button. If you are using the button on multiple pages I would suggest adding the CSS to the Customizer under Custom. For the purpose of this tutorial I will be adding the CSS to the “Custom CSS” tab in Cornerstone for this page only. So let’s head over there now, click on Custom CSS under Settings in Cornerstone.

custom css for floating button

 

Let’s start by adding some color and positioning to the and color to our button with this code:

.contactUs-float {
background-color: #25adda;
float: right;
}

This will give our button a blue background color and will force the botton to move to the right side of our screen. Feel free to play around with the background color to match your site’s color pallet.

contact button unstyled

Next we are going to rotate our button 90 degrees and set the location that the rotation will occur making the button vertical and then setting a z-index  to make sure the button stays on top of all other elements on the page:

transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform-origin: right top 0;
-webkit-transform-origin: right top 0;
z-index: 999;

setting your contact button vertical

Now we need to force the button all the way to the edge of the screen by fixing the position of the button and assigning the location on the screen. These values can be modified to your liking:

position: fixed;
right: 0;
top: 476px;

You should now have a button that is located all the way to the right side of your site. Now we need to add more style to the button. If we wanted to this would work as it is, but we want it to be fancy. We will do this by styling the link that is located within the contactUs-float container:

.contactUs-float a {
color: white;
float: right;
font-size: 20px;
line-height: 28px;
letter-spacing: 2px;
padding: 15px 20px 16px;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
}

So what is this going to do? Let’s go over the code line by line. First we are going to set our link color to white (color: white) just in case our default link color doesn’t work. Float: right is going to push our link to the right of the container.

    • Font-size is going to adjust the size of our font (pretty self explanatory).
    • Line-height is going to control the leading of the link text.
    • Letter-spacing will allow us to control the kerning of our link text.
    • Padding is going to control how large the actual button is going to be.
    • Text-transform is going to force all of our text to be uppercase.
    • Finally font-family is going to adjust the font of the link text if we want it to be something different than the default site text.

Side note on the font family, if you are planning on using a Google Font you need to make sure that your site is calling on it via @import or <link>. If your do not, this font-family rule will not work.

styled vertical button

We are almost done with the first part of the button. From here we are going to add a a hover effect. This is by no means necessary, but it makes the button look much nicer. We will need to create a new rule in our CSS that applies to the link inside the contactUs-float container and will be triggered when you hover over it. This is called a pseudo-class.

.contactUs-float:hover {
background-color:#1d83a5;
}

The hover effect is a little bit harsh and sudden. So let’s add one more style to the .contactUs-float class to implement a smooth transition. This will force the background to ease from one color to another over .5 seconds. This can be changed to whatever speed you would like:

.contactUs-float {
transition: background-color .5s ease 0s;
}

Technically we could done done right here, but the only problem is this button doesn’t really work for mobile. In my original version on smaller screens I just completely hid this button so I didn’t have to deal with finding a resolution. This really didn’t work, so the fix I came up with was to completely dump the text and implement the icon set that X comes prepackaged with. Here is how you can optimize the button for smaller screens.

First we are going to need to jump over to our Raw HTML element on our page. We need to identify that we will only be using this link with the words “Contact Us” on larger screens. We accomplish this by adding a descriptive class.

<a class="lgscreen" href="#">Contact Us</a>

Next inside the same contactUs-float container we need to add a second link. This may seem strange now, but it will make sense shortly. We will add link that goes to the same exact destination as the original link but instead of text inside the anchor tag (<a></a>) we are going to add an XTheme icon. We will also need to add a class that identifies this will be the link used on smaller screens. Here is the code:


 <div class="contactUs-float" >
  <a class="lgscreen" href="#" alt="contact us for your next web job">Contact Us</a>

  <a class="smscreen" href="#" alt="contact us for your next web job"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a>
</div>

If you would like to use a different icon, you will need to change the “x-icon-_____” part of the code. A list of the icons can be found here.

contact bar setup for mobile

We now are going to use those classes that we created to setup our button for different screen sizes. We will be doing that with what is called a media query (@media). This will act as a stylesheet within our CSS that only applies to specific screen widths.

We now need to jump back into our Custom CSS under the options tab. First we are going to use the .smscreen (mobile link) class and hide this link. It will cause the icon we have added to disappear. Don’t get scared, this is supposed to happen:

.smscreen {
display:none;
}

Next we will need to create a media query for small screens. I have chosen to set the break point for screens to be at 1024px. This can be anything you would like, and it will vary for your site so you will need to play with this for your specific layout.

@media (max-width: 1050px){

}

What we are essentially doing here is saying any window that is 1050px and under will utilize these specific styles, screens that are larger will ignore these styles. This is the core of creating a responsive site that works across all devices. Now inside this new media query we are going to add a series of rules for the .lgscreen and .smscreen classes. The first one will be to hide the .lgscreen class causing the “Contact Us” link to disappear.

@media (max-width: 1050px){
.lgscreen {
display:none;
}
}

This is going to look rather strange since there looks to be extra curly braces but they are completely necessary, we have a style nested within a style (INCEPTION). After you have added the rule to hide the .lgscreen class we need to force our .smscreen class to appear, display inline, rotate the icon by 270 degrees, and add padding to the icon to give ourselves some size to the button.

@media (max-width: 1050px){
.lgscreen {
display:none;
}
.smscreen {
display:inline !IMPORTANT;
-webkit-transform: rotate(270deg) !important;
transform: rotate(270deg)!important;
padding:15px !important;
}
}

If at anypoint you decide that you just don’t need the button on mobile, you can just replace all of the CSS inside the media query with a .contactUS-float{ display: none !important;} and the button will hide for those smaller devices.

final mobile vertical contact button

Final HTML:


 <div class="contactUs-float" >
  <a class="lgscreen" href="#" alt="contact us for your next web job">Contact Us</a>

  <a class="smscreen" href="#" alt="contact us for your next web job"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a>
</div>

Final CSS:

.contactUs-float {
    position: fixed;
    background-color: #25adda;
    float: right;
    transform-origin: right top 0;
    transition: padding 1s ease 0s, background-color .5s ease 0s;
    transform: rotate(90deg);
    top: 476px;
    z-index: 999;
    right: 0;
    -webkit-transform-origin: right top 0;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.contactUs-float a {
    color: white;
    float: right;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 2px;
    padding: 15px 20px 16px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
}

.contactUs-float:hover {
background-color:#1d83a5;
}

.smscreen {
  display:none;
}

@media (max-width: 1050px){

  .lgscreen {
    display:none;
  }
  .smscreen {
    display:inline !IMPORTANT;
     -webkit-transform: rotate(270deg) !important;
    transform: rotate(270deg)!important;
    padding:15px !important;
  }
}

About the Author

Martin Mosley

Transition One Image into Another

If you have an “our employees” section on your website and would love to add a little bit of flare, why not integrate a basic image rollover? That’s what we are going to be doing today. I will be using the WordPress and the XTheme from Themeco to build a basic employee page with image rollovers.

What will you need?

  • Photoshop
  • XTheme
  • Cornerstone

Let’s get started.

I won’t be getting into setting up WordPress or XTheme, that’s for a totally different “How-To”. We are going to go straight into the page build. The first thing you need to do is create a new page, and begin editing it with Cornerstone.

cornerstone

Create a New Section using the panel on the left-hand options bar. This will create a new section that we will be able to use to add our company employees.

create a new section in cornerstone

Click on the new section that you just created. Right now mine is called Section 1, but this can be renamed to make it easier to locate later on down the road. I highly suggest naming each section, it will save you the headache of digging for the correct section. Once you have selected the section, break it into however many rows you would like. For this demo I am going to be using 4 rows.

set your number of columns in cornerstone

Now click the Element option on the left-hand options pane. Then type in the letters “img” or locate the image element from your available built in elements. This is where we are going to add our employee picture. You will need to place an image in each row, but for now we will just start with the first row.

add an image in cornerstone

Once you have located the Image element, drag it into your first row. This will leave you with the Image icon in that row. Click the Image icon in the Cornerstone preview window to open the Image options. This is where you will add your employee image as well as make a few CSS changes.

setup your image in cornerstone

Now we will be uploading the 2 images that we will be using for each of our employees, a main image and a secondary. I will be using a random stock photograph of a man and an image of a camera. I will name this man Gregg Clickycam and he will be my new “Head of Photography”. Feel free to use any photographs that you would like. We will add our images by selecting the box with the + that appears under the word “SRC”. Select your images from your computer (or if you already have them uploaded pick the first one from the library. I do not have either uploaded so I will add them both now. Once they have made their way back up to the server. Before we add this image to our page you will need to click the secondary image and copy the URL. You will need this later on.

upload you image to cornerstone

Finally select the main image that you would like to use, then select “Insert Into Post” at the bottom of the uploader.

NOTE: be aware that both of these images will need to be the same exact size. My images are 500×281. If you end up using mismatched images, your end product will look strange and sloppy.

add you image to the media library in wordpress

If everything was done properly you should now have your image displaying in the Cornerstone preview window. Now we will need to begin working on making a few changes to our CSS. Do not fear the CSS for it is your friend. We want to start off by adding a new class to our image. This class will be added to all of our employee images. You can any name that you want to identify that these images will rollover to another image. I will be using “roll-over” for my class name. This name needs to be added to the “class” field for this image. Simply click the image, scroll down on the left-hand options pane until you locate the class field. Enter your class name.

add a rollover class to your image in cornerstone

Now this class isn’t going to do anything until we add a few CSS rules for it. Click on the Settings tab on the left-hand options pane (it looks like a gear) and choose “Custom CSS”. This will open the Custom CSS panel where you will enter all of your image’s style controls.


.roll-over {
  opacity: 1;
  transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
 
.roll-over:hover {opacity: 0; }

The first bit of code is going to set the opacity for our employee image (opacity: 1). Next it is going to add an ease in and ease out fade (transition: opacity .25s ease-in-out). The second line that begins with -webkit that resembles the line above it is going to add the same functionality to older browsers that do not support CSS3.

The next section of code will cause the image to trigger an opacity of 0 (not visible) when the user hovers over it. Once you have entered all of this code, save your work. If everything worked correctly, now when you hover over your employee photo, it will disappear with a transition and reappear when you remove the cursor.

 

Next we will need to add the image that this image is going to transition into. We will be doing this by actually adding it as a background for the container that this image is sitting inside. Earlier you were instructed to make note of the URL for the secondary image, if you forgot to, you will need to get into your Media Library and copy it to your clipboard.

Now we will need to add a few styles directly to the Column that our Image is in. To do this click the image, then at the top of the left-hand options pane choose where it says “Column”.

select the image column to add css

Once in the Column options, scroll to the bottom of the options pane and locate the “Styles” field. We will be adding styles directly to the Column. We do have the ability to add it in the Custom CSS editor like we did with the class styles for .roll-over but this is a little bit easier. Within the Styles field we will need to add:

background: url(location_of_your_secondary_image.jpg); background-position: top center; 
background-size: 100%; background-repeat: no-repeat;

So what did all of that CSS do? The first piece of background: url() tells WordPress where the actual background image lives on the server. Background-position: top center is going to force our background to the top of the Column and align it dead center.Background-size:100% is going to fill the background to 100% of the Column. Finally background-repeat: no-repeat us going to force the background to not repeat. If everything went as planned you now should have an image that when you hover transitions from your employee to the secondary image.

 

To close out our employee section let’s just add a simple “Custom Heading” and “Text” element below the image. Here I will add the employee name as well as their title. If you would like to setup your text like mine, follow these steps:

  • Set Custom Heading element to “Appear as H4”
  • Center Align the Custom Heading
  • Give the Custom Heading a class of “man”
  • Center Align your Text element
  • add man to the class of your employee image
  • Click on your image and add 10px of padding to the bottom of the employee image

We are all done, we now have a really clean and simple employee page that implements a rollover with a transition. You can just duplicate the first image and replace the primary image. We will need to copy and paste the Column styles from the first image to every other image and then replace the URL for the background image.

Image with rollover completed in cornerstone

About the Author

Martin Mosley

Responsive Text

In this Cornerstone Tutorial I explain the much questioned ‘Responsive Text’ feature – and how to use it. With this setting we can make our Headlines not only mobile responsive but responsive for ALL screen sizes with just a couple clicks. We also explain how to generate the shortcode for Responsive Text, and the best practice for using that code in X-theme and Cornerstone.

Hope you find it helpful!

https://www.youtube.com/watch?v=MG3Hn-PUkiA

(Submitted by: Nick Smith of Visual Simplicity)

How to move your site around for development

Making coding changes to a live site can never be a good idea. Here is a tutorial explaining how to move a live site to a local environment, to a staging environment and back to the live site after code changes have been tested.

WordPress 3 Environment Workflow

Fixing Cornerstone + Cloudflare related issues

With Thanks to: ALEJANDRO SANCHEZ

I’ve been wanting to make this doc for a long time but I’ve been working like crazy lately and haven’t had the chance to write it down until now. I suppose today’s the day so let’s give this a try 😉

CLOUDFLARE + CORNERSTONE what a pain in the ass, right? well, it doesn’t have to be.
Most of the time the ROCKET LOADER feature is the “culprit” of all this mess but hey, don’t give it (or cornerstone) a hard time, rocket loader is still a BETA feature for a reason and cornerstone uses JS, so it’s obviously affected by RL’s optimization algorithm (that’s why it’s not working for you), it’s nobody’s fault.
Most (if not all) of the time, though, these issues are easily fixed and I’m here to point you in the right direction!

Enough with the writing, though, let’s cut to the chase:
PROBLEM: cornerstone’s infinite loop when CloudFlare is active
This is due to CloudFlare’s Rocket Loader feature so you can…

Solution #1 (Recommended): Add one of these page rules to deactivate Rocket loader and pretty much all of cloudflare’s features on a specific page (or type of pages):
*yoursite.com/*?cornerstone*
*yoursite.com/*/*?cornerstone*
*yoursite.com/*/?cornerstone*
*yoursite.com/*/?%2A&cornerstone*
*yoursite.com/?%2A&cornerstone*

replace the %2A with an asterisk ( * ) and “yoursite.com” with your site’s URL WITHOUT the HTTP:// or WWW part
But… which one should you use? most of the time the first, second or the last one will do (the fourth one works if your WP install is in a subdirectory). the way to know for sure is to take a look at your URL once you open cornerstone and check your permalink structure. This is a screenshot of one of my sites’ cornerstone URL: http://prntscr.com/bn8pcm as you can see the structure fits the third example. Now you know which page rule to use, but what about its configuration? well, this hugely varies but i like to disable everything in there, so i bypass the cache, disable performance and also disable Rocket Loader.
Now, this is not a one-fits-all solution. There are many cases that require a “custom” page rule but it will probably fix your problem if you add the right one (or ones). feel free to ask me if you’re not sure of what page rule to add, just send me a screenshot like the one above and I’ll give it to you as soon as i can.
Solution #2: Try deactivating ROCKET LOADER and wait for at least 15 min before trying to access cornerstone again. Remember to clean your site and browser cache to avoid unnecessary headaches.