clean box around text and changing a hyperlink into a button

Site URL: https://www.elevateptr.com/cost

Hi - I'm trying to make a pricing grid like the below website and attached screen shots.  I was trying to do this via markdown, but the paragraph text & button are not  showing up.  Below is the css I was using.  This is the overall look and feel I was going for (look at the initial assessment box):  https://www.trailphysio.ca/

// Info Box //

.sqs-block-markdown {
  max-width: 600px;
  background: #ffffff;
  border: #DDDDDD 1px solid;
  border-radius: 0px;
  padding: 30px !important;
  margin: 20px;
  text-align: left;
}

// Info Box Title //

.sqs-block-markdown h2 {
  color: #000000;
  font-size: 26px;
  letter-spacing: 0px;
  padding: 20px 30px 0px 30px;
}

// Info Box Text Info //

.sqs-block-markdown  p {
  padding: 10px 30px 30px 30px;
  margin: 0;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 1px;
  line-height: 28px;
  color: #181818;
}

// Info Box Button //

.sqs-block-markdown a {
  font-weight: 200;
  font-size: 15px;
  text-transform: none;
  display: inline-block;
  border: 1px solid black !important;
  padding: 15px 30px !important;
  background-color: white;
  color: black !important;
  border-radius: 0px;
}
.sqs-block-markdown a:hover {
  background-color: black !important;
  color: white !important;
}

I see buttons here. Did you solve?

If no, can you take a screenshot the box?

@tuanphan  I did not solve this. It is for block #block-yui_3_17_2_1_1599945824037_17097 I attached the screenshot of what it looks like now and what I'm trying to get to.

On 9/12/2020 at 3:08 PM, jcsport123 said:

I was trying to do this via markdown, but the paragraph text & button are not  showing up.

It is an interesting idea to use a menu block as a way to produce a pricing grid. The problem is that by default it isn't flexible enough to accomplish the task. It is so close though!

We can set up a simple menu block like...

INITIAL EVALUATION
In-Person or Telehealth available
$125
+(60 min)

FOLLOW-UP SESSION 
In-Person or Telehealth available. 
$100
+(45-60min)

...that when processed by SS looks like...

Not quite what we want. The time is not under the title and no button.

But with some Javascript I think we might be able to get there. We need a Book Now button which I put at the very top of the Page.

We now have the basic elements we need. Things just need to be put in the right order.

In Page Settings > Advanced > PAGE HEADER CODE INJECTION put the following.

<script>

  $( ( ) => {
  
    let newButton = $( '.sqs-block-button:first' ).clone ( );
    
    // remove id attributes from all elements of new button
    
    newButton.removeAttr ( 'id' );
    $( '[id]', newButton ).removeAttr ( 'id' );
    
    // restructure the menu items generated from the markdown and SS code
    
    $( '.menu-item' ).each ( function ( ) {
    
      let options = $( '.menu-item-options', this );
      
      $( '.menu-item-title', this ).after ( options );
      
      // a clone of a clone that we append to the end of the menu item
      
      newButton
      
        .clone ( )
        
        .appendTo ( this );
      
      } );
      
    } );
    
  </script>

I worked with jQuery v3.5.1 to develop the above. We are cloning the button we created earlier. Removing id attributes from the clone so we don't cause id chaos. Then we visit each menu item, put the time under the title and add a new button.

Now it is a matter of styling. In with the script we put in earlier we insert the following at the top.

<style>

  .menu-item-description {
  
    color: #181818;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 28px;
    
    }
    
  .menu-item {
  
    background: #ffffff;
    border: #DDDDDD 1px solid;
    padding: 30px;
    
    }
    
  .menu-item-title {
  
    color: #000000;
    font-size: 26px;
    letter-spacing: 0px;
    
    }
    
  .menu-items {
  
    display: -ms-grid;
    display: grid;
    
    gap: 2vw;
    
    -ms-grid-columns: auto 2vw auto;
    grid-template-columns: auto auto;
    
    }
    
  .sqs-block-button:first-of-type {
  
    display: none;
    
    }
    
  .sqs-block-button-element--small.sqs-block-button-element {
  
    background-color: #3b3b3b;
    color: #fff;
    
    -webkit-box-shadow: 4px 4px #96e4b0;
    box-shadow: 4px 4px #96e4b0;
    
    }
    
  </style>

This is very basic styling. The main things to note are we hide the button at the top of the page and define a two column grid for the menu items.

The above is not a fully fleshed out solution. Obviously some CSS is still needed to complete the look but the basic structure appears to be in place.

@jcsport123 If you implement code similar to the above I'm not sure if the code will work properly. I noticed that your cost Page appears to contain four different versions of jQuery.

Let us know how it goes.

@creedon  Thank you! I am trying to learn from this now and will definitely let you know how it goes!  I'm new too this and definitely have been building off of things I find on other sites and using the element tool to figure out the code.  You mentioned four different versions of JQuery ... I'm guessing I should just be using the latest version, but do I need one in the header and footer for everything to work?  Is there any way you can help me clean it up? 

THANK YOU!!!! This really helped me a lot!

34 minutes ago, jcsport123 said:

You mentioned four different versions of JQuery ... I'm guessing I should just be using the latest version, but do I need one in the header and footer for everything to work?  Is there any way you can help me clean it up?

Running the latest jQuery would be grand but it may not be possible. Code written for an older version of jQuery may not work with the latest and vice versa.

Sometimes you may need to run different versions simultaneously. That scenario needs to be coded for.

I load the jQuery library in Settings > Advanced > Code Injection > HEADER only. In Settings > Advanced > Code Injection > FOOTER I put any site wide Javascript that needs to be executed. After that I put Javascript in other places such as Page Settings > Advanced > PAGE HEADER CODE INJECTION or code blocks as needed.

Cleanup could be a bit involved and not easily handled in a few posts. You'll have to go through your critical Javascript code to see if it will work with the latest jQuery and then if not, implement support for running multiple versions of jQuery on your site.