[uPster] Ogłoszenia na forum. Poradnik MyBB.

[ups 1 225]

Ogłoszenia na forum

Ogłoszenia na forum w których można zmieniać zdjęcie w tle

Dzisiaj przedstawiam wam ogłoszenia na forum.

Przechodzimy do Style i Szablony Szablony Twój szablon Strona główna index i wklejamy ten kod:

Spoiler

<table class="oglborder" celpadding="5" border="0" cellspacing="0">
        <tr>
        <td class="oglbg">

            <div class="ogl ogl1-img">
                <div class="ogl-text">
                    Poszukujemy serwerów! Jeśli jesteś zainteresowany, napisz <a href="#">tutaj.</a>
                </div>
            </div>
            
            <div class="ogl ogl2-img">
                <div class="ogl-text">
                    Rekrutacja na moderatora została otwarta!
                </div>
            </div>
            
            <div class="ogl ogl3-img">
                <div class="ogl-text">
                    Brak ogłoszeń.
                </div>
            </div>
            
            <div class="ogl ogl-marg ogl4-img">
                <div class="ogl-text">
                    Brak ogłoszeń.
                </div>
            </div>

        </td>
        </tr>
    </table>

Cofamy się do Style i Szablony i wybieramy Style Twój styl global.css lub utwórz nowy arkusz CSS i wklej ten kod:

Spoiler

.oglborder {
    width: 100%;
    margin: auto auto;
    border-radius: 6px;
}

.oglbg {
    padding: 25px;
    border-radius: 20px;
    background: #1212129e;
}

.ogl {
    font-size: 16px;
    background: #514a4a3b;
    border-radius: 20px;
    float: left;
    margin-right: 30px;
    padding: 0px;
    width: 340px;
    height: 300px;
}

.ogl-text {
    font-size: 15px;
    font-weight: 600;
    font-family: Arial;
    bottom: 0;
    margin-top: 45%;
    background: #0000005e;
    padding: 19px;
    text-shadow: 1px 1px 1px #000;
    color: #fff;
}

.ogl-marg {
    margin: 0;
}

.ogl1-img {
    background: url(/images/ogl/defaultimg.png); /* tutaj zmieniasz tło */
    background-size: cover;
    background-position-x: -47px;
    opacity: .7;
    transition: all .4s ease;
    box-shadow: 1px 1px 20px #000;  
}

.ogl2-img {
    background: url(/images/ogl/defaultimg.png);
    background-size: cover;
    background-position-x: -47px;
    opacity: .7;
    transition: all .4s ease;
    box-shadow: 1px 1px 20px #000;
}

.ogl3-img {
    background: url(/images/ogl/defaultimg.png);
    background-size: cover;
      background-position-x: -47px;
    opacity: .7;
    transition: all .4s ease;
    box-shadow: 1px 1px 20px #000;
}

.ogl4-img {
    background: url(/images/ogl/defaultimg.png);
    background-size: cover;
      background-position-x: -47px;
    opacity: .7;
    transition: all .4s ease;
    box-shadow: 1px 1px 20px #000;
}

Teraz pobieramy plik z załącznika i wrzucamy do naszego serwera FTP

oglimg.rar

Jeśli chcemy mieć różne zdjęcia w tle, możemy podmienić link do zdjęć z kodu CSS powyżej na te, które są w folderze images/ogl lub wgrać własne.

Natomiast, jeśli nie chcemy mieć żadnych zdjęć w tle, zostawiamy te linki jak są powyżej.