Link to Contact Page

Paris

I am thinking of moving away from Wufoo to the SM Contact page.
QUESTION: Is there a way to create a 'button' on an 'About Me Page' that links to the 'Contact Page'?

denisegoldberg

@Paris said:
I am thinking of moving away from Wufoo to the SM Contact page.
QUESTION: Is there a way to create a 'button' on an 'About Me Page' that links to the 'Contact Page'?

Yes. You can place a menu content element on your about me page that links to the contact page. This content element can be defined to contain only one button.

See help page Create a contact page.

Paris

Thx Denise works great.
Next I will nave to snoop around for some CSS to tie the button into my new site graphic look.
I'll be back,

Paris

I'm back...
I have customized the contact form photo image so it is larger and more graphic and really happy with the clean single page and link.

QUESTION: Button Fix...Is there a little bit of the ol' CSS that will enlarge the 'Button Copy' and change the background to my site Red -also make the hover Yellow. NOTE: I figured out how to change button colour.

OR...BETTER YET Can I make my own button the other graphic I uploaded on my site page.

Hikin' Mike

Yes you can have a custom graphic instead of a solid color. I used your "Talk to Me" graphic. You'll need to remove the custom contact button and use this. Also, you'll have to remove the button text or your graphic will overlap. If you use a different graphic, you may need to adjust the max-width and height.

.sm-user-ui .sm-page-widget-button .sm-button.sm-page-widget-button-small,
.sm-user-ui .sm-page-widget-button .sm-button.sm-page-widget-button-large {
    background-image: url('https://photos.smugmug.com/Photography/n-nnkgk/HOMEPAGE-IMAGES/HOMEPAGE-IMAGES/i-vsWK4q9/0/7e853b89/Ti/eye%20crop%20red-Ti.jpg');
    border: 2px solid #f00;
    max-width: 178px;
    height: 80px;
    }

    .sm-user-ui .sm-page-widget-button .sm-button.sm-page-widget-button-small:hover,
    .sm-user-ui .sm-page-widget-button .sm-button.sm-page-widget-button-large:hover {
        border-color: yellow;
        }

Paris

Thx Mike.
Going to play around with the new button design and size.

denisegoldberg

@Paris said:
If I edit the button design and upload it - where do I find the new 'url'?

You can get the URL by opening the photo (of the button) on your site and using the share button.

Paris

Hey Mike.
So, I modified the design allowing more space around the elements.
Uploaded a smaller ver. 120x100 - hoping to make the 'button smaller'
Then went into 'Inspect' and pasted the new background image info.
Unfortunately, the button size did not change.
I then tried to adjust max width and height and it did not work.
What am I doing wrong?

Also, it doesn't allow me to remove the original button name so I just added a period so it appears as white dot.

Hope this all makes sense.

Hikin' Mike

I didn't realize you couldn't remove the button text. Just tested this on my test page and it works:

.sm-user-ui .sm-page-widget-button .sm-button.sm-page-widget-button-small,
.sm-user-ui .sm-page-widget-button .sm-button.sm-page-widget-button-large {
    background-image: url('https://photos.smugmug.com/Photography/n-nnkgk/HOMEPAGE-IMAGES/HOMEPAGE-IMAGES/i-xmZhWgV/1/08d78475/S/RED%20EYE%20120X100-S.jpg');
    border: 2px solid #fff;
    min-width: 120px;
    min-height: 100px;
    padding: 0;
    font-size: 0;
    }

    .sm-user-ui .sm-page-widget-button .sm-button.sm-page-widget-button-small:hover,
    .sm-user-ui .sm-page-widget-button .sm-button.sm-page-widget-button-large:hover {
        border-color: #000000;
        }

Paris

Hi Mike...sorry to bother you about this.
I changed the design of the button to horizontal and adjusting the min-width worked great but the min-height is only effective to about 30px - any idea why?

Hikin' Mike

Not seeing your new button...

Hikin' Mike

You probably don't need the min-height or at least use height instead.

Paris

Forgot to publish - done.
I will try ' height'
UPDATE: height works thx.
Don't like this button design but now that I have the tools I can play around.

Allen

Looks like your "talk to me" button is repeating the image. I get a button and a half. Need to add no repeat for the image.

Hikin' Mike

@Allen said:
Looks like your "talk to me" button is repeating the image. I get a button and a half. Need to add no repeat for the image.

No-repeat doesn't work here.

@Paris said:
Forgot to publish - done.
I will try ' height'
UPDATE: height works thx.
Don't like this button design but now that I have the tools I can play around.

You need to change min-height:30px to line-height:36px. If you change your graphic, you need to change the line-height to match your graphic height.

Paris

Thanks again Mike.
It's really fab to have the basic code so I can adjust and see how different designs work.
My background is design so Photoshop is my friend.

Paris

Button works great!
Revamped the contact form - I am a happy bunny.

Hikin' Mike

@Paris said:
My background is design so Photoshop is my friend.

I like your new logo. If your background is in design, do you use Illustrator instead of PS?

Like HTML/CSS, I know enough desisgn (Illustrator/Photoshop to be dangerous...lol!

Paris

Thanks Mike.
I am a Production Designer in Tv/Film and most of the graphics I deal with are related to those projects.
Over the years myself and most of the graphic designers who work for me have moved to PhotoShop - If it's really finicky Illustrator is the go to but that is becoming rare.
Best for the New Year.