Bigger Variable price box

[tdavis74]

The box that is automatically inserted in the page appears kind of small, is there some way to make that box appear larger? I am very, very new to shopsite, so you might see a lot of questions from me!

Thanks,
Tanya

[Jim]

If you are talking about how big the text displays in the box, the size of the box is probably controlled by css. To find out what the particular style assigned to the field view the source of the html page. You will then need to modify the style sheet that contains that style and change the style so that it displays larger.

If you are talking about how many characters display when you type into the box, that will probably be coded into the template. You would modify the size="xx" field in the input statement where the box is located.

[tdavis74]

Yes, I am looking to edit it how many characters shows up when a customer types into the box. Where would I find the input statement so that I could make that change?

[Jim]

The actual form field may be in the template that is being used. Did you create the template or is it one ShopSite provided?

You edit templates under Merchandising > Custom Templates (pro and manager stores only)
If it is a ShopSite template you would use the Copy ShopSite template in the section where the template you are trying to modify is listed (Pages/Products, Shopping Cart , Advanced, Includes)

View the html page source and look for the text that is near the input field to get you close to where you are wanting to modify the input parameters. (You can view page source in Firefox by right clicking on the page and selecting View Page Source, IE, Chrome etc will have similar methods.) Once you have found the html that you need to modify then you must find the template code that is outputting that html and modify it. The location of the field in the template may be in the main template, (page, product, shopping cart, etc) or it may be in and include file that is included with the tag [-- include xx process --] where xx is some file name. If the code is coming from an include file you will need to modify the include file instead of the main template. (You will probably need to copy the ShopSite provided file to a different name, make your edit and then copy it again to the filename that ShopSite used.)

[tdavis74]

I am using ShopSite out of Ipower.com. I went in and tried editing the html code in the page itself. I thought I found where the size of the box was, and I edited it. When I do a preview of the page, it shows the larger size. But if I go into the ShopSite Pro page manager, it is not showing up the right size. Is there some difference between the pages I'm not seeing? It is my index page I'm editing.

[Jim]

Did you edit the actual html page, (like index.html) or did you edit the template that is used to generate that page?

If you edit the page itself then you will see the result when you open the page in your browser but the next time you publish your store it will be wiped out.

So you need to edit the template that is used to generate that page. You edit templates under Merchandising > Custom Templates. If you are using a ShopSite template you will need to make a copy of that template, make the change in the template you copied and then either copy the template back to the name of the ShopSite template or change the template that is assigned for your pages/products to use your modified version.

[tdavis74]

I took the page itself, out of my file manager for my website and edited it to look like the rest of the website. The rest of the pages used, like the cart and confirmation pages, are all using a shopsite template. This is working to an extent. I tried looking at the custom templates. I made a copy of the one I am using, then I looked for the page I wanted to edit, but the things I want to edit are not listed, so I'm even more confused. My customer wants where the word "Comments" is used to label the box changed to something else. I can't find that in the template. I'm so confused by this whole thing, I'm getting frustrated.

[tdavis74]

Alright, I managed to figure out how to edit my template and use it. I still have the problem of the box size though. I think I found the spot to edit it, but it only gives me the option of "Normal", "Small" or "Big". Big is still not the size I want. I'm not sure if there is going to be a solution I like. Any ideas?

Thanks!

[Jim]

The "Comment" text is probably changed on Preferences > Store Text > Checkout in the Comments/More information field.

As for the box size question we would need to see what the code looks like to tell you how to change it. On the Product > Edit Product Layout screen there are a number of pull downs with Big Small Normal for the font size of various fields, however most of the templates are now using CSS styles so you might be able to change a style if the field you are trying to modify has one assigned to it.

If you can provide a link to the page that you are having the problem on we might be able to tell from the html what needs to be done.

[tdavis74]

The page I am working on is http://hearttohearthospice.com/store/ss-index.html

I appreciate any help you can throw my way.

Tanya

[Jim]

If you want the font inside the box bigger then use this code.
<input type=text name="1:price" style="font-size="250%" size="4" maxlength="10" value="">

You can change the 250% to a different % amount if you want it smaller or still larger.

You could also change the color of the text or the background color by adding the appropriate code to the style attribute.

If you want the input box longer then you change the size="4" to a larger number.

Note that it looks like you have two : characters after Donation Amount you might want to make it just one.

[tdavis74]

Can you tell me where I enter that input tag at? That is exactly the line I was looking for but I don't know where to find it.

[Jim]

How did you create the page? It appears to be a custom template named h2hdonations. If you just assigned the product to a page that uses that template you will need to define the style in css like this

Code: Select all

<style type="text/css">
<!--
input {
   font-size: 250%;
}
-->
</style>

This could be put in the template, near the top, maybe right after the <body> tag. If the template will be used for other pages in the store that css would cause all input fields to have a larger font. So if it is only on this page that you want the input field with a larger font, you could add the css to a field that displays before the product such as the Page Text 1 field.

If you hard coded the html on the page you would just edit the page and add it in place.

[tdavis74]

So in CSS what would be the tag to make the box bigger than a 4.

[Jim]

I don't believe that the box size can be changed by CSS since it is part of the html tag itself. Maybe someone else on the forum would know a way to do it.