Joe Workman TotalCMS - How to create a CMS editable button


(Dan M) #1

My search ninja skills have failed me (I have searched for an answer) and I can not figure this out. Any help is appreciated.

I am trying to create a CMS editable button where the “link” applied to the button is editable online via a end user CMS text field. I have the functionality to apply this behavior to a CMS text stack (found via a search here), however I can’t figure out how to apply the link behavior to a button stack. Specifically I am using Joe Workman’s Total CMS Stack (love it by the way:+1:) and Elixer’s Flat Button Stack.


(Jason Bostick) #2

I just did this actually for a demo site. You can use the regular CMS text macro in the link dialogue box. Sorry I am not on my RW computer to show you a screenshot. I believe I used a ButtonPlus stack though. I havent tried it with the elixir one.

Edit: in case that didn’t make sense:

  • I set my button to be a link
  • Then when I clicked ‘Set Link’ I put %cmsText(cmsid)% in the url box (and replaced cmsid with the ID that I chose in the corresponding text box on the Admin side)
    and that was it.

(scott williams) #3

I’ve done it two different ways
one using the button group buttons (see screen shot. this one they label the button using CMS and then there is a CMS text field for the link.

And another project I made a series of buttons for them (they wanted their logo on the button) and just let them drag the button image into a cms image stack and get the link from a cms text input field


(Dan M) #4

Jason,
Thanks. I had tried that approach (with other button stacks) with no luck. I’ve tried to recreate your success using the ButtonPlus stack but it appears to be a “Foundation Theme” only stack (I could be wrong there). None the less…I will keep tinkering with your advice and see what I get.


(Dan M) #5

Scott,
Thank you. With your first example…the button group are you using the ButtonPlus Stack as well?


(Jason Bostick) #6

Ah sorry, you’re correct that ButtonPlus is Foundation only. It looks like Scott’s is one of the Foundation button stacks as well.

I wouldn’t have thought that this behaviour would be limited to foundation buttons though. Maybe @zeebe knows for sure.


(scott williams) #7

in that example yes.
but you can do as I did in the for the other site and just make your own buttons, put them in an image stack and use a cms text macro for the link.


(scott williams) #8

here are some screen shots

PREVIEW

EDIT

CMS PREVIEW

CMS EDIT


(Dan M) #9

Scott,
Thanks. I really appreciate the input, effort, and solution you offer. That may be my backup plan (i.e. making button images). However, I am hoping to take advantage of the responsive scalability and html/css code based editing of the vector/code based buttons available in many of the “button stacks”. Again, thanks for the solution.


(scott williams) #10

Hi Dan,
I’m not sure what (if any) non foundation button stacks will work with CMS, your best bet would be to ask teem workman or the stack author then.

BTW the image buttons scale and are responsive.


(scott williams) #11

Hi Dan,
FYI, I just tried it with sweet button (the only other button stack I have) and it works


(Dan M) #12

Scott,
Would you be able to share some screen shots of your sweet button set up that works? I grabbed the stack but I am still having no luck. It’s now clear that there is an error between the keyboard and the chair on my end. Any images appreciated.


(scott williams) #13

here ya go:

PAGE SIDE

CMS SIDE


(Dan M) #14

Scott,
Issue Resolved. Thank You! :thumbsup:I truly appreciate the input. I had tried the settings you shared earlier and still ran into trouble…I then began to run myself in circles. Knowing that it worked for you and Jason forced me to take a fresh look. On my end it seems that the CMS Admin Text stack - Text Editor settings were the issue (a “p” tag I noticed in an error I was getting and the box/line height of your “insert link box” clued me in). The HIPWIG edit function was active. I changed HIPWIG to Text/Markdown and deselected all options. This did the trick. I’ve attached a pic in hopes it helps another user down the road.

For clarity and fairness to the folks at Flat Button/Elixr this solution works just as well with their stack. I suspect all like button stacks should work.


(scott williams) #15

Glad you got it sorted