Transparent Fixed Header (Opaque on Scroll)

Michael BourneUpdated:


It’s not uncommon to see X users make their navbar transparent, but what about a transparent fixed header that stays transparent while passing over your hero image and turns to opaque for the remainder of the page? As it turns out, it’s not hard to achieve. We just need to use a little bit of custom CSS and jQuery. Getting started To begin this specific example, we will be using an inline header layout. In the customizer, we have set the navbar background to transparent and the link colours to … Read More

CSS Helper Classes

Michael BourneUpdated:


X Theme comes with dozens of preset CSS classes that are sure to speed up your development. Have a look through to see how they work. The structure is set as follows: [table id=2 /] The structure is set as follows: [table id=1 /] Font weight classes are great for adding quick and easy variation toy our website’s text. Important to note that not all fonts have all the variations. [table id=3 /] Sometime you will need to hide elements from specific screen sizes. And although some elements have built … Read More

Flexbox Flip Card Grid

Michael BourneUpdated:


A few weeks back, an X user was asking about making his flip card grip responsive, as well as clearing up issues with text size forcing the flip cards to extend past their parent container. I took his layout and made it into a flexbox, allowing for full fluidity and responsiveness. The setup on this one is quite simple. Create a new section containing a single row and column, and give that column the custom class flexcards. Inside this column, place as many flip card elements as you need. The … Read More

Responsive Cornerstone Timeline

Michael BourneUpdated:


Time and time again I see X users asking about creating a timeline in Cornerstone. Truthfully, there are plenty of free and premium plugins that can do this. But what about users that prefer to not use a plugin? Well, how about a simple, clean, and responsive timeline using only Cornerstone and CSS. That’s what I have made here. Your first step is to create a new section in Cornerstone. For each row, split into two columns and disable marginless columns in the row settings. The setup is simple: in … Read More