Solved

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

Posted on 2013-12-06
4
209 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
  • 2
4 Comments
 
LVL 31

Expert Comment

by:Frosty555
Comment Utility
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
Comment Utility
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 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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
Comment Utility
Perfect! Exactly what I needed! Thank You!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

728 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now