造型TripAdvisor小部件

Question

我被要求将旅行顾问小工具附加到现有项目中。问题是我无法找到一种造型方式。搜索谷歌已被证明是消极的，我已经尝试过各种方式来改变自己的风格，但每次我都无处可去。

看起来（通过使用开发人员工具）脚本在调用时会在下面的代码中添加其他div标签，而这些新添加的div我需要设置样式。

有什么想法吗？

<div id="TA_linkingWidgetWAR281" class="TA_linkingWidgetWAR">
  <ul id="7vEu3EbbE54" class="TA_links I3eKq4As">
    <li id="P1W6bWTQjEmY" class="M0QRzat">
      Write a review of <a target="_blank" href="http://www.tripadvisor.co.uk/Restaurant_Review-g1217951-d2315832-Reviews-Peking_Chinese_Takeaway-Bradley_Stoke_Gloucestershire_England.html">Peking Chinese Takeaway</a>
    </li>
  </ul>
</div>

<script src="http://www.jscache.com/wejs?wtype=linkingWidgetWAR&amp;uniq=281&amp;locationId=2315832&amp;lang=en_UK&amp;border=true">   </script>

Answer 1

这很容易吗？

您所要做的就是使用浏览器检查器并检查当前的应用样式并根据自己的意愿进行编辑......

作为示例：http://jsbin.com/ivebet/2/edit

我所要做的就是：

#CDSWIDLNKR .widLNKRInner {
    margin: 30px  !important;
    padding: 14px 16px 12px !important;
    background-color: #bada55 !important;
}
ul li img {
    display: none;
}

但是，要小心，你打破widget agreement 。

  

2.1 您不得直接或间接更改，编辑，添加，复制或提取TripAdvisor窗口小部件或TripAdvisor网站上任何内容的摘要或生成摘要。特别是，您不会在TripAdvisor小部件之外的网站上显示任何TripAdvisor评级或评论。

Answer 2

由于这是一个小部件，你所说的div是通过你正在使用的小部件提供的。除了创建包装和样式之外，您可能无法控制内部样式。

然而，这是你可以做的。在浏览器中点击F-12（例如chrome）并检查它创建的附加div。请注意这些div /元素的类和id。

要在CSS中设置样式，您至少在某些情况下可能需要使用！important与您的样式重叠来覆盖来自插件提供程序的默认值。比如这个：

div.someclass { border: none !important; }

不幸的是，这是使用小部件的代价，易用性是一种权衡与控制。