Comment remplacer la couleur d’arrière-plan de titre du panneau Bootstrap?

J’utilise un Panel de Bootstrap cependant pour le titre, je veux utiliser ma propre couleur de fond pour le titre. Lorsque je ne mets pas la classe d’en panel-heading pour le div , la disposition est vissée. J’ai donc pensé que je devais garder le panel-heading mais trouver un moyen de remplacer la couleur d’arrière-plan. J’ai donc décidé de créer une classe CSS personnalisée et d’utiliser la background-color , puis de l’append au div avec l’en panel-heading . Mais cela n’a eu aucun effet.

Une idée sur la façon de remplacer la couleur de titre du panneau?

Code:

 

Cela devrait fonctionner:

 .panel > .panel-heading { background-image: none; background-color: red; color: white; } 

Vous pouvez créer une classe personnalisée pour votre en-tête de panneau. En utilisant cette classe css, vous pouvez styler l’en-tête du panneau. J’ai un violon simple pour cela.

HTML:

 

Panel title

Panel content

CSS:

 .panel-default > .panel-heading-custom { background: #ff0000; color: #fff; } 

Lien de démonstration:

http://jsfiddle.net/kiranvarthi/t1Lq966k/

Que diriez-vous de créer votre propre classe Custom Panel? De cette façon, vous n’aurez pas à vous soucier de remplacer Bootstrap.

HTML

 

Panel title

Panel content

CSS

 .panel-custom-horrible-red { border-color: #ff0000; } .panel-custom-horrible-red > .panel-heading { background: #ff0000; color: #ffffff; border-color: #ff0000; } 

Violon: https://jsfiddle.net/x05f4crg/1/

Bootstrap utilise parfois des constructions de classes contextuelles. C’est ce que vous devriez cibler pour changer de style.

Vous n’avez pas besoin de créer votre propre classe personnalisée comme suggéré dans la réponse de Kiran Varti.

Donc, vous n’avez besoin que de:

CSS:

 .panel-default > .panel-heading { background: #black; } 

HTML:

 

Explication ici . Voir aussi la section de classe contextuelle ici .

Pour correspondre à l’inverse de navbar, utilisez # 222. L’inversion de panel a été demandée dans V3, mais rejetée en raison de priorités plus importantes.

Vous pouvez modifier la couleur de premier plan dans ce remplacement de titre ou vous pouvez le faire séparément pour les titres de panneau. Dépend de ce que vous essayez de réaliser.

 .panel-title { color: white; } 

Une autre façon de changer la couleur est de supprimer la classe par défaut et de remplacer, dans le panneau, par les classes du bootstrap.

Exemple:

 

Vous pouvez simplement append un atsortingbut id au panneau. Comme ça

Hello world

Ensuite, dans votre fichier CSS personnalisé:

 #mypanelId{ background-image: none; background: rgba(22, 20, 100, 0.8); color: white; } 

Je suppose que custom_class est votre classe pour remplacer la couleur de titre du panneau. ajoutez simplement des éléments importants ou ajoutez des styles en ligne ou un identifiant et ajoutez des styles car ils auront plus de spécificité par rapport aux styles de classe ajoutés.

  • avec! important

    .custom_class {background-color: rouge! important; }

  • avec! important

  • avec ID:

    #custom_id {background-color: rouge; }

-avec les styles en ligne:

 
 .panel-default >.panel-heading { background: #ffffff; } 

C’est ce qui a fonctionné pour moi pour changer la couleur en blanc.

J’ai essayé d’utiliser une classe de panneau personnalisée mais cela n’a pas fonctionné. Donc, pour ceux qui luttent comme moi, vous pouvez utiliser inline CSS et cela fonctionne très bien pour moi.

Voici à quoi ressemble mon code:

 

Il suffit de vérifier le bootstrap. CSS et recherchez l’en-tête de panneau de classe et copiez le code par défaut.

Copiez le code CSS par défaut dans votre fichier CSS personnel, mais installez-y un nom de classe différent comme par exemple mon-panneau-en-tête.

Editez le code css de la nouvelle classe de clones créée.

utilisez ceci :

 .panel-heading { background-color: #ececb0 !important; }