編輯Wordpress部件CSS

我正在學校報紙的wordpress網站上工作，我正在嘗試將旋轉tweet小部件的內容縮進15px。我試着將以下代碼添加到WordPress的主題編輯器的style.css的表，但它並沒有作出任何顯着的變化：編輯Wordpress部件CSS

.rotatingtweet{padding-left: 15px;}

當我添加相同的代碼行谷歌瀏覽器開發者模式，它具有所需的效果，但我無法通過在「Voice」wordpress主題中編輯網站的主style.css文件來實現它。

謝謝你的時間！ -John

來源

2015-03-03 JulietKiloMike

您有分享鏈接嗎？ – CristiC 2015-03-03 00:23:45

這是在coa.menloschool.org – JulietKiloMike 2015-03-03 00:32:28

推文在其容器中顯示爲position: absolute，所以他們忽略填充。

把填充的外層div代替，然後調整頭：

.widget_rotatingtweets_widget { 
    padding-left: 15px; 
} 
.widget_rotatingtweets_widget h4 { 
    margin-left: -15px; 
}

編輯：上面，用另外的調整，以邊界並且這樣，將工作，但可能有一個稍微容易的解決方案。

而不是使用填充，給旋轉tweets容器左邊距。在你的style.css文件（可能是線102），還有一個選擇：

#content .rotatingtweets, 
#content .norotatingtweets { 
    border-top: 1px solid #DDD; 
    border-bottom: 1px solid #DDD; 
    margin-bottom: 3%; 
}

如果將其更改爲：

#content .rotatingtweets, 
#content .norotatingtweets { 
    margin-bottom: 3%; 
    margin-left: 15px; 
}

和之前移動邊界的元素和rotatingtweets後容器：

.sidebar .widget_rotating_tweets .widget_title { 
    border-bottom: 1px solid #DDD; 
} 
.widget_rotating_tweets .follow-button { 
    border-top: 1px solid #DDD; 
}

這似乎達到你想要的。

來源

2015-03-03 01:01:53 bobdye

非常感謝bobdye！那就是訣竅......我花了幾個小時試圖讓它在昨天工作，所以你爲我節省了很多時間！ – JulietKiloMike 2015-03-03 01:18:20

我想弄清楚我的主要樣式表的CSS屬性被覆蓋...是主要的CSS樣式表後的html中包含的旋轉tweets小部件的容器，還是位置優先於填充？（我是一個CSS noob ...只是想弄清楚我做錯了什麼:) – JulietKiloMike 2015-03-03 01:20:55

執行你的代碼片段後，它看起來像框等背景被轉移（這是有道理的）。有沒有辦法來覆蓋位置：來自外部的推文容器中的絕對屬性？我嘗試使用'.rotatingtweet {position：relative; left：15px;}'在style.css中，但沒有注意到任何更改。 – JulietKiloMike 2015-03-03 01:35:08

編輯Wordpress部件CSS

回答

相關問題