[Support request] Pro Cards Layout Not Compatible with Dispatch Theme

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Pro Cards Layout Not Compatible with Dispatch Theme

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #25808
    Heather
    Participant

    I’m really confused right now. I’m currently using the dispatch theme for generatepress(premium). I’ve also purchased wp show posts pro. Upon activating pro, I tried to utilize the card layouts, I even chose the button to ‘set card styles’. Several times even. However, it was never applying the styles properly like the demo.

    Upon more investigating, I noticed this thread: https://wpshowposts.com/support/topic/cards-are-not-displaying-as-per-demo/

    In this thread, it appears to me this user is using the same dispatch theme as I am. Yet the response is “YOUR css code is conflicting with wp sho post css code”. Please remove this code so there is no conflicts.

    Problem is, a lot of that code is styling the dispatch theme wp show posts. No big deal right? I don’t mind using the show posts default styling from the pro plugin. However, in an effort to start completely clean, I removed ALL custom css from dispatch (wp customizer). I wanted to make sure that wp show posts pro was going to display the way I needed according to the styles in the demo. However, I did not get that at all. My output looks terrible.

    Then I noticed this blog post and how it references the same person who made the wp show posts, was the same person who made the dispatch theme. Why on earth would this person make conflicting code? Could that really be a giant mistake on his behalf? I feel like I shouldn’t have to remove any custom css if it was properly assigned classes that wouldn’t conflict with each other.

    1. I want to be able to use all my dispatch default css code from without conflicting with any of the show post pro plugin styles. Is this possible? If so, how?
    2. I would assume choosing ‘set card styles’ would default my settings to look like the demo. But it didn’t do that. Is that possibly a bug? Do I really need to do the manual work to make it look like the demo? If so, why would there be a button to ‘set card styles’?

    Here is my playground page. https://fluentonmsft.com/new-home

    Here is the original code for dispatch theme.
    /* GeneratePress Site CSS */ /* Colors */
    .main-navigation ul li:after {
    background-color: #000;
    }

    .main-navigation .inside-navigation {
    border-top: 0.5px solid #d4d7d8;
    }

    .wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
    color: #fff;
    }
    .navigation-search.nav-search-active {
    background-color: rgba(255,255,255,0.95);
    top: 100%;
    }

    /* Theme Global */
    @media (min-width: 769px) {
    body {
    margin: 0 30px;
    }
    }

    body.single-post.no-sidebar .site-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    }

    /* Navigation */
    .second-nav.grid-container {
    padding: 0;
    }

    @media (min-width: 769px) {
    .main-navigation ul li {
    position: relative;
    }

    .main-navigation ul li:after {
    content: ”;
    position: absolute;
    height: 0;
    width: 100%;
    bottom: 0;
    left: 0;
    pointer-events: none;
    filter: hue-rotation(90deg);
    -webkit-filter: hue-rotation(90deg);
    -webkit-transition: height 0.35s ease;
    transition: height 0.35s ease;
    }

    .main-navigation ul li:hover:after, .main-navigation ul li.current-menu-item:after {
    height: 6px;
    }
    }

    /* Widgets */
    .widget-title {
    margin: 1em 0;
    font-size: 0.8em !Important;
    }

    .widget .wp-show-posts article {
    margin-bottom: 0.5em !important;
    }

    .zero-padding {
    padding: 0 !important;
    }

    .widget.no-background {
    background-color: transparent;
    }

    /* Buttons */
    button, html input[type=”button”], input[type=”reset”], input[type=”submit”], a.button, a.button:visited, a.wp-block-button__link:not(.has-background) {
    pointer-events: initial !important;
    border-color: inherit;
    border: 1px solid;
    }

    /* Page Heros */
    .page-hero.overlay {
    -webkit-box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
    }

    .gradient-overlay {
    position: relative;
    z-index: -1;
    }

    .gradient-overlay:after {
    content: ”;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(3, 89, 155, .5)), to(rgba(14, 161, 234, .6)));
    background: linear-gradient(rgba(3, 89, 155, .5), rgba(14, 161, 234, .6));
    z-index: -1;
    }

    /* Blog */
    .generate-columns .inside-article {
    padding: 0 0 15px;
    }

    @media (max-width: 768px) {
    .generate-columns .inside-article>*:not(.post-image) {
    padding: 0 15px;
    }
    }

    .generate-columns-container article .inside-article .post-image {
    margin-bottom: 0.5em;
    }

    .generate-columns-container article .inside-article .entry-summary {
    margin-top: 0.5em;
    font-size: 0.8em;
    }

    .generate-columns-container article .entry-header, .wp-show-posts-entry-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    }

    @media (min-width: 768px) {
    .generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    }

    .wp-show-posts .wp-show-posts-inner {
    overflow: hidden;
    }

    @media (min-width: 420px) {
    .wpsp-align .wp-show-posts-image {
    margin-bottom: 0;
    }
    }
    .wpsp-align .wp-show-posts-image a, .wpsp-align .wp-show-posts-image img {
    height: 100%;
    }

    .generate-columns-container article .inside-article img, .wp-show-posts-image img {
    -o-object-fit: cover !important;
    object-fit: cover !important;
    }

    /* WPSP Grids */
    /* Single column align side image */
    /* Add wpsp-align class to to WPSP List shortcode wrapper */
    @media (min-width: 420px) {
    .wpsp-align .wp-show-posts-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    }

    .wpsp-align .wp-show-posts-inner>div {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    }
    }

    @media (max-width: 768px) and (min-width: 420px) {
    .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
    margin-right: 1.5em;
    }
    }

    /* magazine Grid Golden Ratio 5 block standard */
    /* Add wpsp-grid class to WPSP List shortcode wrapper */
    @media (min-width: 600px) {
    .wpsp-grid .wp-show-posts {
    display: grid;
    }
    }

    @media (min-width: 900px) {
    .wpsp-grid .wp-show-posts {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr auto;
    }

    .wpsp-grid .wp-show-posts article:first-child {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(2) {
    grid-column: 5 / end;
    grid-row: 1 / 2;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3) {
    grid-column: 5 / 7;
    grid-row: 2 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(4) {
    grid-column: 7 / end;
    grid-row: 2 / 4;
    }
    }

    @media (max-width: 899px) and (min-width: 600px) {
    .wpsp-grid .wp-show-posts article {
    grid-column: span 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
    grid-row: 3;
    grid-column: span 2;
    }
    }

    .wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
    height: 250px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    }

    .wpsp-grid article:first-child .wp-show-posts-image a img {
    height: 500px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    }

    .wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
    display: none;
    }

    /* WPSP Card Styling */
    /* Add wpsp-card class to WPSP List shortcode wrapper */
    .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    }

    :not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
    margin-bottom: 0 !important;
    }

    .wpsp-card .wp-show-posts-inner {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    .wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    }

    .wpsp-card article {
    position: relative;
    overflow: hidden;
    }

    .wpsp-card article, .wpsp-card article .wp-show-posts-image img {
    -webkit-backface-visibility: hidden;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
    }

    .wpsp-card article:hover .wp-show-posts-image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
    }

    /* Post Navigation */
    #post-nav a {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    @media (max-width: 768px) {
    #post-nav a {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    }
    }

    #post-nav, #post-nav .post-nav-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    #post-nav {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 60px;
    }

    #post-nav .post-nav-wrap {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 120px;
    height: 100%;
    padding: calc(6% + 1em) 5%;
    -webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    -webkit-transition: -webkit-box-shadow 500ms;
    transition: -webkit-box-shadow 500ms;
    transition: box-shadow 500ms;
    transition: box-shadow 500ms, -webkit-box-shadow 500ms;
    position: relative;
    box-sizing: border-box;
    }

    #post-nav .post-nav-wrap:hover {
    -webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
    }

    .post-nav-wrap>* {
    color: #fff;
    }

    .post-nav-date {
    font-size: 0.9em;
    }

    .post-nav-title {
    margin: 5px 0 !important;
    }

    .post-nav {
    min-width: 60px;
    position: absolute;
    top: 0;
    border-radius: 0 0 2px 0;
    }

    .post-nav:first-child {
    left: 0;
    }

    .post-nav:last-child {
    right: 0;
    }

    .post-nav {
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 0.7em;
    text-transform: uppercase;
    background-color: #ff1956;
    color: #fff !important;
    }

    .header-widget .lsi-social-icons li {
    margin-bottom: 0 !important;
    }

    body .happyforms-flex {
    padding: 0;
    }
    /* End GeneratePress Site CSS */

    /* Social Icons */
    .social-home, .home-logo {text-align:center;margin-bottom:.5rem;}
    ul.social.social-header {padding:0;margin:0;}
    ul.social li {padding:.5rem 0;}
    ul.social li:last-child {padding-right:0;}
    .social-icon {background:#fff;border: solid 1px #8a8886;border-radius:50%;padding:1rem .25rem;}
    .social-icon:hover {border: solid 1px #605e5c;}
    .social-header .social-icon {border: solid 1px #a19f9d;}
    .social-header .social-icon:hover {border: solid 1px #d2d0ce;}
    .social-icon img {margin-bottom:.4rem;height:48px;}
    .social-counter {margin:.5rem auto;}
    .socialcounter-legend {font-size:.9rem;}

    li.teams-share {display:none !important;}
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    li.teams-share {display:inline-block !important;}
    }

    #25834
    David Beckwith
    Participant

    Hi there,

    Dispatch, which i am the creator of, was built before the Cards feature existed in WPSP Pro. It’s actually what lead us to create the Cards feature.
    We ideally would like to add a Pro version of the site, which would eliminate the custom CSS and Hook Elements that Dispatch requires for its card layouts and remove these conflicts.
    I am looking at how we can at least make Dispatch more compatible…

    If you’re using WPSP Pro and the Cards feature, then a lot of the customizations that Dispatch installs will need to be removed. There should be no issue with your own custom CSS modifications.

    Lets take look at the modifications that are required:

    1. To begin with Dispatch with the Free versions requires each shortcode to be wrapped in a <div> with a specific class as explained here:

    https://gpsites.co/dispatch/using-wp-show-posts/

    This is not required in Pro version as each of those layouts can now be created with a Card List.
    So each of the original imported lists with their wrapper can be replaced with a WPSP Card shortcode.

    2. Dispatch adds an additional wrqpper to the WPSP Posts using Hook elements, this is not required when using Cards as this is automatically added.

    Go to Appearance > Elements and delete the 2 x Hooks titled: WPSP Open Wrapper & WPSP Close Wrapper

    3. In the original import the Customizer > Additional CSS would have a fair aamoutn of CSS. Attached here is the CSS Specific to WPSPS:

    https://gist.github.com/032bd79e29a1beb752b6d9d1c898e593

    Of that CSS the only code required is for the Header Element grid, and those lines are 34 – 96.

    4. If you’re using the Header Element grid then you will need to replace the Shortcode in Apperance > Elemnents > Magazine Grid.
    The Cards shortcode you use to replace this will need to be a Single Column.

    Sorry theres a lot of steps, but there is no simple way around this, as Dispatch uses custom elements and CSS to replicate what Pro does automatically.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.