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.

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(“//”); } 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 and Alejandro Sanchez

Center footer widgets


To Center all the footer widgets, regardless of number add the following CSS to your Child Theme style.css .x-container .x-column img {float: none !important;} .x-container .x-column {text-align: center;} .x-colophon .inline-images img { display: inline-block; left: auto; right: auto; }

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 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; } a:before { background-color: #cdcdcd; opacity:0.25; } .woocommerce-account .button { font-size: 90%; margin-right: 5px; border-radius: 0px; padding: 5px 10px; … Read More

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); }

Customize the wp-login page

Miroslav Meduric

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 { … Read More

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); }

Edit Focus Border

Martin Mosley

Remove focus border surrounding buttons on click. .x-btn:focus, .button:focus, [type=”submit”]:focus { outline: none !important; }

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….

Horizontally Centre Footer Widgets Inside Container


This works on 3 or less widgets, have not tried 4 as yet. .x-container .x-column img {float: none !important;} .x-container .x-column {text-align: center;}