Design

Hi Kristen

In all.css around line 782 find this:

#custom-logo {
background:transparent url(logo.png) no-repeat scroll left top;
height:81px;
}

hello! Thank you for the reply, but that wasn't it :(

I actually figured it out - the settings sheet (the idiot proof "user friendly" thing that Shopify added to edit colors, fonts, etc) was restricting the size of the file that was being uploaded.

It took me a while to figure it out, but FYI to all other Reconfigured users: if your logo is tiny, please do yourself a favor and go into "Edit this Form" on the lower right corner of your theme editor sheet.

That will open up a css sheet for the "user friendly" editor. Go to the bottom of the coding and look for this line:

<th>Image</th>
      <td><input type="file" id="logo_image" name="logo.png" data-max-height="81" data-max-width="940"/></td>

The "81" is what is restricting the logo size. Change it to the size of the logo that you are uploading, and Voila!

Not to shabby for a CSS newbie ;)

bloody hell. Jinxed myself :(

Got the logo to load to it's true size, but it's still tiny on the website.

I've tried almost anything that I can think of - curiously enough, the tiny logo is on par with the floating shopping cart. Maybe that has something to do with it?

Feedback, please!

I'm having the same issue. I've looked at every line of code and can't figure it out.

@Mike you're using vogue,

Your logo image is 330px x 40px and it's showing to scale already.

@Kristen

I don't even see a logo on your site at all, just text.

Jamie, the image I uploaded is much larger than that so somewhere vogue is telling it to scale down to 330 x 40. I just can't find where it's saying that.

Jamie,

I just created a sandbox to see how the Vogue theme has come along since the addition of settings, and it does have logo as well as background image settings for its header now.

@Kristin, you are definitely not too shabby for a CSS newbie. Jamie is right: there's currently no logo showing on your site, just text. Your site is this one: http://www.greencheeksboutique.com/ Correct? You're using Reconfigured. Not sure what happened when you edited your settings form. Can you copy your settings code here? Maybe you can also provide a screen capture of what you used as settings, that is a screen capture of that page: http://greencheeks.myshopify.com/admin/themes/current

@fignoonan, it looks like Kristin has the right idea though. You will want to edit your settings form. For this, you'll need to go to your Theme Editor at /admin/themes/current and click on the 'edit this form' link at the bottom right of the gray box under the heading Settings.

Changing this form is really for 'advanced users' with a little HTML/CSS know-how. Vogue's menu bar is notorious for looking funny when your logo is too big, tabs not resting against the middle header anymore. That can be fixed easily with CSS. But you have to modify your stylesheet. The restrictions imposed by the theme settings are there for a reason: prevent the theme to go astray (is that a word).

(HEY JAMIE, SPELL CHECK WORKS HERE NOW!!)

So in Vogue, looks like the part in the settings form that needs tweaking to use a bigger logo is this one:

    <tr>
      <th><label for="use_logo_image">Use a logo?</label></th>
      <td><input type="checkbox" id="use_logo_image" name="use_logo_image" value="1"/></td>
    </tr>
    <tr>
      <th>Image</th>
      <td><input type="file" id="logo_image" name="logo.png" data-max-height="40" data-max-width="340"/></td>
    </tr>

The data-max-height and data-max-width values need to be changed.

Go girl! OK so what you are saying is that the Shopify backend (with the settings template) is applying it's resize script on anything that is uploaded for the logo space, correct. So no matter what Mike will have to change this in the settings template first then re-upload his original logo. I haven't had time to throw this on my junk account to look at it closer.

So no matter what Mike will have to change this in the settings template first then re-upload his original logo.

Looks like it. Me too have not had the time to try this out.

Most excellent! Logo is larger now. Thanks very much for your help everyone!

Great!

Ok... Ta daaaa, I got it to work! greencheeksboutique.com has a logo-header-thing...

First, I would like to thank Rob Reichman for sending me this link http://reconfigure.ca/shopify/how-to-change-the-reconfigure-shopify-theme-company-logo/

^_^

After having my "why didn't I think of that..." moment, I deleted my logo, resaved the default CSS code (to start with a clean slate - including the settings form) and... just to be sure that I didn't get that infamous "loading the same logo.png..." bug, I logged off, closed firefox to reset the cache, and logged back on.

Then I just followed the directions, as laid out on the Reconfigure web design site (link above). I also went back into the "Edit Settings" form and adjusted the sizes there to reflect the new logo size. Now it looks pretty.

How do they say... "Biggidy Bam!" lol

Thank you everyone else for your help :) Jamie and Caroline- you probably didn't see the itty bitty logo, or the ginormous one because I got tired of messing with it and reloaded the default text title CSS code, so that there was (at least) a shop name. Sorry for the confusion!

I am glad that someone else figured it out as well... at least it helped one other person!

On a side note... how do I get the shopping cart to come down? It's floating on its own now because the width of the header is significantly more than the original 122px. I want it to be flush with the top navigation, or at least closer to it. Thanks!

Kristin,

Glad you had that working. Kuddo to Steph Séguin for writing up a tut on his website about this. He's the author of reconfigure.

Now with the rest...

how do I get the shopping cart to come down?

That shopping cart is positioned absolutely. You can play with its 'top' value until you get it right,  so that it comes down to earth.

You will need to open all.css.liquid in your online theme editor.

Follow this link: http://greencheeks.myshopify.com/admin/themes/current

The stylesheet is under Assets.

Add following CSS rule to the bottom of file:

.shoping-bag {
top:143px;
}

Save.

That value 'top' is the distance in pixels between the top of your website's header and your shopping cart. Setting it to 143px looks about right to me.

Kristin, I'd like to see that cute top (part of the set) on a mannequin or person: http://www.greencheeksboutique.com/products/jinxedaposed-mexican-flower       Lovely panties.

And that's really special: http://www.greencheeksboutique.com/products/eko-lab-crochet-organic-color-grown-cotton-panty

You have lovely products!

Not sure if it's because I am 'slow' tonight but your slideshow seems a bit fast-paced to me.

Oh you ... changed it! It's slower now.

You're playing with your site as I am writing this... lol.

145px might be even better.

I am using a guide now. See attached image.

Thanks again Caroline. There are several areas where "shoping-bag" were mentioned in the code, so I did not know which to mess with. I am still getting used to the position and padding concepts... and figured it was best just to ask before I fudged something up.

However, I did find a similar section of code in the all.css.liquid file to the rule that you mentioned above:

.shoping-bag{
color: {{ settings.sb_info }};
font-size:12px;
position:absolute;
right:0;
text-transform:uppercase;
top:30px;
width:100%;
}

To avoid any conflicts in the coding, I did not add the CSS rule to the bottom of the file - I just changed the "top" value from 30px to 143px.

It worked like a charm. Thanks!

I was supposed to have a outdoor photo shoot today for a few things and we got rained out LOL

Thank you for the complements though. It feels nice cauz I've been working hard to find good designers... it's important to me and important to the business plan.

The slide show is a little quick, but most people do not have more than a 15 second attention span... or click through pages too fast. I thought it would be a good idea to let it sit for a few seconds and push to the next image, hoping it would catch interest. But maybe not... lol I'll have to experiment.

And yes, I was tinkering while you were writing. Yey for two computer screens! It makes life so much easier.

I'll adjust the shoping bag to 145 px - not that my eyes can see another two px, lol but my eyesight is terrible anyway, so it's all a blurr... :)

The reason I asked you to add a rule to the bottom of the file was to actually override that very rule you posted above.

In my book it's best to override than overwrite. It's less messy, and easier to take a step back. You may start experimenting side effects from your edits. Make sense? You can always remove (or edit) any of your overrides - it's much harder to undo edits. You would have to take notes of every single edit you make to the style sheet.

So it's actually less messy to add an 'override' at the bottom of the style sheet than to edit what's above.

When I edit someone's theme I usually add something like this at the bottom:

/* Caroline Schnapp's overrides */

/* my rules here */

I was supposed to have a outdoor photo shoot today for a few things and we got rained out LOL

Pictures are so important. It seems that the reconfigure theme photo size in the lightbox is small-ish.

Better luck tomorrow for the photo shoot!

So... the two rules would not conflict? Even though the original is still in there?

Does that mean that any coding added to the bottom of the sheet can nullify previous coding? 

That's very different from HTML (and is probably the mentality where I am getting caught up) - I am used to stacking coding in a certain order and make sure you close all the rules, in order. Ack!

Ok. I am guessing a side effect might be the slider going buggy... because that's what it is doing now. Although, I don't see how the two are related, lol It's jumping/skipping images. Lovely.

Fixed.

Yes, better luck tomorrow with the photos - but chances are it's going to have to wait on the model's schedule :) We'll see.

Didn't realize how late it was. Off to bed - thanks C!

So... the two rules would not conflict? Even though the original is still in there?

CSS is all about overrides. Any stylesheet is one huge override of CSS rules defined by your browser on your computer. Pretty much any rule overrides an other.

Like this rule:

p.intro {
font-size:120%;
}

Will override that one:

p {
font-size:100%;
}

Because it's more specific.

If 2 rules have the same specificity, the one that appears later in the source order (or file) will rule over the previous one.

CSS means 'cascading style sheet' and cascade means... well... that.

Ok. I am guessing a side effect might be the slider going buggy...

Overriding a CSS rule has no side-effect, I promise. If that makes you more comfortable though, it's perfectly okay to edit the 1st rule as you have. You can always include a comment next to your edit, using your name -- later it will be able for you to track down all your changes, using CTRL-F 'Kristin'.

.shoping-bag{
color: {{ settings.sb_info }};
font-size:12px;
position:absolute;
right:0;
text-transform:uppercase;
top:145px; /* Kristin's edit, made on Nov. 9th, 2009 */
width:100%;
}

Welcome, K!