?
Solved

CSS style shopify cart

Posted on 2012-08-19
1
Medium Priority
?
691 Views
Last Modified: 2012-08-19
<div id="col-main">

  <div id="product" class="clearfix content">

    <div id="product-information">

      <p id="add-to-cart-msg"></p>

      <div id="product-header" class="diagonal-divider clearfix">

        <div id="product-header-title">
          <h1 id="product-title">{{ product.title }}</h1>
          
          {% if settings.show_vendor %}<h2 id="product-vendor">{{ product.vendor | link_to_vendor }}</h2>{% endif %}
        </div>


      </div><!-- /#product-header -->
      <div class="description">
        {{ product.description }}
        
        <div id="variants">
   <form action="/cart/add" method="post">
      <table width="50%" border="0" class="variantstable">
    <thead>
       <tr>
          <th>Select</th>
	      <th>Options</th>
	      <th>Price </th>
	      <th>Availability</th>
	      <th>Delivery</th>
	   </tr>
	</thead>
	<tbody>
           {% for variant in product.variants %}
	      <tr style="background: {% cycle '#fff', '#eee',%};" >
		{% if variant.available == true %}
	           <th><input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" {%if forloop.first%} checked="checked" {%endif%} /></th>
		   <th><label for="radio_{{variant.id}}">{{ variant.title }}</label></th>
		   <th>{{ variant.price | money }}</th>
           
		      {% if variant.inventory_quantity > 0 %}
    		
    		<th>In Stock</th>
			<th>48hrs</th>
		      {% else %}
			<th>Pre Order</th>
			<th>2 weeks</th>
		      {% endif %}

		{% else %}
		   <th>X</th>
		   <th>{{ variant.title }}</th>
           <th>{{                     }}</th>
           <th colspan="2">Unknown</th>
		   
           
		{% endif %}
	      </tr>
	   {% endfor %}
	      
	   
	</tbody>
     </table>
     {% unless product.available == false %}			
     <div><input type="submit" value="Add to Cart" name="Add" id="add" /></div>
     {% endunless %}
   </form>
 </div>
</div>     
        {% include 'social-sharing' %} 
        <div id=”issw”></div>
      
      
    </div><!-- /#product-information -->

      <div id="active-wrapper">
        {% if settings.main_image_display == 'Lightbox' %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" title="{{ product.featured_image.alt | escape }}" rel="fancybox">
        {% endif %}     
          <img style="max-width:303px" src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" id="large-thumb" />
        {% if settings.main_image_display == 'Lightbox' %}
        
        </a>
        {% endif %}
        
        
        
      
      


      <ul id="thumbs" {% if product.images.size == 1 %}class="visuallyhidden"{% endif %}>
        {% for image in product.images %}
        {% unless forloop.first and settings.main_image_display == 'Lightbox' %}
        <li>
          <a{% if settings.main_image_display == 'Lightbox' %} rel="fancybox"{% endif %} class="gallery" href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
            <img src="{{ image | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}" />
          </a>
        </li>
        {% endunless %}
        {% endfor %}
        <div class="gvproduct" data-id="{{ product.id}}"></div>
      </ul>
      
    </div><!-- /#product-gallery -->

  </div><!-- /#product -->

  {% if settings.productspg_related_products %}
  
    {% include 'related-products' %}

  {% elsif settings.productspg_featured_collection != blank %}

    {% assign collection = collections[settings.productspg_featured_collection] %}
    {% assign products   = collection.products %}

    {% if products.size > 0 %}
      <section class="diagonal-divider clearfix">

        {% unless settings.productspg_featured_collection_heading == blank %}
        <header class="section-details clearfix">
          <h1 class="section-title">{{ settings.productspg_featured_collection_heading | link_to: collection.url }}</h1>
        </header> 
        {% endunless %}

        <ul class="product-grid" id="secondary-grid">
          {% for product in products limit: settings.productspg_featured_limit %}
          <li class="{% cycle '', '', '', 'last-in-row' %}">
            {% include 'product-grid-item' %}
          </li>
          {% endfor %}
        </ul> 
        

      </section>
    {% endif %}

  {% endif %}

</div><!-- /#col-main -->
                                  

Open in new window


attached code, the "In Stock" i want to be in red color
how can i do that
0
Comment
Question by:ammadeyy2020
1 Comment
 
LVL 49

Accepted Solution

by:
Roonaan earned 2000 total points
ID: 38309262
Change:

<th>In Stock</th>

Open in new window


To:

<th><span style="color:red">In Stock</span></th>

Open in new window


Regards,

-r-
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month14 days, 7 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question