Its textile. Try these:

http://www.textism.com/tools/textile/
http://hobix.com/textile/quick.html

You can control paging using liquid code in blog.liquid, it looks something like this:

{% paginate blog.articles by 10 %}
    {% for article in blog.articles %}<a name="article-{{ article.id }}"></a>
    <div class="{% if forloop.first %}{% if blog.articles.size > 1 %}blog-first{% else %}blog-last{% endif %}{% elsif forloop.last %}blog-last{% else %}blog{% endif %}">
        <h1><a href="{{ article.url }}">{{ article.title }}</a></h1>
            {{ article.content }}
        <div class="blog-details">
            Posted by {{ article.author }} on {{ article.created_at | date: "%B %d, %Y" }}. {% if blog.articles.size > 1 %}<a href="{{ article.url }}">Continue Reading</a>{% endif %}
        </div>
    </div>{% endfor %}{% if paginate.pages > 1 %}
    <div id="paginate">
        {{ paginate | default_pagination }}
    </div>{% endif %}
{% endpaginate %}

Just change the first bit to what ever you want to paginate by… 10, 5 or whatever

{% paginate blog.articles by 5 %}

Centering an image, you could use some CSS

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

...then add the class to your img tag in your post

<img class="displayed" src='http://static2.jadedpixel.com/s/files/1/0003/7931/files/some-image.gif' alt='' />

Links – to open in a new window you could wrap them in a notextile tag and then use regular html.

Thanks for your answer, I’ll play about with it and see if it’s intuitive and makes sense as I have to teach another how to use this.

This was a great and intense reply, many thanks for your support.

For my ignorance I am not sure how to implement some of this. For example, centring an image, is this code used in the textile editor when adding a product?

Could you kindly explain a real life example of centring a product image.

Many thanks for your help.

Ok, np. You need to add:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

...to your style sheet (file that ends in .css in your assets folder). Then when you insert an image into your blog using the editor, add the

class="displayed"

Cool thanks, will implement and use asap! Thought I was pretty smart at this but just been reading the SEO post now my brain’s fried. Cool designer and SEO shopify guru contact me!

Thanks again.

This is cool, added to my shop.css and seems to work a treat. I have now spotted something a little harder to do.

When I select Catalogue and look at all my lovely products.. It is only natural to use some portrait some landscape, even though I am very good at keeping common sizes. Sometimes I just can’t use square images and have to use 2×3 sometimes 3×2 ratio.

Looking at the catalogue layout the different heights don;t look right. I see two options, make the image square in Photoshop with a transparent layer so it’s centred, or find some css that will centre the 3×2 landscape centrally in the 2×3 portrait. Any suggestions please? I think this is only a class used in the catalogue main window and could be set as a static attribute not called in the textile description.

Shopping Basket

On other matters, is it possible to have the shopping basket that pops up once a product is added hide after a few seconds. Although the feature is stunningly gorgeous, I don’t want customers seeing how much they spend all the time. Just see it pop up then hide. Not sure how they can complete the order once finished though? :(

— Last edited 02:09AM, Jan 14, 2009

Take care before redesigning the shopping basket popup.

I did some user testing before Christmas and the popup used in the Showroom theme is the most criticised aspect of my site; particularly the fact that it reappears after you hide it if you move to any other page.

I am busy redesigning as we speak to put a persistent basket on the right hand side of the page.

Like you I really appreciate all the help we get here from people like Ryan. Textile and Liquid look daunting until you have practiced a bit but once you get the hang of them they really allow you to do almost anything you want and this is what separates out Shopify from most of the “shop in a box” ecommerce tools.

Jonathan

itsRyan, this is great and very handy for adding images quickly and centrally.

Now if I understand this correctly, this centres the image in the frame width. Is it possible to put two images side by side equal distance or evenly spread in the frame?

On a side step, when shopify adds an image link in the textile description, can I edit a file somewhere so that it always adds a little extra code? Like:

<img class="displayed" src='http://static2.jadedpixel.com/s/files/1/0003/7931/files/some-image.gif' width=changeme height=changeme alt='' />

instead of just

<img src='http://static2.jadedpixel.com/s/files/1/0003/7931/files/some-image.gif' alt='' />

— Last edited 07:42PM, Jan 14, 2009

Yes it is – try this:

IMG.sidebyside { 
    float: left ;
    margin-left: 50px
} 

class="sidebyside" 

...where you can adjust margin-left (whitespace) as required by changing the 50px as required. Add this to two images, and they will be displayed side by side.

As for width=changeme, this page in the wiki explains how to insert images:

http://wiki.shopify.com/HowToDisplayAnImage

...but not sure why you would want to change the image width and height. It would just distort the graphic.

:)

— Last edited 08:48PM, Jan 14, 2009

That’s pretty sweet thanks very much!

Think I confused the issue about image dimensions, what I meant is that when I add images to a product description, shopify adds the code for me once I select an image.

Each time I have to manually insert additional code such as the ones above, class=”sidebyside” or class=”displayed”

I also use the same image but scale it using width= and height=

I was wondering if rather than keying this each time, I can edit the source somewhere and add these extra snippets, so once I add an image to the description, I don’t have to key the extra classes, the’re just there between the <>

:)

I was wondering [...] I can edit the source somewhere and add these extra snippets, so once I add an image to the description, I don’t have to key the extra classes…

Yes you can. Just apply the CSS to the proper selector in your stylesheet. If you provided a link to your site, we could provide such CSS ‘selector’.

It will be something like this:

.description img {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

The selector is the .description img part.

I also use the same image but scale it using width and height

Bad idea to scale an image, like itsRyan explained.

— Last edited 11:15PM, Jan 14, 2009

Thanks for your help, all working a treat so far.

I have a 800px logo/banner and I have put the text into this. so would like to drop the title but keep it in the browser hearer.

In theme.liquid I’ve found:

    <!-- begin div.header -->
    <div id="header">
      <div id="title">
        <h1><a href="/">{{shop.name}}</a></h1>
        {% if pages.about-us  %}
        <h2>{{ pages.about-us.title}}</h2>
        <div id="description">{{ pages.about-us.content | strip_html | truncatewords: 50 }}</div>
        <p class="underline">{{ 'read more' | link_to: pages.about-us.url }}</p>
        {% else %}
        <p>Create a page with handle <strong>about-us</strong> to display text here!</p>
        {% endif %}
      </div>
    </div>
    <!-- /end div.header -->

Can I change it here?

— Last edited 11:23AM, Jan 15, 2009

Do you mean the shop name? If you do, add this to your css

#title h1 {
  display: none;
}

I did thank you! – Thought I had to omit it in liquid.theme I’ll just add this to shop.css. Thanks itsRyan

Thanks itsRyan put all your tips to good use and my site’s comping along nicely.

Now my title is hidden, the About Us preview has shifted up. I know it’s positioned there in the css probably with an integer but I can’t find it anywhere!

The showroom theme is the one I’m modding. Obviously the place where the heading or h1 placed the About Us perfectly, though I’ve hidden it.

I think it’s an absolute/relative position issue but I’m ashamed to say I’m learning all this but Shopify really has me tuned in. Same issue with placing another basket, an html layers issue?

Any alignment tips please?

— Last edited 12:40AM, Jan 17, 2009

Ryan,

Does it matter if you use

#title h1 {
  display: none;
}

or

#title h1 {
  position: absolute;
  position-left: -9999px;
}

More lines of code I suppose. Is this six of one half dozen of the other?

Mark

Use display:none. That’s what it’s for.

Regarding the ‘creative’ (read: silly) use of absolute positioning to hide something, position-left is not a CSS property. You probably meant something like this:

#title h1 {
  position: absolute;
  left: -9999px;
}

The left property has been known to not work very well in Internet Explorer for absolute positioning. Just a bad idea, again.

You may see something like this, though:

#title h1 {
  text-indent: -9999px;
}

Now what that does is keep the h1 element in place, visible, so that the background-image is visible! This CSS simply moves the text out of the way. display:none would not work here as it would make the element disappear, not from the markup, but from what is shown on screen. Hence, no more background-image in sight.

Hope that clarifies things, rather than confuse.

— Last edited 05:53PM, Jan 17, 2009

Caoline,

my bad… but thank you for the clarification. I assumed displaying none would be easier and more fool proof but I had to bring it up because of this http://www.alistapart.com/store/tshirt-9999px

Which apparently is quite popular, and I would like one I might add.

I assumed displaying none would be easier and more fool proof but I had to bring it up because of this: http://www.alistapart.com/store/tshirt-9999px

That t-shirt is so incredibly geeky. ;-)

but don’t you want one? It’s the best one of these http://www.alistapart.com/store/ in my opinion. Plus I really like American Apparel, the clothes and the company.

But this is not about design anymore.

Indeed, a very geeky t-shirt :)

@Kanon try adding some padding-top to #description in your stylesheet….something like:

#header #description {
color:#BABAB1;
padding-top: 20px;
}

http://www.w3schools.com/css/css_padding.asp

That’s great itsRyan works a treat. Can you tell me where in the css I can find out how many words or the box size given for the about us in the header?

It runs on too long and I like the way it works, just want to make it a little briefer.. still working with the link read more

You can add some liquid code to limit the number of words displayed on the page. Take a look in theme.liquid for div#description, inside the div there should be some code that looks something along the lines of:

{{ article.content | strip_html | truncatewords: 12 }}

Change the truncatewords value to shorten the description (or add truncatewords if its not already there…)

Awesomely helpful, much thanks!