Forum Support

Shape 5
April 18, 2021, 05:33:07 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Read More is too close to text  (Read 572 times)
lhallberg
Jr. Member
**
Offline Offline

Posts: 15



« on: October 01, 2010, 01:49:07 PM »

Hi,

I've notice on my emma smooth template and on your demo that the Read More links (like in your Tab Show) does not have good padding or spacing.  The Read More changes the spacing of the last line of text and the text is right up against the edge of the button.

Can this be changed?

-lh
Logged
lhallberg
Jr. Member
**
Offline Offline

Posts: 15



« Reply #1 on: October 14, 2010, 01:48:22 PM »

Hey did you guys not see this post?

Is there an answer for this?
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #2 on: October 15, 2010, 10:59:33 AM »

Hello,

Try changing the maring top to what I have below:

template_css.css (line 702)

a.readon, li.s5_button_item table.s5_newsflash_body a.readon {
background:url("../images/s5_readon.png") repeat-x scroll center bottom transparent;
border:1px solid #D5D4D4;
color:#030303;
float:left;
font-size:11px;
margin-top:26px;
padding:4px 8px;
width:80px;
}
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
lhallberg
Jr. Member
**
Offline Offline

Posts: 15



« Reply #3 on: October 19, 2010, 10:06:33 AM »

OK.  I tried your CSS mod and it didn't work.  After playing it with it myself I found a CSS that works much better.  The trick is to remove the float left because that was causing the Read On to stay on the same line but be left and any top margin after that moved it down but cause the words to stay right.

The better way is to remove the float left, and instead use display block, which causing the <a> tag to go left as a block element, then using a top margin for spacing.  Have not tested this in browsers other than Safari but this is what worked for me:

a.readon, li.s5_button_item table.s5_newsflash_body a.readon {
color:#030303;
border:solid 1px #D5D4D4;
padding:8px;
padding-top:4px;
padding-bottom:4px;
background:url(../images/s5_readon.png) repeat-x bottom center;
width:80px;
font-size:11px;
display: block;
margin-top:6px;
}
Logged
brainded
Jr. Member
**
Offline Offline

Posts: 70



« Reply #4 on: December 31, 2012, 12:32:39 PM »

Thanks lhallberg!

Removing the float also allowed me to center the button!
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.