Web Analytics Made Easy -
StatCounter I need to rearrange a form with CSS - CodingForum

Announcement

Collapse
No announcement yet.

I need to rearrange a form with CSS

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • I need to rearrange a form with CSS

    I have this form that is automatically generated with this application I use. Below is the code and the picture of what the form looks like. I am not able to modify the below code. I can only add CSS or JavaScript.

    Click image for larger version

Name:	survey.jpg
Views:	1
Size:	27.2 KB
ID:	2283645

    Code:
    There is lots of code before this also that is included in the table. 
    
    </span></p>
    <p>
    <form name="survey" id="survey" method="POST" action="" >
    
    <table border="0" cellspacing="0" cellpadding="0">
    <tr valign="top" class="old-school">
    
    <td width="5%" class="req" align="right" nowrap="nowrap">
    &nbsp;
    </td>
    
    <td>
    <label class="wrapable" for="4499_1524_1_1413">
    <span class="aural-only" style="position: absolute; left: -9999px;">
    Question - Not Required -
    </span>
    <span class="Explicit">
    Last Name:
    </span>
    </label>
    &nbsp;
    <br />
    <span class="NetscapeFix"><input type="text" name="4499_1524_1_1413" id="4499_1524_1_1413" value="" size="30" maxlength="40" /></span>
    <br /><br />
    </td>
    
    </tr>
    <tr valign="top" class="old-school">
    
    <td width="5%" class="req" align="right" nowrap="nowrap">
    &nbsp;
    </td>
    
    <td>
    <label class="wrapable" for="4499_1524_2_1414">
    <span class="aural-only" style="position: absolute; left: -9999px;">
    Question - Not Required -
    </span>
    <span class="Explicit">
    First Name:
    </span>
    </label>
    &nbsp;
    <br />
    <span class="NetscapeFix"><input type="text" name="4499_1524_2_1414" id="4499_1524_2_1414" value="" size="30" maxlength="40" /></span>
    <br /><br />
    </td>
    
    </tr>
    <tr valign="top" class="old-school">
    
    <td width="5%" class="req" align="right" nowrap="nowrap">
    &nbsp;
    </td>
    
    <td>
    <label class="wrapable" for="4499_1524_3_1415">
    <span class="aural-only" style="position: absolute; left: -9999px;">
    Question - Not Required -
    </span>
    <span class="Explicit">
    Email Address:
    </span>
    </label>
    &nbsp;
    <br />
    <span class="NetscapeFix"><input type="text" name="4499_1524_3_1415" id="4499_1524_3_1415" value="" size="30" maxlength="40" /></span>
    <br /><br />
    </td>
    
    </tr>
    <tr valign="top" class="old-school">
    
    <td width="5%" class="req" align="right" nowrap="nowrap">
    &nbsp;
    </td>
    
    <td>
    <label class="wrapable" for="4499_1524_4_1416">
    <span class="aural-only" style="position: absolute; left: -9999px;">
    Question - Not Required -
    </span>
    <span class="Explicit">
    Participated In:
    </span>
    </label>
    &nbsp;
    <br />
    <span class="NetscapeFix"><input type="text" name="4499_1524_4_1416" id="4499_1524_4_1416" value="" size="30" maxlength="40" /></span>
    <br /><br />
    </td>
    
    </tr>
    <tr valign="top" class="old-school">
    
    <td width="5%" class="req" align="right" nowrap="nowrap">
    &nbsp;
    </td>
    
    
    <td>
    <label class="wrapable" for="4499_1524_5_1417">
    <span class="aural-only" style="position: absolute; left: -9999px;">
    Question - Not Required -
    </span>
    <span class="Explicit">
    Story:
    </span>
    </label>
    <br />
    <span class="NetscapeFix"><textarea cols="50" rows="10" name="4499_1524_5_1417" id="4499_1524_5_1417"></textarea></span><br />
    </td>
    
    </tr>
    
    <tr>
    <td colspan="3" align="center">
    <input type="submit" name="ACTION_SUBMIT_SURVEY_RESPONSE" id="ACTION_SUBMIT_SURVEY_RESPONSE" value="Submit Survey" class="Button" />
    </td>
    </tr>
    </table>

    Is there anyway that I can use CSS or even Javascript to alter the form to look somewhat like the below. I was told that there is a way to do it, I just can't figure it out.
    I want it so that text displays on left and input fields on right. Kind of like the below.

    Click image for larger version

Name:	survey2.jpg
Views:	1
Size:	47.8 KB
ID:	2283646

    looks like span Explicit controls the name
    while
    span NetscapeFix the input fields
    not sure what span aural-only is for

    I tried the below already but it does not work

    Code:
    <style type="text/css">
        #survey
        {
            background-color: #f3f3f3;
            border: solid 1px #a1a1a1;
            padding: 10px;
            width: 800px;
        }
        
        .Explicit, .Explicit input
        {
            display: block;
            width: 120px;
            float: left;
            margin-bottom: 10px;
    	background-color: blue;
        }
     
        .NetscapeFix input
        {
            text-align: right;
            padding-right: 20px;
    	background-color: black;  
            border: 2px solid black;		
    }
     
    br
        {
            clear: left;
    		background-color: red;
        }
    
    td
    {
    
        width:800px;
    }
    </style>
    Last edited by aaandy; Oct 4, 2016, 05:29 PM.

  • #2
    Well... for starters what makes labels and inputs tabular data? they are NOT. 90%+ of your markup needs to go in the trash. Whatever garbage "form generator" is slopping out that markup any-old-way is sleazing inline style into the process, generating a laundry list of how NOT to code a form, and if it were coded "properly" that 1990's style "netscapeFix" garbage wouldn't even be needed... the randomly generated uselessly cryptic classes and names certainly not making your life any easier either. Even more of a laugh when the restriction on the e-mail address size is too small to fit an e-mail.


    In general that's why it is vomiting up 2.8k of markup to do 862 bytes job. That's more than three times the required markup.

    Code:
    <form id="survey" method="POST" action="">
    	<fieldset>
    		<label for="survey_lastName">Last Name:</label>
    		<input type="text" name="lastName" id="survey_lastName">
    		<br>
    		<label for="survey_firstName">First Name:</label>
    		<input type="text" name="firstName" id="survey_firstName">
    		<br>
    		<label for="survey_eMail">E-Mail Address:</label>
    		<input type="email" name="eMail" id="survey_eMail">
    		<br>
    		<label for="survey_participatedIn">Participated In:</label>
    		<input type="text" name="participatedIn" id="survey_participated">
    		<br>
    		<label for="survey_story">Story:<b>*</b></label>
    		<textarea name="story" id="survey_story" cols="50" rows="10" required></textarea>
    	</fieldset>
    	<div class="submitsAndHiddens">
    		<p><b>*</b> indicates a required field</p>
    		<input type="submit" value="Submit Survey">
    	<!-- .submitsAndHiddens --></div>
    </form>
    Is realistically ALL the markup that should be present there for such a form. This is why I consider most automated code generation tools to do little more than make the poor sods duped into using them the tool.

    Tables are for tabular data -- where the columns and rows have a semantic relationship such as with a spreadsheet. A form is NOT tabular data, so that markup is just bloated rubbish. The same goes for ALL the garbage pointless tags they were throwing in there like span. They're just not needed and only goes to show whoever made the form generator you are using has no business telling other people how to write HTML. Sadly, there are FAR too many such scams and ignorant garbage out there taking advantage of people; but JOE FORBID anyone call them scams or ignorant; that might endanger the species or upset the special snowflakes.

    The style for that would go something like this:

    Code:
    #survey {
    	background:#F3F3F3;
    }
    
    #survey fieldset {
    	overflow:hidden; /* obey internal margins and wrap floats */
    	padding:1em 1em 0 9em; /* right side == area for labels */
    	border:0;
    }
    
    #survey label {
    	float:left;
    	width:8em;
    	margin-left:-8em; /* slide the label into the fieldset padding */
    	padding-top:0.1em;
    }
    
    #survey fieldset input,
    #survey fieldset textarea {
    	-webkit-box-sizing:border-box;
    	box-sizing:border-box;
    	width:100%;
    	margin-bottom:1em;
    }
    
    #survey .submitsAndHiddens {
    	text-align:center;
    	padding-bottom:1em;
    }
    Using the negative margin trick to slide the labels into the side padding of the parent fieldset. Beware that this will result in a form that will fill ALL the fields to fit the width of the container, so you may want to add a max-width to the form itself or the fieldset to prevent it from getting "too big" if the layout you are plugging it into doesn't already have such restrictions.

    a re-arrangement for mobile would also be a good idea. Below a certain width having them next to the inputs instead of above them just reduces the useful space, so switch that on the fly using media queries by pulling the floats, padding, and margin trick to make them display:block. I'd also decrease some of the padding to make it better fit on the reduced screen space:

    Code:
    @media (max-width:30em) {
    	#survey fieldset {
    		padding:0.5em;
    	}
    	#survey label {
    		float:none;
    		width:auto;
    		margin:0;
    		display:block;
    	}
    	#survey fieldset input,
    	#survey fieldset textarea {
    		margin-bottom:0.5em;
    	}
    }
    Would do the trick.
    Walk the dark path, sleep with angels, call the past for help.
    https://cutcodedown.com
    https://medium.com/@deathshadow

    Comment


    • #3
      This css code does not work. I am not able to modify the form with HTML. This code is generated by a large application that I don't have access to modify the forms html. All I can do is add css, javascript, and html.

      I should be able to hide the forms html with javascript and replace new html with javascript

      Comment


      • #4
        The forms in your images are differing slightly, e. g. name is separately by first and last name in the first image. Should the second image illustrate the layout only?

        Comment


        • #5
          Originally posted by Sempervivum View Post
          The forms in your images are differing slightly, e. g. name is separately by first and last name in the first image. Should the second image illustrate the layout only?

          The 2nd image only shows the way I want the layout to be.

          Comment


          • #6
            A very simple approche to arrange the labels and the inputs side by side is removing the <br> tags:
            Code:
                        $("form#survey table td").each(function () {
                            $(this).find("br").remove();
                        });
            Aligning vertically can be done easily by setting the labels to a fixed size.

            Comment


            • #7
              Originally posted by Sempervivum View Post
              A very simple approche to arrange the labels and the inputs side by side is removing the <br> tags:
              Code:
                          $("form#survey table td").each(function () {
                              $(this).find("br").remove();
                          });
              Aligning vertically can be done easily by setting the labels to a fixed size.

              that did not work, that removed just about all content from the page

              I was told by the application developer that css only should work

              Comment


              • #8
                Code:
                <style>
                            form#survey table td br {display: none;}
                        </style>
                should do the same job.
                Last edited by Sempervivum; Oct 5, 2016, 03:39 PM.

                Comment


                • #9
                  Originally posted by Sempervivum View Post
                  Code:
                  <style>
                              form#survey table td br {display: none;}
                          </style>
                  should do the same job.
                  That did collapse the table, looks kind of like the below with no spaces

                  label
                  textbox
                  label
                  textbox

                  it used to be

                  label
                  textbox

                  label
                  textbox

                  Comment


                  • #10
                    I created a test page containing the HTML you posted and it worked fine. Maybe my last CSS conflicts with the existing CSS.
                    Is that page public, can you post the URL? Or alternatively post the CSS additionally.

                    Comment


                    • #11
                      Originally posted by Sempervivum View Post
                      I created a test page containing the HTML you posted and it worked fine. Maybe my last CSS conflicts with the existing CSS.
                      Is that page public, can you post the URL? Or alternatively post the CSS additionally.
                      This page has several style sheets that have an URL reference which I am not able to access.

                      also has the below css

                      Code:
                      <style>
                      /* ====================
                        Turbo Theme CSS
                      ====================== */
                      
                      /* body {
                          color:#33344c;
                          background:  #7e82bf url('../turbo-themes/news/static/images/bg-pattern-cross.png');           
                          margin: 0px 400px 0px 400px; 
                          position: absolute;
                      
                          border-style: solid;
                          border-width: 5px 10px 5px 10px;
                          border-color: #7e82bf;
                          border-radius: 5px;
                      } */
                      
                      div#content-inner {
                          background: #ffffff url('../turbo-themes/news/static/images/bg-pattern-cross.png');
                      }
                      div#content {
                          background: #ffffff url('../turbo-themes/news/static/images/bg-pattern-cross.png');
                      }
                      div#leaderboards {
                          background: #ffffff url('../turbo-themes/news/static/images/bg-pattern-cross.png');
                      }
                      div#sponsors {
                          background: #ffffff url('../turbo-themes/news/static/images/bg-pattern-cross.png');
                          /* this is right above the purple footer */
                      }
                      div#sponsors:before {
                        content: "";
                      }
                      div.responsive {
                          color:#33344c;
                          font-size: 14px !important;
                          font-family: 'Lato','Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
                          
                      }
                      
                      body, p, table, tr, th, td, .Explicit {
                          font-family: 'Lato','Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
                          
                      }
                      
                      a,
                      div.indicator-container a.indicator-link,
                      A:link, a:link,
                      a.btn-more {
                          color: #aaacd2;
                          font-size: 14px !important;  /* font size of top links */
                          font-weight: bold;
                      }
                      div.responsive a:visited, div.responsive a:link {
                          color: #2f61a9; 
                      }
                      
                      
                      /* ========================
                        Start Headings and Links
                      =========================== */
                      
                      h1,h2,h3,h4,h5,h6 {
                          font-family: Arial, Helvetica, Verdana, sans-serif;
                      }
                      
                      h1,
                      .header-container .campaign-banner-container
                      {
                          color: #2f61a9;
                          font-family: georgia, serif;
                          font-size: 26px;
                          font-weight: normal;
                          margin: 0 0 15px; 
                          /* title */
                      }
                      
                      h2 ,h2.tr-page-title,
                      span.section-header-text,
                      div.section-header,
                      #title_container,
                      .header-container h2,
                      div.tr-page-header h2,
                      div#team_page_header h2,
                      .header-container h2,
                      div.tr-page-header h2,
                      div#team_page_header h2
                       {
                          color: #2f61a9;
                          font-size: 22px;
                          font-weight: bold;
                          
                      }
                      
                      h3 {
                          color: #2f61a9;
                          font-size: 14px;
                          text-transform: uppercase;
                      }
                      
                      h3.menu-title, div.indicator-title {
                          font-weight: bold;
                      }
                      
                      h4 {
                          font-size: 14px;
                      }
                      
                      div.thermometer-container div.don-link-container a {
                          color: #ffffff; /* Should this be available to update */
                          background-color: #aaacd2;
                          border-color: #aaacd2;
                      
                      }
                      
                      /*Fill Color of Thermometer*/
                      div.thermometer-container div.thermometer-inner {
                           background-color:#33344c;
                          border:0;
                      }
                      
                      .btn-primary,
                      .btn-primary:focus,
                      .btn-primary:active {    /* menu link colors */
                          background-color: #aaacd2!important;
                          border-color: #aaacd2!important;
                      }
                      
                      /*These styles are also applied to 4 CTA buttons*/
                      a.btn-primary,
                      a.btn-primary:hover,
                      div.thermometer-container div.don-link-container a {
                          background-image:url('../turbo-themes/news/static/images/bg-pattern-diagonal.png');
                          border-color: #fcaa30;
                          border-color: #aaacd2;
                      
                      }
                      
                      button.btn-success,
                      a.btn-success {
                          color: #FFFFFF;
                          background: #7e82bf;
                          border-color: #7e82bf;
                          border-radius:0;
                      }
                      
                      .btn-success:focus,
                      .btn-success:active {
                          color: #ffffff;
                          background-color: #7e82bf;
                          border-color: #7e82bf;;
                      }
                      
                      /* ========================
                        End Headings and Links
                      =========================== */
                      
                      /* ====================
                        Start of Header
                      ====================== */
                      
                      #header {
                           background:#7e82bf;
                           /* background:#cecece url('../turbo-themes/news/static/images/bg-pattern-diagonal.png');   */
                           /* this is the background around the login button and the left and right sides */
                      }
                      
                      #header .navbar-toggle .icon-bar {
                          background: #444; /* Could be option to change in the future*/
                      }
                      
                      @media (max-width: 767px) {
                              #header .navbar-header {
                                  background: #fff;
                                  border-bottom:4px solid #7e82bf;
                              }
                      }
                      
                      
                      /* ====================
                        End of Header
                      ====================== */
                      
                      /* ====================
                        Start of Logo
                      ====================== */
                      
                      #logo {
                          background: #fff;   /* background around the logo */
                          border-radius: 5px;
                          width:250px;
                          height:80px;
                          margin: auto;
                          padding-top: 15%;
                          float: left;
                      }
                      
                      /* ====================
                        End of Logo
                      ====================== */
                      
                      /* ====================
                        Start of Utility
                      ====================== */
                      
                      #utility a.button,
                      #utility button.button,
                      #utility .btn {
                          background-color:#7e82bf;  /* Login button color */
                          border-color: #8a8dc3;
                          color: #ffffff;
                          font-size: 13px;
                          text-transform: uppercase;
                          border-color: #8a8dc3;
                      }
                      #utility a.btn:hover,#utility button.button:hover,#utility .btn:hover {
                          background-color:#8a8dc3;
                          text-decoration:none;
                      }
                      
                      #utility .form-group .form-control {
                          font-size: 12px;
                          height: 30px;
                          border: 0;
                          box-shadow: none;
                          background: #fff;
                          border: 1px solid #c2d6de;
                          padding-left: 10px;
                          width: 100%;
                          
                      }
                      
                      /* ====================
                        End of Utility
                      ====================== */
                      
                      /* ========================
                        Start Navigation
                      =========================== */
                      
                      #nav li:hover {
                          /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                          background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
                          background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); /* W3C */
                          background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); /* FF3.6+ */
                          background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); /* IE10+ */
                          background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); /* Opera 11.10+ */
                          background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); /* Chrome10+,Safari5.1+ */
                          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.3))); /* Chrome,Safari4+ */
                          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dffffff', endColorstr='#4dffffff', GradientType=0); /* IE6-8 */
                      }
                      
                      /* ===============================================
                         Dropdown Styles
                      ================================================== */
                      
                      .dropdown-menu>li>a:hover, /* menu link colors */
                      .dropdown-menu>li>a:focus {
                          background-color: #8a8dc3;
                          color: #ffffff;
                          text-decoration: none;
                      }
                      
                      .navbar-inverse .navbar-nav>.open>a,
                      .navbar-inverse .navbar-nav>.open>a:hover,
                      .navbar-inverse .navbar-nav>.open>a:focus {
                          background-color: #8a8dc3;
                          color: #ffffff;
                      }
                      
                      .dropdown-menu {
                          background-color: #8a8dc3;
                          font-size: 14px;
                      }
                      
                      .dropdown-menu>li>a {
                          color: #fff;
                      }
                      
                      .navbar-inverse {
                          background:#7e82bf;
                          border-color:#7e82bf;
                      }
                      
                      .navbar-inverse .navbar-nav > li > a {
                          color:#ffffff;
                          font-size:13px;
                          text-transform:uppercase;
                      }
                      
                      .dropdown-menu > li > a:hover,
                      .dropdown-menu > li > a:focus {
                          text-decoration: none;
                          color: #FFF;
                          background-color: #8a8dc3;
                      }
                      
                      /* ========================
                        End Navigation
                      =========================== */
                      
                      
                      /* ========================
                        Start Media
                      =========================== */
                      
                      #media .carousel-caption .button{
                          background:#33344c;
                          border-color:#33344c;
                          color:#ffffff;
                      }
                      
                      
                      #media .carousel-indicators li {
                          background: #33344c;
                      }
                      
                      #media .carousel-indicators li.active {
                          background:#7e82bf;
                          border: 1px solid;
                      }
                      
                      #media .carousel-caption h3 {
                          color: #4d525a;
                          font-family: georgia;
                          font-size: 19px;
                          font-style: italic;
                      }
                      
                      #media .carousel-caption .button {
                          font-size: 15px;
                          font-weight: bold;
                      
                      }
                      
                      @media (max-width: 767px) {
                      
                          #media .carousel-caption h3 {
                              font-size: 14px;
                          }
                      
                          #media .carousel-caption .button {
                              font-size: 11px;
                          }
                      }
                      
                      /* ========================
                        End Media
                      =========================== */
                      
                      
                      /* ========================
                        Start Call To Action
                      =========================== */
                      
                      #call-to-action {
                          background:#7e82bf;
                      }
                      
                      #call-to-action .button {
                          background-color: #8a8dc3;
                          color: #ffffff;
                          border-color: #8a8dc3;
                          font-size: 18px;
                          font-weight: bold;
                      }
                      
                      #call-to-action .button small {
                          display: block;
                          font-family: ;
                          font-size: 13px;
                          font-style: italic;
                          font-weight: normal;
                          text-transform: none;
                      }
                      
                      /* ========================
                        End Call To Action
                      =========================== */
                      
                      /* ================================
                        Content Secondary - Left Sidebar
                      =================================== */
                      
                      #content-secondary .form-control {
                          background: #E1E2E3;
                      }
                      
                      
                      #content-secondary h2 {
                          color: #2f61a9;
                          font-family: Arial, Helvetica, Verdana, sans-serif;
                          font-weight: normal;
                          font-size: 20px;
                          text-transform: uppercase;
                      }
                      
                      #content-secondary .btn {
                          background:#aaacd2;
                          color: #fff;
                          font-size: 14px;
                      }
                      
                      @media (max-width: 991px) {
                      
                          #content-secondary h2 {
                              font-size: 18px;
                          }
                      }
                      
                      @media (max-width: 767px) {
                      
                          #content-secondary h2 {
                              font-size: 14px;
                          }
                      }
                      
                      /* ====================================
                        END Content Secondary - Left Sidebar
                      ======================================= */
                      
                      /* ========================
                        Start Sponsors
                      =========================== */
                      
                      #sponsors {
                          background: #fff;
                          border-bottom: 2px solid #d3d2d1;
                          border-top: 1px solid #d3d2d1;
                      }
                      
                      /* ========================
                        End of Sponsors
                      =========================== */
                      
                      /* ========================
                        Start of Footer
                      =========================== */
                      
                      #footer {
                          background: #33344c;
                          color: #ffffff;
                          font-size: 12px;
                          text-align: center;
                      }
                      
                      
                      #footer img {
                          max-width: 150px;
                      }
                      
                      #footer #social-icons li a:hover {
                          color: #aaacd2;
                          text-decoration: none;
                      }
                      
                      /* ========================
                        End of Footer
                      =========================== */
                      
                      
                      /* ========================
                        Start Buttons
                      =========================== */
                      
                      a.button,
                      button.button,
                      .step-button,
                      div#find_participant button.search-button,
                      button.search-button,
                      div.responsive button.action-button,
                      div.indicator-container a.indicator-link {
                          background-color:#aaacd2;
                          color: #fff;
                      }
                      
                      div.responsive a.step-button,
                      div.responsive button.step-button,
                      div.responsive a.step-button:hover,
                      div.responsive button.step-button:hover {
                          background-image: none;
                          border-radius: 0;
                          font-size: 18px;
                          margin: 0 0 10px;
                          white-space: normal;
                          background: #aaacd2;
                          background-image:url('../turbo-themes/news/static/images/bg-pattern-diagonal.png');
                          border-color: #aaacd2;
                          border-width: 5px;
                          color: #ffffff;
                      }
                      
                      div.responsive a.next-step,
                      div.responsive button.next-step,
                      div.responsive a.next-step:hover,
                      div.responsive button.next-step:hover {
                          background: #7e82bf;
                          background-image:url('../turbo-themes/news/static/images/bg-pattern-diagonal.png');
                          border-color: #7e82bf;
                          border-width:5px;
                          color: #ffffff;
                      }
                      
                      div.responsive a.secondary-step,
                      div.responsive button.secondary-step {
                          background: #aaacd2;
                          border-color: #aaacd2;
                          color: #FFFFFF;
                      }
                      
                      .button.btn-primary.btn-block.btn-lg:hover,
                      button.btn-success:hover, a.btn-success:hover,
                      div#content button.search-button:hover,
                      div.responsive a.next-step:hover,
                      div.responsive button.next-step:hover,
                      div.responsive button.cancel-step:hover,
                      div.responsive a.cancel-step:hover,
                      div.responsive button.previous-step:hover,
                      div.responsive a.previous-step:hover,
                      #media .carousel-caption .button:hover,
                      div.responsive a.secondary-step:hover,
                      div.responsive button.secondary-step:hover,
                      a.donor-wall-link.indicator-link:hover,
                      #content-secondary .btn:hover {
                          /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                          background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
                          background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); /* W3C */
                          background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); /* FF3.6+ */
                          background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); /* IE10+ */
                          background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); /* Opera 11.10+ */
                          background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); /* Chrome10+,Safari5.1+ */
                          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.2))); /* Chrome,Safari4+ */
                          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33ffffff', endColorstr='#33ffffff', GradientType=0); /* IE6-8 */
                      }
                      
                      
                      /* ========================
                         End Buttons
                      =========================== */
                      
                      
                      /* ========================
                         Luminate Overrides
                      =========================== */
                      
                      .panel-primary {
                          border-color: #aaacd2; 
                      }
                      
                      .panel-primary > .panel-heading {
                          background-color: #aaacd2;
                          border-color: #aaacd2;
                          border-radius:0;
                          color: #000000;
                      }
                      
                      @media (min-width: 768px) {
                          #content-secondary .hidden-xs {
                              display:block !important;
                          }
                      }
                      
                      div.tr-page-container,
                      div.registration-page-container div.section-container {
                          color:#33344c; 
                      }
                      
                      div.tr-page-container div.side-bar > div {
                          background: #e8e9eb url('../turbo-themes/news/static/images/bg-pattern-cross.png');
                          /* campaing progress and top fundraisers */
                      }
                      
                      div.tr-page-container div.side-bar div.indicator-container * {
                          font-size: 13px !important;
                      }
                      
                      div.registration-page-container div.sub-section-header {
                          color: #555;
                          font-size: 16px;
                          font-weight: bold;
                      }
                      
                      h3.menu-title,
                      div.indicator-title {
                          color:#2f61a9;
                          font-size:18px;
                          font-weight:normal;
                          text-transform:uppercase;
                      }
                      
                      #team_find_page label,
                      label {
                          font-size: 14px !important;
                          
                      }
                      
                      input[type="text"],
                      input[type="password"],
                      input[type="email"],
                      textarea,
                      select {
                          background: #f2f1f0;
                          border: 1px solid #e2e2e2;
                      }
                      
                      div.responsive div.form-error input[type="text"],
                      div.responsive div.form-error input[type="password"],
                      div.responsive div.form-error textarea,
                      div.responsive div.form-error select {
                          background: #fff;
                          border-color: #B94A49;
                      }
                      
                      div.progress-bar-step-current div.progress-bar-step-number-container {
                          background:#7e82bf;
                      }
                      
                      div.progress-bar-step-container {
                          background: #e8e9eb url('../turbo-themes/t1/static/images/bg-pattern-cross.png');
                      }
                      
                      #find_participant div.list-component-row,
                      div.responsive div.list-row {
                          background: #fff;
                          border-bottom: 1px solid #e2e1e0;
                      }
                      
                      div#content button.search-button {
                          background:#aaacd2;
                          font-size:14px;
                          height:auto !important;
                          width:auto;
                      }
                      
                      #leaderboards .panel-heading h4 {
                          color: #000000;
                          font-size: 18px;
                          font-weight: normal;
                      }
                      
                      #leaderboards .panel-heading a {
                          color: #4e525d;
                          font-size: 12px;
                          font-weight: bold;
                      }
                      
                      div.thermometer-container span.amount-percentage-value,
                      div.thermometer-container span.amount-raised-value {
                          font-size: 18px;
                      }
                      
                      /* LEADERBOARDS */
                      
                      #leaderboards div.donor-list-indicator-container .indicator-list-row:nth-child(even) {
                          background: #e8e9eb url('../turbo-themes/news/static/images/bg-pattern-cross.png');
                      }
                      
                      #leaderboards .indicator-list-row .list-name-container .indicator-link {
                          background:transparent;
                          color:#7e82bf;
                      }
                      
                      /* PERSONAL PAGE */
                      
                      div.team-roster-raised-label {
                          border-bottom: 1px solid #ccc;
                          border-top: 1px solid #ccc;
                          color: #888; 
                      }
                      
                      /* //////////////////////////////////////// */
                      /* //////////////////////////////////////// */
                      /* //////////////////////////////////////// */
                      /* //////////////////////////////////////// */
                      /* //////////////////////////////////////// */
                      /* //////////////////////////////////////// */
                      
                      
                      #find_participant a:link, 
                      #find_participant a:visited,
                      #find_participant a:active,  
                      #find_participant a:hover { 
                       color: #7e82bf !important; 
                      } 
                      input.sub 
                      {
                        background-color: #E3E1B8 !important; 
                          color: #7e82bf !important;  
                      }
                      
                      
                      /* ====================
                        ECBU Developer Fixes
                        by: Derry Spann;
                      ====================== */
                      .center {
                          text-align: center;
                      }
                      
                      .italic {
                          font-style: italic;
                      }
                      #page.container {
                          box-shadow: 0px 13px 13px #ccc;
                          padding: 0;
                      }
                      body {
                          background:  #7e82bf url('../turbo-themes/news/static/images/bg-pattern-cross.png');           
                          margin: 0;
                          position: relative;
                          border: none;
                          padding: 0;
                      }
                      ul.nav.navbar-nav li:last-child a {
                          padding: 0 20px;
                      }
                      .nav > li > a {
                          padding: 10px 14px;
                      }
                      .hide{display: none;}
                      #logo,#logo p{padding:0;margin:0;}
                      #logo{
                          padding: 17px 0 0 20px;
                          border-radius: 5px;
                          width: 190px;
                          margin: 15px 0;
                      }
                      #header .container {
                          padding: 0 15px 15px;
                      }
                      
                      
                      .carousel-caption {
                          background:transparent!important;
                      }
                      
                      .carousel-caption a.button {
                          float: left;
                          padding: 20px 30px;
                          border-radius: 5px;
                          font-size: 18px!important;
                          letter-spacing: 1px;
                      }
                      .goal-cta {
                          color: #7d7d7d;
                          padding: 20px;
                          border-radius: 13px;
                          background: #E1E2E3;
                          font-weight: 100;
                          text-align: center;
                      /*     font-size: 195%; */
                      }
                      
                      .goal-cta strong.number {
                          color: #7e82bf;
                      }
                      
                      .goal-cta strong.number-goal {
                          color: #33344c;
                      }
                      /*  Media Queries */
                      @media (max-width: 767px){
                          #logo{margin-top:0;}
                       #logo a{position:relative;}
                       #logo a img{height:auto;}  
                      
                      #media .carousel-caption .button{
                          display: block;
                          margin: 0 auto;
                          float: none;
                      }
                      #media .carousel-indicators {
                          position: relative;
                          text-align: center;
                          margin: 0 auto;
                      } 
                      }
                      
                      
                      /* ==================== */
                      
                      </style>

                      Comment


                      • #12
                        Applying this CSS:
                        Code:
                                <style>
                                    form#survey table br {display: none;}
                                    form#survey table label {
                                        display: inline-block;
                                        width: 100px;
                                    }
                                    form#survey table td {
                                        padding-top: 5px;
                                        padding-bottom: 5px;
                                    }
                                </style>
                        it looks like this:
                        Attached Files

                        Comment


                        • #13
                          It did not work
                          form is still from top to bottom

                          Comment


                          • #14
                            Maybe there is a way I can hide the current form and replace it with another?

                            Comment


                            • #15
                              Curious that it works for me but not for your. For replacing the form you would need javascript. Where did you insert my CSS? How can you apply it when you don't have access to the page?

                              Comment

                              Working...
                              X