Ставил хороший плагин на wordpress, называется sidebar-login. Наверное слышали? а может у вас уже во всю идет эксплуатация сей примочки для блогов. Вкратце освещу для чего используется, а именно добавляет в сайдбар вашего сайта-блога форму входа в админку… Когда начал юзать WP двиг первым делом бросилось в глаза, что неудобно в админку заходить,  но плагин помог. Однако у этой диковинки есть свои недостатки, связанные с отображением (это уже радует,  самое главное в функционале багов не заметил, но может быть пока) в различных шаблонах. Дело в том, что не во все шабики вордпресса sidebar-login вписывается органично. То выровнять поля ввода логина\пароля необходимо, кнопочку поболе сделать (или теже поля со своими размерами определить), а может и отображение аватарчика поправить. Так как не силен в CSS (а практически всё «визуальное» оформление хранится в файлах данного формата), то первым делом рванул спрашивать у яши и  бублика, и, как оказалось — то ли все очень грамотные и решили что тема не востребована, то ли просто никто не заморачивался с этим плагином (есть и третий вариант, что у всех всё вписывалось как надо, поэтому такие темы отпадали сами собой). Убил в поисках решения (желание было по началу выровнять поля ввода по центру, так как они до предела были прижаты к одному краю, что выглядело не очень красиво) несколько часов, а может быть и день. В конце концов решил заняться сам и вот теперь делюсь своими решениями с теми, кто действительно не селён в html, php и css, и очень нуждается в помощи по данной теме.

1. Выравниваем поля ввода (окошки для ввода логина и пароля) по центру:здесь я решил не прибегать к правке css стиля, а поправить совсем немного единственный файл плагина с расширением php, а именно sidebar-login.php. Заранее дам совет новичку, так как сам столкнулся в своё время с данной проблемой, не стоит открывать php-файлы стандартными текстовыми редакторами, дабы не начались проблемы с кодировкой, советую использовать текстовый редактор «Notepad++»  например заранее установив кодировку Utf-8 (без BOM). Более не отвлекаемся идём дальше: открываем выше указанный фай php ищем строки:

<p><label for=»user_login»><?php echo $theusername; ?></label><br/><input name=»log» value=»<?php if (isset($_POST[‘log’])) echo esc_attr(stripslashes($_POST[‘log’])); ?>» class=»mid» id=»user_login» type=»text» /></p>

<p><label for=»user_pass»><?php echo $thepassword; ?></label><br/><input name=»pwd» class=»mid» id=»user_pass» type=»password» /></p>

В этих строках и выводятся поля для ввода, для выравнивания по центру обрамляем их тегом <center> </center>, у вас должно получиться так:

<p><center><label for=»user_login»><?php echo $theusername; ?></label><br/><input name=»log» value=»<?php if (isset($_POST[‘log’])) echo esc_attr(stripslashes($_POST[‘log’])); ?>» class=»mid» id=»user_login» type=»text» /></center></p>

<p><center><label for=»user_pass»><?php echo $thepassword; ?></label><br/><input name=»pwd» class=»mid» id=»user_pass» type=»password» align=»right» /></center></p>

Уловили разницу?… Причём по центру встанут и заголовки полей, имейте ввиду…

2. Изменяем размеры полей ввода userlogin и password:

В строках вышенайдите слово input, которое и является полем ввода, т.е. это как-бы идентификатор для всех полей. А чтобы выделить конкретное поле, используется указание типа. Например для логина тип поля будет текстовым, т.е. type=”text” (рассматриваем те же пару строчек выше), а для поля с паролем тип будет пароль (основное отличие от текстового типа, что текст скрывается под звёздочками), т.е. type=“password”. Эти дела немного запоминайте, понадобятся. А также inputимеет атрибут size, т.е. вы можете указать под какое количество символов будет подогнана длина, как вы уже поняли наверное, высота поля этим атрибутом не меняется. Итак попробуем растянуть оба поля, только размеры зададим различные для наглядности (надеюсь копию файла sidebar—login.phpвы сделали). Добавляем в нужные места данные атрибуты и смотрим что получилось, как верно записать атрибут смотрите ниже:

<p><center><label for=»user_login»><?php echo $theusername; ?></label><br/><input size=”65” name=»log» value=»<?php if (isset($_POST[‘log’])) echo esc_attr(stripslashes($_POST[‘log’])); ?>» class=»mid» id=»user_login» type=»text» /></center></p>

<p><center><label for=»user_pass»><?php echo $thepassword; ?></label><br/><input size=”35” name=»pwd» class=»mid» id=»user_pass» type=»password» align=»right» /></center></p>

Сохраняем файл и смотрим что получилось. Однако иногда необходимо задать размеры полей не только в ширину, но и в высоту. Здесь уже придется править файл Style.css, т.е. файл стилей. Править там практически нечего и поля не описаны, поэтому придётся кое-чего добавить, но не стоит бояться ничего страшного и сложного в этом не будет. Дописываем в конец файла несколько строк:

Input[type=text], Input[type=password]{

Width: 150px;

Height: 21px;

}

 

Сохраняем файл, обновляем страницу на которой всё это дело расположено и любуемся результатом. Немного поясню код, который мы применили: в первой строке (Input[type=text], Input[type=password] ) определилидля каких именно полей будем задавать размеры, т.е. для текстовых и с типом «пароль», далее указали ширину и высоту (Width: 150px; Height: 21px; ). Заметили как всё просто?

3. Добавлем рамку-обрамление к полям:

также у поля «Input» можно изменить рамку и другие атрибуты имеются, задать размер, цвет и начертание рамки можно так например:

border: 1px solid #777;

Border – имя атрибута (означает рамка), 1px– это мы задали ширину рамки в 1 пиксел, solid– начертание рамки, т.е. сплошная линия, 777 – цвет. Эту строчку необходимо добавить до последней скобки, выглядеть будет так:

Input[type=text], Input[type=password]{

Width: 150px;

Height: 21px;

border: 1px solid #777;

}

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

input[type=password {

width: 50px;

height: 21px;

border: 1px solid #777;

}

input[type=text] {

width:150px;

height:31px;

border: 1px solid #777;

}

4. Меняем размер кнопочки:

С кнопкой ничего нового нет, всё то же самое что и с полями, т.е. можем атрибут size прописать в php файле, может задать и ширину и высоту в стилях css, выглядеть может так:

input[type=submit] {

width: 50px;

height:20px;

}

Т.е. единственное изменил тип поля на submit, ну и естественно свои размерчики указали.

5. Выравнивание аватара по правому краю:

Снова открываем style.cssи ищем строку:

.widget_wp_sidebarlogin .avatar_container, #sidebar—login .avatar_container {

Ниже дописываем: float: right; Готово, теперь аватар будет отображаться справа.

6. Изменение размера аватара:

Вфайле sidebar-login.php ищемстрочку:

if (get_option(‘sidebar_login_avatar’)==’yes’) echo ‘<div class=»avatar_container»>’.get_avatar($user_ID, $size = ’38’).'</div>’;

Здесь size=’38’ как раз и определяет размер аватара, меняйте число, экспериментируйте, анализируйте результат.

После обновление плагина все текущие настройки слетели, поэтому сделал так:

Для новой версии (возможно и для старой) достаточно в style.css прописать дополнительно:

#user_login {
height: 25px;
font-size: 14px;
}

#user_pass {
height: 25px;
font-size: 14px;
}

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