Tło pod forum od logo do stopki

[Jane Weller]

Planuję nieco zmienić szatę graficzną na swoim forum, jednak o ile wstawienie graficznego tła nie jest dla mnie problemem, tak nie potrafię sprawić by środkowa część forum (gdzie są m.in. logo, linki nawigacji, fora, generalnie wszystko pomiędzy logo a stopką) miała jednolite czarne tło. Jako przykład efektu końcowego mogę podać Hogwart Dream.

Wystarczy wskazanie mi plików, kawałków kodu i dwa słowa o tym, co powinnam na co zmienić.

[Masia]

Ehm chyba chodzi ci o CSS i znacznik .bodyline lub inny. Zależnie w sumie od hostingu, więc może żeby dalej pomóc podasz go? D:

[Jane Weller]

Forum stoi na prywatnym serwerze, chociaż serwer tu nie ma nic do rzeczy, bo to kwestia skryptu, a pracuję na Przemie. Mogę najwyżej podać link to testowego forum na tym samym skrypcie. http://xrtestroom.cba.pl

Z tego co widziałam to problem tkwi w dodaniu klas do elementów w plikach tpl, a nie w samym pliku z CSS.

[Yatsu]

Dawno na przemo nic nie robiłem, ale to starsza wersja phpBB3, więc jestem pewien, że jest to rozwiązane niemal tak samo. Pliki .tpl to nic innego jak pliki html + kody wstawiane przy pomocy funkcji template z php. Wyglądają one np tak. {U_HOME}. Innymi słowy, wszystko możesz edytować z poziomu html, lub z poziomu css. Jednak Twoim problemem jest znalezienie właściwego elementu. Polecam pobranie Chrome, bądź po prostu odkrycie jednej z jego funkcji. Klikasz prawym przyciskiem strony na dowolnym elemencie swojej strony i wybierasz "Zbadaj element". Wyskoczy Ci na dole okienko z kodem strony. Możesz ten kod zmieniać w czasie rzeczywistym i testować zmiany kolorów etc. Z lewej strony masz kod html, zaś z prawej wszelkie dziedziczone właściwości css danego elementu (z różnych plików!). Niekiedy nazwa pliku css w którym znajduje się dana linijka nie jest wprost podana i trzeba wyszukać ją w np. Notepad++ korzystając z funkcji "Znajdź w plikach" (wskazujesz folder swojego stylu).

Jednak podczas szukania właściwego elementu najbardziej przyda Ci się fakt, że każdy wskazany w html obiekt, jest podświetlany. Wystarczy, że znajdziesz odpowiadający Ci kontener, i zmienisz go przy użyciu style="" w html, bądź znajdziesz Notepad++ fragment jego css z prawego okienka, bądź nawet nazwę elementu tj. jego class/id.

Ten element to <tbody> jednej z bezimiennych tabel w kodzie Twojego stylu. Prawdopodobnie znajduje się w overall_header.tpl, ponieważ obejmuje zawartość, która niewątpliwie znajduje się w tym pliku.



Polecam dodatkowo użyć box-shadow dla lepszego efektu

[Jane Weller]

Nigdy nie używałam tej opcji w przeglądarce. Chrome'a mój komputer nie znosi, ale Firefox też ma tę funkcję. Zobaczę co mi z tego wyjdzie. Dzięki za radę.

Polecam dodatkowo użyć box-shadow dla lepszego efektu

Jeszcze się z tym nie spotkałam, co robi i gdzie należy to wstawić?

[Yatsu]

Zwykła funkcja graficzna w cssie. Tutaj bez znajomości jej struktury możesz sobie ją wygenerować, potem ją wstawiasz normalnie do css, albo wklejasz wewnątrz style="...". http://css3gen.com/box-shadow/

[Jane Weller]

Dzięki za wyjaśnienie i namiary na generator. Jeśli wszystko pójdzie dobrze, to oszczędzi mi to zabawy z dostosowaniem logo w photoshopie.

[Jane Weller]

Udało mi się ogarnąć niemal wszystko wraz z dodaniem box shadow, ale mam problem ze stopką i nie potrafię jej "pokolorować". Na razie jedyny efekt jaki uzyskałam to czarne paski na całą szerokość ekranu. Ktoś ma jakiś pomysł jak to ogarnąć? Poniżej wrzucam zawartość overall_footer

Kod: Zaznacz cały

{ROTATE_BANNER_4}
   <br><br><div align="center"><span class="copyright"><br />
   {CLICK_HERE_TO_VIEW}</span></div><center>{BANNER_BOTTOM}</center></td></tr></table>{LOADING_FOOTER}{GENERATE_TIME}
<!-- BEGIN forum_thin -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END forum_thin -->
{ROTATE_BANNER_5}
</td>
    </tr>
    <tr>
      <td width="100%" align="center">
     
    </tr>
    <tr>
      <td width="100%" height="30">
      <p align="center"><br>
      </td>
      <td width="100%" height="30"><p align="center">{PAGE_LOAD_PLEASE_WAIT}
      <p align="center">Template created by
      <a target="_blank" href="http://szpak.vplus.pl" style="text-decoration: none">
      szpak</a>
      <p align="center">Modified by <b>XR TEAM</b> for <a target="_blank" href="http://xmenrpg.pigk.net" style="text-decoration: none">X-MEN RPG FORUM</a> &copy; 2010</td>
         </tr>
  </table>
  </center>
</div>
<!-- BEGIN advert -->
   </td>
      <td><img src="images/spacer.gif" border="0" height="1" width="2" alt=""></td>
      <td valign="top" width="{advert.ADVERT_WIDTH}" nowrap="nowrap" height="100%" class="bodyline">
         <table width="100%" cellspacing="0" cellpadding="2" border="0" style="height: 100%;">
            <tr>
               <td valign="top" width="100%" height="100%">{advert.ADVERT}</td>
            </tr>
         </table>
      </td>
      <!-- BEGIN advert_forum_thin -->
      <td width="100%"><img src="images/spacer.gif" border="0" height="1" width="100%" alt=""></td>
      <!-- END advert_forum_thin -->
   </tr>
</table>
<!-- END advert -->
<!-- BEGIN pagina_pages -->
<div id="s_pagina" style="display: none; background: {T_TR_COLOR1}; border: solid {T_TR_COLOR3} 1px; width: 50px; height: 37px; position: absolute; filter: alpha(opacity=90); -moz-opacity: 0.90;" >
   <table align="center" cellspacing="0">
      <tr>
         <td align="right" valign="top">
            <div style="display: inline; font-size: 8px; width: 10px; height: 6px; cursor: pointer; margin: 0px;" align="right" onclick="document.getElementById('s_pagina').style.display='none';"><b>X</b></div>
         </td>
      </tr>
      <tr>
         <td align="center">
            <form action="{BASE_URL}" method="post"><select name="start" onchange="this.form.submit();">{pagina_pages.OPTIONS}</select></form>
         </td>
      </tr>
   </table>
</div>
<!-- END pagina_pages -->
</body>
</html>

[Yatsu]

Kod: Zaznacz cały

<tr>
      <td width="100%" height="30">
      <p align="center"><br>
      </td>
      <td width="100%" height="30"><p align="center">{PAGE_LOAD_PLEASE_WAIT}
      <p align="center">Template created by
      <a target="_blank" href="http://szpak.vplus.pl" style="text-decoration: none">
      szpak</a>
      <p align="center">Modified by <b>XR TEAM</b> for <a target="_blank" href="http://xmenrpg.pigk.net" style="text-decoration: none">X-MEN RPG FORUM</a> &copy; 2010</td>
         </tr>

Krótko mówiąc, powyższy kod to totalny szit. Każdą linijkę w stopce tworzysz oddzielnym <p>... porażka. Dodatkowo to jest wstawione do tabelki co daje quadra-noob-style... Recepta jest prosta.Zajrzyj do index_body, czy do forum_body, jakoś tak to się nazywa w przemo... w tym pliku kasujesz zamknięcie <tbody> i <table> i przerabiasz tabelki z overall_footer.tpl żeby do tego pasowały... i na koniec domykasz. Wywal wszystkie <p>, użyj jednej komórki <td> na całą zawartość stopki. Generalnie, wklejone kody tych dwóch plików do jednego, mają dać spójny kod jednej wielkiej tabelki. Zrób backup tych plików przed edycją, bo nie raz popełnisz pewnie błąd. jak coś się rozjeżdżać będzie to znaczy, że popełniłaś po prostu błąd, i musisz szukać czego nie skasowałaś po drodze, albo np. czego nie domknęłaś