Help with Styling the Portfolio Please!

Support
#1

Hi, I’m using the Portfolio for a Projects page on a website (I previously did this a few years ago and you helped me out with some CSS so I could get the page to look how I wanted it) and I’ve used that same code and changed it to how I want, but there’s a few things I can’t figure out which I’m hoping you don’t mind helping me out with please!

  1. On the main portfolio page that shows all posts, is there a way of selecting how many columns you want there to be?

  2. On the main portfolio page that shows all posts, can the height of the featured image be increased? I’ve tried to do it with CSS and it changes when I’m in the global CSS customize page, but then on the front end it’s still showing the small height.

  3. After clicking on a post from the main page, on the single project page, with the previous CSS I’ve positioned the Featured Image to the left of the screen so the text can run to the right of it. I’ve used a block quote and instead of it starting to the right of the featured image, it is still running the whole width of the page and so the border goes behind the featured image. I have no idea how to do it so the border doesn’t run the whole width, but I hope you do!

  4. On the single project page, I’ve used a media gallery (this will be the easiest option for my client to do themselves), is there any way of linking a lightbox to these images as the options it currently has are very limited and I don’t want to use Envira Gallery or something similar as it means the client having to use a different plugin away from the Portfolio post and I’m wanting this to be as simple as possible for them.

  5. I’ve added in a global block of the footer to the Blog pages (which you previously gave me for a different website) but now I’d like to have the global block footer on the Portfolio pages too if that’s possible (both on the main and single portfolio pages). I can’t figure out from the code you gave me for the Blog how to do it for the Portfolio as I’d hoped it was just a case of swapping ‘Blog’ for ‘Portfolio’ but it doesn’t appear in the code! This is the code I’m using:

    // Global Footer on Blog Pages
    // =============================================================================
    add_action( ‘x_before_view_footer_base’, ‘x_print_gb’ );
    function x_print_gb(){
    if(is_singular( ‘post’ ) || is_home()){
    echo do_shortcode( ‘[cs_gb id=158]’ );
    }
    }

I’ve got a maintenance page up at the minute, so I’ll put the URL and By Pass Password in a secure note.

Thanks!

#2

Hello @core365,

Thanks for writing in!

By default you can have upto 4 columns in portfolio page which can be changed from Pages > All pages and open the page that’s assigned as portfolio page. After that under Portfolio Settings > Columns you can select number of columns to display.

If you wish to have more columns then that will require changes in theme files which falls outside the scope of support we can offer. However, I can tell you the time name that you need to focus to make the necessary changes. Under /wp-content/themes/x/framework/views/global/ please open _portfolio.php file. Before making any changes please copy the file under child theme under /wp-content/themes/x-child/framework/views/global/.

Please take a look at solution shared in following thread.

Please add following CSS under X > Theme Options > CSS:

.single-x-portfolio blockquote {
    width: 50%;
    float: right;
}

We would suggest you to use Envira Gallery as it has lightbox built into the plugin. Necessary changes can be done to implement lightbox but that will require changes into theme files.

Please use the solution shared in following thread:

Thanks.

#3

Hi, thanks for the info! There’s a couple of things that still aren’t working for me:

1.Thanks for showing me where to find the columns displayed on the portfolio page as I didn’t know I could do it from there!

  1. Thanks for the code to make the image bigger!

  2. Thanks for the code for the blockquote, however when viewed on a mobile device, the blockquote doesn’t fill the width of the page any more.

  3. Ok, I’ll guess I’ll just need to get our client to use Envira Gallery, thanks for explaining!

  4. For the global block on the portfolio pages, I’ve tried both the solutions and you’ll see that 2 footers appear on the main portfolio page, however it’s still not appearing on the single portfolio page (that’s why I tried both solutions, but neither seem to work!) Also, on the main portfolio page the global block that’s on there doesn’t fill the width of the screen or sit at the very bottom, there shouldn’t be a gap below it, it should sit directly on top of the black band that’s at the very bottom of the website.

Thanks!

#4

Hi @core365,

  1. Please update the given CSS code to this:
@media (min-width: 768px) {
	.single-x-portfolio blockquote {
	    width: 50%;
	    float: right;
	}
}
  1. On the PHP code provided above, please update this line:
if( x_is_portfolio() ){

to

 if( x_is_portfolio() || is_singular('x-portfolio') ){

More likely why your Global Block footer is duplicated is because you added the function (php code) twice on your functions.php file, please check.

Cheers!

#5

Hi, thanks for the update and code for number 2 and that’s sorted now, but there’s still an issue with number 4:

4.I’ve updated the PHP code, but it’s still not appearing on the single portfolio page. There are 2 footers showing on the main portfolio page because I did the both options of how to do it, through the theme in WordPress with PHP and when that didn’t work on the single page, I also uploaded the file to my server in the child theme’s folder - I changed ‘integrity’ to ‘renew’ as that’s the stack I’m using.

  • Also, on the main portfolio page the global block that’s on there doesn’t fill the width of the screen or sit at the very bottom, there shouldn’t be a gap below it, it should sit directly on top of the black band that’s at the very bottom of the website.

5.Also, the 3 images that are on there from the media gallery, is there a way to centre them on the page - I’ve tried with CSS but can’t do it!

Thanks!

#6

Hi @core365,

4.)

It was added inside the container of main content. That’s reason it is not fullwidth. Please remove both code you have added. Try this instead to make sure it is added above footer outside the container on main portfolio and single portfolio page:

add_action( 'x_before_view_footer_base', 'x_print_gb' );
function x_print_gb(){
if( x_is_portfolio() || is_singular('x-portfolio') ){
echo do_shortcode( '[cs_gb id=158]' );
}
}

5.) To center those 3 images on single portfolio item, please try adding the following CSS too:

.single-x-portfolio .gallery {
    text-align: center;
}
.single-x-portfolio .gallery .gallery-item {
    margin: 1% 3% 0 0;
    float: none;
    display: inline-block;
}

Then remove this to avoid duplicate:

.single-x-portfolio .gallery .gallery-item {
    margin: 1% 3% 0 0;
}

Hope this helps.

#7

Hi, thanks for the fix for number 5, it’s spot on, however I’m still having problems with number 4:

4.I changed the code to what you said in the functions.php file, but it came up with an error message, as I have similar code in there already to display the global block on the footer of the blog pages - please see screen grab:

Thanks

#8

Hi @core365,

That is because you already have two functions with the same name which triggers an error:

Kindly get rid of the first block of codes and just use what Lely suggested.

Hope this helps.

#9

Hi, I had said that code is in there for the global block to appear on the Blog pages - you can see the Blog page from the drop down menu Stories > Blog. I tried removing it anyway and put the Portfolio one in, and as I thought it removes it from the Blog pages, but it then does appear on the Portfolio pages. Is there a way so that the global black appears on both the Blog and Portfolio pages?

Thanks

#10

Hi @core365,

In that case, you can combine the codes to:

add_action( 'x_before_view_footer_base', 'x_print_gb' );
function x_print_gb(){
    if( x_is_portfolio() || is_singular('x-portfolio') || is_singular( 'post' ) || is_home()  ){
        echo do_shortcode( '[cs_gb id=158]' );
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#11

Hi @Jade,

That’s great, thank you! You’ve sorted it and the global block now shows on the blog and portfolio pages!

Thank you ever so much!

Cheers!

#12

You’re most welcome, @core365. :slight_smile:

#13

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