Szablon
7dana, jak większość gotowych szablonów bazuje na tabelach, co nie odpowiada dzisiejszym standardom tworzenia szablonów [plików HTML].
Dlatego wymiana grafiki w poszczególnych fragmentach kodu HTML, musi odpowiadać oryginałowi.
Można również przeprowadzić modyfikację szablony, co wiąże się z dobrą znajomością HTML.
Jeżeli już decydujemy się na modyfikację, to starajmy się pozbyć wszystkich tabel, generowanie strony można obarczyć w 100% plik
.CSSPozycja poszczególnych grafik, czy też kolorystyka jest sprawą inwidualną, dlatego mogę podsunąć Ci tylko pewne wskazówki.
Otóż oryginalne logo w szablonie 7dana ma 450px x 100px i znajduje się w tabeli z dwoma polami, po lewej stronie.
W drugim polu, po prawej stronie jest umieszczona następna tabela, wyszukiwarki.
Wklejenie szerszego loga automatysznie rozszerzy całą tabelę.
[ Dla unaocznienia, patrz obrazek u dołu]
Spróbuj obrazek nowego logo, użyć jako tło tabeli.
Krok 1.Otwórz plik
home.html, ścieżka
/templates/7dana/home.htmli odszukaj fragment kodu
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablehead">
<tr>
<td><img src="{template_url}/images/header_logo.jpg" alt="" /></td>
<td align="right">
<form method="post" action="{url_search}">
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td>
<input type="text" name="search_keywords" class="logininput"/>
</td>
<td>
<input type="submit" value="{lang_search}" class="button" name="submit" />
</td>
</tr>
<tr valign="top">
<td colspan="2"> <a href="{url_search}" class="smalltext">{lang_advanced_search}</a></td>
</tr>
</table>
</form>
</td>
<td align="right" width="6"> </td>
</tr>
</table>
który odpowiada za nagłówek i zmień go na
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablehead">
<tr>
<td align="right">
<form method="post" action="{url_search}">
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td>
<input type="text" name="search_keywords" class="logininput"/>
</td>
<td>
<input type="submit" value="{lang_search}" class="button" name="submit" />
</td>
</tr>
<tr valign="top">
<td colspan="2"> <a href="{url_search}" class="smalltext">{lang_advanced_search}</a></td>
</tr>
</table>
</form>
</td>
<td align="right" width="6"> </td>
</tr>
</table>
Krok 2.Następnie otwórz plik
style.css, ścieżka
/templates/7dana/style.css i odszukaj klasę
.tablehead
{
background-color: #e8e8e8;
color: #4B4B4B;
border-bottom: 1px solid #2D2D2D;
}
i zmień na
.tablehead
{
background-color: #e8e8e8;
color: #4B4B4B;
border-bottom: 1px solid #2D2D2D;
background-image:url('images/header_logo.jpg');
background-repeat:no-repeat;
}
Krok 1 musisz powtórzyć w plikach szablonu 7dana:
categories.htmldetails.htmlerror.htmllightbox.htmlmember.htmlpostcard_create.htmlregister.htmlsearch.htmltop.htmlLogo powinno mieć 760px szerokości, wysokość dowolna.
Jest to oczywiście jeden przykład z wielu możliwości.