How to modify wordpress plugin css [closed]


Tags: css,wordpress,wordpress-plugin

Problem :

Please check this link: http://jsfiddle.net/Raakh5/hg6au2y2/

<div id="aq-block-1076-2" class="aq-block aq-block-aq_text_block aq_span4 aq-first clearfix">
<div class="cp-calc-widget" data-calcid="2424" data-anchor="2">
    <form class="widgetForm cleanslate" id="widgetForm" method="post" 
        style="width: 260px !important; background-color: #378CAF !important; 
        border-color: #006395 !important; color: #ffffff !important; font-size: 16px !important;">           

            <input name="numFields" type="hidden" value="1">           
            <input name="calcId" type="hidden" value="2424">
            <input name="answer_format" type="hidden" value="function">

            <div class="widgetTitle">Water Intake Calculator</div>           
            <hr style="color: #006395 !important; background-color: #006395 !important;">           
            <div class="form_area"><div class="field">Weight:<div class="buffer">
                <input class="inputArea" name="input0" value="">
            </div>
            </div>
            <input type="submit" id="widgetSubmit" class="widgetSubmit calc_button" value="Calculate" 
            style="color: #ffffff !important; background-image: -moz-linear-gradient(top, #378CAF, #006395) !important; 
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #378CAF),color-stop(1, #006395)) !important; 
            filter:  progid:DXImageTransform.Microsoft.Gradient(startColorStr=#378CAF, endColorStr=#006395, GradientType=0 ); 
            border-color: #006395 !important;">           
            </div>           

            <div class="answer_area hidden_class">             
            <div class="loading">loading...</div>             
            <div class="actual_answer hidden_class">               
            <span class="pre_answer"></span>               
            <div class="answer">
                <span class="return_answer"></span></div>             
            </div>             
            <div>
                <input type="button" id="backButton" class="backButton calc_button" value="< back" 
                style="color: #ffffff !important; background-image: -moz-linear-gradient(top, #378CAF, #006395) !important; 
                background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #378CAF),color-stop(1, #006395)) !important; 
                filter:  progid:DXImageTransform.Microsoft.Gradient(startColorStr=#378CAF, endColorStr=#006395, GradientType=0 ); 
                border-color: #006395 !important;">
            </div>           
            </div>
            </div>
        </form>
    </div>

I have embedded wordpress plugin pro-calculator and want to change its:

  1. Background Color
  2. Button Color
  3. Want to write lbs in Front of "Weight" as "Weight (lbs)"

Please advise



Solution :

Okay I guess I found out a way, which is possible but a hack. Since ids are all same and you do use jQuery, it is easy to change it using .css(). Give this a try, which you are supposed to put in the CSS:

(function ($) {
  setTimeout(function () {
    $(function () {
      $("#widgetForm").css({
        "border-width": "2px",
        "background-color": "#ccc",
        "border-color": "#99f"
      });
    });
  }, 1250);
})(jQuery);

Also, let's give a simple setTimeout() so that it takes the time to load the plugin. :)

Fiddle: http://jsfiddle.net/praveenscience/2fqk93av/


    CSS Howto..

    CSS: How do I make text indent for a label with long text?

    how to select margin for a background image in CSS/CSS3?

    CSS: how can I make this table fit the border when resized?

    How do I get CSS table columns to line up?

    Dropdown not showing elements Bootstrap 3

    How come my divs are jumping around during a transition?

    How to add next / previous buttons to Surface tablet touch-slideshow?

    How to fixed image on every screen resolution?

    How to make irregular CSS border

    Clipping an element to only show the middle part?

    Rails: How to control CSS, Javascript files

    How do I move that div with CSS in a clean way?

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    How to declare css “global” height? Inside the html file or inside the css file?

    How do I make a container div only overflow horizontally without using “display:inline-block” for its inner divs?

    How to center text in my div

    How to fluid images when resize window?

    How to Inherit grandparent CSS not parent?

    how to get fixed table columns width

    How to edit horizantal drop down menu

    how to zoom in an image and center it

    CSS - How to make IE7 respect min-width

    How to overlay a div upon other div while scrolling using css

    How to make a frame around CSS component from a picture source

    How can I wrap content around a UL CSS Menu so content is seamless?

    How to set width and text-align for button with CSS

    How to make CSS animation happen the moment the website loads

    How to check a website in BlackBerry Simulator

    How to move a div horizontal then vertical using css animation?

    How to make interactive logo design without flash?