Перейти к содержимому

Реферальная программа Мегаплана

Выбрать шаблон и создать сайт

Как подключить новый стиль css к шаблону WP

#1 igorvolg

igorvolg
  • Пользователь
  • 11 сообщений
  • Репутация: 0
0

Отправлено 25 Август 2013 - 20:38

Вот сайт http://foto-fedor.net/ под слайдером квадратики изменяющиеся. За стиль отвечает файл red.css т.е. в нем.

вот код с помощи которого все выводиться

<div class="widget-front">
			<?php if ( isset( $show_img) && $show_img == 1 ) : //check if image option is checked ?>
	
				<div class="thumb-wrapper <?php if(!isset( $tc_thumb)) {echo 'tc-holder';} ?>">
	<a class="[b]round_div[/b]" href="<?php echo $featured_page_link ?>" title="<?php echo $featured_page_title ?>"></a>
					  <?php echo $tc_thumb; ?>
				</div>
			<?php endif; ?>
			  <h2><?php echo $featured_page_title ?></h2>
			  <p class="fp-text-<?php echo $area ?>"><?php echo $text;  ?></p>
			  <p>
				<a class="btn btn-primary fp-button" href="<?php echo $featured_page_link ?>" title="<?php echo $featured_page_title ?>">
				  <?php echo esc_attr(tc__f('__get_option' , 'tc_featured_page_button_text')) ?>
				</a>
			  </p>
		  </div><!-- /.widget-front -->

round_div - это то что задано в red.css. именно кружочки раздвигаются.

мне нужно чтобы эти три картинки применили новый стиль вот этого кода

/* main.css*/
.banner_blo_side {
width:220px;
height:220px;
margin:0px 2% 25px 0px;
background: #000000 transparent; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-8 */
}
.camouf_animation {

   margin: 1.5%;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
}
.camouf_animation-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.camouf_animation-tenth .content_animat {
   /*background: url(/bitrix/templates/camoufnew/images/tryapka.png) repeat;*/
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.camouf_animation-tenth:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
/* End */

подскажите как подключить новый стиль к картинкам. Что где прописать?

прикрепил файлы.

main.css новый стиль картинок. анимация

class-........_pages.php - я так понимаю тут подкреплен стиль старый, который сейчас.

red.css - тот стиль который применяется во всем шаблоне.

Прикрепленные файлы


 

 

  • 0

#2 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 25 Август 2013 - 20:54

Ну вставьте куски эти, заменив camouf_animation-tenth на round_div. Плюс надо будет внутри ссылки с классом round_div создать элемент какой-то с классом content_animat.

А чего вы там у Базарова хотите стянуть? :)
  • 0

#3 igorvolg

igorvolg
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 25 Август 2013 - 21:04

Кто такой Базаров?

не получается заменял, и куски полностью вставлял. не проще подключить main.css ? только вот как?


  • 0

#4 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 25 Август 2013 - 21:09

Кто такой Базаров?

http://camouf.ru/ Стили то с его сайта.

А что у вас не работает? Внешний вид не меняется или анимация не работает? Если последнее, так наверное она на jquery.
  • 0

#5 igorvolg

igorvolg
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 25 Август 2013 - 21:16

нет, тема Customizr

а новые свойства взял с сайта ГИБДД РФ http://www.gibdd.ru/ там внизу слева функция проверить штрафы, вот такой мне эффект и нужен.

анимация не работает.

если это jquery на CSS так можно сделать?


  • 0

#6 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 26 Август 2013 - 20:14

Нет, там все на css. Просто видимо вы забыли часть кода и не туда ставили класс. Гляньте, вам так хочется сделать?

Если да, то вот:
<div class="widget-front sqaure_div">
	  <?php if ( isset( $show_img) && $show_img == 1 ) : //check if image option is checked ?>
	    <?php echo $tc_thumb; ?>
	  <?php endif; ?>
<div class="content_animat">
	    <h2><?php echo $featured_page_title ?></h2>
	    <p class="fp-text-<?php echo $area ?>"><?php echo $text;  ?></p>
	    <p>
			  <a class="info btn btn-primary fp-button" href="<?php echo $featured_page_link ?>" title="<?php echo $featured_page_title ?>">
			    <?php echo esc_attr(tc__f('__get_option' , 'tc_featured_page_button_text')) ?>
			  </a>
	    </p>
	  </div>
</div>

и

.sqaure_div {
   width: 270px;
   height:250px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
}
.sqaure_div .content_animat,.sqaure_div .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.sqaure_div img {
   display: block;
   position: relative;
}
.sqaure_div h2 {
   text-transform: uppercase;
   text-align: center;
   position: relative;
   font-size: 16px;
   padding: 3px 6px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px;
}
.sqaure_div p {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-style: italic;
   font-size: 13px;
   position: relative;
   color: #ccc;
   padding: 0px 10px 10px;
   text-align: center;
}
.sqaure_div a.info {
   display: inline-block;
   text-decoration: none;
   padding: 3px 10px;
   background: #f0f0f0;
   color: #555;
   border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.sqaure_div a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
.sqaure_div img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.sqaure_div .content_animat {
   /*background: url(/bitrix/templates/camoufnew/images/tryapka.png) repeat;*/
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.sqaure_div h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.sqaure_div p {
   color: #ccc;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.sqaure_div a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.sqaure_div:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.sqaure_div:hover .content_animat {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.sqaure_div:hover h2,
.sqaure_div:hover p,
.sqaure_div:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

  • 1

#7 igorvolg

igorvolg
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 27 Август 2013 - 06:50

да так. Но как определить куда что вставлять? я пользуюсь просмотром кода в chrome.
  • 0

#8 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 27 Август 2013 - 10:20

Первый кусок кода вставьте в шаблон вместо вашего куска из первого поста. Кусок CSS-кода вставьте в конец подключаемого файла стилей (видимо red.css). И попробуйте. Ах, да - сделайте резервные копии на всякий случай :)
  • 1

#9 igorvolg

igorvolg
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 27 Август 2013 - 22:35

УРА, получилось? СПАСИБО!

Ха, странно на денвере все работает, а на сайте нет.


  • 0

#10 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 29 Август 2013 - 06:49

А что не получается? Может просто кэш в браузере надо сбросить. Ctrl+F5 попробуйте нажать.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru