WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
[resolved] Probably a very easy CSS question (9 posts)

  1. dave_hitt
    Member
    Posted 12 months ago #

    Hi there:

    I'm trying to style the 'success message text' (and maybe other text) in the stock Mailchimp plugin. Right now it defaults to a not-so-pretty 'green.' When I inspect the element, it says the style's coming from my url with the suffix "/?mcsf_action=main_css&ver=3.5.2" applied. I have no idea how to 'get' to this CSS file and I've tried just adding the new style into my theme's stylesheet but it just gets overwritten. I've also noted that others have referred to 'main.css' but I can't find that file anywhere. I did find a file called 'admin.css' in the Mailchimp CSS folder, but changing that doesn't seem to have made any difference either.

    I'd appreciate someone pointing me in the right direction on this one...

    thanks

    http://wordpress.org/extend/plugins/mailchimp/

  2. W.P. Ginfo
    Member
    Posted 12 months ago #

    You were almost there...

    • Use FTP e.g. filezilla to access your site
    • use an EDITOR [not a wordprocessor] e.g. 'NOTEPAD++ ' to edit code

    Use Notepad++ as the editor in filezilla and you can easily open, edit and re-upload files.

    In admin.css you'll find the following code:

    .error_msg {
    	color: #997206;/*brownish*/
    	margin: 0px;
    	font-weight: bold;
    }
    .success_msg {
    	color: #000000; /*black*/
    	margin: 0px;
    	font-weight: bold;
    }
    • Change any of the colors. make sure you use the correct syntax!!
      Check out: http://www.colorpicker.com/
    • save and upload
    • check the result

    == == == extra
    How to find which CSS to change

    About finding out 'which things to change in your site [css / html / php]

    Well it's all a bit like trying to solve a puzzle.
    Fortunately there are good tools for that.
    In your browser: Install / activate webdevelopment add-ons / plugins.

    Recommended: 'Firebug' and 'webdeveloper: http://www.chrispederick.com '
    These tools will show you what's what.
    e.g. right-click > inspect elements > click left bottom arrow-icon
    click item in webpage
    Inspect css on the right
    alter css values to test effect / result
    OK? copy altered css rule
    paste it in the custom-CSS-tab of your theme or style.css of your childtheme, if such a custom-css-feature is not available in your theme.

    Alternatively:
    Press <F12> a screen will show in the bottom.
    Move the mouse over each line
    The area shows in the top-half
    Press + to unfold parts
    Investigate and alter on the right etc.
    paste it in the custom-CSS-tab of your theme or style.css of your childtheme, if such a custom-css-feature is not available in your theme.

    == == ==

  3. dave_hitt
    Member
    Posted 11 months ago #

    HI there and thanks for your response.

    Unfortunately, I had done everything you outlined. I have changed the CSS color in both 'admin.css' in the plugin folder and I also added a declaration in the main CSS stylesheet for the theme. Neverthless, the green is still overriding the blue I have changed it to. I think what is confusing to me is that the URL which developer tools references is a very weirid URL called 'http://haines-law.com/?mcsf_action=main_css&ver=3.5.2' This is not not an actual folder location. I'm guessing the theme is pulling the CSS from some remote source. I dunno but I do know that I am still stuck...

  4. W.P. Ginfo
    Member
    Posted 11 months ago #

    Hi Dave,

    The 'http://haines-law.com/?mcsf_action=main_css&ver=3.5.2' probably means that the theme [??which] you are using has a CSS-customization-option built in.

    See if you can find it [probably in the 'theme options' part of the site] >> Dashboard > Appearance > Themes > Theme Options 'CSS customization'

    If you cant find it: What's the name of your [parent] original theme the site is based on?

  5. dave_hitt
    Member
    Posted 11 months ago #

    Hey again:

    The site is not based on an off-the-shelf theme. We write our own, usually and we wrote this as well... So then, there's no built-in CSS customization, to my knowledge (and I did not see any...

    I've posted a screenshot of what I'm seeing, with the inspection details here...

  6. W.P. Ginfo
    Member
    Posted 11 months ago #

    By the looks of it a CSS-rule was defined in two places for this:

    • media= "all" section of the code
      .mc_success_msg{
              color:green;
      }
    • media= "screen, projection" section of the code
      .mc_success_msg{
              color:#336699;
      }

      I've located one in mailchimp.php

      Edit [after making a backup] and change as required.

  7. dave_hitt
    Member
    Posted 11 months ago #

    Thank you so much! That worked and allowed me to style as desired. If you don't mind, can you tell me if there was any way I could have known that the offending style was found in 'mailchimp.php?' I basically had conceptually figured out what the problem was a week ago. I thought there was a style defined somewhere other than the plug-in's stylesheet or my theme's stylesheet and I was right. But how could I have known the style was found in 'mailchimp.php?' This is one of the frustrations I find when working with CMS driven sites...

    Thanks again for all your advice; you made this so much easier...

    dave

  8. W.P. Ginfo
    Member
    Posted 11 months ago #

    >>> [NOTE: the labels of these tabs are rough translations, since I use a Dutch version browser]

    1. I located the item in question using 'inspect elements' [right-click in your browser]
    2. The bottom-half of the screen has a number of tabs / options
    3. I first used the ínspector-tab to pinpoint the exact item
    4. Then, the item still active, I selected the 'style-editor'tab
    5. It shows a list of sources [stylesheets and inline styles that control the site

    6. Next I located the stylesheet[s] and style-rules in question in this list
    7. I tried if altering the style-rule[s] had the result required
    8. On the label/tab on the left of the list it shows the filepath and filename
    9. presto ;)
      As suggested it's a puzzle / frustration-tolerance-test at times, which I fail on many occasion ;)

      >>>

      How to find which CSS to change

      About finding out 'which things to change in your site [css / html / php]

      Well it's all a bit like trying to solve a puzzle.
      Fortunately there are good tools for that.
      In your browser: Install / activate webdevelopment add-ons / plugins.

      Recommended: 'Firebug' and 'webdeveloper: http://www.chrispederick.com '
      These tools will show you what's what.
      e.g. right-click > inspect elements > click left bottom arrow-icon
      click item in webpage
      Inspect css on the right
      alter css values to test effect / result
      OK? copy altered css rule
      paste it in the custom-CSS-tab of your theme or style.css of your childtheme, if such a custom-css-feature is not available in your theme.

      Alternatively:
      Press <F12> a screen will show in the bottom.
      Move the mouse over each line
      The area shows in the top-half
      Press + to unfold parts
      Investigate and alter on the right etc.
      paste it in the custom-CSS-tab of your theme or style.css of your childtheme, if such a custom-css-feature is not available in your theme.

  9. W.P. Ginfo
    Member
    Posted 11 months ago #

    Oh BTW:
    Please don't forget to mark the thread as 'resolved' [in the right sidebar]

Reply

You must log in to post.

About this Plugin

About this Topic