Создание шаблонов под сайт и форум

iRo · October 16, 2009

Всех категорически приветствую))

Я далек от сайтостроений и дизайна, но вот захотелось сделать для себя.

Просто есть идея создать портальчик, для себя, и выкладывать там стать свои мысли,

которые кому то могут пригодится (как например моя разработка для проигрывателя Dune BD которую уже куча народу оценила)

Для этого я скачал халявные движки портала и форума MKPortal + SMF

конечно там уже все сделанно, все работает, но естественно хочется внести что то свое)))

уже сделал и оттестил новые функции (курс доллара, погоды, красивые смайлики и т.д.)

но все же есть пара вопросов)

так как я ярый поклонник Apple, хочу сделать дизайн в сите Mac OS. на примере уже имеющийся темы для форума.

но я же хочу тоже самое и в портале сделать ))

вопрос:

ход моих мысел верен? - для отрисовки окна в стиле Apple в файле css создал стиль

applewin { /*For Apple StyleWindows*/
    background: #dfe1e3 url(images/header/lines.gif) repeat;
	padding-top: 3px;
	padding-right: 8px;
	padding-left: 8px;
	font-size: 10px;
	line-height: 15px;
	color: #333333;
}
.applewin_top_left {...}
.applewin_top_middle {...}
.applewin_top_right {...}
.applewin_bottom_left {...}
.applewin_bottom_middle {...}
.applewin_bottom_right {...}
.applewin_body {...}
.applewin_body_left {...}
.applewin_body_right {}
.applewin_body_middle {}

ну а потом создаю ячейки таблицы соответствующих классов

<td class="applewin_top_left ">Левый верхний угол с кнопками</td>

такой подход верен?

и еще, как сделать окно поиска от гугла в стиле apple?

поясню-

в аккаунте гугла сделал котент для поиска, но хочу его использовать в нестандартном поле ввода

пример смотрите на сайте appple.ru (только окно поиска, окно с результатами это пока для меня перебор)

вот как сделать такое красивое полле ввода (закругленное, с появляющимся крестиком для очистки и исчезающей надписью "поиск")??? все нужные картинки с сайта аппла удалось вырвать хоть он и сопротивлялся )))

и еще, заметил глюк со смайлами и тегами, точнее с отображением подсказки в сафари

т.е. на форуме если я при ответе в теме навожу мышку на смайлик, то в подсказке показывается тескт (Например "Улыбка")

но так работает только в файрфоксе, в сафари же выдается

java script:void(0);

так как вставка смайла осуществляется скриптом. как можно это побороть?

ну и совсем ламерский вопрос - как сделать ссылку "Сделать стартовой"???

мои мучения и опыты можно отследить тут (если конечно можно писать это) - www.4iro.ru

Заранее спасибо всем откликнувшимся!

gesandte · October 16, 2009

1) направление верно, но лучше применять дивы

2) идете на сайт aple , откуда вы уже сперли графику формы и проделываете то же самое с кодом(исходный код страницю + цсс страницы)

по сайту:

1) где фон центральной части навигации?

2) поля для входа в систему ну оооочень маленькие

3) а вообще напихано очень много всего, лучше разгрузить страницу

iRo · October 16, 2009

1) направление верно, но лучше применять дивы
2) идете на сайт aple , откуда вы уже сперли графику формы и проделываете то же самое с кодом(исходный код страницю + цсс страницы)
по сайту:
1) где фон центральной части навигации?
2) поля для входа в систему ну оооочень маленькие
3) а вообще напихано очень много всего, лучше разгрузить страницу

1. дивы это в смысле <div id="my_class"> вместо <td class="my_class">

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

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

по сайту: дык я его только начинаю делать )))) практически второй день только им занимаюсь)))

PS а трабл с сафари не знаете как решить?

gesandte · October 16, 2009

дальше сам очищай

1. дивы это в смысле <div id="my_class"> вместо <td class="my_class">
верно? а чем лучше? а то что я написал в css можно использовать и там и там, или для дивов нужны отдельные записи в таблице стилей?
2. неее, пробовал... моих знаних не хватило для этого, там очень сложно... простое копирование приводит к тому, что при поиске с мего сайта идет перенаправление на результаты поиска на сайте аппла ))))
по сайту: дык я его только начинаю делать )))) практически второй день только им занимаюсь)))
PS а трабл с сафари не знаете как решить?

1) Да, верно. Использовать те же записи можно, но придется скорректировать раскладку блоков в этом случае.

2) html

<div id="globalsearch">
		<form action="http://searchcgi.apple.com/cgi-bin/sp/nph-searchpre11.pl" method="post" class="search" id="g-search">
			<div>
				<input type="hidden" value="utf-8" name="oe" id="search-oe">
				<input type="hidden" value="p" name="access" id="search-access">
				<input type="hidden" value="us_only" name="site" id="search-site">
				<input type="hidden" value="lang_en" name="lr" id="search-lr">
				<label for="sp-searchtext"><span class="prettyplaceholder">Search</span><input type="search" name="q" id="sp-searchtext" class="g-prettysearch applesearch" accesskey="s"></label>
			</div>
		</form>
		<div id="sp-results"><div class="inside"></div></div>
	</div>

css

* Testing everywhere search */
input[type=search].not-round { /*background: #ABABAB;*/ height: 19px; outline: none; -webkit-border-radius: 9px; -webkit-border-image: url(http://images.apple.com/global/elements/prettysearch/searchfield_border.png) 2 2 2 2 stretch stretch; width: 200px; }

/* GLOBAL SEARCH */
#globalsearch { width: 163px; height: 38px; position: absolute; top: 0; right: 0; background-position: 100% 0; background-repeat: no-repeat; }
#globalsearch.active { background-position: 100% -38px; }
#globalsearch input.g-prettysearch, #globalsearch .search-wrapper input.g-prettysearch {background: url(http://images.apple.com/global/nav/images/searchfield_repeat.png) center top repeat-x; }
#globalsearch input.g-prettysearch { width:140px; height: 16px; margin-top: 9px; margin-left: 11px; }
#globalsearch .search-wrapper { position: relative; width: 140px; margin-top: 9px; margin-left: 11px; }
#globalsearch .search-wrapper input.g-prettysearch { width: 110px; margin-left: 20px; *margin-top:-1px; *margin-right:-2px; *margin-left:10px; }
#globalsearch .search-wrapper .left, 
#globalsearch .search-wrapper .left { display: block; position: absolute; left: 0; top: 0; width: 20px; height: 19px; background: url(http://images.apple.com/global/nav/images/searchfield_leftcap.png) left top no-repeat; }
#globalsearch .search-wrapper .right { display: block; position: absolute; right: 0; top: 0; width: 10px; height: 19px; background: url(http://images.apple.com/global/nav/images/searchfield_rightcap.png) right top no-repeat; }
#globalsearch .search-wrapper.empty.blurred input { color: #7E7E7E; }
#globalsearch .search-wrapper .reset { position: absolute; width: 11px; height: 11px; overflow:hidden; z-index: 1; right: 4px; top: 4px; background: url(http://images.apple.com/global/nav/images/close.gif); display: block; cursor: pointer; _cursor:hand; }
#globalsearch .search-wrapper.empty .reset { display: none; }
#globalsearch .search-wrapper input.g-prettysearch { position: absolute; width: 110px; top: 0; right: 10px; border: 0px; margin: 0; padding: 3px 0 0 0; font: 11px "Lucida Grande", Arial, sans-serif; }
#globalsearch label .prettyplaceholder { display: block; overflow: hidden; text-indent: -9999px; height: 0; width: 0;}

#globalsearch input[type=search].not-round { background: #ABABAB; height: 19px; outline: none; -webkit-border-radius: 9px; -webkit-border-image: url(http://images.apple.com/global/elements/prettysearch/searchfield_border.png) 2 2 2 2 stretch stretch; width: 133px; }

/* SEARCH SHORTCUTS */
#sp-results { position: absolute; margin-right: -2px; margin-bottom: 0; margin-left: 0; top: 61px; left: 165px; height: 0; }
#sp-results .inside { width: 328px; height: auto; position: absolute; top: 0; right: 0; line-height: 1px; font-size: 1px; }
#sp-results .resultCat { position: relative; color: #f6f6f6; background: #919191; width: 308px; height: 8px; margin: 0; padding-bottom: 12px; width: 302px; font: 11px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; font-weight: bold; border: 1px none #fb6bff; }
ul.sp-results { background: url(http://images.apple.com/global/nav/images/shortcuts_bg_mid_grey.png) repeat-y 0 0; _background: url(http://images.apple.com/global/nav/images/shortcuts_bg_mid_grey.gif) repeat-y 0 0; color: #333; padding: 0 3px; margin: 0; width: 328px; text-align: left; font: 10px/14px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }
ul.sp-results li { margin: 0 0 -3px 0; padding: 5px 10px; list-style-type: none; height: 4.6em; position: relative; border-left: 1px solid #919191; border-right: 1px solid #919191; width: 300px; }
ul.sp-results li.viewall { width: 308px; height: 20px; text-align: right; color: #000; position: absolute; bottom: -30px; *bottom: -27px; left: 0px; background: url(http://images.apple.com/global/nav/images/shortcuts_bg_foot_grey.png) no-repeat left bottom; _background: url(http://images.apple.com/global/nav/images/shortcuts_bg_foot_grey.gif) no-repeat left bottom; border-style: none; }
ul.sp-results li.viewall a { color: #fff; padding-right: 23px; background: url(http://images.apple.com/global/nav/images/shortcuts_arrow.gif) no-repeat 99% 50%; padding-top: 3px; padding-bottom: 3px; font: bold 11px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }
ul.sp-results li.hoverli { background: #b7b7b7 none repeat-x; color: #fff; cursor: pointer; }
ul.sp-results li.hoverli h4 a { color: #fff; }
ul.sp-results li.hoverli p { color: #f1f1f1; }
ul.sp-results li span.text { display: block; position: absolute; left: 68px; width: 240px; }
ul.sp-results li h4 { margin: 0; font-size: 11px; font-weight: bold; }
ul.sp-results li p { margin: 0; font-size: 10px; overflow: hidden; height: 2.7em; color: #555; }
ul.sp-results li a { color: #606060; text-decoration: none; }
ul.sp-results li img, 
ul.sp-results li .replacementimg { position: absolute; left: 10px; width: 46px; height: 46px; }
ul.sp-results li h4 a { color: #191919; }
ul.sp-results li.viewall.hover { background: url(http://images.apple.com/global/nav/images/shortcuts_bg_foot_grey.png) no-repeat bottom left; }
#sp-search-spinner { position: absolute; top: 13px; right: 16px; z-index: 10; display: none; }
#sp-search-cancel img { cursor: pointer; }
#sp-results .firstCat { position: absolute; top: -25px; left: 0; width: 308px; height: 8px; background: url(http://images.apple.com/global/nav/images/shortcuts_bg_head_grey.png) no-repeat left top; _background: url(http://images.apple.com/global/nav/images/shortcuts_bg_head_grey.gif) no-repeat left top; }
#sp-result-none.viewall {bottom: -27px; *bottom: -27px;}
#sp-result-none.viewall a { font-size: 10px; }

Edited October 16, 2009 by gesandte

iRo · October 16, 2009

дальше сам очищай

ЭЭээээээ..... Это Вы о чем?

1) Да, верно. Использовать те же записи можно, но придется скорректировать раскладку блоков в этом случае.

ну а в чем разница не подскажете?

2) html
3)css

Это я вчера уже делал, и при попытки изменить код на мой гуголовский акк. скрипт сдох((((

а еще ламерский вопросик - как вывести текущюю дату/время?

с рамблера спер вот такой вот код


<script type="text/javascript"> typeof prv!='undefined'||(function(b,o,dt){var c='января,февраля,марта,апреля,мая,июня,июля,августа,сентября,октября,ноября,де
кабря'.split(','),a='Воскресенье,Понедельник,Вторник,Среда,Четверг,Пятница,Суббота'.split(',');o=o.getElementById('cTime');(function f(){var t=new Date(new Date().getTime()-dt);o.innerHTML=[a[t.getUTCDay()],t.getUTCDate()+' '+c[t.getUTCMonth()],(t.getUTCHours()+'').replace(/^(\d)$/,'0$1')+'<span'+((b^=1)?' style="color:#F2F0DB"':'')+'>:</'+'span>'+ (t.getUTCMinutes()+'').replace(/^(\d)$/,'0$1')].join(', ');setTimeout(f,500)})()})(1,document,new Date().getTime()-(1255697585+14400)*1000); </script> </div>

хоть в коде вижу месяцы и недели, но выводится только время (и то на час отстает ((( ).

сейчас еще раз попробовал, скопировал все что Вы указали.

окно появляется, но нет ни слов поиска, ни картинки лупы((((

все же это слишком сложный для меня код. никак не пойму что к чему относится...

gesandte · October 16, 2009

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

Код формы может вечером гляну и выложу, если кто раньше не сделает

дата на пыхе выводится так

echo date("d/m/Y");

на яве не знаю

Edited October 16, 2009 by gesandte

gesandte · October 16, 2009

посмотрел повнимательнее на форму поиска, потыркал на кнопочки.....

вы хотите себе такую же, один в один?

там у них еще аякс применяется, запаритесь делать :lol:

iRo · October 16, 2009

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

Спасибо почитаю))))

код было бы вообще замечательно.

дата на пыхе выводится так
echo date("d/m/Y");
на яве не знаю

а если у меня вывод делается не с помощью команды echo, а так:

return <<<EOF
..............
EOF;

тогда как писать? а время?

посмотрел повнимательнее на форму поиска, потыркал на кнопочки.....
вы хотите себе такую же, один в один?
там у них еще аякс применяется, запаритесь делать

я бы хотел - форму ввода с округленными углами + появляющийся крестик для очистки поля ввода + при пустом поле вывод слова поиск

и все)))

PS УРА!!!! наконецир купил беспроводную клаву Apple)))

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

мышка и клава Apple Bluetooth

iMac и WiFi 5Ghz c Apple TimeCapsule (две терабайиные капсулы обе на высокоскоросной вафли)

правда к меленькой клаве прийдется немного попривыкнуть, но всеравно аппле рулит!!!

Одни возможности сафари для веб разработчика чего стоят

Edited October 16, 2009 by iRo

Sign In

Создание шаблонов под сайт и форум

Question

iRo

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

gesandte

Link to comment

Share on other sites

iRo

Link to comment

Share on other sites

gesandte

Link to comment

Share on other sites

iRo

Link to comment

Share on other sites

gesandte

Link to comment

Share on other sites

gesandte

Link to comment

Share on other sites

iRo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information