CSS style shopify cart

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

		{% else %}
		   <th>{{ variant.title }}</th>
           <th>{{                     }}</th>
           <th colspan="2">Unknown</th>
		{% endif %}
	   {% endfor %}
     {% unless product.available == false %}			
     <div><input type="submit" value="Add to Cart" name="Add" id="add" /></div>
     {% endunless %}
        {% 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' %}
        {% 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' %}
          <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 }}" />
        {% endunless %}
        {% endfor %}
        <div class="gvproduct" data-id="{{}}"></div>
    </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>
        {% 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' %}
          {% endfor %}

    {% 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
Question by:ammadeyy2020
    1 Comment
    LVL 49

    Accepted Solution


    <th>In Stock</th>

    Open in new window


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

    Open in new window



    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

    761 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

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now