Advertisement
Guest User

Untitled

a guest
Aug 8th, 2014
232
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.16 KB | None | 0 0
  1. For situations when NOT using WooCommerce plugin, you will need to manually put styles in Theme Options>General>Display>CustomCSS box to style these 3 boxes well.
  2. Notes:
  3. Default styling is written in woocommerce.css file which only triggers when WooCommerce plugin is installed.
  4. 'YOURWEBSITE' should be replaced by your original URL.
  5.  
  6. ==========================
  7.  
  8. @media only screen and (min-width: 480px) {
  9.   ul.products li.product {
  10.     width: 44%;
  11.     float: left;
  12.     clear: both;
  13.   }
  14.   ul.products li.product:nth-child(2n) {
  15.     float: right;
  16.     clear: none;
  17.   }
  18. }
  19.  
  20. @media only screen and (min-width: 767px) {
  21.     .home div.woocommerce-wrap {
  22.         margin: 0 auto;
  23.         max-width: 950px;
  24.         width: 100%;
  25.     }
  26.     .clear {
  27.     clear: both;
  28.     }
  29.     .nav-hidden #navigation,
  30.     .nav-hidden #footer-wrap,
  31.     .nav-hidden .breadcrumbs-wrap,
  32.     .nav-hidden #top,
  33.     .nav-hidden #header .widget_product_search,
  34.     .nav-hidden #header ul.cart,
  35.     .nav-hidden #header .account {
  36.         display: none !important;
  37.         }
  38.     .nav-hidden .header-top {
  39.     -webkit-border-bottom-left-radius: 0.382em;
  40.     -webkit-border-bottom-right-radius: 0.382em;
  41.     border-bottom-left-radius: 0.382em;
  42.     border-bottom-right-radius: 0.382em;
  43.     -moz-background-clip: padding;
  44.     -webkit-background-clip: padding-box;
  45.     background-clip: padding-box;
  46.     }
  47.     .col2-set .col-2 {
  48.     clear: none;
  49.     }
  50.     .col2-set {
  51.     clear: both;
  52.     *zoom: 1;
  53.     }
  54.     .col2-set:after {
  55.     content: "\0020";
  56.     display: block;
  57.     height: 0;
  58.     overflow: hidden;
  59.     clear: both;
  60.     }
  61.     .col2-set:before, .col2-set:after {
  62.     content: "";
  63.     display: table;
  64.     }
  65.     .col2-set:after {
  66.     clear: both;
  67.     }
  68.     .col2-set .col-1 {
  69.     width: 48%;
  70.     float: left;
  71.     }
  72.     .col2-set .col-2 {
  73.     width: 48%;
  74.     float: right;
  75.     }
  76.     ul.products li.product {
  77.     margin-right: 3.8%;
  78.     clear: none;
  79.     }
  80.     ul.products li.product .rating-wrap {
  81.     margin-top: 1em;
  82.     }
  83.     ul.products li.product .rating-wrap + .button {
  84.     margin-top: 1em;
  85.     }
  86.     ul.products li.product:nth-child(2n) {
  87.     float: left;
  88.     }
  89.     ul.products li.product.first {
  90.     clear: both;
  91.     }
  92.     ul.products li.product.last {
  93.     margin-right: 0;
  94.     }
  95.     ul.products li.product .rating-wrap {
  96.     float: right;
  97.     text-align: right;
  98.     }
  99.     ul.products {
  100.     display: block;
  101.     width: 100%;
  102.     *width: 100%;
  103.     *zoom: 1;
  104.     }
  105.     .jssidebar .widget_woo_best_selling_products ul.products, #sidebar .widget_woo_best_selling_products ul.products {
  106.     width: auto;
  107.     }
  108.     ul.products:after {
  109.     content: "\0020";
  110.     display: block;
  111.     height: 0;
  112.     overflow: hidden;
  113.     clear: both;
  114.     }
  115.     ul.products:before, ul.products:after {
  116.     content: "";
  117.     display: table;
  118.     }
  119.     ul.products:after {
  120.     clear: both;
  121.     }
  122.     .woocommerce-columns-2 ul.products li.product {
  123.     width: 44.6%;
  124.     }
  125.     .woocommerce-columns-3 ul.products li.product {
  126.     display: block;
  127.     float: left;
  128.     width: 28%;
  129.     *width: 27.8%;
  130.     margin-right: 3%;
  131.     *margin-right: 3%;
  132.     }
  133.     .woocommerce-columns-4 ul.products li.product {
  134.     width: 20.9%;
  135.     margin-right: 1.1%;
  136.     }
  137.     .woocommerce-columns-4 ul.products li.product .rating-wrap {
  138.     float: none;
  139.     text-align: left;
  140.     }
  141.     .woocommerce-columns-5 ul.products li.product {
  142.     width: 15.5%;
  143.     margin-right: 1.4%;
  144.     }
  145.     .home .woocommerce-columns-4 ul.products li.product .rating-wrap {
  146.     text-align: right;
  147.     }
  148.     .home .woocommerce-columns-4 ul.products li.product {
  149.     width: 22.059%;
  150.     }
  151.     .home ul.products li.product.product-category h3 {
  152.     font-size: 24px;
  153.     padding-bottom:.5em;
  154.     }
  155.     .home ul.products li.product.product-category .description, .home ul.products li.product.product-category p {
  156.     font-size: 12px;
  157.     margin: 0 10px 21px;
  158.     color: #706A64;
  159.     }
  160.     .home ul.products li.product.product-category a.readmore:hover .view-more {
  161.     text-decoration:underline;
  162.     }
  163.     .home .widget_woo_featured_products ul.products li.product {
  164.     background: #FFFFFF;
  165.     border: 1px solid #BEB9B9;
  166.     }
  167. }
  168. .home .widget_woo_product_categories ul.products li.product.product-category {
  169. margin-right: 14px;
  170. }
  171.  
  172. ul.products li.product.product-category a.readmore {
  173.     background: url("http://YOURWEBSITE//wp-content/themes/justshop/images/border-d.gif") no-repeat scroll center 8px transparent;
  174.     color: #FFFFFF;
  175.     height: 30px;
  176.     font-size: 14;
  177.     line-height: 27px;
  178.     display: block;
  179.     text-align: center;
  180.     margin: 10px 0 0;
  181. }
  182.  
  183. ul.products li.product.product-category span.view-more {
  184.     background: url("http://YOURWEBSITE//wp-content/themes/justshop/images/blue/background.gif") repeat scroll center 0 transparent;
  185.     border-radius: 3px;
  186.     -moz-border-radius: 3px;
  187.     -webkit-border-radius: 3px;
  188.     box-shadow: 0 2px 0 #917460;
  189.     -moz-box-shadow: 0 2px 0 #917460;
  190.     -webkit-box-shadow: 0 2px 0 #917460;
  191.     padding: 0 17px;
  192.     display: inline-block;
  193.     font-style: italic;
  194.     text-transform: lowercase;
  195.     font-family: Philosopher,Georgia,serif;
  196. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement