Announcement

Collapse

Information Needed

See more
See less

Exactly how to add CSS to Event Site Template

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

  • Exactly how to add CSS to Event Site Template

    I see in the documentation that I can add CSS to the Template but I cannot figure out exactly how to do it. Baby steps for a newbie please.
    I know how to create basic CSS but I cannot see where to put the code. Is there a block to add or ? Thanks!

  • #2
    Good day @slipsey1

    In order to add Custom CSS first you need to enable it under C&P Event Management >> Default Settings

    Click image for larger version

Name:	Custom CSS.jpg
Views:	30
Size:	153.1 KB
ID:	55087

    and add the custom CSS in site template:

    Click image for larger version

Name:	Custom CSS2.jpg
Views:	21
Size:	190.4 KB
ID:	55088
    Regards,
    Click & Pledge Support Department

    On Salesforce? Help us by rating our app: Click & Pledge Donor Management on AppExchange

    Join us @ the educational webinars: https://clickandpledge.com/webinars/
    Live Support available Join between 3:00 - 3:30 p.m. ET Monday - Thursday: https://clickandpledge.com/webinars/
    Are you on Salesforce? Join us at the Power of Us Hub: https://powerofus.force.com/0F980000000CjpC

    Comment


    • #3
      Thanks!

      The form is not coming out centered on the page so I was going to use css
      In the CSS section

      table.center {
      margin-left:auto;
      margin-right:auto;
      }

      And then in the table
      class= center

      But I must have to put something around the css code because the text I put in the css section is just showing up in my form.
      I'm would research more but I'm trying to get this out today so thanks ahead for any help and answering the "duh" questions.

      Comment


      • #4
        I see that I have to enclose the css code in <style> </style>
        I have added some CSS classes (for table column widths) but when I save the file the class code in the form source gets stripped away?

        Comment


        • #5
          Good day @slipsey1

          Salesforce Code Editor has a lot of limitations with the HTML/CSS properties, it will remove some of them after saving the template.

          There are two ways to make the table center:

          Solution 1:
          <table align="center" style="width:80%">
          <tbody>
          <tr>
          <td colspan="1" rowspan="1">Column 1</td>
          <td colspan="1" rowspan="1">Column 2</td>
          </tr>
          </tbody>
          </table>


          Solution 2:
          <div class="table_center">
          <table>
          <tbody>
          <tr>
          <td colspan="1" rowspan="1">Column 1</td>
          <td colspan="1" rowspan="1">Column 2</td>
          </tr>
          </tbody>
          </table>
          </div>
          /* Add in the custom CSS section */
          .table_center table{
          width:80%;
          margin-left:auto;
          margin-right:auto;
          }

          Please note that HTML should be in the code editor and CSS in the Custom CSS section.
          Regards,
          Click & Pledge Support Department

          On Salesforce? Help us by rating our app: Click & Pledge Donor Management on AppExchange

          Join us @ the educational webinars: https://clickandpledge.com/webinars/
          Live Support available Join between 3:00 - 3:30 p.m. ET Monday - Thursday: https://clickandpledge.com/webinars/
          Are you on Salesforce? Join us at the Power of Us Hub: https://powerofus.force.com/0F980000000CjpC

          Comment

          Working...
          X