2 Replies Latest reply on Feb 24, 2018 1:01 PM by stevengj1

    Help with custom html in views

    stevengj1

      Just trying to do some custom html views for custom properties and using tables.  When I tried to do any formatting it affects the whole page.  How do you do custom html without affecting the whole page.  Bottom has what it does to the page. Thanks

      <!DOCTYPE html>

      <html>

      <head>

      <style>

      table, th, td {

          border: 1px solid black;

      }

      </style>

      </head>

      <body>

      <h2>Site Name: ${Site_Name}   Profit Center:

      ${Profit_Center}   Support Tier: ${Support_Tier}</h2>

       

      <table width="100%">

      <table>

        <tr>

          <th>Contact Name</th>

          <th>Phone Number</th>

        </tr>

        <tr>

          <td>Main Site</td>

          <td>${Main_Site_Phone}</td>

        </tr>

        <tr>

          <td>${Site_Contact}</td>

          <td>${Site_Contact_Phone}</td>

        </tr>

        <tr>

          <td>${Site_Contact_2}</td>

          <td>${Site_Contact_Phone_2}</td>

        </tr>

      </table>

      </body>

      </html>

       

        • Re: Help with custom html in views
          mesverrum

          You might look into using the scoped option with your style tags, I've never personally had need to use it but my HTML resources are also pretty rudimentary and don't use the style tag anyway.

            • Re: Help with custom html in views
              stevengj1

              Thanks but the scope option did not help but lead me to fine assign a class to the table and do the style to the class

              <style>

              table.contact {

                  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                  border-collapse: collapse;

                  width: 50%;

              }

               

               

              table.contact td, table.contact th {

                  border: 1px solid #ddd;

                  padding: 8px;

              }

               

               

              table.contact tr:nth-child(even){background-color: #f2f2f2;}

               

               

              table.contact tr:hover {background-color: #ddd;}

               

               

              table.contact th {

                  padding-top: 12px;

                  padding-bottom: 12px;

                  text-align: left;

                  background-color: #1a53ff;

                  color: white;

              }

              </style>

              <table class="contact">

                  <tr>

              <th>Contact Name</th>

              <th>Phone Number</th>