kondzio 5 Maja 2019 5 Maja 2019 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; } Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
kondzio 3 Czerwca 2019 Autor 3 Czerwca 2019 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. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Kontynuuj dyskusję
Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.