Add some buttons for easier navigation

There are no out-of-the-box navigational links provided.

It's useful to display an "All Locations" button on the single location page, and an "All Events" button on the single event page so the user can return to the summary view.

All Venues button:

<a class="button button-size-large button-edge-rounded" href="/events-2/locations/">All Venues</a>

All Events button:

<a class="button button-size-large button-edge-rounded" href="/events-2/">All Events</a>

Save this custom CSS to the Style.css file:

/* Buttons, by Samantha Sand at Digital Pen Studio */

body .button {
display: inline-block;
text-decoration: none;
background: #4ba3d8;
line-height: 18px;
position: relative;
margin: 0 10px 10px 0;
color: #FFF;
border: 1px solid transparent;
transition: background 1s ease 0s;
-webkit-transition: background 1s ease 0s;
-moz-transition: background 1s ease 0s;
-o-transition: background 1s ease 0s;
body .button:hover { color: #FFF; background: #003b5f; border: 1px solid #272B2F;}
body .button:active { top: 1px; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2); }

body .button-size-small { font-size: 11px; padding: 4px 12px; }
body .button-size-medium { font-size: 13px; padding: 8px 17px; }
body .button-size-large { font-size: 15px; padding: 11px 18px 12px 18px; }

body .button-edge-straight { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
body .button-edge-rounded { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk