Opinion: Shopify Community - Design

Caroline Schnapp commented on Inserting an image onto my home page

Caroline Schnapp — Fri, 20 Nov 2009 23:46:36 +0000

Cough, even some of the best themes in Shopify's catalog use inline CSS, cough.

Jamie commented on Remove Butterfly Background from Reconfigured

Jamie — Fri, 20 Nov 2009 23:26:51 +0000

Hey Emil

The two things I can think of on that theme to get rid of the green prices are:

#price-field
.info-box span

Find those in the all.css and change the color to whatever you want.

Jamie commented on Inserting an image onto my home page

Jamie — Fri, 20 Nov 2009 23:19:13 +0000

Yours is good too Tetsuro. :)

I use it often if I have a quicky. And for anyone who doesn't want to delve into the fabulous world of css Tetsuro's is the easy one-off solution.

Emil Congdon commented on Remove Butterfly Background from Reconfigured

Emil Congdon — Fri, 20 Nov 2009 22:58:37 +0000

Great help. Thank you! Do you know how to change font colors? I have a bright green font in my frontpage collection for price and I dont care for it. Thanks again.

Tetsuro commented on Inserting an image onto my home page

Tetsuro — Fri, 20 Nov 2009 22:52:49 +0000

^word. Jamie's code is much cleaner: please use his example instead.

Jamie commented on Inserting an image onto my home page

Jamie — Fri, 20 Nov 2009 22:33:50 +0000

You can also target this in your css if you use some simple conditionals in your body tag:

<body id="{{template}}-{{page.title }}">

Then you can target very specific pages in your css instead of inline. It will keep your mark-up cleaner if you have a bunch of these going on.

#page-About {background:#000;}

Tetsuro commented on Inserting an image onto my home page

Tetsuro — Fri, 20 Nov 2009 22:13:10 +0000

You can change the background color based on a particular page by using some Liquid and some inline CSS.

For example,

<body {% if page.handle == "frontpage" %}style="background: #000;" {% endif %}>

The above code will change the background color to black (#000) if the user is on a page with the handle "frontpage".

icelandicody commented on Damsel in Distress: help me with some customization issues please!

icelandicody — Fri, 20 Nov 2009 21:48:34 +0000

Thank you--I found a tutorial by searching "link list" instead of "linklist." The issue was that the instructions said "if you create a linklist with the handle categories, it will appear here," but there were no instructions how to do that. I found out that I could do it in the navigation menu. Thanks!

Stuart Whitman commented on Using product tags to display product attributes and additional product metadata

Stuart Whitman — Fri, 20 Nov 2009 21:32:40 +0000

Thanks for the reply Caroline should have put a mention about that in the tutorial.

I've also changed the filters slightly to incorporate Capitalization. See below for revised example:

{% assign attribute_keyword = 'att:' %}
{% assign marker = ':' %}
{% assign found = false %}
{% for tag in product.tags %}
    {% if tag contains attribute_keyword %}
	   {% if found == false %}
              {% assign found = true %}<dl>
	   {% endif %}
	      {{ tag | remove: attribute_keyword | replace_first: marker, ' '| capitalize | replace_first: ' ', '</dt><dd>' | prepend: '<dt>'  | append: </dd> }}
	   {% endif %}
    {% if found and forloop.last %}</dl>{% endif %}
{% endfor %}

Jamie commented on Damsel in Distress: help me with some customization issues please!

Jamie — Fri, 20 Nov 2009 21:31:17 +0000

Can you explain what you mean by 'category'? Do you mean vendor? product type? collection? etc...

lissabella commented on Inserting an image onto my home page

lissabella — Fri, 20 Nov 2009 21:12:25 +0000

ok, I was able to figure this out but now I want to know how do I change the background color of a particular page?

Caroline Schnapp commented on Using product tags to display product attributes and additional product metadata

Caroline Schnapp — Fri, 20 Nov 2009 21:00:50 +0000

@ mbscher

These tags should not be used to filter collections. So where ever you output regular tags, such as in a sidebar, you'll want to skip over those tags that contain these letters:

'att:'

Example.

Theme: Tellus

File: theme.liquid

Old code:

      {% if tags %}
	<h3>Tags</h3>
	    <ul class="vlink-list">
               {% for tag in collection.tags %} 
		  <li>{{ tag | highlight_active_tag | link_to_tag: tag }}</li>
	       {% endfor %}
	    </ul>
      {% endif %}

New code:

      {% if tags %}
	 <h3>Tags</h3>
	    <ul class="vlink-list">
		{% for tag in collection.tags %}{% unless tag contains 'att:' %} 
		<li>{{ tag | highlight_active_tag | link_to_tag: tag }}</li>
		{% endunless %}{% endfor %}
	     </ul>
       {% endif %}

icelandicody commented on Damsel in Distress: help me with some customization issues please!

icelandicody — Fri, 20 Nov 2009 20:55:12 +0000

Thanks for your help--I've been able to figure most things out... However, I can't seem to find basic instructions on how to create a category linklist. Can you point me in the right direction?

Thanks!

mbscher commented on Using product tags to display product attributes and additional product metadata

mbscher — Fri, 20 Nov 2009 20:46:05 +0000

Stuart, thanks a lot for the code. It works great. How do you deal with the tags on the category page whereas I now have a bunch of things like "att:Size:Small" in my tags section which I think will just confuse people. Is there some easy way to get those to just say Small and parse all of them back to useful tags?

Thanks.

Jamie commented on Inserting an image onto my home page

Jamie — Fri, 20 Nov 2009 20:33:13 +0000

There's no attachment Lisa...

Do you want to insert in into the home page(index) or collection page? You list differently from your thread title to your question....

Inserting an image onto my home page by lissabella

lissabella — Fri, 20 Nov 2009 20:30:14 +0000

I want to insert the attached image map onto my collections page. How do I do this?

thehulldesign commented on How do I create "Columns, Tables, Cells" anything???

thehulldesign — Fri, 20 Nov 2009 19:38:12 +0000

thanks for the pep talk...does anyone else have some html code example to point me in the right direction...thanks

HunkyBill commented on How do I create "Columns, Tables, Cells" anything???

HunkyBill — Fri, 20 Nov 2009 18:37:02 +0000

You used YUI Grids and they did not work? That is pretty much impossible. YUI Grids, like Blueprint CSS, is awesome CSS and can pretty much be demonstrably near perfect at cross-browser rendering of DOM elements in a grid.

More likely you are not creating correct DOM, so take a breather, a course in basic HTML, and then try again.

How do I create "Columns, Tables, Cells" anything??? by thehulldesign

thehulldesign — Fri, 20 Nov 2009 15:50:42 +0000

How do I create simple "tables, cells, or columns" to contain text or images on my pages? I cant get anything to work....i have a little html knowledge, but not very advanced....

For instance, im trying to create a footer like the Shopify.com main homepage where they have links and informations divided nicely between 3 rows....i tried the YUI CSS grid builder, and that didnt work http://thehulldesign.myshopify.com/pages/test

id like to create 3 columns to go beneath my "flash" - similar to how that is laid out, but not have to use flash for everything...any help would be great....thanks!

http://www.thehulldesign.com

Roman I. commented on Can the Checkout Page Designs be Edited?

Roman I. — Fri, 20 Nov 2009 14:14:28 +0000

1) http://blog.shopify.com/2007/9/13/checkout-customization

2) http://forums.shopify.com/categories/2/posts/9178#comment-12948