Question

请检查此链接：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插件亲计算器，想要改变它：

背景颜色
按钮颜色
想在＆＃34;重量＆＃34;前面写lbs; as＆＃34;体重（lbs）＆＃34;

请告知

Answer 1

你有几个选择。

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

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

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

Answer 2

好吧，我想我找到了一种方法，这可能是一种黑客攻击。由于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/

如何修改wordpress插件css

2 个答案: