X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Как подключить новый стиль css к шаблону WP
igorvolg
igorvolg
Topic Starter сообщение 25.8.2013, 21:38; Ответить: igorvolg
Сообщение #1


Вот сайт 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 - тот стиль который применяется во всем шаблоне.
Прикрепленные файлы
Прикрепленный файл  red.css ( 187,38 килобайт ) Кол-во скачиваний: 116
Прикрепленный файл  class-content-featured_pages.php ( 8,07 килобайт ) Кол-во скачиваний: 104
Прикрепленный файл  main.css ( 1,74 килобайт ) Кол-во скачиваний: 100
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sae
sae
сообщение 25.8.2013, 21:54; Ответить: sae
Сообщение #2


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

А чего вы там у Базарова хотите стянуть? :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
igorvolg
igorvolg
Topic Starter сообщение 25.8.2013, 22:04; Ответить: igorvolg
Сообщение #3


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

не получается заменял, и куски полностью вставлял. не проще подключить main.css ? только вот как?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sae
sae
сообщение 25.8.2013, 22:09; Ответить: sae
Сообщение #4


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

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

А что у вас не работает? Внешний вид не меняется или анимация не работает? Если последнее, так наверное она на jquery.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
igorvolg
igorvolg
Topic Starter сообщение 25.8.2013, 22:16; Ответить: igorvolg
Сообщение #5


нет, тема Customizr

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

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

если это jquery на CSS так можно сделать?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sae
sae
сообщение 26.8.2013, 21:14; Ответить: sae
Сообщение #6


Нет, там все на 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;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
igorvolg
igorvolg
Topic Starter сообщение 27.8.2013, 7:50; Ответить: igorvolg
Сообщение #7


да так. Но как определить куда что вставлять? я пользуюсь просмотром кода в chrome.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sae
sae
сообщение 27.8.2013, 11:20; Ответить: sae
Сообщение #8


Первый кусок кода вставьте в шаблон вместо вашего куска из первого поста. Кусок CSS-кода вставьте в конец подключаемого файла стилей (видимо red.css). И попробуйте. Ах, да - сделайте резервные копии на всякий случай :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
igorvolg
igorvolg
Topic Starter сообщение 27.8.2013, 23:35; Ответить: igorvolg
Сообщение #9


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

Ха, странно на денвере все работает, а на сайте нет.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sae
sae
сообщение 29.8.2013, 7:49; Ответить: sae
Сообщение #10


А что не получается? Может просто кэш в браузере надо сбросить. Ctrl+F5 попробуйте нажать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) BANZAI Partners – новый рекламодатель с пустой базой игроков. RevShare до 50%
0 BANZAI_Partners 452 Вчера, 14:44
автор: BANZAI_Partners
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1119 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2289 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3912 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3637 24.3.2024, 20:55
автор: Liudmila


 



RSS Текстовая версия Сейчас: 28.3.2024, 21:19
Дизайн