Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Mar 2005
    Posts
    167
    Plugin Contributions
    0

    Default Creative help needed

    Hey everyone! I need some creative assistance!

    I have a product that is a "Build your own Gift Bag". Included in the base price of $20, customer can choose 2 fragrance oils and 1 oil burner. For an additional $3 per item they can add other items into the gift bag to customize it.

    Here is how I have it setup:
    http://www.simetraonline.com/index.p...&products_id=2

    Can anyone think of a better way I can lay this out so it looks more professional and clean cut? I think it looks a little confusing the way it is displayed.

    ANY help is GREATLY appreciated! We have such talent on these boards!

    Thank you in advance,
    Mary Ellen

  2. #2
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: Creative help needed

    Hi Mary Ellen,

    One small confusion for me: the text at the top says the gift bag includes a burner (which I choose), 2 oils (which I choose) and 4 tea lights and 2 droppers (which I don't choose?) Maybe mention the tea lights and droppers down below the oils drop-down, in the same order, without any drop-down of course.

    The main issue I think is alignment and text styling as aids to guiding the buyer. Whenever you have a series of steps, the layout has to clearly indicate the process, and must not interrupt that process with anything non-linear. (That's as clear as mud but it covers the ground!)

    The old way of doing things, with a table structure, made this easy because you could right align the left cells and left-align the right ones, and all your drop-downs would line up nicely. I think it's very important you try to do that, even though it'll be a struggle with the style sheet. Try setting text-align: right for the headings, text-align: left for the drop-down's div, and give the drop-down's div a margin left so they line up where you want them. Something like that should work.

    While you're at it, try to get the drop-downs to be the same width, just to remove one more visual anomaly.

    Your text headings already have a hierarchy of size, but maybe a bit of colour would help set off the main sections. Numbered steps would help too. And perhaps a 1 pixel box around the area which holds the choices, so people see all that is possible at a glance.

    Finally, I'm more than a little confused by all the references to prices. There's Starting at $20, (Up to $35 Value), and Save up to $36. I don't get a quick sense of what the parameters are. I think (Up to $35 Value) could be left out entirely. It sounds like you won't include the fluff and gift card if someone spends more than $35.

    I hope this helps. I'm not exactly a gift basket kind of guy, but whether that makes my impressions more valuable or less is up to you.

    Rob

  3. #3
    Join Date
    Mar 2005
    Posts
    167
    Plugin Contributions
    0

    Default Re: Creative help needed

    Rob,
    Thank you so much for all the feedback. You are right that up to $35 had to go. I wasnt reading it that way and it did sound like it was tied to the fluff.

    I LOVE all your ideas on the visual appeal of the site, the border of 1 pixel, the numbered steps, colors, etc...If I was making a site in Dreamweaver I would have set up the pages SO differently and it would have been easy. But, I know absolutely nothing about CSS and am really struggling to figure all this out. I don't have a clue how to change the layout with all your great ideas in that css. I also have no idea how to change the width of the boxes. I don't know why it made them diff sizes!

    Any help you can give me on what to add into my style sheet to incorporate these changes would be much appreciated. I am at a loss....

    PS: The droppers and tea lights dont have choices because they only come one way. Tea lights are just small candles and droppers are little droppers like eye droppers.

    Thank you so much,
    Mary Ellen

  4. #4
    Join Date
    Mar 2005
    Posts
    167
    Plugin Contributions
    0

    Default Re: Creative help needed

    Also, what file would I need to make the changes in?

  5. #5
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Creative help needed

    You can make most of the changes in your stylesheet (/includes/templates/your_template/css/stylesheet.css).

    The way to get the input boxes to line up is to give a width to the text in front of them:

    PHP Code:
    h4 .optionName {
        
    width88px/*adjust to fit longest label*/
        

    This will require more width than your current setup, since you will have to account for the widest label plus the widest box. If any label is too wide, it will wrap to the next line - could be a good thing for some displays. If any input box is too wide to fit, it will drop down and left justify.

    If you want the labels to be right justified against the boxes, there is another element you can apply styling to:
    PHP Code:
    label.attribsSelect {
        
    floatright;
        } 
    This will make the text (variable width) float right inside the fixed width heading box.

    PS - the input boxes automatically adjust to the longest text line inside.
    Last edited by gjh42; 4 Apr 2007 at 04:16 AM.

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Creative help needed

    Edit: in
    PHP Code:
    label.attribsSelect {
        
    floatright;
        } 
    you need to add text-align:right; to fully right-justify the labels.
    PHP Code:
    label.attribsSelect {
        
    floatright;
        
    text-alignright;
        } 
    Your display will probably work fine as is in a 1024x768 or larger monitor, and a bit of wrapping in 800x600 monitors is no big deal.

  7. #7
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: Creative help needed

    Glenn said:
    PS - the input boxes automatically adjust to the longest text line inside.
    The size element is used to make input boxes a particular size. So it's just a matter of finding the right spot in the Zen code to add that. For example...

    Code:
    <input type="text" name="yada" size="50">
    ...would create an input box 50 characters wide, no matter was in it.

    Also, in your answers above, the suggestions are identified as "PHP code" above the boxes but they're actually CSS and would be applied in the stylesheet. Thought I'd better clarify that just in case.

    HTH

    Rob

  8. #8
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Creative help needed

    Rob,
    Since there isn't a "CSS" code tag, using "PHP" at least gives some color definition to the text. "HTML" would be as applicable but takes a second longer to type:)

  9. #9
    Join Date
    Mar 2005
    Posts
    167
    Plugin Contributions
    0

    Default Re: Creative help needed

    Thank you for the info. I am going to try to figure out what code to put where this afternoon. Hopefully I can make some sense of it all.

    How would I add steps beside each step in the process and also a 1 pixel border around the whole thing? Any thoughts?

    Thank you!

  10. #10
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: Creative help needed

    Hi,

    The entire block of choices to choose from is inside a div with the id of productAttributes, so you could add this to your style sheet...
    Code:
    #productAttributes {
    border: 1px solid #972F93
    }
    That would make a purple box around everything.

    As to adding numbers, since the choices are not in a list, it won't happen automagically. You'll have to find in the code where the attributes are being generated and get it to insert the number there. I'm a newb when it comes to php, so others will have to advise on that one.

    Try the box first. You may find the numbers aren't needed.

    I like the way the choices are all lined up now. That helps a lot.

    Rob

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v154 Getting creative with product images
    By pricediscrimination in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 30 Aug 2015, 09:51 PM
  2. zen creative
    By sierthedon56 in forum General Questions
    Replies: 1
    Last Post: 9 Jul 2008, 01:57 AM
  3. creative coding needed!
    By lina0962 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 11 Apr 2007, 04:47 PM
  4. creative coding needed!
    By lina0962 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 11 Apr 2007, 03:46 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR