page/element opacity and portfolio page customization

Hi Ariel, I’ll reply to your questions in batches, and not in order. ??

My second question is specific to the sketch theme:
Right now, my home page is set using the Portfolio Page Template, which displays everything in my entire Portfolio. Is there a way to make this page display only a portion of my portfolio — say, the images I select or a specific Project Type? I would like to use the front page for most recent work only. (Alternatively, is there a way to just remove the “Previous” link at the bottom? That would work too, sort of!)

Yes, you can do this by using the portfolio shortcode to display your projects on the homepage, instead of assigning the Portfolio template to your front page.

Here’s how to use the shortcode:

https://en.support.wordpress.com/portfolios/portfolio-shortcode/

Use the include_type attribute in the shortcode to display portfolio projects of specific types.

– Set the page (the white part only) at 70% transparency
– I would like the text/images/links to remain at 100% opacity

Targetting the page div and using RGBA for transparency should keep the text and other elements on the page at 100%, as well as the background:

#page {
   background-color: rgba(0, 0, 0, 0.7);
}

– If possible, I would like to keep all Portfolio icons (the big image squares on the front page) at 70% opacity and change the hover setting to 100% opacity, so that they become clear on mouseover

The CSS for this will differ depending on whether you use the portfolio shortcode or keep using the Portfolio page template, so let me know what you decide first.

You may in fact want 30% black instead of 70%, I’m not totally sure what effect you’re after, but try this if the above doesn’t give you what you wanted:

#page {
   background-color: rgba(0, 0, 0, 0.3);
}

Is there a way to turn off the display of titles beneath the thumbnails on the Portfolio Page? (Other than leaving the portfolios untitled.)

.projects .entry-title {
  display: none;
}

Or if you decide to use the shortcode instead of the template:

.jetpack-portfolio-shortcode .portfolio-entry-title {
  display: none;
}

For all the changes I’ve mentioned here, don’t edit your theme files directly or you’ll lose all your changes every time you update the theme. Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module – it looks already active on your site. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

Hi Kathryn!
First of all, thank you SO MUCH for your incredibly fast and comprehensive reply. I really appreciate it! ??

Following your instructions, I was able to change the front page to display portfolios (I decided to display them using a tag) instead of using the Portfolio Page template.

I also used to codes you gave me to hide the project titles (using the CSS Editor, of course!). ??

However, the front page looks a bit disorganized now, so I was wondering if I could (as it is in the Portfolio Page template)
– turn off the header for the front page, and
– use a square thumbnail to display the projects instead of having the images different dimensions

Also, I tried both of the codes you gave me for the page div, but neither one worked. ?? They just made the page 100% opacity. I do want the page to be white, just at 70% opacity.

As for this one,

– If possible, I would like to keep all Portfolio icons (the big image squares on the front page) at 70% opacity and change the hover setting to 100% opacity, so that they become clear on mouseover

I think I’m going to use the portfolio shortcode (assuming the above issues can also be fixed), so is there a code you can give me for that?
Also, will that code work on my other portfolio pages?

Thank you so much for your help! You’re wonderful!!!

-Ariel

First of all, thank you SO MUCH for your incredibly fast and comprehensive reply. I really appreciate it! ??

You’re very welcome!

However, the front page looks a bit disorganized now, so I was wondering if I could (as it is in the Portfolio Page template)
– turn off the header for the front page, and

Which header do you mean, can you point me to what you mean exactly?

Also, I tried both of the codes you gave me for the page div, but neither one worked. ?? They just made the page 100% opacity. I do want the page to be white, just at 70% opacity.

Hmm, it works on the demo site using a browser inspector. I couldn’t easily test this on your site before, since you had other conflicting styles.

It looks like you are adding custom CSS in mutiple, possibly conflicting ways, including through the Jetpack Custom CSS plugin, and something I’m not familiar with called Micro Themes? (You’re also using a child theme, though its stylesheet appears to be blank.) I’d recommend trying to use one method to customize your site instead of multiple ones that may conflict with each other and make overrides difficult or impossible.

For starters, since you added this style to Micro Themes using !important you now cannot override the opacity somewhere else:

div#page {
     background-color: #ffffff ! important;
     border-radius: 30px ! important;
     font-size: 16px ! important;
     opacity: 1 ! important;
}

Can you try removing the background colour and opacity rules from there? Going forward it’ll be easier to troubleshoot and add new CSS if you move everything into one place.

I’d recommend your child theme’s stylesheet, but it’s up to you. ??

I think I’m going to use the portfolio shortcode (assuming the above issues can also be fixed), so is there a code you can give me for that?
Also, will that code work on my other portfolio pages?

Let’s look at this once you’ve consolidated your CSS and gotten the above working as you’d like. ??

I’ll get back to you on the image ratio issue.

However, the front page looks a bit disorganized now, so I was wondering if I could (as it is in the Portfolio Page template)
– use a square thumbnail to display the projects instead of having the images different dimensions

The Portfolio template is what allows you to display square featured images – that option isn’t available with the shortcode.

Kathryn,

OH my GOSH.
I totally overlooked that. I am facepalming right now.
I used a plugin called Microthemer to try to change the opacity of the page at first. I couldn’t get it to work the way I wanted, so I gave up on it eventually, but I forgot to clear the code from it.

D’oh!

Thanks for catching that!! ?? It’s looking great now.

Oh, by the way, I tried moving all of the edits from the CSS Editor to the child theme’s stylesheet… but then, they didn’t take effect! Strange. When I moved the code back to the CSS Editor from Jetpack, it worked again. Not sure why that is, but it’s nothing to worry about, right? I don’t really mind where the edits work from as long as they work, haha.

About the front page portfolio, I decided that aesthetics are more important than ease of construction in this particular case, so I’m switching back to the original Portfolio Page as the front page. Those squares just look so nice! It will be a little bit more trouble for me to curate the front page exactly as I want it, but it’s a sacrifice I’m willing to make. ?? Sorry for changing this around again, haha. (Oh, please just ignore the stuff I said about the header earlier!)

The only other problem I have with the portfolio now is that after setting the maximum number of projects to 6, it applies to all portfolio pages. I want my front page to be 6, but I want the actual portfolio page (the one in the menu) to display all projects on one page. I know I could use a new page with the portfolio shortcode to get around it, but I want those nice little squares that come with the built-in portfolio. Any way around this for just that one page?

Oh, and about the text… I would like to change the color of that #999 text to make it readable. Is there an easy way to do that, or do I have to search through the stylesheet and put each piece of code into the Editor with a new color code? (If I sound like a css noob here, it’s because I am, haha.)

Thank you again for your help and incredible patience!!!

When I moved the code back to the CSS Editor from Jetpack, it worked again. Not sure why that is, but it’s nothing to worry about, right?

That’s definitely strange, and something we could troubleshoot if you wanted. For example, if you were running a caching plugin or if the child theme wasn’t set up quite right, that could have an effect. If you’d like to pursue this, could you open a new thread for it? Thanks!

The only other problem I have with the portfolio now is that after setting the maximum number of projects to 6, it applies to all portfolio pages. I want my front page to be 6, but I want the actual portfolio page (the one in the menu) to display all projects on one page. I know I could use a new page with the portfolio shortcode to get around it, but I want those nice little squares that come with the built-in portfolio. Any way around this for just that one page?

My awesome colleague Michael came up with a custom function to get your own dimensions for portfolio projects in the shortcode.

Try adding this to your child theme’s functions.php file:

function dear_portfolio_shortcode_img_size() {
  add_image_size( 'dear-portfolio-th', 500, 500, true );
}
add_action( 'after_setup_theme', 'dear_portfolio_shortcode_img_size' );

function dear_portfolio_shortcode_thumbnail_size() {
    return 'dear-portfolio-th';
}
add_filter( 'jetpack_portfolio_thumbnail_size', 'dear_portfolio_shortcode_thumbnail_size' );

If your functions file is currently blank, be sure to add an opening PHP tag first:

<?php

You’ll need to regenerate your thumbnails after adding this function – you can use the Regenerate Thumbnails plugin.

If this doesn’t work, it might mean that your child theme isn’t set up properly, in which case please start a new thread so we can troubleshoot that separately.

Oh, and about the text… I would like to change the color of that #999 text to make it readable. Is there an easy way to do that, or do I have to search through the stylesheet and put each piece of code into the Editor with a new color code? (If I sound like a css noob here, it’s because I am, haha.)

You do have to find the elements in order to override them, but you can use a browser inspector to help with the job.

For example, if you wanted to start with the menu and footer text, this would make them white:

.main-navigation a, .site-info a, .site-info {
    color: #fff;
}

Hi Kathryn,

I think I figured out why the Jetpack CSS Editor was working but not the Child Theme Editor – it seems to have been caused by the child theme plugin I was using. Anyway, I switched to a different plugin, and it’s working now! I’m able to edit the css of the child theme directly. Yay! (I found out the plugin was at fault when it caused my site to crash and I had to ask my webhosting company for help. Haha… Not using that plugin again!)

Thank you, awesome colleague Michael!!!!
I added the code to the functions php and it works like a charm. ?? Sweet!
None of the images were broken, so I didn’t regenerate the thumbnails. Is this okay or should I do it anyway?

After a lot of messing around and exploring, I also got the text the way I wanted! Woo!
I was even able to figure out the footer php so I could add a thank-you. ??

Ok, so my last job is to make the make the portfolios look uniform, if I can.

So, is there a way to change that hover transition on the thumbnails in the portfolio pages? (And also on the front page, which isn’t using the portfolio page theme?)

And, this is a small thing, but the thumbnails in the portfolio have slightly rounded edges; is there a way to do that with the ones on the shortcode portfolio on the front page, too?

Thanks so much!!!!

Hi there, on the portfolio page, the hover effect is done with opacity. Here is the rule that does that.

.page-template-portfolio-page-php .jetpack-portfolio:hover, .project-navigation-wrapper .jetpack-portfolio:hover, .page-template-portfolio-template-php .jetpack-portfolio:hover, body.archive[class*="jetpack-portfolio"] .jetpack-portfolio:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out 0s;
}

To mimic that on the home page, which uses the shortcode, you can add this.

.jetpack-portfolio-shortcode img:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out 0s;
}

Alternately you can add the CSS selector to the first rule above and then style both the same and as you desire.

On the image radius on the Portfolio page, it is a long list of selectors, but the following will allow you to move that.

.page-template-portfolio-page-php .entry-thumbnail, .project-navigation-wrapper .entry-thumbnail, .page-template-portfolio-template-php .entry-thumbnail, body.archive[class*="jetpack-portfolio"] .entry-thumbnail, .page-template-portfolio-page-php .jetpack-portfolio img, .project-navigation-wrapper .jetpack-portfolio img, .page-template-portfolio-template-php .jetpack-portfolio img, body.archive[class*="jetpack-portfolio"] .jetpack-portfolio img {
    border-radius: 0;
}

sacredpath:

It worked!!!! Thank you so much!!! ??

It’s perfect now. Thanks so much for your help, everyone!!

-Ariel