Icon sidebar for unique page, not entire site

Let us know how it goes!

Do we have any control on the post layout with X theme? I mean removing things like comment bar at the bottom at the entire website level? I mean like “blog settings” where we can choose to remove title and date by default?

Hi Pierre,

There’s no such setting to remove blog title by default as it will be a standard to include. You can use custom CSS rule to remove the blog title. Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area.

.single-post .entry-title {
    display: none;
}

To remove meta information such as date under the blog title, head over to X -> Theme Options -> Blog -> Content area and disable post meta.

To disable comments, please follow this post (https://theme.co/apex/forum/t/how-to-disable-comments/50475/2?u=mldarshana).

Hope that helps.

Ok gotcha.

One more thing, when activating the sidebar layout in either a normal page or a post, the actual content doesn’t adjust with the width of the sidebar. The sidebar cover the content area.

Is that a normal behavior?

Actually my section was content-stretch. Nevermind.

However, is there a way that the side bar sits on top of the page when in mobile mode? (instead of bottom)

Hello Pierre,

Thanks for updating the thread. :slight_smile:

You can take a look at solution shared in following thread:

Thanks.

Ok, the CSS doesn’t seems to have any effects.

I’m sorry but I come from WPbakery builder and for some reason I can’T have a standard full-width without margin row in your system. I don’T get it. I always have a stupid white margin all around the main wrapper.

Ok I think WPBakery is not working well with Cornerstone, it’s putting the code into it’s own rows. I have disabled WPBakery.

How can I make a full height section? Taking full height of the screen?

Hello Pierre,

The section height depends on the height of the columns. To have a fullscreen section, you must set a minimum height of the column. Please click on of the columns in the section, find the “Customize” tab in the column settings and insert an inline element css:

$el {
  min-height: 100vh;
}

We would love to know if this has worked for you. Thank you.

Ok cool that works, now how do I vertical align to the middle my element withtin that full height section?

Hey Pierre,

By default, all elements will be positioned to the top left of the column. You can only have vertical align at the middle by enabling the Marginless Column option first which can be found in your row settings. Once it is enabled, you can update the previously given css into this:

$el {
  min-height: 100vh;
  vertical-align: middle;
}

Please let us know if this works out for you.

The vertical align css doesn’t work, I’ve applied to the section. The inner column doesn’t have any css.

Hello Pierre,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

Hello Pierre,

Regretfully the given credentials do not work for us. It seems that the password is incorrect.
Please double check it.

Thank you in advance.

Ok I’ve updated the secure note with correct login info now

Hi Pierre,

Please add this to your Page > CSS area.

@media (min-width: 980px) {
	.flex-center {
	min-height: 100vh;
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
}

Then apply the class flex-center to your ROW, make sure to remove any margins on your element that can offset the center positioning.

A Complete Guide to Flexbox

Hope it helps,
Cheers!

Works like a charm, yes!

Now how do you set external link on an image, by default it’s always relative to the domain (adding the domain to my link). I need the link to send to an external page. (absolute )

Hi Pierre,

For the external link to work, please add the complete URL including http like this: http://www.anylinkhere.com

Hope this helps.

Cool, simple.

Previously I had asked how to set the sidebar in ICON to sit at the top of the page when in mobile mode. I’ve applied the provided css but doesn’t work for me:

@media (max-width: 979px) {
.x-container {
display: flex;
flex-flow: column wrap;
}
.x-container .x-sidebar {
order: 1;
}
.x-container .x-main {
order: 2;
}
}