Верстка формы подписки боковушки

[zh-r-a]

Помогите подправить пару параметров в форме подписки по емэйлу (находится под облаком тегов в боковушке) на сайте: http://zhra.ru

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

Код из стайл.цсс:

.feedemail {
	border: 1px solid #000000;
	width: 200px;
	padding: 3px;
	color: #999;
	background: #fff;
}

.feedemail:focus {
    background: #000000;
	border: 1px solid #ffffff;
	color: #ffffff;
}

.feedsubmit {
	border: 1px solid #000000;
	background: #ffffff;
	cursor: pointer;
	color: #000000;
	font-size: 16;
	height: 22px;
}

.feedsubmit:hover {
	background: #000000;
	border: 1px solid #ffffff;
	color: #ffffff;
}

2. Сам заголовок (Падпишысь на апавищения па почте хотелось бы привести к виду аналогичному всем другим заголовкам в боковушке (тобишь укрупнить и очернить), сам вроде что-то смог но в 1 момент заголовок посинел))

Код виджета:

<form style="border:0px solid #ccc;padding:5px;text-align:left;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=zhra/site', 'popupwindow', 'scrollbars=yes,width=600,height=600');return true"><p>Падпишысь на апавищения па почте:</p><p><input type="text" class="feedemail" style="width:140px" name="email"/></p><input type="hidden" value="zhra/site" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" class="feedsubmit" value="Падписсаца!" /></p></form>

Примного благодарен за любую помогучку)))

 

[tigra60]

1. Эту оранжевую обводку ставит браузер (хром, я так понимаю?). Называется она outline. Чтобы её не было, соответствующему элементу прописывем стиль outline:none;

Чтобы подвинуть форму (а точнее - поле ввода) к левому краю, уберите обертку этого поля параграфом.
У вас:

<p><input type="text" class="feedemail" style="width:140px" name="email"/></p>

при этом и стиль параграфа и стиль поля ввода каждый сдвигает поле вправо на 30рх (за счет полей).

сделайте без <p>:

<input type="text" class="feedemail" style="width:140px" name="email"/>

2. Вместо параграфа оберните текст заголовка тегом h3.
У вас:

<p>Падпишысь на апавищения па почте:</p>

сделайте:

<h3>Падпишысь на апавищения па почте:</h3>

От себя.
У вас правильное желание привести стили полей ввода к общему виду. С этой целью уберите (или добавьте в остальные поля ввода) черную рамку поля ввода (border: 1px solid #000000 и инверсию при получении фокуса (.feedemail:focus)

 

[zh-r-a]

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

 

[artvor96]

меня как-то смущает

border:0px solid #ccc

может лучше

border:none

попробовать?

 

[zh-r-a]

Значит с оформлением я определился, теперь опишу что надо а кто может - помогите с кодом пожалуйста.

1. Убрать оранжевое выделение полей ввода, что надо сделать я знаю, скажите где именно. И вообще это выделение только в моем Хроме или у всех кто под Хромом? В опере этой обводки нет, зеначит все же дело в браузере, у меня Хром, где подправить?
2. Сделать рамку поля ввода поиска черной, в коде что-то цветов не вижу, может не там искал, это файл сеарч-форм:

<div class="widget widget_search <?php echo $template ?>">
	<h3><?php _e('Паищи', 'tfuse') ?></h3>
	<form action="" method="get">
		<input type="text" name="s" class="stext" value="<?php echo $title ?>" onfocus="if (this.value == '<?php echo $title ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $title ?>';}" />
	</form>
</div>

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

Большое спасибо за любую помощь.

 

[zh-r-a]

Ку-ку)))

 

[BaNru]

http://htmlbook.ru/
1) :hover и :focus
2) Курим CSS
3) Она вроде не меняется, либо приобретает цвет текста. Если в хроме цвет так же серый там, то значит второе. Так же курим CSS

 

[zh-r-a]

1. Я знаю что и как поменять, скажите где этот файл и как его зовут.
2. Что значит курим?
3. Дык в 1 поле она черная в другом серая, так что наверное где-то это прописано.

 

[BaNru]

1)

Код из стайл.цсс

2) Читаем внимательно и подробно, тратя время столько же на страницу, сколько на раскуривание трубки мира.
3)

Код из стайл.цсс

 

[zh-r-a]

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

 

[tigra60]

К сожалению не так хорошо знаю код как хотелось бы

Ну, так вот вам прекрасная возможность узнать так, как хотелось бы.
А подсказывать конкретные строки и коды - проще сверстать все от начала и до конца, чем настраивать говнокодные куски, которые вы по всей сети насобирали.

 

[zh-r-a]

Ну, так вот вам прекрасная возможность узнать так, как хотелось бы.

Да дело то нужное, кто бы спорил, просто сейчас завал по всем фронтам, не до учебы))

Значит для страждущих даю решение 1 проблемы на языке нубасов, для того чтобы убрать желтую обводку в Хроме или синюю в Сафари, открываем в папке вашей темы (я о вордпрессе) файл style.css, листаем в самый конец и вставляем туда код:

input[type="text"]:focus {
outline: none;
}

Обводка лично у меня пропала.

Поля ввода тоже к единому виду удалось привести, а вот с мигающим ползунком так и не смог разобраться, и по цвету искал, и раз 20 через поиск в коде пробовал подставлять, так и не нашел параметр отвечающий за цвет, может поможет кто? Напоминаю на главной странице 2 поля ввода а мигающая палочка в 1 черная в другом серая.

 

[tigra60]

Обводка лично у меня пропала.

Ну, вот и славно! Дорогу осилит идущий!

только input[type="text"]:focus не нужно, достаточно просто input.

не нашел параметр отвечающий за цвет

У вас обозреватель хром?

щелкаем правой кнопкой по полю ввода подписки и в контекстном меню выбираем "просмотр кода элемента".

если и после этого не найдете, тогда:
файл style.scc строка 1931:
.feedemail {
border: 1px solid #ABADB3;
width: 200px;
padding: 3px;
color: #999;
background: white;
}

 

[zh-r-a]

Во пасиб, теперь все как положено, а почему в коде цвет прописался не 6 девятками а тремя? Я по этому и лоханулся, в фотошопе один код цвета а здесь другой, сокращает чтоли?

 

[tigra60]

цвет можно прописать многими способами, например:

1. указать одно из 16 имен, типа red или black. Вообще-то таких имен намного больше, но 16 имен точно поймут все браузеры.

2. указать 16-ричное 3-х байтовое число, типа #000000 или #fa56cd (регистр значения не имеет).
Этот формат имеет сокращенную форму из 3-х 16-ричных цифр. Например, #fff соответствует #ffffff, а #369 то же самое, что #336699

3. мене применимые способы типа rgb(125, 34, 35) или rgba(230, 50, 90, 85) или даже hsl(25, 60%, 10%), о них вы должны знать, если юзаете фотошоп.

 

[zh-r-a]

Я все 3 знал только о возможности сокращения одинаковых парных не знал. Теперь пора регить в соц. закладках и постить кнопки на твиттер и т.п. в подвал, так что ждите тему - верстка футера)))