Images Appear Too Big/Small/Stretched on Thesis Theme

[amin007]

If the submit button, input text boxes or shopping cart images appear too Big or Small on the Thesis Theme then read the following:

The Thesis theme specifies the width of the input field in it’s CSS which makes the input fields to have a specific size and causes this issue. You can override this CSS (our goal is to set the width to auto) by adding the following CSS to the custom CSS file that doesn’t specify a fixed width so the button image size or input field is the actual size of the image or input field:

.custom .format_text input {

border-width:0.067em;

padding:0.2em;

width: auto;

}

So all you have to do is click on the “Custom File Editor” menu from your “Thesis Options” menu and paste the above piece of CSS code.

[Digbick]

I have found another solution. The method specified above works fine, however it has one big drawback. It could affect your other input fields.

I’m using a customized input field on my archive page and with the code above, it gets affected, so it doesn’t look anymore the way I wanted it to look

With a bit of trial and error I found a solution that ONLY affects the eStore buttons.

Here it is:

In the custom file editor, you can specify the width and height of the button…

BUT!!!!

Make sure you use the “min-width” property instead of “width”. The “height” property works just fine…

Here’s the code I use for my salespages (inserted in the custom css file) as an example:

.eStore_buy_now_button, .eStore_subscribe_button, .eStore_button

{

background: #EBEBEB;

border: solid #ebebeb;

min-width: 600px;

}

That’s what it looks like (bottom of the page):

[http://www.coachdrague.com/blog/le-dragueur-doue/]

[JackAubrey]

This didn’t work for me for some reason – it seems the css selection is off.

Does this work for the estore’s default “Add to Cart” buttons too?

-JA

[amin007]

It should work for all buttons and images. Can you post a link to the page where you have the buttons?

[JackAubrey]

It’s the “sold out” button on individual products that’s doing it…

[http://www.spinozarods.com/test-page/bamboo-rods/66-4-hunt-pattern-special/]

[amin007]

I can still see that the CSS is using the following (see the 45% width?)

.format_text input {

border-width:0.071em;

padding:0.214em;

width:45%;

}

This means you did not use the suggestion I gave (the first post of this thread).. am I correct? If you are trying to follow the suggestion given by “Digbick” then in your case you need to add definition for the “eStore_sold_out” CSS class for the sold out button. Try adding something like the following in the “wp_eStore_style.css” file:

.eStore_sold_out{

background: #EBEBEB;

border: solid #ebebeb;

min-width: 600px;

}

[JackAubrey]

Got it to work! Thanks so much.

-JA

[WhatPond]

I would like to jump in on this conversation to be able to fix my buttons as well. Not being code wise person I am having trouble finding where these .css files are located in order to change them. I looked in the editor under appearance and the plugin editor for the E store but haven’t found the files mentioned above.Or should I try to find via FTP?

I am using Thesis theme 1.8 and Word Press 3.0.4

Should i be changing just the E store file or the Thesis theme files.

Lastly as you may have guessed I’m new to the forum and with the bundled package of plug-in’s. Awesome package and just what I’ve been looking for. One stop shop makes it easy.

Thank You and have a GREAT day

[Ivy]

Hi, You need to make the above change in the thesis theme.

So all you have to do is click on the “Custom File Editor” menu from your “Thesis Options” menu and paste the above piece of CSS code.

let me know how it goes.

[WhatPond]

Sweet it works. Thank You Ivy.

Guess I can hit “easy button” now lol

Thank You have a GREAT day!

[CampbellDuke]

Hola!

Thanks for this – I tried the more specific e-store related css and it had no effect until I changed min-size to max-size and made the buttons 100 px.

Take Care,

Beth

[RS71]

Thank you Digbick, you recommended code worked! I noticed the Paypal checkout image was really squished, so I just added the class name for that image, and everything looks perfect now.

.eStore_buy_now_button, .eStore_subscribe_button, .eStore_button, .eStore_paypal_checkout_button

{

background: #EBEBEB;

border: solid #ebebeb;

min-width: 150px;

}

Thanks again!!!!!!

[Author]

Posts