Einfach die titleBar verschönern

XF1.x Einfach die titleBar verschönern 1.0

Keine Rechte zum Download
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 ..
  • forum_view.jpg
    forum_view.jpg
    222,7 KB · Aufrufe: 334
  • member_list.jpg
    member_list.jpg
    202,8 KB · Aufrufe: 318
  • members_notable.jpg
    members_notable.jpg
    177,6 KB · Aufrufe: 312
  • news_feed_page_global.jpg
    news_feed_page_global.jpg
    162,6 KB · Aufrufe: 313
  • online_list.jpg
    online_list.jpg
    175,6 KB · Aufrufe: 323
  • resource_description.jpg
    resource_description.jpg
    322 KB · Aufrufe: 316
  • resource_index.jpg
    resource_index.jpg
    221,5 KB · Aufrufe: 316
  • thread_view.jpg
    thread_view.jpg
    166,7 KB · Aufrufe: 313
Autor
McAtze
Downloads
6
Aufrufe
383
Erstellt am
Letzte Bearbeitung
Bewertung
5,00 Stern(e) 1 Bewertung(en)

Weitere Ressourcen von McAtze

Aktuellste Rezensionen

Top !
Zurück
Oben