Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #21845

    I would like to make all of the buttons within a particular div the same width regardless of the label on the button . I am using the buttons created by the short code – for example –

    [button link=”link goes here” size=”xl” style=”tick” color=”#507AB9″ border=”#09234A” text=”light” window=”yes”]Link[/button]

    [button link=”link goes here” size=”xl” style=”tick” color=”#253956 ” border=”#09234A ” text=”light”]This is a link too.Link[/button]

    These buttons should be the same width.

    Also, I would like to use the short code button for a submit button.

    Thank you in advance.

    #113306

    Hi swhowarddesign,

    The buttons would need to be targeted individually for that page in order to modify their width so we’ll need to see the page with the buttons live to inspect the code and get the css.

    For the Submit button, you would need to modify its css to fit the style you are looking for as it doesn’t have the ability to be easily customized in the same way buttons produced via shortcodes do.

    Regards,

    Devin

    #113307

    Ok, here is the url of a page with the buttons – http://s462107297.onlinehome.us/

    Can you please tell me the current css tag or code for the submit button?

    By the way, thanks for the quick response. You guys are really responsive and great.

    #113308

    Since the buttons are inside a custom div, its really easy to target them. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top.home .calcbuttons a {
    width: 146px;
    }

    and for the calculate button:

    #datainputHome .calculatebtn.button {
    color:#fff;
    background-image: url("http://s462107297.onlinehome.us/wp-content/themes/coherence/images/icons/bg-button.png");
    background-repeat: repeat-x;
    background-position: 0 0;
    padding:0 10px;
    font-size: 12px;
    text-decoration: none;
    display:inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    margin:3px 0;
    line-height: 28px;
    background-color: #253956;
    border-color: #09234A;
    position: relative;
    font-weight:bold;
    }

    Just note that the background image for the gradient needs to point directly to the image. So if you change the location, that url needs to change too.

    Regards,

    Devin

    #113309

    Thank you very much. This worked perfectly for the home page. However, I cannot figure out how to adjust the buttons on the subpages. Here is an example – http://s462107297.onlinehome.us/seller-calculator/

    Thank you again for your quick responses!

    #113310

    I figures it out. Sorry if you spent any time on it.

    Thank you again

    #113311

    Hi swhowarddesign,

    Glad that you have fixed it. :)

    Cheers,

    Ismael

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Coherence – Make all buttons the same width’ is closed to new replies.