Icon sidebar for unique page, not entire site

Support
#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.

#21

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.

#23

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.

#24

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

#25

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!

#26

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 )

#27

Hi Pierre,

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

Hope this helps.

#28

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

#29

Hi Pierre,

Here is the code updated for your site.

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

Yup, that works now!

Is there a reason why the post type page don’t follow my global layout? I’m looking to have the post pages the same full with, no container, no footer, no header like my pages.

#31

Hello Pierre,

Thanks for updating the thread. :slight_smile:

You will have to use following CSS under X > Theme Options > CSS:

header.masthead.masthead-inline {
    display: none;
}

footer.x-colophon.top {
    display: none;
}

footer.x-colophon.bottom {
    display: none;
}

Let us know how it goes.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#32

Ok yeah I’ll inspect this page; I thought maybe X had an option built-in for post layout.

Also, I need to show the logged in user’s avatar on my side bar; I’ve added this code to the sidebar.php but it doesn’t work. Am I working on the right php?

<?php global $current_user; get_currentuserinfo(); echo get_avatar( $current_user->ID, 64 ); ?>

Source: https://www.isitwp.com/display-avatar-for-currently-logged-in-user-with-get_avatar/

#33

Hello Pierre,

Thanks for updating the thread.

Please try out the solution mentioned in following tutorial:

Having said that providing support for 3rd party custom codes falls outside the scope of support we can offer. In that case I would suggest you to get in touch with a developer for some help.

Thanks.

1 Like
#34

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.