Шапка форума при разных разрешениях экрана. [решено]

Автор THEKILLERS, 27 июля 2010, 11:33:53

« назад - далее »

0 Пользователи и 1 гость просматривают эту тему.

THEKILLERS

Помогите плиз! Не знаю как сделать такое. Вообщем сейчас у меня шапка выглядит вот так:

Справа виден резкий стык (я просто забэкграундил последнюю полоску картинки природы). Так будет выглядеть при разных разрешениях экрана, но это некрасиво. Я хочу сделать чтобы природа (чтобы не бэкграунд, а оригинальная картинка) была на всю ширину при любом разрешении экрана. Это возможно так сделать? Выслушаю любые советы. Спасибо.

Mavn

возьми картинку длиной не менее 1920 пикселей сделай ее бэкграундом а поверх лого цепляй
SimpleMachines Russian Community Team
п.1 Пройду курсы гадалок для определения исходного кода по скриншоту.

п.2 У вас нет желания читать правила раздела, у меня нет желания одобрять темы, которые не соответствуют этим правилам.

THEKILLERS

Mavn, спасибо, так и сделал. Я в файл /Themes/default/images/theme/main_block.png вставил картинку. Осталась только одна проблема - что делать с левой частью (слева на картинке стык во вложении).

0daliska

#3
Цитата: THEKILLERS от 27 июля 2010, 14:38:00
Mavn, спасибо, так и сделал. Я в файл /Themes/default/images/theme/main_block.png вставил картинку. Осталась только одна проблема - что делать с левой частью (слева на картинке стык во вложении).
Поиграть с позицией бэкграунда (значение -240px)
в #header div.frame {
background:url("../images/theme/main_block.png") no-repeat scroll 100% -240px transparent;
display:block;
padding:5px 20px 0 0;
}

Но это все равно не выход, и не получится для всех подогнать... Совет не правильный ... Проверила, ерунда полная получается...
А вообще Вы  в бэкграунд картинку почти в 500Кб засунули... Она грузится целую вечность... Это Вас не смущает?
--------
Или же перерисовать шапку, чтобы на расстоянии в 20 пикселей от левого края было ровно и деревья и поле... Хотя тоже не выход, ибо при разном разрешении будет разное отображение...
Если такую шапку прописывать, я ее прописывала бы за телом форума... То бишь в бэкграунд ... Сам форум бы опускала на нужное количество пикселей вниз и Все... И лого, разумеется туда же из форума вынесла бы...
Уехала отдыхать. Сейчас без интернета до 1 августа. Приеду - выполню все обещания
® For members of Russian community (simplemachines.ru) only

THEKILLERS

0daliska, спасибо за советы и за замечание насчет размера шапки, как-то не подумал об этом. Вообщем оставил я как было, только оборванные края добавил. Картинка стала весить 140 кб, вроде не слишком много. На всю ширину конечно было бы лучше, но хз как это сделать. Впринципе итак пойдет как сейчас (картинка во вложении).

THEKILLERS

Цитата: 0daliska от 27 июля 2010, 15:18:17
Если такую шапку прописывать, я ее прописывала бы за телом форума... То бишь в бэкграунд ... Сам форум бы опускала на нужное количество пикселей вниз и Все... И лого, разумеется туда же из форума вынесла бы...
Идея действительно хорошая. Достаточно ли будет просто изменить css темы или нет? Просто в css я еще че-то смогу, а вот в php я ноль.

THEKILLERS

Кстати встречал такие скрипты на js, которые изменяют ширину шапки в зависимости от разрешения экрана. Может быть есть что-то подобное для smf? Хак или мод какой-нить?

THEKILLERS

Я нашел решение!!! :D Шапка будет сидеть как родная, как в моем посте (http://www.simplemachines.ru/index.php?topic=10881.msg76869#msg76869), только без стыка! Как сделаю отпишусь здесь.
P.S. Firebug-вещь!

Mavn

THEKILLERS
Правила форума прочти а то сделаю так что все сообщения будут премодерируемые!
последнее китайское предупреждение
SimpleMachines Russian Community Team
п.1 Пройду курсы гадалок для определения исходного кода по скриншоту.

п.2 У вас нет желания читать правила раздела, у меня нет желания одобрять темы, которые не соответствуют этим правилам.

THEKILLERS

Цитата: Mavn от 27 июля 2010, 17:42:00
THEKILLERS
Правила форума прочти а то сделаю так что все сообщения будут премодерируемые!
последнее китайское предупреждение
Я извиняюсь, больше так не буду...
Публикую свое решение для шапки форума при разных разрешениях экрана для темы Curve. В файле /Themes/default/css/index.css необходимо поменять значение padding-left:
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -240px;
padding-left: 20px; <---поменять на 3px!!!
}

Далее в файле /Themes/default/images/theme/main_block.png надо поменять круглые углы на квадратные в этом месте:

Разумеется и справа в этом блоке также надо угол сделать квадратным. Должно получиться так (я увеличил рисунок, на прозрачный фон не обращайте внимания, я просто вырезал свой рисунок):

Вот что получилось у меня:

Да, забыл сказать еще - рисунок своей шапки надо вставлять в файл /Themes/default/images/theme/main_block.png в тот блок, в котором надо изменить углы на квадратные, желательно на всю ширину main_block.png если вы хотите чтобы шапка нормально отображалась при любых разрешениях экрана. Только имейте ввиду, что на экранах с небольшим разрешением шапка отобразится не вся, а только ее часть. Лого естественно вставлять через админку, чтобы оно отображалось на всех разрешениях экрана.
На этом тему можно закрыть.

Validoll

Ну что ж, маэстро - я  Вас поздравляю!  :) Думаю скоро темы и вовсе перестанет быть на себя похожа и Ваш форум обретёт собственную уникальность...
Занимаюсь визуализацией модов и созданием рисунков-концептов для модификаций в разработке.
Что-то не работает? Проверьте права доступа к файлам.

david.xard

Что у меня не правильно? Помогите, пожалуйста. Делаю изменения в теме SimplyBlue.
В архиве index.css и main_block.png которые я заменял по фтп в папке данной темы. Но шапка не отображается...

GeorG

А где именно не появляется, что вы заменяли в index.css? Пробовали чистить кэш? Пробовали даный способ - http://www.simplemachines.ru/index.php?topic=12839.msg95701#msg95701 мне кажется вы не совсем понимаете, как там всё работает.
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

david.xard

Да, я в этом мало понимаю - я менял шапку, как написано здесь: http://www.simplemachines.ru/index.php?topic=12466.msg95448#msg95448
У тех, у кого разрешение выше, на втором скрине видно, что она уезжала.
В index.css я сменил значение вот так:

/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
   margin: 0 auto;
   min-width: 780px;
   max-width: 2300px;
    background: none repeat scroll 0 0 #DBE3EA;
    border: 1px solid #C7D2DB;
    border-radius: 6px 6px 6px 6px;
   padding: 4px;
}
Она стала фиксированной у всех, но соответственно при разных разрешениях она была больше у тех у кого мелкое разрешение экрана и наоборот.
Можно сделать ее 1024*768, но я не знаю как сделать, чтобы она растягивалась у всех при разном разрешени.
Я знаю, метод видимо лузерский, но я профан, и метод этот придумал сам.
С методом выше - разрисовывал в фотошопе файл main_block.png - он меняет мне лишь подвал информациооной панели, саму шапку - нет. Видимо тема такая у меня...
Так что в общем я запутался - тяжеловато все это осваивать с нуля)) Вордпресс попроще как-то  :)

Прилаживаю мой индекс.ссс - может кто поймет что я там нахимичил и даст мне за это леща))

GeorG

А вот зачем вы применили no-repeat и scroll для цвета, да ещё указали координаты?
Это параметры для фонового изображения:
no-repeat - запрещает фоновому изображению повторяться.
scroll - фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию)


И вообще, вы читали для чего нужен этот код:
Цитировать/* This division wraps the entire forum when a forum width is set. */

Вам лучше вот здесь сперва почитать http://htmlbook.ru/
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

david.xard

Я сменил цвет на цвет темы, чтобы смотрелось органично, потому что у меня прозрачная шапка. А скролл - я уж и сам не помню, эксперементировал видимо... Даже не помню что стояло... Как раз на хтмл и читал) А что поменять, чтобы мой хеадер.пнг при разных разрешениях растягивался? В каком блоке и какое значение? Хочу сделать 1024*768, а при выше растяжение.

david.xard

up/

/* some styling for header */
#top_section
{background: #00375d url(../images/header.png) no-repeat;
   min-height: 120px;
   overflow: inherit;
   padding: 5px;

;
}
По сути я так понял что тут что-то нужно поменять добавить, чтобы картинка расширялась под разные разрешения, но кто подскажет: что именно?

GeorG

Тут непонятно что вы вообще делаете, и что из себя, представляет ваша шапка, там может быть, очень много разных решений, от растягивания по объему, до того, что её делать из нескольких частей.
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

david.xard

Ну вот сверху облака, планеты и т.п. это файл header.png - его я и сделал - он прозрачный на синем фоне. Пытаюсь сделать так, чтобы у всех он при разных разрешениях растягивался.
Вот скрин шапки с изображением, а вот файл-изображение отдельно. Так вот мне надо чтобы этот файл изображение хэадер.пнг при разных разрешениях растягивался в ширину или под них адаптировался.
А то оно меня сейчас 960 пикселей, и смотрится это так на 1024*768 http://upyourpic.org/images/201106/2vi7ide4u7.jpg.html и так на 1600*900 https://www.simplemachines.ru/radikal/s60/i170/1106/38/4f7b574a7e5e.jpg

GeorG

Если вы его тупо растяненте (т.е., увеличете объём в ширину), то при расширении 1600*900 картина будет неказистой, и примерно следующего вида (см. вложение)
Вы хотите именно этого? Если да, то лучше наверно в таблицу запихать, как фон, или просто фоном через стили с параметром repeat-x.
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

david.xard

Ясно. В общем никак не получится... Жаль что как описано в теме не получается совсем нуникак...


GeorG

Получится, но тогда надо делать картинку большего разрешения, и она будет наезжать  на надписи, и аватар пользователя. Что была не проблема для автора темы, с вашей шапкой, это будет выглядеть не айс. Потому, каждая шапка, делается индивидуально, и одинаковых рецептов, может и не быть.
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

ArtemM

#22
Подскажите, пожалуйста, как поменять логотипы сторонних тем, при нажатии на которые осуществляется переход на главную страницу форума.
Не могу понять.

Например:


david.xard

Цитата: ArtemM от 08 августа 2011, 23:30:02
Подскажите, пожалуйста, как поменять логотипы сторонних тем, при нажатии на которые осуществляется переход на главную страницу форума.
Не могу понять.

Например:


Конфигурация - Текущая тема оформления - Настройки тем оформления - Адрес (URL) изображения логотипа:

ArtemM

Вот в том то и дело, нет такого, нигде, есть  Адрес (URL) картинок /Themes/cracked_2_0/images.
Туда я копировал свой логотип, но ничего не поменялось.

GeorG

ЦитироватьПодскажите, пожалуйста, как поменять логотипы сторонних тем, при нажатии на которые осуществляется переход на главную страницу форума.
Посмотрите название графического файла, его путь, и замените его своим... Кажется, тут логически можно к этому прийти.
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

ArtemM

#26
Цитата: GeorG от 09 августа 2011, 07:08:37
Посмотрите название графического файла, его путь, и замените его своим... Кажется, тут логически можно к этому прийти.

На свое логическое мышление не жаловался  :) , а вот на знания в данной области мог бы. Но и тех знаний, которые у меня есть, хватило сделать то, что вы говорите. Слово на картинке, показывает только ссылку на главную страницу форума, и поэтому мне трудно понять, что это графика или просто текст. Перерыл все файлы темы, пока не нашел решения.


10.06
Все нашёл, я этот файлик. Только вот, уважаемый GeorG, не по названию графического файла, его пути. Но все равно спасибо.

GeorG

Смотреть пути и имя файла, можно используя firebug, как это делать, описано здесь - http://www.simplemachines.ru/index.php?topic=7551.0
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru