如何调整Launchrock-widget的大小？

我正在运行一个Joomla网站，并试图嵌入一个launcrock-widget（launchrock是一项服务，可以让对你的项目感兴趣的人输入他们的电子邮件，所以当你完成后你可以发邮件给他们），但我可以真的不会调整它的大小。这个小部件有一行javascript代码，我使用Sourcerer Code Helper插件将它放在Joomla文章中。如何调整Launchrock-widget的大小？

小部件在这里嵌入： http://cavemanskin.com/index.php/14-day-meal-plan-widget

现在有2个问题：由于某种原因，1）小部件占据了整个页面; 2）文字下方的灰色盒子不见了，所以你不能真的读了它。 '检查元素我注意到，Launchrock将所有内容放在一个名为'lr-widget'的DIV中。我添加了代码：

<style type="text/css"> 
div#lr-widget { height:300px; width:300px } 
</style>

但是该小部件仍然是相同的大小。有人可以告诉我我做错了什么吗？

编辑：小部件的代码只适用于我给予launchrock的域名，我想在我的电脑上用JavaScript代码试验一个.html，但launchrock小部件根本不加载。

来源

2013-01-10 Plumpie

在Chrome开发人员看来，这是一个内部shell，也可以定制并添加到您的主CSS中，以覆盖他们的类并添加到您的主CSS。

EX：

.LR-content { 
    color: #FFFFFF; 
    font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; 
    font-size: 14px; 
    font-weight: 300; 
    height: 200px; 
    min-height: 100%; 
    position: absolute; 
    width: 500px; 
    z-index: 0; 
} 

.LR-bg-img { 
    background-attachment: fixed; 
    background-color: #222222; 
    background-image: url("img/classicBg.png"); 
    background-position: center center; 
    background-size: cover; 
    content: ""; 
    height: 50%; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: 0; 
}

我只是测试这些，你可以看到许多变化。因此，您可以尝试抓取这些代码并将其覆盖在主人身上。

来源

2013-01-10 14:49:39 Riskbreaker

现在它已经看起来非常不同了。但是，这里的“内壳”是什么？你提出的改变究竟发生了什么？你为背景图像创建了一个新类，但是页面源代码中的bg-img的Ctrl-F却没有给出任何结果，那么这个类是否真的在某处使用？ – Plumpie

您是否使用Chrome Developer Debugger工具（F12）？或Firebug？那是我在他们的css上得到的课程...显然我只是乱搞大小。使用Chromes调试器工具，你可以从那里实际编辑，并使你的愿望....从它的外观LaunchRock添加这个* .LR-bg-img *的包装外壳...我不知道你的意图和展示位置正在发布，但这是我开始看到更改的方式。 – Riskbreaker

我使用chrome - 刚才发现你可以使用sources选项卡访问CSS。感谢您提出在Chrome调试器中更改代码的建议：它比在Joomla文章编辑器中更改内联样式表要快得多。我开始理解我认为的这个CSS概念。现在，让文本背后的框.. – Plumpie

如何调整Launchrock-widget的大小？

回答

相关问题