change appearance of pages based on shown project types

  • Unknown's avatar
    travelmediate · Member ·

    We want to change the appearance of some pages and think it should be possible with a change in the CSS, but can not find where to do so.

    For example the page: We have 5 pages for cities: the first one is:
    https://theroadshowblog.wordpress.com/destinations/amsterdam/

    At the bottom you see all portfolio items and can move to Amsterdam, Brussels etc.

    I would like to change the appearance of this to Amsterdam labeled projects for the Amsterdam page, for Brussels to Brussels labeled projects etc. as default instead of first default All

    I assume I should be able to change that in the CSS of the page, where I should be able to change a link, but I can not find where?

    Can you help me with that?

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

  • Unknown's avatar
    hallluke · Member ·

    The portfolio project filter is controlled by javascript so there’s no perfect solution. However I think you can get pretty close to what you’re after using attribute selectors. It will take a bit of work but try this out and see what you think:

    body.parent-pageid-165 #filter-nav {
  display:none;
}
body.parent-pageid-165 #projects {
  height: 100%!important;
}
body.parent-pageid-165 #projects .project {
  display: none;
}
body.page-id-129 #projects div[data-groups*="amsterdam"] {
  display: block;
  transform: unset!important;
  position: initial!important;
  float: left;
}

    So the first 3 rules hide the filters, set the section height to match the amount of projects we display and then hide all the projects (this will make sense in a second) on each of the pages with the destinations page as a parent.

    The last rule you will need to duplicate once each for every destination page you have. The one in my example is set up for Amsterdam.

    It basically unhides each of the projects that contains the string “amsterdam” on the relevant page and then undoes the javascript positioning and shoves all the projects back up the screen next to one another.

    Copy it as many times as you need, change the “amsterdam” bit to the names of your other project filters and change the page ID number too. You can find the page ID by right clicking, selecting “inspect element” (or similar) and then viewing the page HTML, it will be listed as a class of the body tag close to the top.

    Let me know if you get stuck. Make sure you match the IDs with the correct attributes and remember, the projects with no matches won’t show up at all except on the parent page.

  • The topic ‘change appearance of pages based on shown project types’ is closed to new replies.