Snippet for Button like your Showcase/ View Demo Buttons

  • Resolved kls

    (@katiesutton)


    11 years ago

    Your theme is awesome! Thanks for the amazing support and all the useful code snippets.

    I wonder if you could post the snippet you used to create the View Demo and Showcase buttons on themesandco.com? I used the Snippet you posted to change a menu item to a button, but the button stays in the menu when I resize the screen (and does not wrap well). I’d like to create a Donate button that hops up above the nav bar as the screen shrinks as the View Demo and Showcase buttons do on the documentation site.

Viewing 2 replies - 1 through 2 (of 2 total)
  • tomaja

    (@tomaja)

    You could use this snippet, by changing link to fit your needs, e.g. adding few classes for button

    Thread Starter kls

    (@katiesutton)

    Good one! That worked, thanks!

    Since it took me a bit of time to get it just right, here’s my code for the benefit of others:

    Add the following to your Child Theme’s functions.php:

    //add link in tagline
add_filter( 'tc_tagline_display' , 'my_link_in_tagline');

function my_link_in_tagline() {
	global $wp_current_filter;
	?>
		<?php if ( !in_array( '__navbar' , $wp_current_filter ) )  :?>
			<div class="container outside">
		        <h2 class="site-description">
		        	<?php bloginfo( 'description' ); ?>
<br>
		        	<a href="https://mywebaddress/"class="btn-donate-media btn-large">Donate</a>
   </h2> 

		    </div>
		<?php else : //when hooked on __navbar ?>
			<h2 class="span7 inside site-description">
	            <?php bloginfo( 'description' ); ?>
    <br>
	          <a href="https://mywebaddress/" class="btn-donate-media btn-large">Donate</a>

 </h2>
		<?php endif; ?>
	<?php
}

    It’s pretty much the code from the snippet but I added a break before the link so the button would go below the Site description and I added my button class.

    Then create a css class for btn-donate-media to style how you want it to look. It will override whatever you wish from btn-large. I used the following to create a nice yellow button with a gradient:

    /*style for button when screen reduced*/
.btn-donate-media {
  background-color: hsl(43, 97%, 45%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcd46d", endColorstr="#e2a203");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fcd46d), to(#e2a203));
  background-image: -moz-linear-gradient(top, #fcd46d, #e2a203);
  background-image: -ms-linear-gradient(top, #fcd46d, #e2a203);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcd46d), color-stop(100%, #e2a203));
  background-image: -webkit-linear-gradient(top, #fcd46d, #e2a203);
  background-image: -o-linear-gradient(top, #fcd46d, #e2a203);
  background-image: linear-gradient(#fcd46d, #e2a203);
  border-color: #e2a203 #e2a203 hsl(43, 97%, 38.5%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.42);
  -webkit-font-smoothing: antialiased;
position: relative;
line-height: 16px;
vertical-align: middle;
margin-top: 0px;
margin-left: 0px;
padding-top:5px;
padding-bottom:5px;
}

    Unless your button is super small, you will also need to change the following CSS so the button does not end up on top of the tagline:

    h2. site-description {
   line-height: 35px;
}

    Finally, if you have this button in your navbar already (because of the way I’m styling my page I do) use this CSS to hide the new button:

    .navbar-wrapper .btn-donate-media {
display: none;
}

    Thanks Tomaja!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Snippet for Button like your Showcase/ View Demo Buttons’ is closed to new replies.