Change order of portfolio elements?

  • Unknown's avatar
    patertmg · Member ·

    Is there a way to change the order of the portfolio section in CSS? Say, default order is: title, tags, content. But I want to have the title, then the content summary and at the end the tags. Help appreciated!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, we can do that with the following CSS. Make sure and view things on tablet and phone to make sure that nothing goes awry. From my testing, the below solution seems to work on all screen sizes. 

    .home .portfolio-entry {
    position: relative;
}
.home .portfolio-entry .portfolio-entry-meta {
    position: absolute;
    bottom: 0;
}
.home .portfolio-entry .portfolio-entry-content {
    padding-bottom: 30px;
}
  • Unknown's avatar
    patertmg · Member ·

    Hi sacredpath – that was great, thanks a lot!! Is it also possible to change the Word „Schlagwörter“ (it means „tags“ in German) to something else I choose, e.g. „Etikett“? That would be nice.

    Also I have another question: Why is the Dyad Theme listed under „Portfolio“ (see https://wordpress.com/themes/filter/portfolio/), when apparently it has no special Portfolio features? I mean, I would love to discover it has features, but so far I was not able to…

    Thanks and God bless

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, Dyad fully supports the Jetpack Portfolio feature. You can read more about those features in our Portfolio support page. As an example, here is a link to your full Portfolio page, which shows all of your portfolio projects in a grid.

    For the label on the projects, you can add the following and then edit the “New Title” text in the content declaration. If the title is longer than the original, this may get tricky to make work. 

    .project-tags span:before {
    visibility: visible !important;
    content: "New Title:";
    position: absolute;
    left: 0;
}

    One other note. I see that you reduced the bottom padding on .home .portfolio-entry .portfolio-entry-content from 30px to 15px. On smaller tablets and phones this is going to meant that the summary for the project is going to overlap the project tags. View your site on your phone with it at 15px and you will see what I mean. 30px was the smallest number that didn’t create an overlap, but anytime you do things like this with position: absolute; there is no guarantee that things are always going to work perfectly.

  • The topic ‘Change order of portfolio elements?’ is closed to new replies.