XF1.x Einfach die titleBar verschönern 1.0

Ein paar Styletipps für einen Block um die titlebar.

  1. McAtze
    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 ..

    Grafiken

    1. forum_view.jpg
    2. member_list.jpg
    3. members_notable.jpg
    4. news_feed_page_global.jpg
    5. online_list.jpg
    6. resource_description.jpg
    7. resource_index.jpg
    8. thread_view.jpg

Letzte Rezensionen

  1. Lemminator
    Lemminator
    5/5,
    Version: 1.0
    Top !
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden