Архив

Октябрь 2009

Всего: 6 записей

WordPress — как добавить свою статическую страницу

25 октября 2009CMS6 комментариев

Если при добавлении страницы недостаточно просто разметки html, можно создать новый шаблон страницы, который будет содержать собственно саму страницу. Для этого нужно создать файл, например, sample_page.php, в начале которого добавить:

<?php
/*
Template Name: SamplePage
*/
?>
<?php get_header(); ?>

Далее ранее сформированный код.
В конце:

<?php get_footer(); ?>

Затем преместить этот файл в папку с текущим шаблоном, и при добавлении страницы из административной панели выбрать созданный шаблон, сам текст может быть пустым или что-то вроде   (т.е. можно указать только заголовок).
Если сайдбар не подключается каким либо другим образом то можно показать его при помощи

<?php get_sidebar(); ?>

wordpress

Выпадающее меню на css

25 октября 2009CMSНет комментариев

html:

<ul id='hornav'>
   <li><a href='#null'>Меню 1</a></li>
   <li><a href='#null'>Меню 2</a>
      <ul>
         <li><a href='#null' target='_blank'>Меню 2.1</a></li>
         <li><a href='#null' target='_blank'>Меню 2.2</a></li>
      </ul>
   </li>
   <li><a href='#null'>Меню 3</a>
      <ul>
         <li><a href='#null'>Меню 3.1</a>
            <ul>
               <li><a href='#null'>Меню 3.1.1</a></li>
               <li><a href='#null'>Меню 3.1.2</a></li>
               <li><a href='#null'>Меню 3.1.3</a></li>
            </ul>
         </li>
         <li><a href='#null'>Меню 3.2</a>
            <ul>
               <li><a href='#null'>Меню 3.2.1</a></li>
               <li><a href='#null'>Меню 3.2.2</a></li>
               <li><a href='#null'>Меню 3.2.3</a></li>
            </ul>
         </li>
         <li><a href='#null'>Меню 3.3</a>
            <ul>
               <li><a href='#null'>Меню 3.3.1</a></li>
               <li><a href='#null'>Меню 3.3.2</a></li>
               <li><a href='#null'>Меню 3.3.3</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

css:

#hornav, #hornav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	background: #515151;
	float: left;
	width: 100%;
}
#hornav li {
	float: left;
	position: relative;
	background: #515151;
	back\ground: none;
}
#hornav li ul {
	display: none;
	position: absolute;
	padding: 8px 0;
	width: 138px;
}
#hornav a {
	color: #fff;
	text-decoration: none;
	display: block;
	width: 120px;
	padding: 4px 10px;
}
#hornav a:hover {
	color: #fe572a;
	background: #ccc;
}
#hornav li:hover,
#hornav li.jshover {
	background: #333;
}
#hornav li li a {
	width: 118px;
	background: none;
}
#hornav li:hover ul,
#hornav li.jshover ul {
	display: block;
}
#hornav li:hover li ul,
#hornav li.jshover li ul {
	display: none;
	width: 138px;
	top: -9px;
	left: 113px;
}
#hornav li:hover li:hover ul,
#hornav li.jshover li.jshover ul {
	display: block;
}

javascript:

jsHover = function() {
   var hEls = document.getElementById('hornav').getElementsByTagName('LI');
   for (var i=0, len=hEls.length; i<len; i++) {
      hEls[i].onmouseover=function() { this.className+=' jshover'; }
      hEls[i].onmouseout=function() { this.className=this.className.replace(' jshover', ''); }
   }
}
if (window.attachEvent && navigator.userAgent.indexOf('Opera')==-1) window.attachEvent('onload', jsHover);

css html javascript

html — отступ в начале абзаца

24 октября 2009CSS5 комментариев

Чтобы сделать отступ в начале каждого абзаца необходимо добавить в доумент:

<style type="text/css">
p {
 text-indent: 20px;
}
</style>

css html

Работа с архивами

19 октября 2009UnixНет комментариев

Создание архива.
tar [-ключи] [имя архива] [путь к файлам]
Например:
tar -cvf file.tar /full/path – создать .tar
tar -czvf file.tar.gz /full/path – создать .tar.gz
tar -cjvf file.tar.bz2 /full/path – создать .tar.bz2

Распаковка.
tar [-ключи] [имя архива]
Например:
tar -xvf file.tar.gz
Можно использовать также:
tar -xvzf file.tar.gz bzip2 -dc file.tar.bz2 | tar xvf -

tar

html — выбор шрифта

19 октября 2009CSSНет комментариев

В примере рассматривается отображение текста шрифтом Arial оранжевого цвета, курсивом, размером 17pt на белом фоне.

<div style="background: #ffffff; font-family: Arial; font-style: italic; font-size: 17pt; color: #fe572a;">
ваш текст
</div>

html

html — обтекание картинки текстом

19 октября 2009CMS3 комментария

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

<p>
<img src="/full/path/image.png" alt="описание" align="right" 
style="float: right; padding-left: 10px; padding-bottom: 10px;">
ваш текст
</p>

html