Implementing Foundation / Custom CSS

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Darren Cooney

    (@dcooney)

    10 years, 4 months ago

    Hi lschatzkin,
    You would add your column markup to the repeater template.

    for example.
    You WordPress template

    <div class="row">
<?php echo do_shortcode('[ajax_load_more]'); ?>
</div>

    and then your Repeater Template

    <article class="medium-6 columns">
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</article>

    Plugin Author Darren Cooney

    (@dcooney)

    10 years, 4 months ago

    Or you could maybe do it all right in your repeater template.

    <?php
   if($alm_item%2 == 1){
      echo '<div class="row">';
   }

   <article class="medium-6 columns">
   <h2><?php the_title(); ?></h2>
   <?php the_excerpt(); ?>
   </article>

   if($alm_item%2 == 0){
      echo '</div>';
   }
 ?>

    Thread Starter lschatzkin

    (@lschatzkin)

    10 years, 4 months ago

    The first example is working. The second one seems to break the Load More button.
    Thank you!

    Thread Starter lschatzkin

    (@lschatzkin)

    10 years, 4 months ago

    The second example is working now, there was a couple of unclosed PHP tags. Problem now is the Load More is only working the first time I click it. Any ideas?

    Plugin Author Darren Cooney

    (@dcooney)

    10 years, 4 months ago

    Ok good.
    Not sure why that would be happening… Does the button have a .done class after the first click?
    Can you share a link?

    Thread Starter lschatzkin

    (@lschatzkin)

    10 years, 4 months ago

    Sure, here’s the link: http://therealdemo.therealnews.com/ .

    Here’s the shortcode I’m using : [ajax_load_more post_type=”trnn_story” offset=”12″ posts_per_page=”12″ pause=”true” scroll=”false” destroy_after=”30″ button_label=”Load More Stories” button_loading_label=”Loading Stories…” css_classes=”AJM_test_class”]

    Plugin Author Darren Cooney

    (@dcooney)

    10 years, 4 months ago

    It must be an issue with the repeater template. Sometimes when a template is not opened and closed with an HTML element the plugin gets confused.

    Can you try implementing the first example I provided to see if that fixes things?

    <div class="row">
<?php echo do_shortcode('[ajax_load_more]'); ?>
</div>

    With this example you would need to remove the grid code (.row) from your repeater template.

    Plugin Author Darren Cooney

    (@dcooney)

    10 years, 4 months ago

    I assume you have more than 24 posts in your trnn_story post type?

    Thread Starter lschatzkin

    (@lschatzkin)

    10 years, 4 months ago

    Hi,
    It does work if I use the first method, but the HTML is off . Can you take a look and see what’s going wrong? http://therealdemo.therealnews.com/
    Thanks,
    Laura

    Plugin Author Darren Cooney

    (@dcooney)

    10 years, 4 months ago

    Yea the issue is you need to clear each row because foundation uses floats.

    Add this CSS to you site.

    .alm-reveal .medium-4.columns {
  display: inline-block;
  float: none;
  padding-bottom: 20px;
  vertical-align: top;
}

    slamorte

    (@slamorte)

    10 years, 3 months ago

    Hi,

    Still having an issue with styling.

    I’ve put two ALM buttons on my page for you to look at, each pulling a different template (we bought the template folder upgrade).

    First ALM

    The first one uses a shortcode to call a simple repeater template that does not add one row per three content items, and uses your CSS to override the Foundation floats.

    Shortcode

    [ajax_load_more theme_repeater="load-more-stories.php" post_type="trnn_story" offset="13" posts_per_page="12" pause="true" scroll="false" destroy_after="36" css_classes="row" button_label="See more stories ≫"]

    Template:

    <div class="medium-4 columns norow">

   <?php if ( has_post_thumbnail() ) { ?>
   <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('block');?></a>
   <?php } ?>

   <?php echo the_terms( $post->ID, 'topics', '<div class="labels">',' ','</div>' ) ?>

   <a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>

   <?php echo wp_trim_words( get_the_excerpt(), 20);?>

</div>

    CSS

    .alm-reveal {
  .medium-4.columns.norow {
    display: inline-block;
    float: none;
    padding-bottom: 20px;
    vertical-align: top;
    width: 33%;
  }
}

    The problem here is that even with your styling addition only two of the medium-4 content items appear per ‘row’, unless I also override Foundations width setting (add “width=33%;” to the CSS). However if I manually set the width I get unwanted results on other screen sizes — it overrules Foundation’s responsiveness. Essentially the position of the second content item shift slightly when changing from float: left to display: inline-block.

    Second ALM

    The second one uses a shortcode to call the repeater that adds one row per three content items and uses the default Foundation styling.

    <?php if($alm_item%3 == 1){echo '<div class="row">';} ?>

<div class="medium-4 columns">

  <?php if ( has_post_thumbnail() ) { ?>
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('block');?></a>
    <?php }  ?>

    <?php echo the_terms( $post->ID, 'topics', '<div class="labels">',' ','</div>' ) ?>

    <a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>

    <?php echo wp_trim_words( get_the_excerpt(), 20);?>

  </div>

  <?php if($alm_item%3 == 0){ echo '</div>'; } ?>

    The styling here is great and fully Foundation. The problem is the Load More button is “done” after the first press. You said “Sometimes when a template is not opened and closed with an HTML element the plugin gets confused,” so I also wrapped the repeater in another div element but it didn’t help.

    Website is here and login available on request.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Implementing Foundation / Custom CSS’ is closed to new replies.