Features Table needs to have better representation

[jcockroft64]

[jcockroft64]

It would be good to have the "meta data" represented like the Trail Details above. On the right hand side we can have these "buttons" to represent the characteristics.

[russellelliott]

Buttons can be added to the Tablepress table used for that given hike by selecting the advanced editor for that cell. from there, you can modify the html text of that cell.

Here's more info: https://kinsta.com/blog/tables-in-wordpress-tablepress/

I made each word in the "features" tab into a button. Here's the HTML code I used:

<button>dogs permitted</button>
<button>floral</button>
<button>lakes</button>
<br/>
<button>mountain pass</button> 
<button>trail quality</button>

The buttons are rather large. Will have to do some CSS styling.

[russellelliott]

I reduced the buttons down to a more manageable size. Here is the CSS I used (applies to all buttons):

/*Button CSS*/
button {
  border: none;
  border-radius: .4em; /*Rounded corners*/
  padding: 6px 12px; /*Padding within buttons*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 10px; /*Padding between buttons */
  cursor: pointer;
  text-transform: none; /*Don't alter the capitalization of the text*/
}

This CSS was applied globally in the Elementor editor; the same place as the tab CSS. Tutorial for this is outlined in issue #11

Info on basic CSS button styling: https://www.w3schools.com/css/css3_buttons.asp

Something I notice about the buttons is that Wordpress does a newline (<br>) after each button despite me not doing so in the HTML code for the buttons. Might be something to do with TablePress? or WordPress itself?

[jcockroft64]

I noticed once you hover over the button they change their style. It implies they are clickable, which they are not. Can you eliminate this?

[russellelliott]

You can make a button unclickable by adding this CSS: pointer-events: none; Here is more info on that: https://stackoverflow.com/questions/46566019/css-button-set-to-unclickable I also decreased the font size of the buttons to 12px.

Here is the button CSS:

/*Button CSS*/
button {
  border: none;
  border-radius: .4em; /*Rounded corners*/
  padding: 6px 12px; /*Padding within buttons*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 10px 10px; /*Padding between buttons */
  cursor: pointer;
  text-transform: none; /*Don't alter the capitalization of the text*/
  pointer-events: none;
}

[russellelliott]

Update: added borders to buttons. More info: https://www.w3schools.com/css/css3_buttons.asp CSS: border: 1px solid;

Full CSS

/*Button CSS*/
button {
  border: none;
  border-radius: .4em; /*Rounded corners*/
  padding: 6px 12px; /*Padding within buttons*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 10px 10px; /*Padding between buttons */
  cursor: pointer;
  text-transform: none; /*Don't alter the capitalization of the text*/
  pointer-events: none;
  border: 1px solid;
}

[jcockroft64]

Just about there. If you could, could the left hand side be scrunched together just a bit. The line spacing seems to be a bit much.

[jcockroft64]

Actually, on the right side, there needs to be a tad more vertical spacing between the buttons.

[russellelliott]

I changed the vertical spacing between each button from 2px to 4 px Before: margin: 2px 2px; After: margin: 4px 2px;

here is what the button CSS looks like now:

/*Button CSS*/
button {
  border: none;
  border-radius: .4em; /*Rounded corners*/
  padding: 3px 6px; /*Padding within buttons*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px; /*Padding between buttons */
  cursor: pointer;
  text-transform: none; /*Don't alter the capitalization of the text*/
  pointer-events: none;
  border: 1px solid;
}

[russellelliott]

Paragraph text in "overview" table closer

CSS:

/*Paragraphs within the "Overview" table*/
.overview p{
    margin-bottom:3px;
}

Made the table have class "overview" Styling to p tag in class: https://stackoverflow.com/questions/57469033/is-there-a-way-to-change-the-style-formatting-of-an-element-within-a-class Adjust spacing of paragraphs: https://stackoverflow.com/questions/18392584/remove-spacing-between-p

[russellelliott]

Weird stuff seems to occur when you switch between visual and text mode. Here is what the text looks like for reference:

<div class="primary">

This is a 50 mile hike that we did from Twin Lakes to Tuolumne Meadows. It was a 6 day/5 night trip involved 50 miles of hiking 12,400 feet of elevation gain, and almost every meal was at a lake or river. This is highly recommended.
<div style="height: 20px;"></div>
<table class="overview">
<thead>
<tr>
<th style="width: 45%;">Trail Details</th>
<th>Features</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding-top: 10px;"><b>Distance:</b> 42 miles

<p><b>Elevation Gain:</b> 17,000 ft</p>

<p><b>Duration:</b> 4 days</p>

<p><b>Difficulty:</b> moderate</p>

<p><b>Overall:</b> exceptional</p>

</td>

<td><button>dogs permitted</button>
<button>floral</button>
<button>lakes</button>
<button>mountain pass</button>
<button>trail quality</button>
<button>nobody</button>
<button>sumdm</button></td>
</tr>
</tbody>
</table>
</div>

Also, paragraphs have 4px margin now CSS:

/*Paragraphs within the "Overview" table*/
.overview p{
    margin-bottom:4px;
}

[jcockroft64]

There is a wealth info here that I'll capture in our tutorials section then close the issue. Later on I may make the buttons clickable to a page that list all the hikes with that attribute such as "floral"