Why does this shortcode mess up my page

  • Resolved cayindustries

    (@cayindustries)


    9 years, 2 months ago

    Hello. Can you please take a look at this page:

    https://www.thesocketroll.com/productsr-blue/

    and see why the shortcode [sc name=”Paypal “] is skewing my page.

    I placed the code in the text section of the page first and then the visual section and still got the same skewed result.

    Any information would be very helpful.

    Thanks!

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

  • nothing to do with the theme.

    seems to be a conflict of the CSS class .container which is both used by the theme and the shortcode function …

    what is the full code of the shortcode function?

    are you using a plugin for that?
    if yes, where did you get that plugin from?

    Hi cayindustries

    Thanks for using our theme.

    For products display to you can use eCommerce plugins.

    This theme compatibility with eCommerce plugins.

    For PayPal products to re-configure the this system in proper way.

    Add the css as per products.

    Now some css are conflict.

    If you have more query let me know.

    Thanks

    Thread Starter cayindustries

    (@cayindustries)

    @michael – I am not using a plugin and I thought the container would cause the issue. I tried to play with the padding, but no joy. Let me know what you think and how I could change it. Thanks.

    Here is the complete code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="box">

  <div id="innerbox">

    <div id="headerbox">

      <h4 id="price"><span id="pricestyle">price:</span>$34.99</h4>

      <h2 id="plus">+</h2>

      <h4 id="shipping"><span id="shipstyle">shipping:</span>$7.95</h4>

      <h2 id="total"><span>Total:</span>$42.94<span id="tax"> + tax</span></h2>

      <h6 id="Alternate">*If shipping outside the US please see alternate shipping costs below. Total price will be calculated on checkout page.</h5>

    </div>

    <div class="container">

      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">

        <input type="hidden" name="cmd" value="_xclick">

        <input type="hidden" name="business" value="2ZF8FQ9RWU4ZS">

        <input type="hidden" name="lc" value="US">

        <input type="hidden" name="item_name" value="The Socket Roll">

        <input type="hidden" name="amount" value="34.99">

        <input type="hidden" name="currency_code" value="USD">

        <input type="hidden" name="button_subtype" value="services">

        <input type="hidden" name="no_note" value="0">

        <input type="hidden" name="cn" value="Add special instructions to the seller:">

        <input type="hidden" name="no_shipping" value="2">

        <input type="hidden" name="weight_unit" value="lbs">

        <div id="position">

          <label for="qty">Qty.</label>

          <input type="text" name="quantity" id="qty" size="3" value="1" required>

      <!-- Button Images -->

          <div id="ppImage">

            <input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/buy-logo-medium.png" border="0" name="submit" alt="Buy now with PayPal!">

          </div>

        </div>

        <div id="accepted">

          <input type="image" src=" https://openmerchantaccount.com/img/accepted_payment200x25px.png" alt="Accepted Payment Methods" />

        </div>

        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

      </form>

    </div>

  </div>

  <div class="moreShipping">

    <ul class="no-js">

      <li>

        <p class="clicker">+ Alternate Shipping Costs</p>

        <ul>

          <li>Alaska</li>

          <li>Hawaii</li>

          <li>Puerto Rico</li>

          <li>U.S. Virgin Islands</li>

          <li>- $9.95</li></br>

          <li>Canada and International</li>

          <li>- $29.95</li></br>

        </ul>

      </li>

    </ul>

  </div>

    <!--<p>+ Additional Shipping Costs</p>-->

</div>

<style>

#box {

  top: 360px;

  right: 90px;

  width: 250px;

  border-radius: 10px;

  box-shadow: -3px 2px 8px rgba(77, 77, 77, 0.5);

  background-color: rgb(255, 255, 255);

  position: fixed;

}

#innerbox {

  width: 100%;

  height: 100%;

  position: relative;

}

#headerbox {

  background-color: rgb(245, 245, 245);

  border-radius: 10px 10px 0px 0px;

  border-bottom: 1px solid rgb(162, 162, 162);

}

#pricestyle {

  font-weight: 300;

  font-size: 13px;

  margin-right: 8px;

  color: rgb(107, 107, 107)

}

#price {

  width: 130px;

  padding-top: 10px;

  padding-bottom: 4px;

  margin: auto;

}

#plus {

  font-weight: 700;

  color: rgb(43, 43, 43)

}

#shipstyle {

  font-weight: 300;

  font-size:13px;

  margin-right: 8px;

  color: rgb(107, 107, 107)

}

#shipping {

  width: 130px;

  padding-bottom: 4px;

  border-bottom: 1px solid rgb(152, 152, 152);

  margin: auto;

}

h2,h4 {

  margin: 0px;

  text-align: center;

  font-family: "Open Sans",sans-serif;

}

h2 span {

  font-size: 13px;

  margin-right: 8px;

  font-weight: 300;

  color: rgb(107, 107, 107);

}

#total {

  padding: 2px 0px 6px 0px;

}

#tax {

  font-style: italic;

  color: rgb(0, 0, 0);

}

.container {

  width: 200px;

  height: 103px;

  margin: auto;

  padding:25px 0px;

}

h6 {

  margin: 0px;

  text-align: center;

  padding-top: 15px;

  padding-right: 20px;

  padding-bottom: 20px;

  padding-left: 20px;

  font-family: "Open Sans",sans-serif;

  font-weight: 400;

  color: rgb(107, 107, 107);

}

#position {

  width: 170px;

  margin: auto;

}

#qty {

                -webkit-border-radius: 5px;

                -moz-border-radius: 5px;

                border-radius: 3px;

}

#ppImage {

padding-top: 20px;

}

#accepted {

  padding-top: 3px;

}

.moreShipping {

  margin-left:0px;

  font-family:"Open Sans",sans-serif;

  font-size: 13px;

  position: relative;

  color: rgb(56, 57, 134);

  padding-top: 0px;

}

.moreShipping ul {

  position: absolute;

  padding-left: 0px;

  margin-left: 0px;

  font-weight:600;

}

.moreShipping ul li ul {

  position:relative;

  padding-top: 20px;

  background-color: rgb(245, 245, 245);

  border-radius:0px 0px 10px 10px;

  border: 1px solid rgba(187, 185, 185, 0.89);

  box-shadow: -5px 7px 8px rgba(107, 104, 104, 0.27);

  left:0;

  right:0;

}

.moreShipping ul li ul li {

  padding-top: 0px;

  padding-bottom: 2px;

  background: transparent;

}

.moreShipping ul .clicker {

  position:relative;

  rgb(0, 0, 0);

}

.moreShipping ul .clicker:hover,.moreShipping ul .active{

  color: rgb(56, 57, 134);

}

.moreShipping ul li  {

  margin-left: 0px;

  cursor:pointer;

  transition:background-color 0.2s ease-in-out;

  -webkit-transition:background-color 0.2s ease-in-out;

  -moz-transition:background-color 0.2s ease-in-out;

  display:block;

  padding:8px 10px 8px 40px;

  background:#FFF;

  color:#333;

  text-decoration:none;

}

.moreShipping ul li :hover {

  background:#F2F2F2;

}

/* Fallbacks */

.moreShipping .no-js ul {display:none;}

.moreShipping .no-js:hover ul {display:block;}

</style>

<script>

$(function () {

  $('.moreShipping > ul').toggleClass('no-js js');

  $('.moreShipping .js ul').hide();

  $('.moreShipping .js').click(function(e) {

    $('.moreShipping .js ul').slideToggle(200);

    $('.clicker').toggleClass('active');

    e.stopPropagation();

  });

  $(document).click(function() {

    if ($('.moreShipping .js ul').is(':visible')) {

      $('.moreShipping .js ul', this).slideUp();

      $('.clicker').removeClass('active');

    }

  });

});

</script>
    Thread Starter cayindustries

    (@cayindustries)

    @weblizar – The theme is great, Thank You!

    I am not using eCommerce currently because I only have the one product, but I am aware of WooCommerce and what they can offer when the time comes.

    As for the Paypal, I am not sure where to make the CSS adjustments but I am open to try things out if you have an idea. I put the code for the Paypal Button and container in the post above so maybe that will help. Let me know. Thanks.

    make the .container CSS in your code more specific,
    i.e. change from:
    .container { }
    to:
    #innerbox .container { }
    so it will only get applied to the container in the shortcode;

    Thread Starter cayindustries

    (@cayindustries)

    What a fix! That worked GREAT! Thank you! I have been working on that for weeks.

    The only issue I have now is that on the MOBILE version the payment box is still there and it kinda blocks the page. Please check it out and let me know what you think.

    I would like to replace it with a simplified Paypal button if possible when the screen size changes to a cell phone. Here is the code I would like to use. 

    <div class="ppcontainer2">

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
      <input type="hidden" name="cmd" value="_xclick">
      <input type="hidden" name="business" value="2ZF8FQ9RWU4ZS">
      <input type="hidden" name="lc" value="US">
      <input type="hidden" name="item_name" value="The Socket Roll">
      <input type="hidden" name="amount" value="34.99">
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="button_subtype" value="services">
      <input type="hidden" name="no_note" value="0">
      <input type="hidden" name="cn" value="Add special instructions to the seller:">
      <input type="hidden" name="no_shipping" value="2">
      <input type="hidden" name="weight_unit" value="lbs">
      <div id="position">
        <label for="qty">Qty.</label>
        <input type="text" name="quantity" id="qty" size="3" value="1" required>

    <!-- Button Images -->
      <div id="ppImage">
        <input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/buy-logo-medium.png" border="0" name="submit" alt="Buy now with PayPal!">
      </div>
    </div>
      <div id="accepted">
        <input type="image" src=" https://openmerchantaccount.com/img/accepted_payment200x25px.png" alt="Accepted Payment Methods" />
      </div>

      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

    </form>
</div>

<style>
.ppcontainer2 {
  width: 200px;
}
#position {
  width: 170px;
  margin: auto;
}
#ppImage {
 padding-top: 20px;
}
#accepted {
  padding-top: 3px;
}
#qty {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 3px;
</style>

    What do you think?

    Thread Starter cayindustries

    (@cayindustries)

    Anyone…

    Hi,

    The content that you add in page is not responsive.

    Please create your content with general HTML tags like p, table etc.

    Your PayPal box is fixed everywhere. That’s why it floating in every device.

    Please make it fixed, static as per device.

    Let us know for further assistance.

    Thanks.

    Thread Starter cayindustries

    (@cayindustries)

    I usd this website (https://www.togotutor.com/code-to-html/java-to-html.php) to translate it to HTML. Will this work and where would I put this code if I want it on the “Products” page?

    <div style='background:#FFFFFF; font-family: Courier New, Courier; font-size: 10pt; COLOR: #000000; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;'><script&nbsp;src=<font color='#2a00ff'>"https:<font color='#3f7f5f'>//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</font><br/>
<br/>&nbsp;
<br/>
<br/><div&nbsp;id=<font color='#2a00ff'>"box"</font>>
<br/>
<br/>&nbsp;&nbsp;<div&nbsp;id=<font color='#2a00ff'>"innerbox"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id=<font color='#2a00ff'>"headerbox"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4&nbsp;id=<font color='#2a00ff'>"price"</font>><span&nbsp;id=<font color='#2a00ff'>"pricestyle"</font>>price:</span>$29.99</h4>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h6&nbsp;id=<font color='#2a00ff'>"Alternate"</font>>*If&nbsp;shipping&nbsp;outside&nbsp;the&nbsp;Continental&nbsp;US&nbsp;different&nbsp;shipping&nbsp;charges&nbsp;apply.&nbsp;Total&nbsp;price&nbsp;will&nbsp;be&nbsp;calculated&nbsp;on&nbsp;checkout&nbsp;page.</h5>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;</div>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;<strong><font color='#7f0055'>class</font></strong>=<font color='#2a00ff'>"container"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<form&nbsp;action=<font color='#2a00ff'>"https:<font color='#3f7f5f'>//www.paypal.com/cgi-bin/webscr"&nbsp;method="post"&nbsp;target="_top">
</font><br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"cmd"</font>&nbsp;value=<font color='#2a00ff'>"_xclick"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"business"</font>&nbsp;value=<font color='#2a00ff'>"2ZF8FQ9RWU4ZS"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"lc"</font>&nbsp;value=<font color='#2a00ff'>"US"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"item_name"</font>&nbsp;value=<font color='#2a00ff'>"The&nbsp;Socket&nbsp;Roll"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"amount"</font>&nbsp;value=<font color='#2a00ff'>"34.99"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"currency_code"</font>&nbsp;value=<font color='#2a00ff'>"USD"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"button_subtype"</font>&nbsp;value=<font color='#2a00ff'>"services"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"no_note"</font>&nbsp;value=<font color='#2a00ff'>"0"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"cn"</font>&nbsp;value=<font color='#2a00ff'>"Add&nbsp;special&nbsp;instructions&nbsp;to&nbsp;the&nbsp;seller:"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"no_shipping"</font>&nbsp;value=<font color='#2a00ff'>"2"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"hidden"</font>&nbsp;name=<font color='#2a00ff'>"weight_unit"</font>&nbsp;value=<font color='#2a00ff'>"lbs"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id=<font color='#2a00ff'>"position"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;<strong><font color='#7f0055'>for</font></strong>=<font color='#2a00ff'>"qty"</font>>Qty.</label>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"text"</font>&nbsp;name=<font color='#2a00ff'>"quantity"</font>&nbsp;id=<font color='#2a00ff'>"qty"</font>&nbsp;size=<font color='#2a00ff'>"3"</font>&nbsp;value=<font color='#2a00ff'>"1"</font>&nbsp;required>
<br/>
<br/>&nbsp;
<br/>
<br/>&nbsp;
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Button&nbsp;Images&nbsp;-->
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id=<font color='#2a00ff'>"ppImage"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"image"</font>&nbsp;src=<font color='#2a00ff'>"https:<font color='#3f7f5f'>//www.paypalobjects.com/webstatic/en_US/i/buttons/buy-logo-medium.png"&nbsp;border="0"&nbsp;name="submit"&nbsp;alt="Buy&nbsp;now&nbsp;with&nbsp;PayPal!">
</font><br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id=<font color='#2a00ff'>"accepted"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type=<font color='#2a00ff'>"image"</font>&nbsp;src=<font color='#2a00ff'>"&nbsp;https:<font color='#3f7f5f'>//openmerchantaccount.com/img/accepted_payment200x25px.png"&nbsp;alt="Accepted&nbsp;Payment&nbsp;Methods"&nbsp;/>
</font><br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<br/>
<br/>&nbsp;
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;alt=<font color='#2a00ff'>""</font>&nbsp;border=<font color='#2a00ff'>"0"</font>&nbsp;src=<font color='#2a00ff'>"https:<font color='#3f7f5f'>//www.paypalobjects.com/en_US/i/scr/pixel.gif"&nbsp;width="1"&nbsp;height="1">
</font><br/>
<br/>&nbsp;
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</form>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;</div>
<br/>
<br/>&nbsp;&nbsp;</div>
<br/>
<br/>&nbsp;&nbsp;<div&nbsp;<strong><font color='#7f0055'>class</font></strong>=<font color='#2a00ff'>"moreShipping"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;<strong><font color='#7f0055'>class</font></strong>=<font color='#2a00ff'>"no-js"</font>>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>Alaska</li>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>Hawaii</li>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>Puerto&nbsp;Rico</li>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>U.S.&nbsp;Virgin&nbsp;Islands</li>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>-&nbsp;$9.95</li></br>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>Canada&nbsp;and&nbsp;International</li>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>-&nbsp;$29.95</li></br>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;</ul>
<br/>
<br/>&nbsp;&nbsp;</div>
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;<!--<p>+&nbsp;Additional&nbsp;Shipping&nbsp;Costs</p>-->
<br/>
<br/></div>
<br/>
<br/>&nbsp;
<br/>
<br/><style>
<br/>
<br/>#box&nbsp;{
<br/>
<br/>&nbsp;&nbsp;top:&nbsp;240px;
<br/>
<br/>&nbsp;&nbsp;right:&nbsp;120px;
<br/>
<br/>&nbsp;&nbsp;width:&nbsp;250px;
<br/>
<br/>&nbsp;&nbsp;border-radius:&nbsp;10px;
<br/>
<br/>&nbsp;&nbsp;box-shadow:&nbsp;-3px&nbsp;2px&nbsp;8px&nbsp;rgba(77,&nbsp;77,&nbsp;77,&nbsp;0.5);
<br/>
<br/>&nbsp;&nbsp;background-color:&nbsp;rgb(255,&nbsp;255,&nbsp;255);
<br/>
<br/>&nbsp;&nbsp;position:&nbsp;fixed;
<br/>
<br/>}
<br/>
<br/>#innerbox&nbsp;{
<br/>
<br/>&nbsp;&nbsp;width:&nbsp;100%;
<br/>
<br/>&nbsp;&nbsp;height:&nbsp;100%;
<br/>
<br/>&nbsp;&nbsp;position:&nbsp;relative;
<br/>
<br/>}
<br/>
<br/>#headerbox&nbsp;{
<br/>
<br/>&nbsp;&nbsp;background-color:&nbsp;rgb(245,&nbsp;245,&nbsp;245);
<br/>
<br/>&nbsp;&nbsp;border-radius:&nbsp;10px&nbsp;10px&nbsp;0px&nbsp;0px;
<br/>
<br/>&nbsp;&nbsp;border-bottom:&nbsp;1px&nbsp;solid&nbsp;rgb(162,&nbsp;162,&nbsp;162);
<br/>
<br/>}
<br/>
<br/>#pricestyle&nbsp;{
<br/>
<br/>&nbsp;&nbsp;font-weight:&nbsp;300;
<br/>
<br/>&nbsp;&nbsp;font-size:&nbsp;13px;
<br/>
<br/>&nbsp;&nbsp;margin-right:&nbsp;8px;
<br/>
<br/>&nbsp;&nbsp;color:&nbsp;rgb(107,&nbsp;107,&nbsp;107)
<br/>
<br/>}
<br/>
<br/>#price&nbsp;{
<br/>
<br/>&nbsp;&nbsp;width:&nbsp;130px;
<br/>
<br/>&nbsp;&nbsp;padding-top:&nbsp;10px;
<br/>
<br/>&nbsp;&nbsp;padding-bottom:&nbsp;4px;
<br/>
<br/>&nbsp;&nbsp;margin:&nbsp;auto;
<br/>
<br/>}
<br/>
<br/>#plus&nbsp;{
<br/>
<br/>&nbsp;&nbsp;font-weight:&nbsp;700;
<br/>
<br/>&nbsp;&nbsp;color:&nbsp;rgb(43,&nbsp;43,&nbsp;43)
<br/>
<br/>}
<br/>
<br/>#shipstyle&nbsp;{
<br/>
<br/>&nbsp;&nbsp;font-weight:&nbsp;300;
<br/>
<br/>&nbsp;&nbsp;font-size:13px;
<br/>
<br/>&nbsp;&nbsp;margin-right:&nbsp;8px;
<br/>
<br/>&nbsp;&nbsp;color:&nbsp;rgb(107,&nbsp;107,&nbsp;107)
<br/>
<br/>}
<br/>
<br/>#shipping&nbsp;{
<br/>
<br/>&nbsp;&nbsp;width:&nbsp;130px;
<br/>
<br/>&nbsp;&nbsp;padding-bottom:&nbsp;4px;
<br/>
<br/>&nbsp;&nbsp;border-bottom:&nbsp;1px&nbsp;solid&nbsp;rgb(152,&nbsp;152,&nbsp;152);
<br/>
<br/>&nbsp;&nbsp;margin:&nbsp;auto;
<br/>
<br/>}
<br/>
<br/>h2,h4&nbsp;{
<br/>
<br/>&nbsp;&nbsp;margin:&nbsp;0px;
<br/>
<br/>&nbsp;&nbsp;text-align:&nbsp;center;
<br/>
<br/>&nbsp;&nbsp;font-family:&nbsp;<font color='#2a00ff'>"Open&nbsp;Sans"</font>,sans-serif;
<br/>
<br/>}
<br/>
<br/>h2&nbsp;span&nbsp;{
<br/>
<br/>&nbsp;&nbsp;font-size:&nbsp;13px;
<br/>
<br/>&nbsp;&nbsp;margin-right:&nbsp;8px;
<br/>
<br/>&nbsp;&nbsp;font-weight:&nbsp;300;
<br/>
<br/>&nbsp;&nbsp;color:&nbsp;rgb(107,&nbsp;107,&nbsp;107);
<br/>
<br/>}
<br/>
<br/>#total&nbsp;{
<br/>
<br/>&nbsp;&nbsp;padding:&nbsp;2px&nbsp;0px&nbsp;6px&nbsp;0px;
<br/>
<br/>}
<br/>
<br/>#tax&nbsp;{
<br/>
<br/>&nbsp;&nbsp;font-style:&nbsp;italic;
<br/>
<br/>&nbsp;&nbsp;color:&nbsp;rgb(0,&nbsp;0,&nbsp;0);
<br/>
<br/>}
<br/>
<br/>#innerbox&nbsp;.container&nbsp;{
<br/>
<br/>&nbsp;&nbsp;width:&nbsp;200px;
<br/>
<br/>&nbsp;&nbsp;height:&nbsp;103px;
<br/>
<br/>&nbsp;&nbsp;margin:&nbsp;auto;
<br/>
<br/>&nbsp;&nbsp;padding:25px&nbsp;0px;
<br/>
<br/>}
<br/>
<br/>h6&nbsp;{
<br/>
<br/>&nbsp;&nbsp;margin:&nbsp;0px;
<br/>
<br/>&nbsp;&nbsp;text-align:&nbsp;center;
<br/>
<br/>&nbsp;&nbsp;padding-top:&nbsp;15px;
<br/>
<br/>&nbsp;&nbsp;padding-right:&nbsp;20px;
<br/>
<br/>&nbsp;&nbsp;padding-bottom:&nbsp;20px;
<br/>
<br/>&nbsp;&nbsp;padding-left:&nbsp;20px;
<br/>
<br/>&nbsp;&nbsp;font-family:&nbsp;<font color='#2a00ff'>"Open&nbsp;Sans"</font>,sans-serif;
<br/>
<br/>&nbsp;&nbsp;font-weight:&nbsp;400;
<br/>
<br/>&nbsp;&nbsp;color:&nbsp;rgb(107,&nbsp;107,&nbsp;107);
<br/>
<br/>}
<br/>
<br/>#position&nbsp;{
<br/>
<br/>&nbsp;&nbsp;width:&nbsp;170px;
<br/>
<br/>&nbsp;&nbsp;margin:&nbsp;auto;
<br/>
<br/>}
<br/>
<br/>#qty&nbsp;{
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-border-radius:&nbsp;5px;
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:&nbsp;5px;
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;3px;
<br/>
<br/>}
<br/>
<br/>#ppImage&nbsp;{
<br/>
<br/>padding-top:&nbsp;20px;
<br/>
<br/>}
<br/>
<br/>#accepted&nbsp;{
<br/>
<br/>&nbsp;&nbsp;padding-top:&nbsp;3px;
<br/>
<br/>}
<br/>
<br/>.moreShipping&nbsp;{
<br/>
<br/>&nbsp;&nbsp;margin-left:0px;
<br/>
<br/>&nbsp;&nbsp;font-family:<font color='#2a00ff'>"Open&nbsp;Sans"</font>,sans-serif;
<br/>
<br/>&nbsp;&nbsp;font-size:&nbsp;13px;
<br/>
<br/>&nbsp;&nbsp;position:&nbsp;relative;
<br/>
<br/>&nbsp;&nbsp;color:&nbsp;rgb(56,&nbsp;57,&nbsp;134);
<br/>
<br/>&nbsp;&nbsp;padding-top:&nbsp;0px;
<br/>
<br/>&nbsp;
<br/>
<br/>}
<br/>
<br/>.moreShipping&nbsp;ul&nbsp;{
<br/>
<br/>&nbsp;&nbsp;position:&nbsp;absolute;
<br/>
<br/>&nbsp;&nbsp;padding-left:&nbsp;0px;
<br/>
<br/>&nbsp;&nbsp;margin-left:&nbsp;0px;
<br/>
<br/>&nbsp;&nbsp;font-weight:600;
<br/>
<br/>&nbsp;
<br/>
<br/>}
<br/>
<br/>.moreShipping&nbsp;ul&nbsp;li&nbsp;ul&nbsp;{
<br/>
<br/>&nbsp;&nbsp;position:relative;
<br/>
<br/>&nbsp;&nbsp;padding-top:&nbsp;20px;
<br/>
<br/>&nbsp;&nbsp;background-color:&nbsp;rgb(245,&nbsp;245,&nbsp;245);
<br/>
<br/>&nbsp;&nbsp;border-radius:0px&nbsp;0px&nbsp;10px&nbsp;10px;
<br/>
<br/>&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;rgba(187,&nbsp;185,&nbsp;185,&nbsp;0.89);
<br/>
<br/>&nbsp;&nbsp;box-shadow:&nbsp;-5px&nbsp;7px&nbsp;8px&nbsp;rgba(107,&nbsp;104,&nbsp;104,&nbsp;0.27);
<br/>
<br/>&nbsp;&nbsp;left:0;
<br/>
<br/>&nbsp;&nbsp;right:0;
<br/>
<br/>}
<br/>
<br/>.moreShipping&nbsp;ul&nbsp;li&nbsp;ul&nbsp;li&nbsp;{
<br/>
<br/>&nbsp;&nbsp;padding-top:&nbsp;0px;
<br/>
<br/>&nbsp;&nbsp;padding-bottom:&nbsp;2px;
<br/>
<br/>&nbsp;&nbsp;background:&nbsp;transparent;
<br/>
<br/>}
<br/>
<br/>.moreShipping&nbsp;ul&nbsp;.clicker&nbsp;{
<br/>
<br/>&nbsp;&nbsp;position:relative;
<br/>
<br/>&nbsp;&nbsp;rgb(0,&nbsp;0,&nbsp;0);
<br/>
<br/>}
<br/>
<br/>.moreShipping&nbsp;ul&nbsp;.clicker:hover,.moreShipping&nbsp;ul&nbsp;.active{
<br/>
<br/>&nbsp;&nbsp;color:&nbsp;rgb(56,&nbsp;57,&nbsp;134);
<br/>
<br/>}
<br/>
<br/>.moreShipping&nbsp;ul&nbsp;li&nbsp;&nbsp;{
<br/>
<br/>&nbsp;&nbsp;margin-left:&nbsp;0px;
<br/>
<br/>&nbsp;&nbsp;cursor:pointer;
<br/>
<br/>&nbsp;&nbsp;transition:background-color&nbsp;0.2s&nbsp;ease-in-out;
<br/>
<br/>&nbsp;&nbsp;-webkit-transition:background-color&nbsp;0.2s&nbsp;ease-in-out;
<br/>
<br/>&nbsp;&nbsp;-moz-transition:background-color&nbsp;0.2s&nbsp;ease-in-out;
<br/>
<br/>&nbsp;&nbsp;display:block;
<br/>
<br/>&nbsp;&nbsp;padding:8px&nbsp;10px&nbsp;8px&nbsp;40px;
<br/>
<br/>&nbsp;&nbsp;background:#FFF;
<br/>
<br/>&nbsp;&nbsp;color:#333;
<br/>
<br/>&nbsp;&nbsp;text-decoration:none;
<br/>
<br/>}
<br/>
<br/>.moreShipping&nbsp;ul&nbsp;li&nbsp;:hover&nbsp;{
<br/>
<br/>&nbsp;&nbsp;background:#F2F2F2;
<br/>
<br/>}
<br/>
<br/>&nbsp;
<br/>
<br/><font color='#3f7f5f'>/*&nbsp;Fallbacks&nbsp;*/</font>
<br/>
<br/>.moreShipping&nbsp;.no-js&nbsp;ul&nbsp;{display:none;}
<br/>
<br/>.moreShipping&nbsp;.no-js:hover&nbsp;ul&nbsp;{display:block;}
<br/>
<br/>&nbsp;
<br/>
<br/>&nbsp;
<br/>
<br/></style>
<br/>
<br/>&nbsp;
<br/>
<br/>&nbsp;
<br/>
<br/>&nbsp;
<br/>
<br/>&nbsp;
<br/>
<br/><script>
<br/>
<br/>$(function&nbsp;()&nbsp;{
<br/>
<br/>&nbsp;&nbsp;$(<font color='#2a00ff'>'.moreShipping&nbsp;>&nbsp;ul'</font>).toggleClass(<font color='#2a00ff'>'no-js&nbsp;js'</font>);
<br/>
<br/>&nbsp;&nbsp;$(<font color='#2a00ff'>'.moreShipping&nbsp;.js&nbsp;ul'</font>).hide();
<br/>
<br/>&nbsp;&nbsp;$(<font color='#2a00ff'>'.moreShipping&nbsp;.js'</font>).click(function(e)&nbsp;{
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;$(<font color='#2a00ff'>'.moreShipping&nbsp;.js&nbsp;ul'</font>).slideToggle(200);
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;$(<font color='#2a00ff'>'.clicker'</font>).toggleClass(<font color='#2a00ff'>'active'</font>);
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;e.stopPropagation();
<br/>
<br/>&nbsp;&nbsp;});
<br/>
<br/>&nbsp;&nbsp;$(document).click(function()&nbsp;{
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;<strong><font color='#7f0055'>if</font></strong>&nbsp;($(<font color='#2a00ff'>'.moreShipping&nbsp;.js&nbsp;ul'</font>).is(<font color='#2a00ff'>':visible'</font>))&nbsp;{
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<font color='#2a00ff'>'.moreShipping&nbsp;.js&nbsp;ul'</font>,&nbsp;<strong><font color='#7f0055'>this</font></strong>).slideUp();
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<font color='#2a00ff'>'.clicker'</font>).removeClass(<font color='#2a00ff'>'active'</font>);
<br/>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;}
<br/>
<br/>&nbsp;&nbsp;});
<br/>
<br/>});
<br/>
<br/></script><div style='text-align:right;BORDER-TOP: #ccc 1px dashed'><a href="https://www.togotutor.com/code-to-html/java-to-html.php" target="_blank">Code Formatted by ToGoTutor</a></div></div>

    Hi,

    HTML code are not up-to mark for responsiveness.

    Please use plugin for your requirement.

    Thanks.

    Thread Starter cayindustries

    (@cayindustries)

    Can you recommend a plug-iin that works with your theme please?

    Hi,

    If you only want to use PayPal.

    Please check this plugin

    Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Why does this shortcode mess up my page’ is closed to new replies.