We're merging with GenerateBlocks! Learn more here.

[Resolved] CARD STYLE

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support CARD STYLE

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #19553
    Josep
    Participant

    Hello

    When I look at my cards (Polaroid) My titles and other text is not appearing the same as in the demos. What I’ve to do?

    https://ibb.co/sbjdcyZ

    I would like to send you the website in private.

    Thanks

    #19575
    elvin
    Moderator

    Hi Josep,

    Looking at the demos here – https://demos.wpshowposts.com/cards/ your screenshot seems to be set to one of the Overlay styles rather than Polaroid.

    Can you double check its settings?

    You can change the text, title and read more button on WP Show Posts > Contact settings.

    As for Social icons, these are set on WP Show Posts > Social settings.

    From there, you can try matching what is shown on the demo. 😀

    Note: If the settings doesn’t apply after saving changes, you may have to clear WordPress & browser cache.

    I would like to send you the website in private.

    You can send your site details on the contact form found here – https://wpshowposts.com/contact/

    If possible, please include the link to the topic so we know which topic the details is associated with. Thank you.:)

    #19619
    Josep
    Participant

    Hello,

    Thanks for your reply, I’ve already send a form with my website.

    As you can see on the screenshot I’ve selected the polaroid card and cache cleared

    https://ibb.co/yqznCGB

    You will see on my website, it’s the first “Entry” After the Hero.

    #19621
    elvin
    Moderator

    Thanks, I saw your site.

    After checking the site, I’ve noticed that you have multiple WPSP lists within 1 page.

    Perhaps you’ve added a custom CSS code for the Hero WPSP list that uses the same CSS class selector for your WPSP polaroid list.

    If it is a custom code, you’ll probably have to slightly modify that CSS code to only apply it on your Hero WPSP list.

    Your Hero WPSP list has an ID of wpsp-961. I believe you can use that for custom CSS selection. Ex: #wpsp-961 > .wpsp- ....

    #19625
    Josep
    Participant

    Yes, I’ve some CSS, would you like to help me fixing that css:

    /* 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)

    .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 */
    @media (min-width: 769px) {
    #right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    }
    }

    #19654
    elvin
    Moderator

    Before we start: Make a backup of your current CSS codes. (incase you didn’t paste it all on the code above).

    You can start with this:

    Replace all the css codes between /* WPSP Card Styling */ /* Add wpsp-card class to WPSP List shortcode wrapper */ and /* Post Navigation */ with this code:

    /* WPSP Card Styling */
    /* Add wpsp-card class to WPSP List shortcode wrapper */
    #wpsp-961 > .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    }
    
    #wpsp-961 > :not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
    margin-bottom: 0 !important;
    }
    
    #wpsp-961 >  .wpsp-card .wp-show-posts-inner {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    
    #wpsp-961 > .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-961 > .wpsp-card article {
    position: relative;
    overflow: hidden;
    }
    
    #wpsp-961 > .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-961 > .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;
    }

    This should isolate these styles to your hero WPSP list. The other lists should be back to their defaults unless we missed a few selectors.

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