Page 31 of 38 FirstFirst ... 212930313233 ... LastLast
Results 301 to 310 of 377
  1. #301
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    10,138
    Plugin Contributions
    77

    Default Re: ZCA Bootstrap Template

    Quote Originally Posted by Dave224 View Post
    I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.
    Code:
    <!--bof-navigation display-->
           <div id="navMainWrapper">
              <div id="navMain">
             <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                   <ul class="navbar-nav ml-auto">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
                     <ul class="dropdown-menu">
                     <li>
                        <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
                        <ul class="submenu dropdown-menu">
                               <li>
                              <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
                                              <ul class="submenu dropdown-menu">
                             <li>
                                <a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
                                                 </li>
                                              </ul>
                                           </li>
                                        </ul>
                                     </li>
                                 </ul>
                              </li>
                           </ul>
                        </div>
                     </nav>
                  </div>
               </div>
    See post #269 for a list of great links to various Bootstrap elements. Note, too, that https://w3schools.com has a bunch of "Try It" elements for Bootstrap.

  2. #302
    Join Date
    Jan 2004
    Posts
    66,131
    Blog Entries
    7
    Plugin Contributions
    267

    Default Re: ZCA Bootstrap Template

    Quote Originally Posted by Dave224 View Post
    I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.
    Code:
    <!--bof-navigation display-->
           <div id="navMainWrapper">
              <div id="navMain">
             <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                   <ul class="navbar-nav ml-auto">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
                     <ul class="dropdown-menu">
                     <li>
                        <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
                        <ul class="submenu dropdown-menu">
                               <li>
                              <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
                                              <ul class="submenu dropdown-menu">
                             <li>
                                <a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
                                                 </li>
                                              </ul>
                                           </li>
                                        </ul>
                                     </li>
                                 </ul>
                              </li>
                           </ul>
                        </div>
                     </nav>
                  </div>
               </div>
    The following seems to work, but only after adding some supporting CSS and Javascript, inspired from https://bootstrapious.com/p/bootstra...level-dropdown
    Code:
    <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
       <ul class="dropdown-menu">
           <li><a class="dropdown-item">Level 1 Item 1</a></li>
           <li class="dropdown-submenu">
               <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 1 Submenu</a>
               <ul class="dropdown-menu">
                   <li class="dropdown-submenu">
                      <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 2 Submenu</a>
                      <ul class="dropdown-menu">
                         <li>
                            <a class="dropdown-item" href="#">Level 3 Item 1</a>
                         </li>
                      </ul>
                   </li>
                   <li><a class="dropdown-item">Level 2 Item 2</a></li>
               </ul>
           </li>
       </ul>
    </li>


    stylesheet_submenu.css:
    Code:
    .dropdown-submenu {
      position: relative;
    }
    
    
    .dropdown-submenu>a:after {
      float: right;
      border: none;
       /* change the character and/or font below to suit what you have available */
      content: "\f0da";  
      font-family: 'FontAwesome';
    }
    
    
    .dropdown-submenu>.dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: 0px;
      margin-left: 0px;
    }
    jscript_submenu.php
    Code:
    <script>
    $(function() {
      // ------------------------------------------------------- //
      // Multi Level dropdowns
      // ------------------------------------------------------ //
      $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
        event.preventDefault();
        event.stopPropagation();
    
    
        $(this).siblings().toggleClass("show");
    
    
    
    
        if (!$(this).next().hasClass('show')) {
          $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
        }
        $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
          $('.dropdown-submenu .show').removeClass("show");
        });
    
    
      });
    });
    </script>
    You will probably need to tweak the CSS to increase some padding to provide indentation at subsequent levels, or add padding/margin classes to your HTML.
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  3. #303
    Join Date
    Jan 2007
    Location
    Illinois, USA
    Posts
    189
    Plugin Contributions
    0

    Default Re: ZCA Bootstrap Template

    Looking for an assist to help code my style sheet for the ZCAtemplate to put the logo & the tagline centered in the same area. I've been able to get the tag line to go above and below the logo in mobile view, but want them to be aligned with each other in desktop view.

    If you goto https://venturedesignandprint.co.uk/ you can see they have aligned the two using the bootstrap template.

    I am stuck figuring out the style sheet to the same with mine.
    Name:  nto.jpg
Views: 127
Size:  13.4 KB

    Here is the code as I have tpl_header.php currently:
    Code:
    <!--bof-branding display-->
    <div id="logoWrapper">
        
       <div id="logo" class="row align-items-center p-3"> 
       <?php if (HEADER_SALES_TEXT != '') {
               echo '<div class="col-sm-6">';
            } else {
                echo '<div class="col-sm-12">';
                }
                ?>
            <?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a><br>'; ?>
        </div>
    <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>    
        <div id="taglineWrapper" class="col-sm-12 text-">
    <?php
                  if (HEADER_SALES_TEXT != '') {
    ?>
          <div id="tagline" class="text-right"><?php echo HEADER_SALES_TEXT;?></div>
    <?php
                  }
    ?>
    <?php
      if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
        if ($banner->RecordCount() > 0) {
    $find_banners = zen_build_banners_group(SHOW_BANNERS_GROUP_SET2);
    $banner_group = 2;
    ?>
    
    <div class="zca-banner bannerTwo rounded">
    <?php 
    if (ZCA_ACTIVATE_BANNER_TWO_CAROUSEL == 'true') {
    require($template->get_template_dir('tpl_zca_banner_carousel.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_zca_banner_carousel.php'); 
    } else {
    echo zen_display_banner('static', $banner);
    }
    ?>
    </div>
    <?php
        }
      }
    ?>
        </div>
    <?php } 
    // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
      </div>
    
    </div>
    <!--eof-branding display-->
    NTO: building a better network thru collaboration
    www.needtoorder.com | www.coffeewitheinstein.com

  4. #304
    Join Date
    Jan 2010
    Posts
    27
    Plugin Contributions
    0

    Default Re: ZCA Bootstrap Template

    Try changing your
    Code:
    <div id="taglineWrapper" class="col-sm-12 text-">
    to
    Code:
    <div id="taglineWrapper" class="col-sm-6 text-right">
    like the Venture site did.

  5. #305
    Join Date
    Jan 2007
    Location
    Illinois, USA
    Posts
    189
    Plugin Contributions
    0

    Idea or Suggestion Re: ZCA Bootstrap Template

    Quote Originally Posted by dennisns7d View Post
    Try changing your
    Code:
    <div id="taglineWrapper" class="col-sm-12 text-">
    to
    Code:
    <div id="taglineWrapper" class="col-sm-6 text-right">
    like the Venture site did.
    THANK. YOU!
    that worked.
    NTO: building a better network thru collaboration
    www.needtoorder.com | www.coffeewitheinstein.com

  6. #306
    Join Date
    Jan 2007
    Location
    Illinois, USA
    Posts
    189
    Plugin Contributions
    0

    Default Re: ZCA Bootstrap Template

    Working on a site: www.coffeewitheinstein.com and I'm trying to enlarge the header logo
    ZC 1.5.7b
    php 7.3
    with Shopping cart Reminder
    Edit Orders
    TY Package tracker
    Email Export
    Clone Template
    ZCA Boot 4
    and Order Comment Boiler plate

    I've edited the includes/languages/english/mytemplate/header/php file and it isnt affecting the size of the displayed logo.

    Is this controlled elsewhere by the style sheet?
    NTO: building a better network thru collaboration
    www.needtoorder.com | www.coffeewitheinstein.com

  7. #307
    Join Date
    Jan 2004
    Posts
    66,131
    Blog Entries
    7
    Plugin Contributions
    267

    Default Re: ZCA Bootstrap Template

    The div containing it is set to col-sm-4 which means it only shows at 33% width on devices other than smallest mobiles.

    You can read up on Bootstrap's column grid rules at https://getbootstrap.com/docs/4.5/layout/grid/
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  8. #308
    Join Date
    Jan 2007
    Location
    Illinois, USA
    Posts
    189
    Plugin Contributions
    0

    Default Re: ZCA Bootstrap Template

    Quote Originally Posted by DrByte View Post
    The div containing it is set to col-sm-4 which means it only shows at 33% width on devices other than smallest mobiles.

    You can read up on Bootstrap's column grid rules at https://getbootstrap.com/docs/4.5/layout/grid/

    Most Excellent... My 10 year hiatus is showing its wings...
    NTO: building a better network thru collaboration
    www.needtoorder.com | www.coffeewitheinstein.com

  9. #309
    Join Date
    Apr 2011
    Location
    Espoo, Finland
    Posts
    30
    Plugin Contributions
    0

    Default Re: ZCA Bootstrap Template

    just in case...

    modules/bootstrap/centerboxes/fetured_products.php - line # 85

    Code:
    $title = '<h4 id="featuredCenterbox-card-header" class="centerBoxHeading card-header">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h4>';

  10. #310
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    10,138
    Plugin Contributions
    77

    Default Re: ZCA Bootstrap Template

    Quote Originally Posted by yesaul View Post
    just in case...

    modules/bootstrap/centerboxes/fetured_products.php - line # 85

    Code:
    $title = '<h4 id="featuredCenterbox-card-header" class="centerBoxHeading card-header">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h4>';
    Thanks for that! The correction will be part of v3.1.0 of the template.

    Update: Tracking as part of https://github.com/lat9/ZCA-Bootstra...late/issues/31
    Last edited by lat9; 11 Jan 2021 at 01:40 PM.

 

 
Page 31 of 38 FirstFirst ... 212930313233 ... LastLast

Similar Threads

  1. v155 Clone a Template [Support Thread]
    By lat9 in forum Addon Admin Tools
    Replies: 78
    Last Post: 20 Feb 2021, 10:14 PM
  2. v150 aBagon Template Support Thread
    By VJef in forum Addon Templates
    Replies: 54
    Last Post: 5 Sep 2020, 08:44 PM
  3. v155 ZCA Bootstrap Template 1.0 (BETA)
    By rbarbour in forum Addon Templates
    Replies: 74
    Last Post: 25 Apr 2018, 07:05 PM
  4. TB Sempre Template Support Thread
    By brandonturpin in forum Addon Templates
    Replies: 48
    Last Post: 19 Mar 2015, 06:33 PM
  5. Wallet Template - Support Thread
    By zami in forum Addon Templates
    Replies: 45
    Last Post: 25 Mar 2010, 10:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR