custom CSS and layout for Project Details in Portfolio

[elaine]

Hi,

I would like to amend the styling and layout of the Project Details block on the portfolio pages.

1) Label and field order.
I would like to swap the order so the field label with field content below is displayed. I’ve played around with the ‘single-portfolio.php’ file to achieve this () but can’t seem to adjust the spacing properly (possibly a CSS issue – see below)

2) CSS / Styling

Because I want to swap the field label and content, I was looking to change the styling of the portfolio-label so the dashed line is displayed underneath the field label. I located the css code from the style.css as below

.portfolio-label { text-transform: uppercase; display: block; color: #999790; border-top: 1px dashed #b3b0a8; padding: 0; margin: 0; }

I’ve tried to then amend this to border-bottom in both child theme and the custom css tab in theme options but both display no change.

Would be grateful to find out where I’m going wrong..

Thanks.

[livemesh]

I made the following change that can be inserted into Custom CSS panel in theme options –

.portfolio-sidebar p {
    margin: 0 0 20px;
}

.portfolio-label {
    border-bottom: 1px dashed #B3B0A8;
    border-top: none;
}

and display changed to something like the attached screenshot. Of course, I moved the label div element up – above the p element containing text.

[elaine]

I was close but yet so far..

Thanks very much for your quick reply!

Much appreciated.

[Author]

Posts