Two mysterious lines

Highlighted
New Member
3 0 0
Hello there, I would really like some help with the css stuff, please. I have made my own design from the Glacialis template. Everything looks good until I upload the assets. As you can see http://qieng.myshopify.com there are two lines on the right side. I can't find them in the code and they are like pushing text and objects to the left. Please, help! I hate the lines :)
0 Likes
Highlighted
Tourist
327 0 2

Hi Lotta

The lines are surrounding the ‘section’ in the ‘sidebar’ part of index.liquid

It’s intended as a second column to hold links next to the content area. If you don’t need it you can delete the code in ‘index.liquid’ that looks like this


{% if linklists.sidebar.id != 0 %}
    <div class="sidebar">
        <ul class="section">
            {% for link in linklists.sidebar.links %}
                 <li>{{ link.title | link_to: link.url }}</li>
            {% endfor %}
        </ul>
    </div><!-- /.sidebar -->
{% endif %}

The ‘if’ statement was intended to prevent those lines showing if there was no linklist named ‘sidebar’ but it’s obviously not working.

If you wanted to keep the code in you could try fixing the ‘if’ statement with something like

{% if linklists.sidebar.links.size > 0 %}

though without trying it, I’m not sure whether linkists return a ‘size’ value.

Hope this helps
Mike

Mike www.anothervision.co.uk
0 Likes
Highlighted
New Member
3 0 0

Thanks Mike, the lines are gone! Though I had to remove the code from the ‘theme.liquid’ as well. Also there are still something that pushes the object in ‘cart.liquid’ to the left. But the lines are gone :D Thanks!

Lotta

0 Likes
Highlighted
Tourist
327 0 2

Glad it worked out.

The narrower cart pages are because of this:


.main{
    width:465px;
    float:left;
}

.noside .main{
    width:640px;
}

In theme.liquid (I think) there’s an ‘if’ that’s supposed to wrap the whole page in a .noside class if there’s nothing in the sidebar (the css above changes the width of the ‘main’ section if it comes inside a ‘noside’ declaration allowing it to be wider).

Without looking at a fresh version of Glacialis again I’m not sure why the .noside wasn’t being applied (though it wasn’t for me either).

Change the above css to just say:


.main{
    width:640px;
}

and all your pages should be the same width and allow one column of content.

If you want to be able to track down the names of classes etc easily in order to work out why things aren’t displaying as you’d like, I’d suggest you download a copy of Firefox and add the Web developer toolbar Extension. Firefox, being W3C standards compliant will show the page how it’s supposed to look, then you can tweak the CSS to make the various flavours of IE behave themselves.

The FF web developer toolbar has (among other things) a very handy ‘Information’ section that lets you click objects on the page to discover much of the info you need to solve these sorts of things.

Hth
Mike

Mike www.anothervision.co.uk
0 Likes
Highlighted
New Member
3 0 0

Perfect!!! :D Thanks again, Mike!!!

0 Likes