Docs

[Sue@Masterplan]

Hi there,

I’m using the Renew Stack. I’m currently working on the portfolio page.
Two questions arose so far:

1. As you can see in the fist attached image, I have blue headers for all of the pages.
I can’t figure out how to do that for the Portfolio (=Projects) page though.

2. When I upload pictures to the Portfolio Item and set the media type to Gallery, it shows a gallery fist, then the title and then the single pictures (which obviously shouldn’t be shown again). I can’t figure out what I’m missing here.

Also, since I’ve worked with Cornerstone so far (but doesn’t seem possible for the Portfolio), I have no idea how to change the frame around the gallery images (want no frame) or how to get rid of the backward/forward button in the gallery.

So glad if you could help! Cheers!

[Sue@Masterplan]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please add the following code in Customize -> Custom ->JavaScript :

jQuery(".page-id-13 .x-header-landmark").prepend("<div id='x-section-1' class='x-section x-hide-xs bg-image' style=' margin: 0px; padding: 65px 0px; background-image: url(http://108.179.231.110/~masteuc7/wp-content/uploads/2016/04/Top_Banner-Teamc.jpg); background-color: rgb(39, 96, 146);' data-x-element='section'><div class='x-container max width' style='margin: 0px auto; padding: 0px; '><div class='x-column x-sm x-1-2' style='padding: 0px; '><h2 class='h-custom-headline resp-h mtn h1' style='color: hsl(0, 0%, 100%); color: #fff;'><span>Meet our incredible<br>team</span></h2></div><div class='x-column x-sm x-1-2' style='padding: 0px; '></div></div></div>");

#2 Images should be attached to portfolio item when you create a gallery, so please upload them as you create the gallery. You can’t create a gallery with existing images in media library.

#3 Portfolio page is not editable with cornerstone. To remove the border, please add the following code in Customize -> Custom -> CSS :

.single-x-portfolio .entry-featured {
    border: none;
}

Hope that helps.

[Sue@Masterplan]

Hej, cheers!

#1 is helping, but I can’t determine how to change the font style (I think you already put in the right code, but for some reason it is displayed smaller than it should be), or the padding (image: 65 px both top and bottom, without the white white padding that is currently displayed on top).

I changed the code to this so far:

jQuery(“.page-id-13 .x-header-landmark”).prepend(“<div id=’x-section-1′ class=’x-section x-hide-xs bg-image’ style=’ margin: 0px; padding: 65px 0px; background-image: url(http://108.179.231.110/~masteuc7/wp-content/uploads/2016/04/Top_Banner-Projects.jpg); background-color: rgb(39, 96, 146);’ data-x-element=’section’><div class=’x-container max width’ style=’margin: 0px auto; padding: 0px; ‘><div class=’x-column x-sm x-1-2’ style=’padding: 0px; ‘><h2 class=’h-custom-headline resp-h mtn h1′ style=’color: hsl(0, 0%, 100%); color: #fff;’><span>Have a look<br>at what<br>we do</span></h2></div><div class=’x-column x-sm x-1-2′ style=’padding: 0px; ‘></div></div></div>”);

#2 Still can’t get my head around this one. May need more explanation. I get the whole “create gallery” part, but when I go to the portfolio item page, I still see a slider (with random old photos) and then the 3 pictures I just created. I want the slider, but not the pictures underneath (which are the “gallery” I suppose). Maybe you can explain further? (See Attachment)

#3 worked just fine, cheers!

[Christopher]

Hi there,

#1 Update JS code to :

jQuery(".page-id-13 .x-header-landmark").prepend("<div id='x-section-1' class='x-section x-hide-xs bg-image' style=' margin: 0px; padding: 65px 0px; background-image: url(http://108.179.231.110/~masteuc7/wp-content/uploads/2016/04/Top_Banner-Projects.jpg); background-color: rgb(39, 96, 146);' data-x-element='section'><div class='x-container max width' style='margin: 0px auto; padding: 0px; '><div class='x-column x-sm x-1-2' style='padding: 0px; '><h2 class='h-custom-headline resp-h mtn h1' style='color: hsl(0, 0%, 100%); color: #fff; font-size: 600%;'><span>Have a look<br>at what<br>we do</span></h2></div><div class='x-column x-sm x-1-2' style='padding: 0px; '></div></div></div>");

Please add this CSS :

.page-template-template-layout-portfolio header.x-header-landmark {
    padding-top: 0;
}

#2 Do you confirm that you upload images as you create the gallery? Seems like you’re using the images which already exist in your library. Please note that galleries couldn’t be created with images that already exist in media library. Please check this link and make sure you follow all the steps : https://community.theme.co/kb/how-to-setup-galleries/

Hope it helps.

[Sue@Masterplan]

Hey Christopher,

cheers for your help.

I’m very happy with the outcome, I understand what I need to do with the gallery also!

One last thing:

On the projects page the header is too close to the “Projects” Title and the + Symbol.
Can I add a bit of padding underneath the header with a simple CSS?

[Zeshan]

Hi there,

You can add the padding using following CSS code:

.x-header-landmark .x-section+.x-container {
  margin-top: 30px;
}

Thank you!

[Author]

Posts