Border around "Submit' Buttons and Header/Footer Logo

  • DanHawkins

    (@danhawkins)


    11 years, 7 months ago

    I have similar problem at: http://www.strategic-si.com/

    I have very little experience with modifying stylesheets…

    I need a borderr around “Submit” buttons on Warranty Claim and Customer Data pages…
    When I change this stylesheet entry…
    /*******************/

    /* Site Basics */

    /*******************/

    *{ border-width: 0; margin: 0; padding: 0; list-style-type: none; outline: 0; text-align: left; }

    …and modify the border width to “1” it puts the desired border around my buttons, BUT it also adds a border around all pics, etc…this would be OK but it puts a “pink” border that we don’t like around our logo in header&footer….?

    HELP?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Alain Lankers

    (@alain-lankers)

    11 years, 7 months ago

    You’ll need to give a class to the submit button:
    <input name=”Submit” type=”submit” value=”Submit” class=”border”/>

    then in your CSS add:
    .border {border:1px solid #999}

    Thread Starter DanHawkins

    (@danhawkins)

    11 years, 7 months ago

    Do you mean in my main Stylesheet.css or a custom.css?

    These “buttons” are part of a “form” which I can’t find the config for in my style.css

    Would the below section “input.submit” be the correct place to make the change?

    [ Moderator note: Please wrap CSS and code in the backtick character or use the code button. ]

    /*********************/

/*   Form elements   */

/*********************/

label { display: inline; float: left; clear: left; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif; color: #7c7c7c; margin-bottom: 10px; margin-top: 10px; }

input.in_small { height: 25px; width: 130px; float: left; display: inline; clear: left; border: 1px solid #d6d6d6; padding-top: 10px; }

input.in_medium { height: 25px; width: 260px; display: inline; float: left; clear: left; border: 1px solid #d6d6d6; padding-top: 10px; }

input.in_big { height: 25px; width: 390px; display: inline; float: left; clear: left; border: 1px solid #d6d6d6; padding-top: 10px; }

textarea.in_textarea { display: inline; border: 1px solid #d6d6d6; clear: left; width: 100%; padding-top: 10px; line-height: 20px; }

select.pull_small { float: left; display: inline; clear: left; width: 130px; height: 20px; }

select.pull_medium { float: left; display: inline; clear: left; width: 260px; height: 20px; }

select.pull_big { float: left; display: inline; clear: left; width: 390px; height: 20px; }

input.submit { float: left; clear: left; background-image: url(images/b_small.jpg); width: 92px; height: 32px; margin-top: 10px; text-align: center; font-size: 13px; color: white; margin-bottom:15px; }

input.in_search { float: right; display: inline; width: 147px; height: 24px; margin-top: 10px; color: #7e7e7e; padding-left: 15px; padding-right: 30px; background: url(images/searchfield.png) no-repeat; font-size: 13px; padding-top: 9px; }
    Alain Lankers

    (@alain-lankers)

    11 years, 7 months ago

    You can add the rule in your stylesheet.css.

    Thread Starter DanHawkins

    (@danhawkins)

    11 years, 7 months ago

    ..and again, I can’t find the properties of my button in my css forms.
    If I “inspect the element, I see it, but I don’t know how/where to add the class=”border”/ config…

    I hate feeling lost…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Border around "Submit' Buttons and Header/Footer Logo’ is closed to new replies.