Joomla!

Summary

• user.cssによるJoomla! Template: Cassiopeiaのカスタマイズをまとめました

Article Information

• Auther, Category, Published dateなどのArticle Informationはデフォルト設定では、各項目1行表示となりスペースを必要とします
• これを表示項目すべてを1行表示とします
• Mobile表示の見た目が低下してしまうのがデメリットですが、スペース確保を優先しました

Setup

•  Cassiopeia_child Details and Files - user.cssに次のコードを追加します

.article-info dd {
    padding: 0;
    display: inline-block;
    margin-right: 1em;
}

Reference

• Joomla leaning center | Cassiopeia Joomla! template

Article Heading

• Articleの見出し(h3, h4)に修飾を施しました
• Articleページ内での表示に限定するため、class: .com-content-article__bodyを指定しています
• 先頭にアイコンを配したh4の修飾はサルワカさんのデザインを頂きました

Setup

•  Cassiopeia_child Details and Files - user.cssに次のコードを追加します

/* h3 at article page */
.com-content-article__body h3 {
    padding: 0.1em;
    background: #f0f4fb;
    border-bottom: solid 2px #224faa;
}

/*
h4 at article page
reference: saruwaka
https://saruwakakun.com/html-css/reference/h-design
fa ver: Font Awesome 6 Free
*/

.com-content-article__body h4 {
  position: relative;
  padding: 0.5em 0.5em 0.5em 1.5em;
  line-height: 1.2;
}

.com-content-article__body h4:before {
  font-family: "Font Awesome 6 Free";
  content: "\f152";
  font-weight: 900;
  position: absolute;
  font-size: 1em;
  left: 0.25em;
  top: 0.5em;
  color: #224faa;
}

Reference

• サルワカ | CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選