XF1.x - Einfach die titleBar verschönern | XenDACH - Die deutschsprachige XenForo-Community

Auf Grundlage der Ressource "Message Title Enhancement" von Shelley habe ich hier mal die häufigsten .titleBar Vorkommen zusammengefasst.

1. Template forum_view

HTML:

/* FORUM VIEW TITLE BAR ENHANCEMENTS */
.forum_view .titleBar {
    border: 1px solid @primaryLighter;
    border-radius: 5px;
    background-color: @primaryLighterStill !important;
    margin:0px auto;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px 3px @textCtrlBackground inset;
}
.forum_view .titleBar  #pageDescription , .forum_view .titleBar p{
    color: @contentText;
}
.forum_view .titleBar #pageDescription a{
  color: @contentText;
  font-weight: bold;
}
.forum_view .titleBar h1 {
  color: @contentText;
  text-shadow: 0 0 0 transparent, 1px 1px 0 @pageBackground !important;
}
/* FORUM VIEW TITLE BAR ENHANCEMENTS */

2. Template thread_view

HTML:

/* THREAD VIEW TITLE BAR ENHANCEMENTS */
.thread_view .titleBar {
    border: 1px solid @primaryLighter;
    border-radius: 5px;
    background-color: @primaryLighterStill !important;
    margin:0px auto;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px 3px @textCtrlBackground inset;
}
.thread_view .titleBar  #pageDescription , .thread_view .titleBar p{
    color: @contentText;
}

.thread_view .titleBar #pageDescription a{
  color: @contentText;
  font-weight: bold;
}

.thread_view .titleBar h1 {
  color: @contentText;
  text-shadow: 0 0 0 transparent, 1px 1px 0 @pageBackground !important;
}
/* THREAD VIEW TITLE BAR ENHANCEMENTS */

3. Template member_notable

HTML:

/* MEMBER NOTABLE VIEW TITLE BAR ENHANCEMENTS */
.member_notable .titleBar {
    border: 1px solid @primaryLighter;
    border-radius: 5px;
    background-color: @primaryLighterStill !important;
    margin: 0 0 10px 0;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px 3px @textCtrlBackground inset;
}
.member_notable .titleBar  #pageDescription , .member_notable .titleBar p{
    color: @contentText;
}

.member_notable .titleBar #pageDescription a{
  color: @contentText;
  font-weight: bold;
}

.member_notable .titleBar h1 {
  color: @contentText;
  text-shadow: 0 0 0 transparent, 1px 1px 0 @pageBackground !important;
}
/* MEMBER NOTABLE VIEW TITLE BAR ENHANCEMENTS */

4. Template member_list

HTML:

/* REGISTERED MEMBER VIEW TITLE BAR ENHANCEMENTS */
.member_list .titleBar {
    border: 1px solid @primaryLighter;
    border-radius: 5px;
    background-color: @primaryLighterStill !important;
    margin: 0 0 10px 0;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px 3px @textCtrlBackground inset;
}
.member_list .titleBar  #pageDescription , .member_list .titleBar p{
    color: @contentText;
}

.member_list .titleBar #pageDescription a{
  color: @contentText;
  font-weight: bold;
}

.member_list .titleBar h1 {
  color: @contentText;
  text-shadow: 0 0 0 transparent, 1px 1px 0 @pageBackground !important;
}
/* REGISTERED MEMBER VIEW TITLE BAR ENHANCEMENTS */

Diese ganzen CSS-Schnipsel kopiert ihr nach Bedarf in die EXTRA.css und könnt euch bei eigenen Styles die Farben auch anpassen. Ich Empfehle auf die Farbpalette zurück zu greifen um einen einheitlichen Stil zu bekommen.
Weitere CSS-Schnipsel findet ihr im ZIP. Im Anhang noch ein paar Screenshots wie das ganze im Default Style aussieht.

Ihr könnt aber auch eine LIVE DEMO mit eigenen Style und Farbanpassung betrachten.

Wenn Fragen auftreten sollten einfach Fragen ..

Reaktionen: bt012ss, Alluidh, Lemminator und eine weitere Person

XF1.x Einfach die titleBar verschönern 1.0

Weitere Ressourcen von McAtze

Teilen

Aktuellste Rezensionen

Wir schützen deine Privatsphäre