Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
nerwin

Five: Turning "Read More" link into a button.

Question

I've been trying to figure out how I can make the "Read More" link on the Five Template to look more like a button. The way it is now, just doesn't stand out enough for my liking.

nickerwin.com

To give you an idea of what I want, here's a couple images.

This is what it is now.

alt text

This what I want it to look like along with the hover effect.

alt textalt text

Any ideas?

Edited by TreyT

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 3

Add the following to your Custom CSS Editor


a.inline-read-more {
display: inline-block;
width: auto;
height: auto;
padding: 1em 2.5em;
color: #FFF;
background-color: #272727;
border-width: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1em;
font-weight: normal;
font-style: normal;
text-transform: uppercase !important;
letter-spacing: 0px;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 14px;
text-transform: none;
}

a.inline-read-more:hover {
background-color: #C0A127;
}


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

I have a summary of my blog on my index-page. Your code doesn't include that function, does it?

And another thing; Is there a way to change the "Read more" text to something in my own language?

Edited by Hellevang

Share this post


Link to post
  • 0

If it is for the read-more-link of a summary try this inside custom CSS Editor:


.sqs-block-summary-v2 .summary-read-more-link:after {
 content: 'Les mer';
}

Edited by sssuperguy

"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post
  • 0

Hey, that worked. at least in the summary. Thx :-) Do you have a magic code for changing the "Read more" in the blog as well?

Edited by Hellevang

Share this post


Link to post
  • 0

Glad if I can help. Might be this one:


.entry-more-link a::before { content: "Les mer"; }



"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post
  • 0

Once I was successful with this one inside the Footer Custom Code Area:


    Y.all('.inline-read-more').setHTML('Les mer');



"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post
  • 0
Guest

Can't seem to get this to work for Hudson.

Share this post


Link to post
  • 0

I was able to get the code for my summary blog page to work, but it will not change color on hover. Any ideas? Thanks.

Edited by Oddjob70
Initial Revision

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...