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

[kondzio]

Gotowy kod do MyBB na ogłoszenia na forum. Kod w formie HTML i CSS do wklejenia w odpowiednie miejsce.

HTML

Spoiler

<div class="bg_border ogl_bottom" id="ogl">
    <span class="ogl_icon"><i class="fa fa-bullhorn fa-2x fa-fw"></i></span>
    <h3 class="ogl_text">Ogłoszenia</h3>
    <ul class="ogl_list">
    
        <li class="ogl_sidebar ogl_mess mess_pos">            
            Ruszył konkurs na forum! Kliknij <a href="">tutaj</a> 
        </li>
        <li class="ogl_sidebar ogl_mess mess_pos">            
            Zapraszamy do głosowania na nasze serwery! 
        </li>
        <li class="ogl_sidebar ogl_mess mess_neg">            
            Rekrutacja na moderatora ruszyła! 
        </li>
    
    </ul>
    </div>

CSS

Spoiler

#ogl {
    margin-top: 30px;
    position: relative;
    min-width: 295px;
    max-width: 100%;
}

.bg_border {
    border: 1px solid #e0e0e0;
    box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
    border-radius: 3px;
    background-color: #fff;
}

.ogl_bottom {
    margin-bottom: 15px;
}

.ogl_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #558b2f;
    color: #fff;
    border-radius: 50%;
    padding: 10px;
    height: 50px;
    width: 50px;
    top: -30px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    transform: rotate(-20deg);
}

.ogl_text {
    color: #8d9aa6;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  font-size: 14px;
  margin-top: -20px;
  margin-bottom: 10px;
}

.ogl_list {
    margin: 0;
    padding: 5px;
    list-style: none;
}

#ogl_sidebar ul > li:last-child {
    margin-bottom: 10px;
}

#ogl_sidebar ul > li {
    margin: 3px 10px 5px 10px;
    margin-bottom: 5px;
}

.ogl_mess {
    border-radius: 2px;
    position: relative;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
    padding: 10px;
}

.mess_pos {
    background: #478f79;
}

.mess_neg {
    background: #cc5353;
}

[kondzio]

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.