Icon sidebar for unique page, not entire site

Ok I wasn’t aware of that option.

How would you approach building this website where:
1-3 public pages will use standard fullwidth layout
1-10 private pages will need a sidebar (progress of an online training)

My strategy was to use ICON’s sidebar layout throughout the site and hide it from the public pages, but that doesn’t seems to be responsive.

Hi Pierre,

I would set my default layout to have a sidebar. You can set this under Theme Options > Layout and design

Then for pages where you want the layout to be fullwidth, you can select either a No container tamplate or full width template under page attributes.

Thanks

Ok perfect that seems to be the way to go, I’ll give it a try
thanks!!

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!