Comments 1Onur tarakci started the conversationJune 5, 2018 at 10:42amHello!I want to add read more text to bottom of the text like blog view. when i am using buttons it has borders, and when i am adding link it is not as what i want. Can you write to me little code for this? Also where i can find shortcodes. Please help 106FlexiPress repliedJune 9, 2018 at 11:59amHello Onur,You should use Text Block element instead of Button shortcode. Insert the following code inside Text Block <span class="vu_read-more-container"><a class="vu_read-more" href="#"><span class="vu_btn-2"><i class="vu_btn-icon-left vu_fi vu_fi-arrow-right"></i><span class="vu_btn-text">Read More</span><i class="vu_btn-icon-right vu_fi vu_fi-arrow-right"></i></span></a></span>and on Page Settings or DentalPress > Custom Code paste the CSS code below .vu_read-more-container { overflow: hidden;} .vu_read-more { display: inline-block; margin-top: 15px; font-size: 14px;} .vu_read-more .vu_btn-2 { position: relative; padding-left: 0; padding-right: 0; background: 0 0; border-width: 0; border-radius: 0; color: #414141; line-height: 1; text-transform: none;} .vu_read-more .vu_btn-2 .vu_btn-icon-left { opacity: 0; left: -50px;} .vu_read-more:hover .vu_btn-2 .vu_btn-icon-left { opacity: 1; left: 0;} .vu_read-more .vu_btn-2 i { position: absolute; top: 50%; margin-top: -6px; font-size: 14px; line-height: inherit; color: #a4d735; -webkit-transition: left .3s ease,right .3s ease,opacity .3s ease; -moz-transition: left .3s ease,right .3s ease,opacity .3s ease; transition: left .3s ease,right .3s ease,opacity .3s ease;} .vu_read-more .vu_btn-2 .vu_btn-text { line-height: inherit; padding-right: 25px; padding-left: 0; -webkit-transition: padding .3s ease; -moz-transition: padding .3s ease; transition: padding .3s ease;} .vu_read-more:hover .vu_btn-2 .vu_btn-text { padding-right: 0; padding-left: 25px;} .vu_read-more .vu_btn-2 .vu_btn-icon-left { opacity: 0; left: -50px;} .vu_read-more .vu_btn-2 .vu_btn-icon-right { opacity: 1; right: 0;} .vu_read-more:hover .vu_btn-2 .vu_btn-icon-right { opacity: 0; right: -50px;} .vu_fi-arrow-right:before { content: "\ebd6";} .vu_fi-arrow-right:before { content: "\ebd6";} Kind regards, FlexiPress Support Follow on Envato Facebook Twitter1 Like 1Onur tarakci repliedJune 9, 2018 at 12:04pmGreat! Thank you very much! I appreciate you.Regards 106FlexiPress repliedJune 9, 2018 at 12:17pmYou're very welcome!Best regards, FlexiPress Support Follow on Envato Facebook Twitter Sign in to reply ...
Hello!
I want to add read more text to bottom of the text like blog view. when i am using buttons it has borders, and when i am adding link it is not as what i want. Can you write to me little code for this? Also where i can find shortcodes.
Please help
Hello Onur,
You should use Text Block element instead of Button shortcode. Insert the following code inside Text Block
and on Page Settings or DentalPress > Custom Code paste the CSS code below
.vu_read-more-container {overflow: hidden;
} .vu_read-more {
display: inline-block;
margin-top: 15px;
font-size: 14px;
} .vu_read-more .vu_btn-2 {
position: relative;
padding-left: 0;
padding-right: 0;
background: 0 0;
border-width: 0;
border-radius: 0;
color: #414141;
line-height: 1;
text-transform: none;
} .vu_read-more .vu_btn-2 .vu_btn-icon-left {
opacity: 0;
left: -50px;
} .vu_read-more:hover .vu_btn-2 .vu_btn-icon-left {
opacity: 1;
left: 0;
} .vu_read-more .vu_btn-2 i {
position: absolute;
top: 50%;
margin-top: -6px;
font-size: 14px;
line-height: inherit;
color: #a4d735;
-webkit-transition: left .3s ease,right .3s ease,opacity .3s ease;
-moz-transition: left .3s ease,right .3s ease,opacity .3s ease;
transition: left .3s ease,right .3s ease,opacity .3s ease;
} .vu_read-more .vu_btn-2 .vu_btn-text {
line-height: inherit;
padding-right: 25px;
padding-left: 0;
-webkit-transition: padding .3s ease;
-moz-transition: padding .3s ease;
transition: padding .3s ease;
} .vu_read-more:hover .vu_btn-2 .vu_btn-text {
padding-right: 0;
padding-left: 25px;
} .vu_read-more .vu_btn-2 .vu_btn-icon-left {
opacity: 0;
left: -50px;
} .vu_read-more .vu_btn-2 .vu_btn-icon-right {
opacity: 1;
right: 0;
} .vu_read-more:hover .vu_btn-2 .vu_btn-icon-right {
opacity: 0;
right: -50px;
} .vu_fi-arrow-right:before {
content: "\ebd6";
} .vu_fi-arrow-right:before {
content: "\ebd6";
}
Kind regards,
FlexiPress Support
Follow on
Envato
Facebook
Twitter
Great! Thank you very much! I appreciate you.
Regards
You're very welcome!
Best regards,
FlexiPress Support
Follow on
Envato
Facebook
Twitter