FlarumTR Hoşgeldin Banner özelleştirmesi

stack06

Gereksinimler

Direct Links ve Member Class Eklentisi

Aşağıdaki kodu Admin Panel > Temel Öğeler > Hoşgeldiniz mesajı kısmına ekleyin.

<div class="Hero-subtitle_buttons"><a class="Button Button--primary" href="/signup" active="false" type="button" title="Sign up"><span class="Button-label">KAYDOL</span></a><a class="Button Button--secondary" href="/login" active="false" type="button" title="Login"><span class="Button-label">GiRiŞ YAP</span></a></div>

Aşağıdaki CSS kodlarını Admin Panel > Görünüm > Harici Stiller bölümüne ekle

@media (max-width: 767px){
.Hero.WelcomeHero {
    background-position: left;
}}

@media (max-width: 767px){
.Hero.WelcomeHero .container {
    height: 300px;
}}

@media (max-width: 767px){
.Hero.WelcomeHero .containerNarrow {
    width: calc(92%);
    padding: 12px !important;
}}

@media (max-width: 767px){
.Hero.WelcomeHero h2 {
    font-size: 32px;
    line-height: 1;
}}

.Hero.WelcomeHero {
    margin-top: -1px;
    background: #f8f8f8;
    text-align: left;
    color: #333;
    background-image: url(https://flarumtr.com/assets/files/2021-05-15/1621095149-896367-basliksiz-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.Hero.WelcomeHero .container {
    height: 370px;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

.Hero.WelcomeHero .containerNarrow {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.2);
    padding: 24px;
    border-radius: 6px;
    max-width: 540px;
}

.Hero.WelcomeHero h2 {
    margin: 0;
    text-transform: uppercase;
    line-height: 42px;
    color: white;
    font-size: 30px;
    font-weight: 700
}

.WelcomeHero .Hero-subtitle {
    margin: 8px 0 0;
    line-height: 1.5em;
    color: white;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
}

.Hero-subtitle_buttons {
    margin-top: 20px;
}

.Button.Button--secondary {
    background: transparent;
    color: #E7672E;
    border: 1px solid #E7672E;
}

.Hero-subtitle_buttons .Button:not(:first-child) {
    margin-left: 8px;
}

.Hero-close {color: #fff}

.logged-in .Hero-subtitle_buttons{
display: none;
}