Navigation
Archive / resizing of slider when loading page
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • April 26, 2016 at 7:51 am #900251
    beni
    Participant

    hi there,

    I’m working on a client’s page and just got done building the structure, inserting most of the placeholders etc. I have a slider (slider revolution) below masthead on almost every page. Right now there’s only one type, but eventually I will create one for every page. Before I do I want to ask you whether there’s a fix for the quick resizing that happens every time a page loads itself. The initial space for the slider is about 80px higher than the slider itself it seems and as soon as the slider loads, the content jumps back up.

    site is located here: http://test.wgtreffpunkt.ch

    My guess is, that the visible menu bar at the top of the page somehow interferes with the loading process … I don’t know.

    Anyway, love your theme. I stopped using different themes, since I can accomplish most designs with yours. Keep it up.

    April 27, 2016 at 1:12 am #901496
    Rupok
    Member

    Hi there,

    Thanks for writing in! I can’t see any notable resizing that needs to be fixed. However you can try this CSS : 

    .x-slider-container.below {
  min-height: 242px;
}

    Hope this helps.

    Cheers!

    April 27, 2016 at 2:40 am #901594
    beni
    Participant

    thanks for the hint. I played a round a bit and ended up with the following:

    .x-slider-container.below {
    max-height: 242px;
    }

    Now the slider doesn’t jump anymore. (Maybe with a faster connection it might be not visible in the first place?)

    One more question if I may; I’d like to have the breadcrumbs always visible, even on the landing page (when it assumably only shows the home icon). Is there a way to do this?

    thanks a lot.

    April 27, 2016 at 12:25 pm #902643
    Jade
    Moderator

    Hi Beni,

    I have checked the slider on my end and it is not jumping anymore as well.

    For the breadcrumbs, because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

    Once you got it setup, login through FTP and find the file _breadcrumbs.php in wp-content/themes/x/framework/views/YOUR_STACK then create a copy of the file and place it in _breadcrumbs.php in wp-content/themes/x-child/framework/views.

    Then replace the content of_breadcrumbs.php to this:

    <?php

// =============================================================================
// VIEWS/INTEGRITY/_BREADCRUMBS.PHP
// -----------------------------------------------------------------------------
// Breadcrumb output for Integrity.
// =============================================================================

?>
  <?php if ( x_get_option( 'x_breadcrumb_display' ) == '1' ) : ?>

    <div class="x-breadcrumb-wrap">
      <div class="x-container max width">

        <?php x_breadcrumbs(); ?>

        <?php if ( is_single() || x_is_portfolio_item() ) : ?>
          <?php x_entry_navigation(); ?>
        <?php endif; ?>

      </div>
    </div>

  <?php endif; ?>

    Hope this helps.

    April 28, 2016 at 8:50 am #904132
    beni
    Participant

    Thank you for the reply. I think it would work:
    I already have a child theme set up to display the breadcrumbs below the slider (wp-header.php from another forum post I can’t find right now) It seems the two don’t work together. When I delete the wp-header.php the breadcrumbs show on the landing page as wished (Wahuu) but are located <u>above</u> slider again.

    Here’s the code from the php:
    <?php

    // =============================================================================
    // VIEWS/ETHOS/WP-HEADER.PHP
    // —————————————————————————–
    // Header output for Ethos.
    // =============================================================================

    ?>

    <?php x_get_view( ‘global’, ‘_header’ ); ?>

    <?php x_get_view( ‘global’, ‘_slider-above’ ); ?>

    <header class=”<?php x_masthead_class(); ?>” role=”banner”>
    <?php x_get_view( ‘ethos’, ‘_post’, ‘carousel’ ); ?>
    <?php x_get_view( ‘global’, ‘_topbar’ ); ?>
    <?php x_get_view( ‘global’, ‘_navbar’ ); ?>
    </header>

    <?php x_get_view( ‘global’, ‘_slider-below’ ); ?>
    <?php x_get_view( ‘ethos’, ‘_breadcrumbs’ ); ?>
    <?php x_get_view( ‘ethos’, ‘_landmark-header’ ); ?><html>
    <body>
    <script type=”text/javascript”>
    parent.processForm(‘&ftpAction=openFolder’);
    </script>
    </body>
    </html>

    I changed to Integrity in the design process tough – for some reason this still works. Also I had to place the breadcrumbs .php inside the */views/integrity Folder (not inside */views).

    Thanks in advance for your time and effort.
    Beni

    April 28, 2016 at 8:56 am #904140
    beni
    Participant

    Ok, just sorted it out myself. By replacing the “ethos” references with “integrity” it works. Actually tried that before I posted the above question already bus must’ve have made a mistake somewhere. I don’t know. Sorry for bothering.

    Have a great day.
    Beni

    April 28, 2016 at 10:01 pm #905080
    Rad
    Moderator

    No problem and glad it’s okay now 🙂 Thanks!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-900251 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>