CSS

’рубрика’

Непонятная обработка псевдоэлемента CSS :after в Chrome

Ноябрь 13, 2012

Как администратор сайта, хочу иметь полный контроль над ссылками, как в собственных записях, так и в комментариях. Для этого я ввел следующие правила CSS:

a[rel=nofollow]:after {
	color: #c00;
	content: '≠';
}
a[target=_blank]:after {
	color: #c00;
	content: '⇒';
}
a[target=_blank][rel=nofollow]:after {
	content: '≠⇒';
}

"_blank" позволяет мне видеть ссылки, которые открываются в новом окне, "nofollow" - ссылки с атрибутом rel="nofollow" (закрытые от передачи веса страницы).

Интересен факт, что когда на ссылке установлены оба атрибута, к примеру:

<a title="LinuxMint" href="http://linuxmint.com/" rel="nofollow" target="_blank">LinuxMint</a>

то, видимо в связи с новой версией Google Chrome, отображается только значок "⇒", а уже после наведения курсора на ссылку появляется 2-й "≠" и тогда они видны оба "≠⇒". К сожалению, это крайне неудобно, так как при написании записи я по-умолчанию ставлю внешние ссылки на открытие в новом окне и закрываю от индексации. Я уже было думал, что у меня ошибка в JS на горячие клавиши в редакторе WordPress, потому что при установке атрибута rel="nofollow" значок не появлялся. Проблема оказалась именно в обработке этого правила CSS, которое ранее отлично работало.

Решение

Попробовал изменить "nofollow" псевдоэлемент на :before, не помогло. Тогда подумал, что раз не получается, выделю внешнюю ссылку цветом. По непонятной причине, как только я задал цвет элементу "_blank", все заработало, стали отображаться сразу оба значка без скачков.

Конечный CSS:

a[rel=nofollow]:after {
	color: #c00;
	content: '≠';
}
a[target=_blank] {
	color: #353535;
}
a[target=_blank]:after {
	color: #c00;
	content: '⇒';
}
a[target=_blank][rel=nofollow]:after {
	content: '≠⇒';
}

Записано в CSS    |    Постоянная ссылка

Изменяем форму входа в WordPress

Ноябрь 3, 2012

Решил немного изменить форму авторизации: вставить свой логотип и поменять стандартную ссылку, ведущую на сайт WordPress, на свою.

Изменения минималистичны и затрагивают только файл functions.php в используемой теме. Я добавил 3 новые функции:

/* cay 5 - Start
 * Изменяем вывод формы Входа
 **/
function cay_login_site_url_title() {
	return get_bloginfo( 'title', 'display' );
}
add_filter( 'login_headertitle', 'cay_login_site_url_title' );

function cay_login_site_url() {
	return home_url( '/' );
}
add_filter( 'login_headerurl', 'cay_login_site_url' );

function cay_login_head_part() {
?>
<style type="text/css">
body.login {
	background-color: #FFF;
}
#login {
	padding-top: 71px;
}
.login h1 a {
	background: url( '<?php echo get_bloginfo( 'template_url' ); ?>/images/logo.gif' ) no-repeat 0 0;
	width: 75px;
	height: 110px;
	margin: 0 auto;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'cay_login_head_part' );
/* cay 5 - End */

Форму входа можно посмотреть здесь:

Ссылки по теме

Записано в CSS, PHP, WordPress    |    Постоянная ссылка