Port // CSS for Homepage Recent Projects Section

marieevepreaux · Member · Apr 25, 2016 at 11:09 pm
Copy link

Add topic to favorites
Hello good people of the support forums!

I am looking for the CSS code id need to change a few parameters of the Homepage “Recent Projects” (portfolio) section in the Port Theme. Here’s what I am looking to do:

1- Title and subtitle (POLISHED PROJECTS a glimpse at some realizations) centered

2- The shadow/hover color for each project another color – right now it is a dark gray, I’d like it white

3- Randomize the projects displayed on the Homepage

4- Not on the Homepage, but I would like to change the background color of the carousel image display to something else than black; can I do that?

Thanks a lot for your help!

The blog I need help with is http://studioborealis.com (but for whatever reason the forum wont allow me to tell you that as it normally does)
thesacredpath · Member · Apr 26, 2016 at 3:21 am
Copy link
Hi there,

1- Title and subtitle (POLISHED PROJECTS a glimpse at some realizations) centered

This will center the project section title and subtitle on the home page.
```
.home #projects .inside {
    text-align: center;
}
```
2- The shadow/hover color for each project another color – right now it is a dark gray, I’d like it white

The first rule sets the color to white on hover and the second will allow you to adjust the opacity. In this case, the larger the number the more transparent the white overlay.
```
#content .project.small .inside {
    background-color: #fff;
}
#content .project.small a:hover img {
    opacity: 0.2;
}
```
3- Randomize the projects displayed on the Homepage

We cannot do this with CSS. It would require either javascript or PHP to do that, and we cannot use those at WordPress.com.

4- Not on the Homepage, but I would like to change the background color of the carousel image display to something else than black; can I do that?

Are you talking about a slideshow you have inserted into a page or post, or are you talking about the carousel that comes up after you click on an image in a gallery?
marieevepreaux · Member · Apr 26, 2016 at 7:53 pm
Copy link
Thanks a lot!

I mean the carousel that comes up after you click an image in a gallery. Right now these images show up on a black background, but I have seen another website using Port that has a white background carousel.
thesacredpath · Member · Apr 26, 2016 at 8:43 pm
Copy link
With the carousel, you can run into some elements where the color can’t be changed since they have used an !important keyword on the declaration in the original code and it can’t be overridden in the custom CSS. This is about the best I can do.
```
.jp-carousel-overlay {
    background: #fff none repeat scroll 0 0 !important;
}
textarea#jp-carousel-comment-form-comment-field {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0 !important;
}
.jp-carousel-image-meta {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0 !important;
}
```
If you display the image meta data (aperture, camera, etc.) that area will remain darker. I’ve lightened it up to a grayish background color, but can’t control the text color, so can’t take it to white. The background color on the comments/reblog section at the top of the meta I cannot override.
marieevepreaux · Member · Apr 26, 2016 at 8:52 pm
Copy link
Thank you! It worked fine for what I wanted to do! I appreciate your help!
thesacredpath · Member · Apr 26, 2016 at 9:18 pm
Copy link
Awesome, and you are welcome.

No items found.