Unfortunately due to other commitments, we are no longer able to provide support for these themes.

All our themes are now free and can be downloaded by anyone to use/modify however they wish.

We want to thank all our users for their support over the years. All the best in 2020 and beyond.

Change WordPress More Link to Themedy Button Class

sarah_dailysarah_daily Lifetime Member
edited May 2017 in SmoothPost 2
I'm currently using WordPress' <--more--> link for my post teasers. However, I'd like this to have SmoothPost 2's button class. How can I accomplish this?

Website: http://thedailyremote.com
Post edited by sarah_daily on

Comments

  • Options
    Mark_HodderMark_Hodder Administrator, Lifetime Member
    Basically if you open up css.css search and replace .excerpt_read_more with .more-link

    Or copy the sections out into Custom CSS and make the changes there, a quick look and this seems like it would be close by adding to Custom CSS:
    .more-link { 
    	-webkit-appearance: none; 
    	border: transparent; 
    	cursor: pointer; 
    	display: inline-block; 
    	text-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
    	outline: none; 
    	padding: 10px 16px;
    	padding: .625rem 1rem;
    	position: relative; 
    	-webkit-box-shadow: inset 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,0.1); 
    	-moz-box-shadow: inset 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,0.1); 
    	box-shadow: inset 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,0.1); 
    	-moz-border-radius: 3px; 
    	-webkit-border-radius: 3px; 
    	border-radius: 3px; 
    	background: #6AB05B; 
    	background-image: -ms-linear-gradient(top,#6AB05B 0%,#5D9D50 100%);
    	background-image: -moz-linear-gradient(top,#6AB05B 0%,#5D9D50 100%);
    	background-image: -o-linear-gradient(top,#6AB05B 0%,#5D9D50 100%);
    	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#6AB05B),color-stop(1,#5D9D50));
    	background-image: -webkit-linear-gradient(top,#6AB05B 0%,#5D9D50 100%);
    	background-image: linear-gradient(to bottom,#6AB05B 0%,#5D9D50 100%); 
    	border: 1px solid #4D8B41; 
    	border: 1px solid rgba(0,0,0,0.2); 
    	color: #fff;
    	clear: both;
    }
    
    .more-link:hover { 
    	background: #7BCC6B; 
    	color: #fff
    }
    
    .more-link:active{ 
    	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); 
    	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); 
    	box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); 
    }
    Need Additional Help?
    - Check out the Resource Center for helpful tutorials and hints.


    image
  • Options
    sarah_dailysarah_daily Lifetime Member
    Thanks, Mark!
This discussion has been closed.