Customizing text/button color

christophernormanmusic's Avatar

christophernormanmusic

29 Aug, 2015 07:08 PM

hey ya'll,

I only have minimal knowledge of CSS and having dug through here and editing things with trial and error I'm kind of at wits end - what's the key to changing text and submit button color for the cashmusic apps? I know it involves editing the custom embed CSS but I can't for the life of me figure out what to put in there. the default color is fine, so it's totally not a dealbreaker, would just love to be able to really customize. thanks guys!

  1. Support Staff 1 Posted by Tracy on 02 Sep, 2015 08:17 PM

    Tracy's Avatar

    Hi Christopher!

    You can modify the text and button colour by using a little bit of CSS.

    You'll want to log into your CASH panel at http://cashmusic.org/admin

    From there, select your campaign and then click the pencil icon in the upper-right-hand corner. Then click Page theme.

    You'll likely have already selected either a dark theme or light theme. You'll know because you'll see one of these two tags: <body class="dark"> or <body class="light">

    I'm going to give you the CSS to override the dark theme, but if you used the light theme, just switch out the word dark for light.

    The CSS:

    <style type="text/css">
    body.dark input[type=submit], body .button {
       background: black ;
       color: white;
       font-family: "Courier New", Courier, monospace
    }
    
    body.dark input[type=submit]:hover, body .button:hover{
       background: white;
       color: black;
       font-family: "Courier New", Courier, monospace
    }
    </style>
    

    Make sure you place this code right before the </head> tag—beneath the linked stylesheets.

    You can swap out the colours using colour names or hex codes. For some examples, look here: http://www.w3schools.com/html/html_colornames.asp

    And you can switch out the font using either web safe fonts such as these: http://www.w3schools.com/cssref/css_websafe_fonts.asp

    Or you can use Google fonts. Here's a primer: http://designshack.net/articles/css/a-beginners-guide-to-using-goog...
    Let me know how it goes!

    Very best,
    Tracy

  2. 2 Posted by Andy on 11 Sep, 2016 05:05 PM

    Andy's Avatar

    Hello,

    I tried following the example, but there are some gaps. For example, the panel doesn't display PAGES for campaigns. I don't need a page - I have created two email capturing elements. I don't even need a campaign... When editing an element, I select the CUSTOM theme. I get the following pop-up window:
    <!DOCTYPE html>
    <head>
    <title>CASH Music</title>
    </head>
    <body>
    <div id="mainspc">
    {{{element_markup}}}
    </div>
    </body>
    </html>

    Question: where can I edit the color of the elements so that the script renders correctly with the colors I select, and not the default GREEN?

    Thanks,

    Andy

  3. 3 Posted by Andy on 18 Sep, 2016 01:15 AM

    Andy's Avatar

    Hello - following up on the CSS customization of the elements. Please advise.

    Thanks,

    Andy

  4. 4 Posted by Curtis on 11 Aug, 2017 11:14 PM

    Curtis 's Avatar

    I am stuck as well on color customization . I am slightly family with code and am wondering are those two examples compatible? I'm trying it over here. Thanks in advance.
    C3

  5. 5 Posted by Curtis on 11 Aug, 2017 11:16 PM

    Curtis 's Avatar

    Familiar*

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac