You can go beyond basic styling on Do Gooder by customising the CSS of your campaigns. This gives you much greater control over the look and feel as well as certain functionality.

Some fun hacks are below but you can do as much as CSS allows you to do. All of this power and flexibility is available on the Goodest PRO plan which allows you to modify CSS on Do Gooder.

To paste in CSS, Edit your campaign and open the Custom Theme tab. The first three options are basic settings available to all plans and can be used or be over-written with CSS. The CSS field is where you paste in your code.

General Style Mods

Set the background and colour of text on mobile devices

@media (max-width: 767px){  
   .campaign-content {    
        background-color: #945163 !important; 
     }  
    .campaign-content .content-container {    
          color: #fff !important; 
     }
 }

Set the background colour of text blocks in Pages to transparent so they are not white which otherwise creates a banded effect on paragraphs.

body.modern-campaign-page .campaign-body>.row {
background-color: transparent !important;
}

Move the Action Panel down the page (Desktop views only). This can give your hero image or maps more space than our standard position, which preferences showing more of the action form above the fold (for better conversion). In the example below we have set the form to be 50 pixels above the hero banner bottom. Set the figure to 0 to align with the hero banner bottom.

If the hero banner is set to Image:

@media (min-width: 992px) {
    body.action-page .campaign-hero-image+.campaign-body #campaign-action-page {
        margin-top: -50px !important;
    }
 }


If the hero is set to Map:

@media (min-width: 992px) {
    body.action-page .map-hero+.campaign-body #campaign-action-page {
        margin-top: -50px !important;
    }
 }

Change the colour of the Action Panel background.

body.action-page #campaign-action-page .action-form {
  background: #5eaf36;
  padding-bottom: 3em;
}

Change the colour of the Campaign Title

h1.title { color: red !important; }

(You can replace colour names (i.e. red in this example) with a hex value).

Remove the Account Logo

img.org-logo { 
    display: none; 
}

Replace the Account logo

img.org-logo { content: url(https://yourdomain.com/image.png); }

Increase the size of the logo

img.org-logo { width: 180px !important; }

(This example doubles it)

Remove the hamburger menu

.campaign-header-right { display: none; }

Make links within the pages into buttons

body.custom-theme .container .action-description .intro a:hover {
    text-decoration: none;
    background-color: #86e271;
}
body.custom-theme .container .action-description .intro a {
    background-color: #43B02a;
    color: white;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 25px;
}

Make links within event / geolocated action paddles (on maps) into buttons

html body.action-page .gm-style-iw-d p a {
    background-color: #910091;
    border: 1px solid;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    margin: 0 auto;
}
html body.action-page .gm-style-iw-d p a:hover {
    text-decoration: none;
    background-color: #731073;
}

Footer Mods

Remove the footer 'Report as No Good', and 'Platform Privacy' links:

.campaign-footer-left, .footer-button{
    display: none !important;
}

Remove just the 'Report as No Good' link:

body.action-page .campaign-footer .campaign-footer-left .link+.link {
    border: none;
}

.flag-campaign.link {
    display: none !important;
}

Petition Mods

Remove the first button in Petitions (exposes the form and hides the button so it becomes a one-click petition):

hidden {
   display: none !important;
    visibility: hidden !important;
}

.field-wrapper.overflow p, .field-wrapper.overflow input, .field-wrapper.overflow div{
    display: none;
}

body.petition-action .form-footer.submit-area {
   display: block !important;
}

.custom-message-container, .donate-message-container, .petition-container {
   display: block;
}.

Remove the petition text (leaving just the first take action button then the form once that is clicked. Or coming this with he CSS above to create a single click petition with no petition text aka a signup form!)

form.action-form .field-wrapper.overflow .field-wrapper, form.action-form .field-wrapper.overflow { 
            margin: 0; 
}

.petition-statement {
      display: none; 
}