Jump to content
Sign in to follow this  
winemonkey

How to justify text in buttons?

Recommended Posts

winemonkey    0
winemonkey

Is there a way to justify text in a button... I'd like the button to take the full width of the sidebar with the text justified to the right.

If you look at the primary sidebar here http://thewinesyndicate.ca/ab/, you'll see what I mean. I added a "fake" button above it to give you an example of what I'm looking for. The button at the bottom is fine due to the fact that the text is a lot longer.

Share this post


Link to post
Share on other sites
winemonkey    0
winemonkey

Had to take the dummy button out... I basically need to align the bootstrap icons to the left and the text to the right... http://thewinesyndicate.ca/bc/ Is there a way to do that?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, you can use css to justify the text and set the width of the button. You'll need to assign a class to the button first to adjust just the one, otherwise the below code will affect all the buttons.

You could try using #text-3 before hand to target that particular widget in the sidebar, but I'm not 100% sure that would work.


.btn { width: 168px; text-align: right; }


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

Ah, we were obviously writing at the same time, sorry didn't see your second post until after I had posted. From what you've described on the second post you could just use css on the icon to get the following effect as per this screenshot http://screencast.com/t/ffn9RbErzXfo


li [class^="icon-"], li [class*=" icon-"] {

    text-align: left;

    width: 2.25em;

}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
winemonkey    0
winemonkey

Thanks James B., Kinda works but still looks a little wonky. The icons are on the right side but the top 3 buttons are not wide enough.

Share this post


Link to post
Share on other sites
winemonkey    0
winemonkey

Also... How do I get some space between those 3 top buttons without checking "Automatically add paragraphs" which screws up the top and bottom spacing/padding

I basically need the buttons at http://thewinesyndicate.ca/ab/ and at http://thewinesyndicate.ca/bc/ to be the same width as the "Join our mailing list" button with icons on the left and text on the right.

Sorry to make this such a pain... I'm learning.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

Add this to your custom CSS:


#site .btn-large {
width: 90%;
margin-bottom: 0.5em;
}[/CODE]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
winemonkey    0
winemonkey

I'm almost there... buttons are full width with space in between, text is aligned to the right but the icons are still not aligned to the left...

Share this post


Link to post
Share on other sites
catrina    103
catrina

Try this code:

#site .btn-large {

width: 90%;

margin-bottom: 0.5em;

margin-left: -4px;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
winemonkey    0
winemonkey

Weird, it actually centers the text in the buttons... No worries. I can live with the current layout.

Share this post


Link to post
Share on other sites
catrina    103
catrina

Okay, sounds good. Do you need assistance with anything else or is that fine for now?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      I need a shortcode activate a popup windows with contact form. It is possible without code?
      Link: https://www.udf.org.br/lancamentos/curso-mulher-que-prospera/
      Button: FAÇA SUA INSCRIÇÃO.
      Tks
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      i like to know if i can use signup button shortcode inside text editor or embed section.
      Tks.
    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      --------------------------------------
      Ticket Reference: 
       
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      Dan
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.
    • norbert
      By norbert
      With the great options to make price tables, i would skip the button under every option. But .... how can I do this?
    • dgsarnow
      By dgsarnow+
      I would like to add Google Analytics click tracking to the buttons on my site. I use the Pagelines shortcodes for the buttons. I was able to add the necessary header script easily using Custom Scripts.
       
      How can I insert the following onclick option to my buttons?
       
      onclick=”trackOutboundLink(‘http://www.domain.com’); return false;"          
×