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). Increase the number (so more negative!) to lower the panel.

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



Change the colour of the Action Panel background.

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

Remove the Account Logo

img.org-logo { 
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;
}



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;
}.

Call Action Mods

hidden {

   display: none !important;

    visibility: hidden !important;

}

 .section-title{ display: none;

}


Did this answer your question?