Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24182
    Arnel C
    Member

    Hello Wtraster,

    Thanks for the question about the link button.  Apologies, but we do need a little information about what you’re doing.  Can you give us the name of the inspiration/theme that you’re working in?  Please give us the title and location of where you’re trying to add the title.  Also, provide the text and we can try to see if what you’re asking is possible using the default BoldGrid application.

     

    Regards,

    Arnel C.

    #24181
    wtraster
    Member

    I am using Inspiration Gridone.

    I am editing a page and I want to add Link buttons that the user can click on to navigate to a secondary page.

    I add the button and then I edit it.  It asks for the URL to navigate to and then a Link Text.  The Link Text are the words that show up in the button image.

    I would like to keep the buttons the same width.  But when I type in a long text it makes the button grow horizontally as a single line of text like:

    Extraordinary Eucharistic Minister

    I would like the text to wrap as two lines to look like:

    Extraordinary

    Eucharistic Minister

    Here is the code the visual generated.

    <p class=”” style=”text-align: center;”><a class=”btn btn-raised btn-pill btn-color-2″ href=”http://stcharlesnewport.org/bg_stcharlesnewport.org/extraordinary-eucharistic-minister/”>Extraordinary Eucharistic Minister</a></p>

    #24180
    Arnel C
    Member

    Hello Wtraster,

    Thanks for providing the details for the link button you’re trying to create.  Note that you are using code normally used with Bootstrap.  BoldGrid does use bootstrap, so the code you’re using should be okay. By default the BTN class has white space set like this:

    white-space: nowrap;

    This will make it so that the button text won’t wrap. You will need to add code to make the button wrap. You will need to add the following code in the Advanced CSS editor in the Customize section of the Administrator Dashboard.  Here are the steps:

     

    1. Login to the Administrator Dashboard for your WordPress installation
    2. Click on CUSTOMIZE in the menu at left
    3. You should be in the live editor for the BoldGrid site a this point.  Click on Advanced at the bottom of the menu
    4. Click on Custom JS & CSS at the bottom of the next menu list
    5. Click on Custom Theme CSS – Open Editor button

    You will then enter the following code:

    #new-board-btn {
     white-space: normal;
     width: 100px;
    }

    Click on the X in the top right corner to close and save.  This information is thoroughly discussed in this post.  Hope that helps!  If you have any further questions or comments, please let us know.

     

    Regards,

    Arnel C.

    #24179

    I have a long title I want to use for a link button and would like to wrap the text to multiple lines.  Can this be done?

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘How do you wrap the text of a title in a button?’ is closed to new replies.