Icon sidebar for unique page, not entire site

Support
#1

How can I display the sidebar layout on a single page, not the entire site?

#2

Hello Pierre,

Thanks for writing in!

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

Thanks.

#3

Ok, I have to try that! Will I be able to use the builder for these specific post will I get this msg:
Hey There
Because of Icon’s unique layout, this template is unavailable in this Stack. Please switch to another Stack if you need to make use of this feature. Thanks!

#4

Hi Pierre,

You will still get that, once you select a blank template for your page, you have to enable this option too

It’s the only way to get sidebar for blank template. Though, it’s not necessary if you choose other template, it’s just that your provided message is related to blank template.

Thanks!

#5

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.

#6

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

#7

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

#8

Let us know how it goes!

#9

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?

#10

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.

#11

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?

#12

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)

#13

Hello Pierre,

Thanks for updating the thread. :slight_smile:

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

Thanks.

#14

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.

#15

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

#16

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

#17

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.

#18

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

#19

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.

#20

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