[NordicearthchildParticipant]

Hi Support,

I’m building my website with the layout Ethos: http://www.nordicearthchild.com. I’m trying to add a sidebar menu to some of the pages: ‘About’ ‘Lifecoaching’ and ‘Shop’, however I can’t seem to figure out how to do it.

I’ve set up all three pages using cornerstone and made sure to select the template ‘layout ‘ content left, sidebar right’ so there is a blank side on the page, all ready for the content. However; I’m unsure about how I put the content into the sidebar the way that I want it.

I followed the tutorial ‘unlimited sidebars’ to set up a sidebar, but how do I add my content to it? I would like it to look like this: http://www.carlyrowena.com/p/about-me.html so that it displays an image of me with a button you can click to go to ‘about’ and also pulls in my instagram and pinterest feed and so that you can click a button and go there. Also I would like an archive button that you can click and select the months in a drop down menu in the order the posts of each months instead of having the months displayed the way they are now under ‘life coaching’.

I assume that I can just create one sidebar menu and select that one menu to be shown on all three pages somehow?

Maybe there are some widgets or plugins I need to install and then drag underneath the sidebar I’ve set up? I just don’t really know what widgets/plugins they are and also how you add buttons and images to the bar.

I hope it makes sense?

Thanks so much for all of your help.

Mai

[FriechModerator]

Hi Mai,

Thanks for writing in! Since you do only need the sidebar on specific page you might want to utilize the Widget Area element.

Please use a Blank – No Container page template instead and then setup your ROW to have a 2/3 + 1/3 column.

You need a shortcode (or HTML code) to place an image and button on your sidebar widget.

http://theme.co/x/demo/renew/1/shortcodes/images/
http://theme.co/x/demo/renew/1/shortcodes/buttons/

Hope it helps, Cheers!

[NordicearthchildParticipant]

Hi,

Thanks so much for your reply.

I’m now trying to build up the sidebar in cornerstone. I need it to be the same on 3 pages, so just checking that it still makes more sense for me to set it up in cornerstone?

I’ve selected the format you told me, so I can now start working on the sidebar, but where is it that I need to put in the short codes for the buttons and image? Is that in the CSS?

The first thing I’d like to add to the sidebar is a line of social media buttons followed by an image underneath with an imbedded link that goes to my ‘about’ page. I’ve put in the element ‘icons’ and have found the social media buttons, yet I’d like for the social media icons to be listed on a line next to each other. Using the icon element as far as I can see I can only add one symbol in each box / in one row? Also I can only add one element per row in the sidebar column so although there is a lot of room underneath the little icon box I can’t add the element of an image underneath. How do I do that?
Furthermore in relation to filling out the entire right side and using that as a sidebar; the boxes on the right side is not connected – instead it’s separated by quite big gaps. Is there a way for me to connect the boxes on the right side into one long column so that I can use up the whole side and not just bits of it?

Thanks so much for all your help.

Mai

[LelyModerator]

Hello Mai,

Yes, you can still set it up using Cornerstone.

For the sidebar, you may want to add buttons, images, or headline above the widget as title of the sidebar. To do that, you may use either text element or RAW content element then put the shortcode inside.

To achieve that, please add a TEXT element on your sidebar. Add you social icons like this:
<a href="#linktofacebook">[icon type="facebook-square"]</a><a href="#linktoinstagrgam">[icon type="instagram"]</a>
Add more social icon as needed. Please refer to this list of icons:http://theme.co/x/demo/icon/1/shortcodes/icons/. As you can see, using text element will let you add icons side by side.
If you want to add another row or just element on the next line, just add another text element and put the shortcode inside.

Hope this helps.

[NordicearthchildParticipant]

Hi again,

Thanks for that! I’m slowly getting there!

I’ve now added the social media icons but how do I make them black?

Also I’ve added an image, that has a little bit of text if you hover over it. I’d like to make the background of that text white – how do I do that?

Furthermore I’ve added a button but it’s quite fat. I’d like it to be more slim on the edges, how can I do that? I’m looking for a look that’s more like the button to the right here: http://www.carlyrowena.com/2015/07/how-to-be-pt-getting-started.html.
I think it’s called square flat, but I couldn’t find a place to select that.

Finally I’d like to pull in my instagram feed in a square feed like the link here; http://www.carlyrowena.com/2015/07/how-to-be-pt-getting-started.html, but I don’t know how to do that.

I already have the instagram feed plugin installed as I’m using that in the footer, but I don’t know what to do to pull it in and set it up the way I’d like in the sidebar.

Thanks so much for all your help.

Mai

[JadeModerator]

Hi Mai,

The social media icons in the sidebar seems to be now black. See screenshot below.

Would you mind pointing out which image specifically you are referring to that has a text when you hover to it? Also I am not sure which area the button you have added as well so kindly direct us that page.

As for the Instagram feed, regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[NordicearthchildParticipant]

Hi there,

No I’m afraid you misunderstand. My page is here: http://scandinavianearthchild.com/life-coaching/ so my icons and buttons are green. I would also like for the icons and buttons to be black. Also regarding the buttons I’ve created, I’d like them to look more like the buttons in this sidebar, where they are thinner on the edge: http://www.carlyrowena.com/2015/07/how-to-be-pt-getting-started.html.

Regrading the image I’m referring to: On my site: http://scandinavianearthchild.com/life-coaching/ it’s the only image in the sidebar that has a text when you hover over it, where I’d like the background to be white.

With regards to the instagram feed I fully understand that you can’t advice me on the layout and the code to make it look a specific way. However, what I think you only can advice me on is how to pull in any kind of social feed widget into the sidebar. Right now I’ve added a widget element to my sidebar, but I don’t understand what I need to do to get in the widgets. The possibilities I have is to add a registered sidebar (?) and put in an ID, class and style. Can you enlighten me a little on how this works and what it’s for?

I would also like to add a slider that shows images of a product and then links to the website where you can get it. Which element can I use for that? I’ve had a look at the shortcodes for sliders, but I can’t see anyone that has hyperlinks embedded as well?

Thank you so much,

Mai

[RadModerator]

Hi there,

Thanks for clarification 🙂

1. Do you wish all your buttons to be green (site-wide) ? If yes, then please change your button styling to green at your customizer, under Buttons section.

Else, if you just wish to apply the black button styling on that specific area, then please add this CSS at Admin > Appearance > Customizer > Custom > CSS

.page-id-390 .x-btn {
    color: #222;
    border-color: #222;
}

2. For the icon, add this as well

.entry-content a .x-icon {
color: #222;
}

3. About the hover at your image, you mean the popover/tooltip and make its background to white? If yes, then please add this as well

.popover-title {
background-color: #fff;
}

4. About the feed and widgets, I’m not sure about your question. Your page doesn’t use any sidebar, it just uses section columns. We can’t provide any information or suggestion about the feed, X theme doesn’t have any widgets, but yes, it provide sidebars. If you can provide some mockup of what you’re trying to do then I may able to provide some recommendation.

5. If you’re using cornerstone’s slider element, then you have to manually wrap your image with links through the editor. If you’ll use rev. slider, then you can use SEO/Link option available for each of your slide.

Thanks!

[NordicearthchildParticipant]

Hello again,

Thank you very much for the codes, they worked perfectly. The only thing about the buttons that I’m now missing is to make the border thinner. How do I do that?

I would like my buttons to look more like the button in the screenshot I’ve attached. Is that possible?

Regarding the feed and widgets: I was told to use cornerstone to build my sidebar instead of using the sidebar area. I would like to add an element that can pull in instagram and pinterest feed so I’ve added the widget element to the section column I’m suing to build my sidebar, however I don’t understand how the widget element works. Is there a page where I can read about that and how to set it up? All I’m trying to do is pull in my instagram feed in a grid so that it shows my latest 4 photos and you can click them so go to my instagram account. The same goes for my pinterest account.

About the slider: I just tried to pull in both elements and see what they looked like and I also saw the rev slider video. What a cool feature!!! Can’t wait to use that on my front page – however for the side bar I think the slider in cornerstone might be better and then just customise the link to go with the image, so I’ll have a play around with that. Hopefully I’ll be able to figure it out 🙂

Mai

[Rue NelModerator]

Hello Mai,

To make your borders thinner and maybe change it to grey, you can edit the page in Cornerstone and insert the custom css in the settings tab, Settings > Custom CSS

#x-section-2 .x-btn {
    border-width: 1px;
    border-color: #e5e5e5;
}

Regarding the widget element, you must first create a custom sidebar in Appearance > Sidebars. Once you have it, you can go to Appearance > Widgets, find the newly created sidebar widget area and insert the instagram or the pinterest feed widget. After adding it, you can edit your page and drag the widget element into your page. You can then select the newly created sidebar widget area to be one that will be displayed in your page.

Hope this would help.

[NordicearthchildParticipant]

You guys are amazing! I figured out the widget thing and the border is now perfect.

I’m sorry to keep asking questions here, but the border on my slider element in the sidebar is confusing me a bit. I’ve added the image to the slider along with a hyperlink and the text to pop up in the bottom when you hover over the image, however the border of the box is cropping the text. How can I change that? Maybe even remove the border?

I’d also like to remove the border on the other image I have in the sidebar.

Thank you so much and I hope you’re having a great weekend!

Mai

[RupokMember]

Hi Mai,

Thanks for writing back.
You can add this under Custom > CSS in the Customizer.

.x-flexslider-shortcode-container {
  border: medium none !important;
}

.x-slide .x-img {
  margin-bottom: 50px;
}

/* Remove border for other images */

.x-img-thumbnail {
  border: medium none;
}

Hope this helps.

Cheers!

[NordicearthchildParticipant]

Hi again,

It did! Thank you! However, it only took away the borders + the text you’re meant to red is still cropped by the image line. How can I change that?

And also – is there a way for me to copy this sidebar that I’m building? Or maybe even just a way for me to copy the slider including content to another page? I want to set up a few of my pages with this sidebar or most of the content anyway.

Thank you so much.

Mai

[NordicearthchildParticipant]

Oh and also… I’ve started building the sidebar on another page, but here the text in my buttons are still green despite that I wrote a code in the costume CSS to change this colour on the page I’ve been working on this far. The edge is perfect and grey as it is on the first page, but not the text. Can you help me with that as well?

Thank you again.

Mai

[NicoModerator]

Hi There,

We could not guarantee that we could help on all the customization or what you want to achieve however we’ll do our best to help you.

Would you mind sharing us screenshots of what you want to achieve and its URL so that we could easily locate and suggest the best customizations.

Thank you so much.

[Author]

Posts