css | Work.webloper.ru

Смена фона (background) по клику на ссылку или картинку на javascript

Мар 25, 2017 Posted by webloper css, wordpress, верстка 0 comments

Добавить стиль в <head></head>

<style>
#change {
background-image: url(http://r8086929.bget.ru/wp-content/uploads/2017/03/wok-pic-empty.png);
background-size: 100% auto;
}
</style>

<style>

#change {

background-image: url(http://r8086929.bget.ru/wp-content/uploads/2017/03/wok-pic-empty.png);

background-size: 100% auto;

}

</style>

Добавить скрипт в <head></head>

<script>
function change_color(obj)
{
obj.value && (document.getElementById("change").style.backgroundColor = obj.value);
obj.src && (document.getElementById("change").style.backgroundImage = 'url('+obj.src+')');
}
</script>

function change_color(obj)

{

obj.value && (document.getElementById("change").style.backgroundColor = obj.value);

obj.src && (document.getElementById("change").style.backgroundImage = 'url('+obj.src+')');

}

</script>

К объекту фон которого будем заменять привязать id

<div id="change" >В этом элементу будет менять фон
 можно привязать к body или header или footer главное чтобы был id </div>

1 2	<div id="change" >В этом элементу будет менять фон можно привязать к body или header или footer главное чтобы был id </div>

Функцию вызова скрипта привязать к элементу у которого будем брать фон:

<img src="/image.jpg" onclick="change_color(this)" />

1	<img src="/image.jpg" onclick="change_color(this)" />

или любой другой элемент у которого задано значение value, пример:

<div value="/image.jpg" onclick="change_color(this)">
какой то текст или еще что то
</div>

какой то текст или еще что то

</div>

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

Данный скрипт будет менять забирая значение из элементов где есть функция change_color(this)

Вывод сабкатегорий (подкатегорий) на странице категорий

Мар 16, 2017 Posted by webloper css, woocommerce, wordpress 0 comments

Данный код выводит подкатегории заданого id категории на всех страницах категориях — пример использование как фильтр, для активной подкатегории добавляется class=»disabled» -не активный и становится светлым на 25%

Подкатегория выводится как её изображение с размером в 60px

На странице /ваша_тема/woocommerce/archive-product.php

Сразу после <?php get_header();?>

Вставляем код:

<?php 
global $wp_query;
$cate = get_queried_object();
$cateID = $cate->term_id;?>
<ul class="wsubcategs">
    <?php
    $wsubargs = array(
    'hierarchical' => 1,
    'show_option_none' => '',
    'hide_empty' => 0,
    'parent' => 9,
    'taxonomy' => 'product_cat'
    );
    $wsubcats = get_categories($wsubargs);
    foreach ($wsubcats as $wsc){
    $thumbnail_id = get_woocommerce_term_meta(  $wsc->term_id, 'thumbnail_id', true );
    $image = wp_get_attachment_url($thumbnail_id);
    $cat_arguments = array(
	  'orderby' => 'name',
	  'parent' => 0
	  );
	$cats = get_woocommerce_term_meta(  $wsc->term_id, 'thumbnail_id', true );
if($cateID != $wsc->term_id) {
    ?>
    <li class="subss">
        <a href="<?php echo get_term_link( $wsc->slug, $wsc->taxonomy );?>">
        <?php 
        echo '<img src="'.$image.'" alt="category image" style="width:60px;">';
        ?>
        </a>
    </li>
    <?php
}
else { ?>
    <li class="subss kl">
        <a class="disabled">
        <?php 
        echo '<img src="'.$image.'" alt="category image" style="width:60px;">';
        ?>
        </a>
    </li>
<?php }
    }
    ?>  
</ul>
<? 
?>

<?php

global $wp_query;

$cate = get_queried_object();

$cateID = $cate->term_id;?>

<?php

$wsubargs = array(

'hierarchical' => 1,

'show_option_none' => '',

'hide_empty' => 0,

'parent' => 9,

'taxonomy' => 'product_cat'

);

$wsubcats = get_categories($wsubargs);

foreach ($wsubcats as $wsc){

$thumbnail_id = get_woocommerce_term_meta( $wsc->term_id, 'thumbnail_id', true );

$image = wp_get_attachment_url($thumbnail_id);

$cat_arguments = array(

'orderby' => 'name',

'parent' => 0

);

$cats = get_woocommerce_term_meta( $wsc->term_id, 'thumbnail_id', true );

if($cateID != $wsc->term_id) {

<a href="<?php echo get_term_link( $wsc->slug, $wsc->taxonomy );?>">

<?php

echo '<img src="'.$image.'" alt="category image" style="width:60px;">';

</a>

</li>

<?php

}

else { ?>

<?php

echo '<img src="'.$image.'" alt="category image" style="width:60px;">';

</a>

</li>

<?php }

}

</ul>

class=»disabled» — добавляем в конце файла style.css

class=»kl» для li нужен для осветления фотографии , остальные классы для добавляем сами для вывода необходимого расположения, как выравнивание по левой стороне ( в ряд ) или ещё как.

a.disabled {
pointer-events: none; /* делаем элемент неактивным для взаимодействия */
cursor: default; /* курсор в виде стрелки */
color: #888;/* цвет текста серый */
}
.kl {
opacity:.25; 
}

a.disabled {

pointer-events: none; /* делаем элемент неактивным для взаимодействия */

cursor: default; /* курсор в виде стрелки */

color: #888;/* цвет текста серый */

}

.kl {

opacity:.25;

}

Картинка по вертикали img в div

Мар 15, 2017 Posted by webloper css, верстка 0 comments

1.Без размера картинки и без размера блока

Вертска код в html

<div class="block">
    <img src="image.gif" alt="" >
</div>

</div>

Стили в css

.block {
    height: 100px;
    position: relative;
}
.block img {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }

.block {

height: 100px;

position: relative;

}

.block img {

position: absolute;

margin: auto;

left: 0;

top: 0;

bottom: 0;

right: 0;

}

2.Выравнивание img через table-cell

Верстка код в html

<div class="block2">
   <img src="image.gif" alt="" >
</div>

</div>

Стили в css

.block2 {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   width: 200px;
   height: 100px;
}

.block2 {

display: table-cell;

vertical-align: middle;

text-align: center;

width: 200px;

height: 100px;

}

Обязательно задать ширину блока width

3.Выравнивание по высоте блока, без высоты фото

Верстка код в html

<div class="block3">
    <img src="image.gif" alt="" >
</div>

</div>

Стили в css

.block3 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.block3 img {
    vertical-align: middle;
}

.block3 {

height: 100px;

line-height: 100px;

text-align: center;

}

.block3 img {

vertical-align: middle;

}

4. Выравнивание по высоте фото, без высоты блока

Верстка код в html

<div class="block4">
    <img src="image.gif" alt=""> 
</div>

</div>

Стили в css

.block4 {
    position: relative;
    border: 1px solid aqua;
    width: 100%;
    height: 100px;
} 
.block4 img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -23px;
    margin-left: -20px;
}

.block4 {

position: relative;

border: 1px solid aqua;

width: 100%;

height: 100px;

}

.block4 img {

position: absolute;

top: 50%;

left: 50%;

margin-top: -23px;

margin-left: -20px;

}