How to modify wordpress plugin css [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
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:
Background Color
Button Color
Want to write lbs in Front of "Weight" as "Weight (lbs)"
Please advise

Answer 1

You have a couple of options.
1) (Recommended) Use a different plugin that doesn't put inline styles directly on html elements. Then you can style it with CSS and not have to battle inline styling.
2) Override the output of their display function. If they are using actions/hooks you should be able to de-register their function that displays the html on the page, copy it into your own function, and register your function in place of theirs. This would be nice becasue you could change output such as adding (lbs) to the weight input. Here is an example of doing the action overrides.
The third and worst option is editing the plugin code directly but you will lose all of your changes if a site admin ever does the one-click plugin update in the wp-admin. This is obviously a unwanted scenario.

Answer 2

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/