セマンティックUIモーダルで色付きヘッダーを使用するにはどうすればよいですか？

Question

逆の色のヘッダーがありましたが、何も変わりませんでした。

Iはまた、セグメント化されたコントロールにヘッダを変更しようとしたが、それはまだそれがセマンティック-UIで現在使用できません上部に白い空隙を残し、また、ラウンドコーナー

Answer 1

を有しています。カスタムCSSコードを使用することによって、異なる色を設定することもできます。

$('.ui.modal').modal('show');

.ui.modal > .header{ 
 
    background-color: gold !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<div class="ui modal"> 
 
    <i class="close icon"></i> 
 
    <div class="header"> 
 
    This is a modal with custom header background 
 
    </div> 
 
    <div class="content"> 
 
    <div class="description"> 
 
     A description can appear on the right 
 
    </div> 
 
    </div> 
 
    <div class="actions"> 
 
    <div class="ui button">Cancel</div> 
 
    <div class="ui button">OK</div> 
 
    </div> 
 
</div>