Solved

How do I change these graphical buttons so they show all the button?

Posted on 2013-12-06
4
216 Views
Last Modified: 2013-12-07
I have a site here:

www.particletechlabs.com

At the top there are three boxes with buttons that say READ MORE, GET QUOTE and SUBMIT.

The graphic that the buttons use should be wider so that an arrow is show on the left side of the button.

I cannot figure out in the css where to adjust this width.

Any help is appreciated.
0
Comment
Question by:Donnie Walker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 31

Expert Comment

by:Frosty555
ID: 39702726
The relevant part of the CSS is in /templates/rt_panacea/css/overlays.css, line 80 on the .readonstyle-button .readon class

Your <a> tag has been assigned this CSS class, and gets it's background-image attribute set to be the "button" graphic with the arrow on the right side.

Your button graphic is here:  http://www.particletechlabs.com/templates/rt_panacea/images/body/light/readon-r.png  and it does not have an arrow on the left side.

This was probably done intentionally to make it more convenient to create a variable-sized button. The  graphic is designed to be cut off on the left hand side at whatever width the <a> tag happens to work out to be.

The width of the button is determined by the width of the <a> tag, which is determined by the amount of text in the link text. The wider it goes, the wider the button will be, but you'll never have an arrow on the left side. It's not really a button, it's just a background graphic.
0
 
LVL 31

Expert Comment

by:Frosty555
ID: 39702729
If you need an easy way to re-work this into a symmetrical button, try ditching the arrow entirely and using a div tag with rounded corners. This can be done entirely in CSS and doesn't require you to fuss around with background graphics.

http://www.w3schools.com/css/css3_borders.asp

http://viralpatel.net/blogs/rounded-corner-css-without-images/

You can just put those "read more", "get quote", "submit" links inside of div tags, assign them to a CSS class and set the class to have rounded borders and a background color.

You could even throw in a background shadow or inner shadow using CSS only, which gives it a nice look without having to mess around with background images:

http://css-tricks.com/snippets/css/css-box-shadow/
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39702964
There is a left-hand arrow available to you, and to use it you'll need to add a <span> into your HTML, and slightly adjust the padding in your CSS. Your HTML will need to look like this:

<a class="readon" href="/news-and-events" title="News and Events"><span>READ MORE</span></a>

And in your overlays.css file - about line 80, you'll need to move the 8px top padding to the bottom:

.readonstyle-button .readon {
   padding: 0 0 8px 8px;
}


Button styling...
0
 

Author Closing Comment

by:Donnie Walker
ID: 39703042
Perfect! Exactly what I needed! Thank You!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question