[Share] Portfolio Page Code (7.1)

On 2/2/2023 at 2:04 AM, ashleybillings4 said:

@tuanphan for the blog summary page, is there a way change "older posts" to numbers at the bottom of the page, in the middle? Similar to the image below?

 

Hi,

I don't know this. You will need to use a custom code

On 2/2/2023 at 6:28 AM, tadaisy said:

Thank you so much for this post! I was wondering if there was a way to have multiple subtitles with different adjust the font size, color and boldness for each. I'd like to add one more subtitle as "tags" for the project, maybe in a different color. 

 

 

What is your site url?

Hey Tuan! 

Is it possible to use a custom font on the grid:overlay layout? 

https://swan-parsnip-d2bh.squarespace.com/portfolio

I've currently got placeholder images in there with the correct font, so please overlook that!

Thanks in advance

On 3/9/2023 at 3:40 AM, DreamrW said:

Hey Tuan! 

Is it possible to use a custom font on the grid:overlay layout? 

https://swan-parsnip-d2bh.squarespace.com/portfolio

I've currently got placeholder images in there with the correct font, so please overlook that!

Thanks in advance

I see you solved with this CSS?

.portfolio-grid-overlay .grid-item .portfolio-text .portfolio-title {
    font-family: 'Shopping';
    color: #fff;
    font-size: 60px;
}

Hi!

Regarding the Custom CC, I had a few question @tuanphan

#4. Change to 5 items/row (Desktop)

/* Portfolio 5 columns */
@media screen and (min-width:992px) {
div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}
}

If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code.

I want to have like only one column each row and I want to redefine my text as well like this example https://www.shortstache.com/professional

So I already changed the aspect ratio to 16:9 but can't change it to only 1 column per row.

This is my page id: collection-642aa80000c71e75d9ef98fb

On 4/4/2023 at 2:11 PM, DylanC said:

Hi!

 

Regarding the Custom CC, I had a few question @tuanphan

 

#4. Change to 5 items/row (Desktop)

/* Portfolio 5 columns */
@media screen and (min-width:992px) {
div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}
}

If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code.

I want to have like only one column each row and I want to redefine my text as well like this example https://www.shortstache.com/professional

So I already changed the aspect ratio to 16:9 but can't change it to only 1 column per row.

This is my page id: collection-642aa80000c71e75d9ef98fb

Hi,

It looks like you solved? I see 1 column here

@tuanphan

Yeah I found it after posting here. 

Just have a small problem now on my Home page. Can't show my social icons but on the other pages it works just fine...

On 4/14/2023 at 3:07 PM, DylanC said:

@tuanphan

 

Yeah I found it after posting here. 

 

Just have a small problem now on my Home page. Can't show my social icons but on the other pages it works just fine...

You mean icons at bottom of page?

On 4/16/2023 at 11:41 AM, tuanphan said:

You mean icons at bottom of page?

Yes, they don't show up...

On 4/18/2023 at 2:54 PM, DylanC said:

Yes, they don't show up...

Can you check again? I don't see icons on both homepage & some other pages

https://www.shortstache.com/professional

https://www.shortstache.com/workshops

Hi @tuanphan

Yeah on the homepage of Shortstache website, below the enter the website tab, there are social links but I can't get them on my page...

And I was also wondering how to the mobile version of this tab https://jackharding.com/projects

Because on my page right now, it isn't like that when I enter mobile version... 

https://dylancalluy.com (Password is 'Demi')

On 5/4/2023 at 4:48 PM, DylanC said:

Hi @tuanphan

 

Yeah on the homepage of Shortstache website, below the enter the website tab, there are social links but I can't get them on my page...

 

And I was also wondering how to the mobile version of this tab https://jackharding.com/projects

Because on my page right now, it isn't like that when I enter mobile version... 

 

https://dylancalluy.com (Password is 'Demi')

You want to add these icons

appear at bottom of this site (this is your site?) https://www.shortstache.com/professional

? Is that right

4 hours ago, tuanphan said:

You want to add these icons

appear at bottom of this site (this is your site?) https://www.shortstache.com/professional

? Is that right

 

Hi, yes indeed and also adapt my mobile version of the website like the one of Jack Harding

On 5/6/2023 at 4:46 PM, DylanC said:

Hi, yes indeed and also adapt my mobile version of the website like the one of Jack Harding

Can I send private message? I will need to test some CSS + Script code in Edit Mode of your site (need you provide permissions)

22 hours ago, tuanphan said:

Can I send private message? I will need to test some CSS + Script code in Edit Mode of your site (need you provide permissions)

Yes of course! thanks!

Hi, I'm trying to do #18 and add a 'looping' pagination. I used your code to get the first project linking to the last project, but I'm having trouble figuring out what to change in the code to make a link on the last project to click onto the first project. 

I can't figure out what phrases I need to switch out in the script. 

Thanks for any help! 

5 hours ago, liz003 said:

Hi, I'm trying to do #18 and add a 'looping' pagination. I used your code to get the first project linking to the last project, but I'm having trouble figuring out what to change in the code to make a link on the last project to click onto the first project. 

I can't figure out what phrases I need to switch out in the script. 

Thanks for any help! 

 

Change this URL

eg

https://google.com/portfolio/project-1

On 3/19/2022 at 12:15 AM, tuanphan said:

h3.portfolio-title:after {
    font-size: 20px;
    color: black;
    display: block;
}
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
    content: "subtitle 01";
}
a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after {
    content: "subtitle 01";
}

I can't get this to work on quepasaibz.com/home-1 (password: que) 

I've looked and looked and read a bunch of forum threads, tried everything that I think is going to be appropriate for what I'm trying to do, but nothing seems to work.

I'm just trying to get subtext under the titles that are listed on my portfolio page, so I can give a small description for each. I'm not trying to do anything in the individual projects, just the main portfolio page. image attached.

Thank you for your help

Hi @tuanphan, 

I was looking for a way to disable the hamburger menu in my mobile version for my site and stumbled upon your solution which worked pretty well except that I can't get the social icons to display on the header for the mobile version.

I have included the code you provided previously. Are you able to assist me with the code I need to add in order to get the social icons to display on the mobile version?
 

I have attached images of the desktop and mobile version of my header for reference.

/* force desktop menu on mobile */
@media screen and (max-width:767px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
  
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
/* logo max width */
.header-title {
    flex: 1 0 50% !important;
}
} 

On 5/30/2023 at 4:04 PM, tiffybennett1 said:

I can't get this to work on quepasaibz.com/home-1 (password: que) 

Add to DESIGN > CUSTOM CSS. I see you added to wrong location. You should check it again

On 6/1/2023 at 2:16 PM, independenter said:

I've looked and looked and read a bunch of forum threads, tried everything that I think is going to be appropriate for what I'm trying to do, but nothing seems to work.

I'm just trying to get subtext under the titles that are listed on my portfolio page, so I can give a small description for each. I'm not trying to do anything in the individual projects, just the main portfolio page. image attached.

Thank you for your help

Your portfolio page use a different layout so need a different code. If you share link to Film/TV page? We can check easier

On 6/1/2023 at 3:13 PM, Xyfalix said:

Hi @tuanphan, 

I was looking for a way to disable the hamburger menu in my mobile version for my site and stumbled upon your solution which worked pretty well except that I can't get the social icons to display on the header for the mobile version.

I have included the code you provided previously. Are you able to assist me with the code I need to add in order to get the social icons to display on the mobile version?
 

I have attached images of the desktop and mobile version of my header for reference.

/* force desktop menu on mobile */
@media screen and (max-width:767px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
  
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
/* logo max width */
.header-title {
    flex: 1 0 50% !important;
}
} 

 

What is your site url? We can check easier

Hi, this is all really helpful as someone learning this. Do you have the code for getting my (Simple Grid) Portfolio pages to be driven by the custom CSS fonts I have loaded to the website. I know it should be h4, but for some reason while other pages have shifted to the new fonts, the two Portfolio (not the sub portfolio, but the titles on the Portfolio pages themselves) remain in some other font and are not being driven by the h4 directive? Thanks!

On 6/15/2023 at 9:16 PM, juliannegauron said:

Hi, this is all really helpful as someone learning this. Do you have the code for getting my (Simple Grid) Portfolio pages to be driven by the custom CSS fonts I have loaded to the website. I know it should be h4, but for some reason while other pages have shifted to the new fonts, the two Portfolio (not the sub portfolio, but the titles on the Portfolio pages themselves) remain in some other font and are not being driven by the h4 directive? Thanks!

Hi,

Titles on Portfolio Page is Heading 3, not 4

Hi @tuanphan - I tried using the code for #17. Add all projects under Pagination but my subscription plan apparently doesn't include code injection. Could you help me with the css code or some way to add all portfolio projects in a grid under pagination? So people don't have to go back to the homepage every time or be able to only go to the next project.

This is my website: www.laurapulecio.com

Thank you in advance!!