Docs

[Trevor M]

Hello,

I want to achieve a different look for both my portfolio page, and the individual portfolio item pages. I’m using the Ethos stack. The below changes are a bit too extensive for me to do on my own. Please help me with these customization’s.

site URL: http://trevormc.cool
version: X Theme 4.3.1 / latest plugins
stack: Ethos

Portfolio Page – http://trevormc.cool/my-work
1 – I would like my portfolio page to display the portfolio items just as the Icon stack does. I’ve copied over the “template.layout-portfolio.php” file from the icon stack, to /public_html/wp-content/themes/x-child/framework/views/ethos but there are still styling issues.
2 – I would like to change the overlay color on the portfolio page items to this: #0ec891, instead of the white.
3 – Can I change the link icon / image to on the overlay?

Portfolio Item Page – ex: http://trevormc.cool/my-work/maximum-outdoors/
1 – I would like to remove the portfolio title + title section
2 – Change width of div.entry-wrap.cf to 40% – Change width of div.entry-featured to 60%. Resulting in a wider container. I was able to modify the .single-x-portfolio { width: in my browser to achieve this look http://imgur.com/K8BSjaX
3 – Delete this space in red: http://imgur.com/7Sx8zwz

BTW, it would be great to have the cornerstone functionality for these portfolio page types. I love the customization abilities with theme X. For a designer such as myself, being able to add depth to the display of my work is HUGE.

Thanks for all you guys do,
Trevor

[Lely]

Hello Trevor,

1.) Do you want this style:http://theme.co/x/demo/icon/1/portfolio/ ?
Please add the following CSS:

h2.h-entry-cover {
    display: none;
}
.x-iso-container.cols-3>.hentry {
     background-color: #fff; 
     padding: 7px !important; 
     margin-bottom: 30px !important; 
     border: 1px solid rgba(0,0,0,0.075) !important;
}

2.) & 3.) Please add this on your child theme style.css file:

.entry-cover:hover:before {
    opacity: 1;
}
.entry-cover:before {
    content: "\f0c1";
    display: block;
    position: absolute;
    padding-top: 25%;
    width: 100%;
    height: 100%;
    font-size: 42px;
    line-height: 72px;
    text-align: center;
    vertical-align: middle;
    color: #566471;
    opacity: 0;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: rgba(14,200,145,.8);
}

Choose what Icon you want then we will change the value on this line: content: "\f0c1"; from above.

Portfolio Item Page
1.)Are you referring to gray section with title maximum outdoors? If yes, please use the following CSS:

.single-x-portfolio header.x-header-landmark.x-container.max.width {
    display: none;
}

2.)

.single-x-portfolio .entry-featured {
    width: 60%;
}
.single-x-portfolio .entry-wrap {
    float: right;
    width: 40%;
}

3.) Upon checking, reguirements text is now aligned with the featured image. The space on top is now remove.
To enable Cornerstone for Portfolio, please go to Settings > Cornerstone :Check x-portfolio under Allowed Post Types

Hope this helps.

[Author]

Posts