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

[THEKILLERS]

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

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

[Mavn]

возьми картинку длиной не менее 1920 пикселей сделай ее бэкграундом а поверх лого цепляй

[THEKILLERS]

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

[0daliska]

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 пикселей от левого края было ровно и деревья и поле... Хотя тоже не выход, ибо при разном разрешении будет разное отображение...
Если такую шапку прописывать, я ее прописывала бы за телом форума... То бишь в бэкграунд ... Сам форум бы опускала на нужное количество пикселей вниз и Все... И лого, разумеется туда же из форума вынесла бы...

[THEKILLERS]

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

[THEKILLERS]

Если такую шапку прописывать, я ее прописывала бы за телом форума... То бишь в бэкграунд ... Сам форум бы опускала на нужное количество пикселей вниз и Все... И лого, разумеется туда же из форума вынесла бы...

Идея действительно хорошая. Достаточно ли будет просто изменить css темы или нет? Просто в css я еще че-то смогу, а вот в php я ноль.

[THEKILLERS]

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

[THEKILLERS]

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

[Mavn]

THEKILLERS
Правила форума прочти а то сделаю так что все сообщения будут премодерируемые!
последнее китайское предупреждение

[THEKILLERS]

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 мне кажется вы не совсем понимаете, как там всё работает.

[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/

[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]

Тут непонятно что вы вообще делаете, и что из себя, представляет ваша шапка, там может быть, очень много разных решений, от растягивания по объему, до того, что её делать из нескольких частей.

[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.

[david.xard]

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

[GeorG]

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

[ArtemM]

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

Например:

[david.xard]

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

Например:

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

[ArtemM]

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

[GeorG]

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

Посмотрите название графического файла, его путь, и замените его своим... Кажется, тут логически можно к этому прийти.

[ArtemM]

Посмотрите название графического файла, его путь, и замените его своим... Кажется, тут логически можно к этому прийти.

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


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

[GeorG]

Смотреть пути и имя файла, можно используя firebug, как это делать, описано здесь - http://www.simplemachines.ru/index.php?topic=7551.0