Тема Wordpress Bootstrap, не использующая стили

Я загрузил этот template для использования с Wordpress. Это именно то, что я хочу (за исключением цвета), базовую тему Wordpress, которую я могу изменить в соответствии с дизайном, данным мне нашим дизайнером.Тема Wordpress Bootstrap, не использующая стили

Я заметил, что мои стили не применяются к элементам. Только некоторые вещи применяются. Моя голова тег - результирующая страница, а не в Wordpress - выглядит следующим образом (для ясности, я только включал основу):

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>WP | Just another WordPress site</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="pingback" href="http://siteurl/xmlrpc.php"> 

    <!-- wordpress head functions --> 
    <link rel="stylesheet" id="bootstrap-css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/library/css/bootstrap.css?ver=1.0" type="text/css" media="all"> 
    <link rel="stylesheet" id="wpbs-style-css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/style.css?ver=1.0" type="text/css" media="all"> 
    <!-- more stuff --> 
    <!-- end of wordpress head --> 
    <!-- custom styles --> 
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/editor-style.css"> 
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/fonts.css"> 
    <!-- end of custom styles --> 
    <!-- a bunch of IE fallbacks --> 
</head>

Я всегда был под впечатлением, что а) последняя таблица стилей, имеет приоритет над загруженными до него и б) специально ориентированный стиль перезаписывает групповой стиль. Теперь в моем пользовательской таблице стилей (style.css), загруженных в заголовке, у меня есть этот кусок CSS:

a.navbar-brand { 
    font-family: lao_uiregular; 
    font-size: 1.7em; 
    color: #2a73ba; 
    text-transform: uppercase; 
}

Но цвет не отображается. Я знаю, что могу заставить его с !important, но представьте себе, как неряшливо это будет выглядеть, если все имеет !important в конце. Когда я проверяю элемент в Google Chrome, он показывает это в моем Styles -tab.

media="all" 
@media (min-width: 768px) //bootstrap.css 
.navbar > .container .navbar-brand { 
    margin-left: -15px; 
} 
localhost/media="all" //bootstrap.css 
.navbar-default .navbar-brand { 
    color: #777777; 
} 
localhost/media="all" //style.css 
.navbar-brand { 
    font-family: lao_uiregular; 
    font-size: 1.7em; 
    color: #2a73ba; 
    text-transform: uppercase; 
}

Итак, в соответствии с Google (и всех других broswers), мой загрузочный файл принимает приоритет над любой другой таблицы стилей.

Как это исправить? Я честно не хочу добавлять !important ко всему, потому что это неопрятно, и это похоже на плохую практику программирования. Если мне нужно опубликовать любой другой код, прокомментируйте, и я сделаю это. Я отчасти новичок в Wordpress, поэтому не знаю, что требуется для исправления проблемы.

источник

2014-10-08 Albert

'.navbar-default .navbar-brand' более конкретный, чем' .navbar-brand' – Steve

Это связано с спецификой, стили бутстрапа более конкретны, чем ваши стили, что заставляет их отдать предпочтение. Поскольку ваши пользовательские таблицы стилей включаются после начальной загрузки, вы можете переопределить стили бутстрапа, сопоставляя специфику селекторов. Так что измените .navbar-brand на .navbar-default .navbar-brand.

HTML:

<ul class="navbar-default"> 
    <li><a class="navbar-brand" href="#">This will be blue</a></li>  
    <li><a class="navbar-brand2" href="#">This will be red</a></li> 
</ul>

CSS:

.navbar-default .navbar-brand { 
    color: red; 
} 
/*This will work*/ 
.navbar-default .navbar-brand { 
    color: blue; 
} 
.navbar-default .navbar-brand2 { 
    color: red; 
} 
/*This won't work*/ 
.navbar-brand2 { 
    color: blue; 
}

JS Fiddle:http://jsfiddle.net/dtz7Ld9n/

Для получения дополнительной информации посмотрите на CSS Specificity: Things You Should Know

источник

2014-10-08 10:49:12

А, ок. Так что я правильно понял, я просто не понял его правильно. – Albert

Тема Wordpress Bootstrap, не использующая стили

ответ

Смежные вопросы