如何修改wordpress插件css

时间:2015-12-15 17:17:31

标签: css wordpress wordpress-plugin

请检查此链接: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>

我已经嵌入了wordpress插件亲计算器,想要改变它:

  1. 背景颜色
  2. 按钮颜色
  3. 想在&#34;重量&#34;前面写lbs; as&#34;体重(lbs)&#34;
  4. 请告知

2 个答案:

答案 0 :(得分:2)

你有几个选择。

1)(推荐)使用另一个不直接在html元素上插入内联样式的插件。然后你可以使用CSS设置样式,而不必与内联样式作斗争。

2)覆盖其显示功能的输出。如果他们正在使用动作/钩子,您应该能够取消注册其在页面上显示html的功能,将其复制到您自己的功能中,并注册您的功能来代替他们的功能。这可能会很好,因为您可以更改输出,例如将(lbs)添加到重量输入。 Here is an example of doing the action overrides.

第三个也是最差的选项是直接编辑插件代码,但如果网站管理员在wp-admin中进行一键式插件更新,将丢失所有更改。这显然是一个不受欢迎的场景。

答案 1 :(得分:0)

好吧,我想我找到了一种方法,这可能是一种黑客攻击。由于id都是相同的,并且您使用jQuery,因此可以使用.css()轻松更改它。试一试,你应该把它放在CSS中:

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

另外,让我们给出一个简单的setTimeout(),以便花费时间加载插件。 :)

小提琴:http://jsfiddle.net/praveenscience/2fqk93av/