Поменять шапку

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
Рок

Поменять шапку

Рок 04 май 2015, 22:13 Сообщение

Добрый день!
Можно ли в стиле AeroBlueX убрать резиновую шапку, состоящую из трех сборных частей и поставить обычную шапку? А кнопки убрать под низ шапки?
Вот на всякий случай код хидера:
Развернуть

Вот на эту картинку не обращайте внимания, стоит на время праздника:
Развернуть

Аватара пользователя
romaamor

Поменять шапку

romaamor 05 май 2015, 14:41 Сообщение

Рок писал(а):Источник цитаты Можно ли

Можно. А что Вы подозреваете под обычной ? Статичная ? Фиксированная ?

Аватара пользователя
CabinetAdmin

Поменять шапку

CabinetAdmin 05 май 2015, 16:16 Сообщение

Вот в этом месте:

Код: Выделить всё

<td width="243" height="80" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazhon.jpg');"><div id="midlink"><a href="/index.php"><span class="headw">{SITENAME}</span></a><br /> <span class="genmedw">{SITE_DESCRIPTION}</span></div></td>

достаточно удалить width="243".
Это:

Код: Выделить всё

<td style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazh.jpg');">&nbsp;</td> <td width="494" height="80" align="right" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazhon.jpg');"> <div class="g-plusone" data-size="medium" data-href="http://coinsspb.com/"></div> <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH --> <div id="midlink"> <div id="search-box"> <form action="{U_SEARCH}" method="post" id="search"> <fieldset class="nb"> <input name="keywords" style="opacity:0.8;filter:alpha(opacity=80)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" type="text" class="inputbox search" id="keywords" title="{L_SEARCH_KEYWORDS}" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" maxlength="50" /> <input class="nb" style="opacity:0.8;filter:alpha(opacity=80)" name="submit" type="image" src="{T_THEME_PATH}/images/search.gif" align="absmiddle" /><br /> {S_SEARCH_HIDDEN_FIELDS} </fieldset> </form> </div> </div> <!-- ENDIF --> </td>

удалить.

Рок писал(а):Источник цитаты А кнопки убрать под низ шапки?

Кнопки, я так понимаю которая гугл плюс? Вот она:

Код: Выделить всё

<div class="g-plusone" data-size="medium" data-href="http://coinsspb.com/"></div>

Можете поставить между:

Код: Выделить всё

<div id="bottomlink"><span class="genmedw">

Будет там где ссылки на faq, альбомы и тд.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Поменять шапку

Рок 05 май 2015, 18:15 Сообщение

Спасибо!
А как грамотно избавиться от трех маленьких вставок шапки сверху и снизу. Это которые td widtch=295 , 458, 228 519 и кот. по середине td style = "background"
И как сохранить стандартные кнопки Новых ЛС: 0, Личный раздел, вход/выход, альбомы, фак, медали и т.д.?
Их можно и под шапку убрать.
И как можно сделать так, чтобы шапка (Вот я вставил картинку) и она была одинаковой на разных мониторах, по размеру?

Да и почему то шапку разделяет на двое, может размер картинки еще увеличить?Изображение

Аватара пользователя
CabinetAdmin

Поменять шапку

CabinetAdmin 05 май 2015, 20:09 Сообщение

Ну да, на небольшом экране картинка вся влезет, а на больших повторяется. Можно добавить background-size: cover; и изображение будет масштабироваться по ширине. В итоге будет выглядеть так:

Код: Выделить всё

<td width="295" height="32" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/terra2.jpg'); background-size: cover;">

Ну или подбирать изображение так, чтобы швы были не сильно заметны.

Рок писал(а):Источник цитаты А как грамотно избавиться от трех маленьких вставок шапки сверху и снизу.

После <div id="wrapheader"> блок:

Код: Выделить всё

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="295" height="32" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/terra2.jpg');"> <div id="toplink"> <!-- IF not S_IS_BOT --> <!-- IF S_USER_LOGGED_IN --> <!-- IF S_DISPLAY_PM --><span class="genmedw"><a class="genmedw" href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></span> <!-- ENDIF --> <!-- ENDIF --> </div></td> <td style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/terratestobrez2.jpg');">&nbsp;</td> <td width="458" height="32" align="right" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/terratestobrez2.jpg');"> <div id="toplink"> <!-- IF not S_USER_LOGGED_IN --><span class="genmedw"><a class="genmedw" href="{U_REGISTER}">{L_REGISTER}</a> &bull; </span><!-- ENDIF --> <span class="genmedw"><a class="genmedw" href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></span> <!-- IF S_USER_LOGGED_IN --><!-- ENDIF --> <!-- ENDIF --> </div> </td> </tr> </table>

заменить на:

Код: Выделить всё

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="32" align="right"> <div id="toplink"> <!-- IF not S_USER_LOGGED_IN --><span class="genmedw"><a class="genmedw" href="{U_REGISTER}">{L_REGISTER}</a> &bull; </span><!-- ENDIF --> <span class="genmedw"><a class="genmedw" href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></span> <!-- IF S_USER_LOGGED_IN --><!-- ENDIF --> <!-- ENDIF --> </div> </td> </tr> </table>


И нижний:

Код: Выделить всё

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="228" height="32" align="left" class="genmedw" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/terra2.jpg');"><div id="bottomlink"> <!-- IF S_USER_LOGGED_IN --><a class="genmedw" href="{U_PROFILE}">{L_PROFILE}</a><!-- ENDIF --> <!-- IF U_RESTORE_PERMISSIONS --> <a class="genmedw" href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF --> <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF --> </div> </td> <td style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/terratestobrez2.jpg');">&nbsp;</td> <td width="519" align="{S_CONTENT_FLOW_END}" class="genmedw" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/terratestobrez2.jpg');"> <div id="bottomlink"><span class="genmedw"> <!-- IF S_CONTACT_ENABLED --><a class="genmedw" href="{U_CONTACT}"><img src="/styles/subsilver2/theme/images/icon_mini_contact.gif" width="12" height="13" alt="{L_CONTACT_BOARD_ADMIN_SHORT}" /> Связь по e-mail</a><!-- ENDIF --> &bull; <a class="genmedw" href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a> &bull; <a class="genmedw" href="{U_FAQ}">{L_FAQ}</a> &bull; <a class="genmedw" href="{U_MEDALS}">{L_MEDALS_VIEW}</a> <!-- IF not S_IS_BOT --><!-- IF S_DISPLAY_MEMBERLIST --> &bull; <a class="genmedw" href="{U_MEMBERLIST}">{L_MEMBERLIST}</a><!-- ENDIF --><!-- IF S_DISPLAY_SEARCH --> &bull; <a class="genmedw" href="{U_SEARCH}">{L_SEARCH}</a><!-- ENDIF --><!-- ENDIF --> </span></div> </td> </tr> </table>

заменить на:

Код: Выделить всё

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="228" height="32" align="left" class="genmedw"><div id="bottomlink"> <!-- IF S_USER_LOGGED_IN --><a class="genmedw" href="{U_PROFILE}">{L_PROFILE}</a><!-- ENDIF --> <!-- IF U_RESTORE_PERMISSIONS --> <a class="genmedw" href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF --> <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF --> </div> </td> <td width="519" align="{S_CONTENT_FLOW_END}" class="genmedw"> <div id="bottomlink"><span class="genmedw"> <!-- IF S_CONTACT_ENABLED --><a class="genmedw" href="{U_CONTACT}"><img src="/styles/subsilver2/theme/images/icon_mini_contact.gif" width="12" height="13" alt="{L_CONTACT_BOARD_ADMIN_SHORT}" /> Связь по e-mail</a><!-- ENDIF --> &bull; <a class="genmedw" href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a> &bull; <a class="genmedw" href="{U_FAQ}">{L_FAQ}</a> &bull; <a class="genmedw" href="{U_MEDALS}">{L_MEDALS_VIEW}</a> <!-- IF not S_IS_BOT --><!-- IF S_DISPLAY_MEMBERLIST --> &bull; <a class="genmedw" href="{U_MEMBERLIST}">{L_MEMBERLIST}</a><!-- ENDIF --><!-- IF S_DISPLAY_SEARCH --> &bull; <a class="genmedw" href="{U_SEARCH}">{L_SEARCH}</a><!-- ENDIF --><!-- ENDIF --> </span></div> </td> </tr> </table>



Получается так, просто удаляем неиспользуемые таблицы и изображения из фона оставшихся.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Поменять шапку

Рок 05 май 2015, 21:46 Сообщение

Спасибо большое, с шапкой более менее разобрался. И маленькие блоки приспособил =)

А можно ли в шапке оставить вот этот поиск?

Изображение

И можно ли поменять цвет к названию и описанию форума?

Изображение

Аватара пользователя
CabinetAdmin

Поменять шапку

CabinetAdmin 06 май 2015, 14:45 Сообщение

В теме:

Код: Выделить всё

.headw { color: #FFFFFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; margin: 1px 1px; font-size: 2.0em; } .genmedw { color: #FFFFFF; margin: 1px 1px; font-size: 1em; }


color: #FFFFFF;. Первый - имя, второй - описание.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Поменять шапку

Рок 06 май 2015, 20:14 Сообщение

Спасибо! Все как надо!
А про поиск не подскажите?
Рок писал(а):
А можно ли в шапке оставить вот этот поиск?

Изображение

Аватара пользователя
CabinetAdmin

Поменять шапку

CabinetAdmin 06 май 2015, 20:44 Сообщение

Можно, нужно добавить ранее удалённый:

Код: Выделить всё

<div id="search-box"> <form action="{U_SEARCH}" method="post" id="search"> <fieldset class="nb"> <input name="keywords" style="opacity:0.8;filter:alpha(opacity=80)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" type="text" class="inputbox search" id="keywords" title="{L_SEARCH_KEYWORDS}" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" maxlength="50" /> <input class="nb" style="opacity:0.8;filter:alpha(opacity=80)" name="submit" type="image" src="{T_THEME_PATH}/images/search.gif" align="absmiddle" /><br /> {S_SEARCH_HIDDEN_FIELDS} </fieldset> </form> </div>

только теперь поставить его перед:

Код: Выделить всё

<div id="midlink"><a href="/index.php"><span class="headw">{SITENAME}</span></a><br />
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Поменять шапку

Рок 06 май 2015, 22:07 Сообщение

Все получилось! Спасибо огромадное! Очень вам признателен!

Аватара пользователя
Рок

Поменять шапку

Рок 07 май 2015, 21:03 Сообщение

И еще вопросик: можно ли сделать шапку кликабельной, чтобы страницу обновляла, как название форума?

Аватара пользователя
romaamor

Поменять шапку

romaamor 08 май 2015, 00:52 Сообщение

Конечно.CabinetAdmin, расскажет как.

Аватара пользователя
romaamor

Поменять шапку

romaamor 08 май 2015, 00:52 Сообщение

Конечно.CabinetAdmin, расскажет как.

Аватара пользователя
CabinetAdmin

Поменять шапку

CabinetAdmin 08 май 2015, 15:00 Сообщение

romaamor, а сам чего не рассказал?

Рок
Вот это:

Код: Выделить всё

<td height="180" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/shapkanfss3.png');">

поменять на:

Код: Выделить всё

<td height="180" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/shapkanfss3.png');" onclick="window.location = '{U_INDEX}'">


Не уверен, но скорее всего, блок поиска станет недоступен, т.е. при нажатии на поле ввода будет срабатывать ссылка.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Поменять шапку

Рок 09 май 2015, 11:27 Сообщение

К сожалению, поиск не доступен становится... ну да ладно.
CabinetAdmin писал(а):Ну да, на небольшом экране картинка вся влезет, а на больших повторяется. Можно добавить background-size: cover; и изображение будет масштабироваться по ширине.

А есть ли такой код, который будет масштабировать по высоте?

Всех С Праздником Победы!!!



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя