Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore F.A.Q/Instructions › Images Appear Too Big/Small/Stretched on Thesis Theme
Tagged: css, thesis theme, thesis theme image issue, tweak
- This topic has 11 replies, 7 voices, and was last updated 13 years, 6 months ago by RS71.
-
AuthorPosts
-
April 7, 2010 at 6:51 am #1032amin007Participant
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.
June 16, 2010 at 9:15 am #19441DigbickParticipantI 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/]
August 29, 2010 at 9:15 pm #19442JackAubreyMemberThis 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
August 30, 2010 at 3:07 am #19443amin007ParticipantIt should work for all buttons and images. Can you post a link to the page where you have the buttons?
August 30, 2010 at 3:14 am #19444JackAubreyMemberIt’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/]
August 31, 2010 at 12:00 am #19445amin007ParticipantI 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;
}
August 31, 2010 at 4:07 am #19446JackAubreyMemberGot it to work! Thanks so much.
-JA
January 23, 2011 at 8:12 pm #19447WhatPondMemberI 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
January 24, 2011 at 3:14 am #19448IvyMemberHi, 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.
January 24, 2011 at 11:10 am #19449WhatPondMemberSweet it works. Thank You Ivy.
Guess I can hit “easy button” now lol
Thank You have a GREAT day!
May 5, 2011 at 12:05 am #19450CampbellDukeSpectatorHola!
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
June 14, 2011 at 11:53 am #19451RS71MemberThank 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!!!!!!
-
AuthorPosts
- You must be logged in to reply to this topic.