Редактирование Wordpress Widget CSS

Question

Я работаю над веб-сайтом WordPress моей школьной газеты, и я пытаюсь отложить содержимое виджета вращающихся твитов на 15 пикселей. Я попытался добавить следующий код в style.css листе WordPress тема редактора, но он не сделал каких-либо заметных изменений:

.rotatingtweet{padding-left: 15px;} 

Когда я добавляю ту же строку кода в Google Chrome в режиме разработчика, он имеет желаемый эффект, но я просто не могу заставить его работать, отредактировав основной файл style.css на веб-сайте «Голос» Wordpress.

Спасибо за ваше время! -John

Answer 1

В их контейнере отображаются твиты position: absolute, поэтому они игнорируют прокладку.

Поместите прокладку на внешнем DIV вместо этого, а затем настроить заголовок:

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

EDIT: выше, с дополнительными ухищрениями до границы и такой, будет работать, но может быть немного легче решением.

Вместо использования прокладки дайте вращающемуся твиту контейнерному левому краю. В файле 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; 
} 

Это похоже на то, что вы хотите.