By Rob on Friday, 01 August 2014
Posted in General Issues
Replies 5
Likes 0
Views 762
Votes 0
Hello,

Just wondering if it would be possible to have a read more button instead of the Continue Reading... link. Please see image.

The site is http://techlick.com/

Is it possible and is it easy

I figured out that it could look like this but where would I put the code and could I have less of it?

<style type="text/css">
.readmore {
-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
box-shadow:inset 0px 1px 0px 0px #cae3fc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
background-color:#79bbff;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #469df5;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:55px;
line-height:55px;
width:155px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #287ace;
}
.readmore:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
background-color:#4197ee;
}.readmore:active {
position:relative;
top:1px;
}</style>


Regards,
Rob
Hello Rob,

Sorry for late reply to this,
You can apply this code in your template css file, so you can avoid lost this customization when you update the Easyblog in the future.
·
Friday, 01 August 2014 10:18
·
0 Likes
·
0 Votes
·
0 Comments
·
I admit, this would be a nice to have option in the layout interface "Display Comments & Readmore as buttons": Y/N, then add a textfield for "Comments & Readmore style": _________

Currently, it's quite a CSS override to achieve this.

Here's how I did it:


span.blog-comments, span.blog-readmore {margin-top:-10px !important;}

.blog-comments a, .blog-readmore a {
display:block;
height:35px !important;
background-image:none !important;
background-color:#367c2b !important;
padding: 0px 20px !important;
font-size:20px;
line-height:34px !important;
color: #ffffff;
border-color: transparent;
border-radius: 3px;
}

.blog-comments a:hover, .blog-readmore a:hover {background-color: #363c4f !important; color: #ffffff;}

#ezblog-body .blog-meta-bottom div > span + span {border-left:none !important;}


Hope it helps!
Danny
·
Thursday, 13 November 2014 23:10
·
0 Likes
·
0 Votes
·
0 Comments
·
hello Danny,

Thanks for sharing
I have tested in your css block code, that was great
Actually the current Easyblog theme also have their own style for the "continue reading" button one.
By the way, thanks for your suggestion.
·
Friday, 14 November 2014 00:18
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks

It's just that I really like the default design ;-)

But in retrospect, the CSS isn't that complex after all.

Danny
·
Friday, 14 November 2014 00:22
·
0 Likes
·
0 Votes
·
0 Comments
·
hello Danny Malouin,

You're welcome.
·
Friday, 14 November 2014 00:35
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post