Attempting to change the Buy Button Style

Hi,

Nothing really works when ever I attempt to change the appearance of the Buy Button via the CSS.

When I am on the Store Appearance page sometimes changing the padding, margin, height, and position works. Thus far nothing else has worked.

My site is hosted via Sparespace. I usually see the padding and margin changes, but that is about it. Along with that the buy button never goes above the image when I try that out.

I have changed templates to see if that was the issue.

Also, would it be possible to get rid of the |?

Tim
1 person has
this problem
+1
Reply
  • Derek (Official Rep) October 30, 2017 02:53
    Hi Tim,

    Thanks for your post and I'll be happy to help. Could you give me an idea of what style changes you're wanting to make? Any CSS you apply should work nicely as long as it is properly-coded...just keep in mind that with Squarespace it might get tricky to get the desired effect because of the way they have coded their pages.

    As for getting rid of the separator, you can do that by setting the display of the separator to none as shown in the last example on http://support.fotomoto.com/customer/....

    I hope that helps and just let me know how I can assist.

    Kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • My basic assumption is that the code is being affected by CSS inheritance from the Square Space templates.

    However, changing the code via their interface or yours doesn’t really seem to affect the end results. All the text on my test page have been set to crazy impractical colors. The Buy text just remains black. The separator is still there.

    I did try the separator code to no avail.

    I would like to make the “Buy” text bigger/bolder, move it to left some, change the text color, and change background color. Along with that I would like to remove the separator and maybe move the whole under the image.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Derek (Official Rep) October 30, 2017 17:23
    Hi Tim,

    Thanks for the reply. Just so you know, Fotomoto's custom CSS is loaded in to the page when the Fotomoto Script runs on your Squarespace page, and that is how you can use CSS to control the presentation of the Buy links. You could also add custom CSS that controls the Buy links to your Squarespace custom CSS. You've probably already seen our Customizing the Buy Buttons article on the subject, but I'm mentioning it here for anyone else reading along.

    As for your site specifically, changing the fonts sometimes requires the !important rule, as the CSS needs to override any other CSS that Squarespace uses to control the presentation of the text. For example, in your Dashboard you had:

    .FotomotoToolbarClass a,
    .FotomotoToolbarClass a:link,
    .FotomotoToolbarClass a:visited,
    .FotomotoToolbarClass a:active,
    .FotomotoToolbarClass a:hover {
    font-size: 9em;
    color: #332233 !important; /* show the links in gray */
    }


    but on the font-size you'd need to have font-size: 9em !important;.

    I'm happy to help you change the CSS, but I would need some specifics on exactly what you want to do to it and need to be able to see the site in order to check what I've done, but I can't as you just have a "coming soon" page up there now with no images on it.

    Could you email me via http://support.fotomoto.com/customer/... and let me know exactly what you'd like to do to it and how I might be able to access a page that has an image on it so that I can check what's done?

    Thanks and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned