Jump to content


Photo
- - - - -
Resolved

How to justify text in buttons?

button

This topic has been archived. This means that you cannot reply to this topic.
12 replies to this topic

#1 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 02 October 2012 - 07:20 PM

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

Please Login or Register to see this Hidden Content

, 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.

#2 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 03 October 2012 - 02:32 AM

Had to take the dummy button out... I basically need to align the bootstrap icons to the left and the text to the right...

Please Login or Register to see this Hidden Content

Is there a way to do that?

#3 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 03 October 2012 - 03:24 AM

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.

Please Login or Register to see this Hidden Content



#4 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 03 October 2012 - 03:42 AM

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

Please Login or Register to see this Hidden Content



Please Login or Register to see this Hidden Content



#5 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 03 October 2012 - 05:38 AM

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.

#6 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 03 October 2012 - 05:42 AM

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

Please Login or Register to see this Hidden Content

and at

Please Login or Register to see this Hidden Content

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.

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 17015 posts

Posted 03 October 2012 - 08:30 AM

Hi,

Add this to your custom CSS:


Please Login or Register to see this Hidden Content



#8 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 03 October 2012 - 04:16 PM

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...

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 03 October 2012 - 04:45 PM

Try this code:

Please Login or Register to see this Hidden Content



#10 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 03 October 2012 - 05:27 PM

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

#11 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 03 October 2012 - 05:32 PM

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

#12 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 03 October 2012 - 05:51 PM

It's all good. Thank you

#13 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 03 October 2012 - 05:56 PM

The topic was marked as resolved.