如何調整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的大小？

回答

相關問題