Link to Contact Page

Paris · December 28, 2017

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 · December 28, 2017

@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 · December 28, 2017

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 · December 28, 2017

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 · December 29, 2017

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 · December 29, 2017

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

denisegoldberg · December 29, 2017

@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 · December 29, 2017

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 · December 29, 2017

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 · December 30, 2017

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 · December 30, 2017

Not seeing your new button...

Hikin' Mike · December 30, 2017

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

Paris · December 30, 2017

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 · December 30, 2017

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 · December 30, 2017

@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 · December 30, 2017

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 · December 30, 2017

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

Hikin' Mike · December 30, 2017

@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 · December 31, 2017

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.

Link to Contact Page

Comments