Изменить фоновый цвет загрузочного слоя

Я пытаюсь изменить CSS на bootstrap popover. Я хочу изменить весь фон popover, а не только текст.

Любые предложения?

http://bootply.com/110002

$(document).ready(function() {
  $("[rel='android']").popover({
    html: 'true', 
    content: '<div id="popOverBox">Coming March 2014</div>'
   });
});

CSS

 #popOverBox {
     background: tomato;
     font-family: serif;
 }

Ответы

Ответ 1

Вы нацелились бы на элемент .popover, а не на #popOverBox

ПРИМЕР ЗДЕСЬ

.popover {
    background: tomato;
}

И чтобы изменить фон стрелки (псевдоэлемент), вы должны использовать:

.popover.bottom .arrow:after {
    border-bottom-color: tomato;
}

Ответ 2

.popover {background-color: tomato;}
.popover.bottom .arrow::after {border-bottom-color: tomato; }
.popover-content {background-color: tomato;}

Ответ 3

Обратите внимание, что если вы используете файлы меньшего размера или sass, вы также можете сделать следующее:

@popover-bg: tomato;

Таким образом, не нужно беспокоиться о том, на какой стороне находится стрелка.

Ответ 4

Изменить цвет фона и цвет текста в Bootstrap-4

в то время как вы используете sass-bootstrap-4, вы можете легко сделать это, просто изменив некоторые значения переменных.

Это переменные в файле _variables.scss:

$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba(0, 0, 0, .2) !default;
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default;

$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;

$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;

Я меняю их на синий цвет с помощью переменной $brand-info:
Примечание: лучше, если вы скопируете эти переменные в свой собственный файл custom.scss и затем измените их.

$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: $brand-info;
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default;

$popover-title-bg: $brand-info;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;

$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color:$brand-info;

Результат после изменения переменных:

введите описание изображения здесь

Ответ 5

Время передается в любом случае, я хотел бы сообщить свое личное решение в LESS (действительно, соответствует моим потребностям, но я думаю, что это может быть полезно для некоторых людей здесь). Добавьте класс в class="popover", например class="popover popover-warning" и менее чем-то вроде этого:

.popover-warning {
  background-color: #f0ad4e !important;
  & .arrow, .arrow:after {
    border-left-color: #f0ad4e !important;
    border-left-color: rgba(0, 0, 0, 0.25);
  }
  & .popover-content, .popover-title {
    background-color: #f0ad4e !important;
  }
}

Надеюсь, что это поможет.