Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

CSS стили (упрощение)

Lifeamove
 Share

Recommended Posts

Lifeamove Collaborator

Lifeamove

Опубліковано:
Опубліковано:

Здравствуйте!

Задача создать картинки с подписями (допустим "доставка по всей россии", "работаем 24/7"...)

 

Вариант 1.

Обязательно ли вписывать стиль css для текста в /catalog/view/theme/default/stylesheet/stylesheet.css

А потом в /catalog/view/theme/default/template/common/home.tpl при создании текста под картинки которые хранятся в /catalog/view/theme/default/image/

Ссылаться на тот созданный стиль который записываем в stylesheet.css?
 

Вариант 2 (упрощение).

А если сразу в /catalog/view/theme/default/template/common/home.tpl перед прописью *box *ul (перед картинками с текстом) создать <style type="text/css">

Так не проще? Так вообще можно делать?

Надіслати
Поділитися на інших сайтах

Lifeamove Collaborator

Lifeamove

Опубліковано:
  • Автор
Опубліковано: (змінено)

Версия ocStore 2.3.0.2

Шаблон default

 

Решил делать по нормальному через css...

Добавил в /catalog/view/theme/default/template/common/home.tpl 

<div class="benefits">
<ul>

 <li class="first">
  <a rel="nofollow" href="http://swatch24.com/index.php?route=information/information&information_id=6" id="ben-one" title="Узнать подробности">
   <span class="ben-img"></span>
    "Текст"
     <br>
    "Текст"
  </a>
 </li>

 <li>
  <a id="ben-two">
   <span class="ben-img"></span>
    "Текст"
     <br>
    "Текст"
  </a>
 </li>

 <li class="last">
  <a id="ben-four">
   <span class="ben-img"></span>
    "Текст"
     <br>
    "Текст"
  </a>
 </li>

</ul>
</div>

И соответственно добавил в /catalog/view/theme/default/stylesheet/stylesheet.css (в самый конец файла) 

element.style {
}
stylesheet.css:2253
.benefits {
    width: 100%;
    margin: 50px 0px;
    margin-top: 50px;
    margin-right: 0px;
    margin-bottom: 50px;
    margin-left: 0px;

div {
    display: block;
}

element.style {
}
stylesheet.css:2257
.benefits ul {
    list-style: none;
    list-style-type: none;
    list-style-position: initial;
    list-style-image: initial;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

element.style {
}
stylesheet.css:117
#content ul li {
    margin-bottom: 10px;
}
stylesheet.css:2266
.benefits ul li.first {
    margin-left: 0px;
}

stylesheet.css:2262
.benefits ul li {
    float: left;
    margin-left: 33px;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

element.style {
}
stylesheet.css:2275
.benefits ul li a {
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    display: block;
    width: 220px;
    color: #000;
    background-repeat: no-repeat;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-position: top center;
    background-position-x: center;
    background-position-y: top;
}

element.style {
}
stylesheet.css:2294
#ben-one .ben-img {
    background-image: url(catalog/view/theme/default/image/home/1.png);
    background-position: 0 0;
    background-position-x: 0px;
    background-position-y: 0px;
    width: 104px;
}
stylesheet.css:2289
.ben-img {
    height: 70px;
    display: block;
    margin: 10px auto;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

element.style {
}
stylesheet.css:2324
a#ben-two, a#ben-four {
    cursor: default!important;
}

stylesheet.css:62
a, a:visited, a b {
    color: #38B0E3;
    text-decoration: underline;
    cursor: pointer;
}
stylesheet.css:16
body, td, th, input, textarea, select, a {
    font-size: 13px;
}
Inherited from li
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

element.style {
}
stylesheet.css:2303
#ben-two .ben-img {
    background-image: url(catalog/view/theme/default/image/home/2.png);
    background-position: -105px 0;
    background-position-x: -105px;
    background-position-y: 0px;
    width: 85px;
}

element.style {

stylesheet.css:2270
.benefits ul li.last {
    margin-right: 0px;
}

user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

element.style {
}


Inherited from li.last
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

element.style {
}
stylesheet.css:2318
#ben-four .ben-img {
    background-image: url(catalog/view/theme/default/image/home/3.png);
    background-position: -262px 0;
    background-position-x: -262px;
    background-position-y: 0px;
    width: 81px;
}

 

В итоге получилось так: 

455I1UE365_thumb.jpg

 

А нужно примерно вот так (др.картинки / другой текст)

xVByU4BLyB_thumb.jpg

Змінено користувачем Lifeamove
Надіслати
Поділитися на інших сайтах

Lifeamove Collaborator

Lifeamove

Опубліковано:
  • Автор
Опубліковано: (змінено)

Такое ощущение то что я вставлял в stylesheet.css сайт не видит!

Что я делаю не так, подскажите пожалуйста!

 

У меня стоит PHP 5.4, есть возможность поставить 5.5 / 5.6 / 7.0 / 7.1 может быть последнюю поставить, может из за этого?

Змінено користувачем Lifeamove
Надіслати
Поділитися на інших сайтах

Lifeamove Collaborator

Lifeamove

Опубліковано:
  • Автор
Опубліковано:
18 часов назад, snastik сказал:

ctrl + f5 - ваше все!

 

А еще  system nginx restart

snastik, ctrl + f5 не помогает... я читал ваши ответы в др. темах...) Прошу прощения system nginx restart как и где делается? У меня сервер стоит на ISP manager... 

На сколько понял нужно прописать в консоли сервера "service nginx reload", ни как не могу найти ~консоль в ISP manager-е. Или как по другому можно сделать рестарт системы nginx?

А вы смотрели мой код который я сделал для stylesheet.css? Нормально всё написал?)

Надіслати
Поділитися на інших сайтах

Lifeamove Collaborator

Lifeamove

Опубліковано:
  • Автор
Опубліковано: (змінено)

Всем привет!

Друзья я сделал, кому интересно:

Это вставляем в home.tpl 

<div class="benefits">
 <ul>
    <li class="first">
      <a rel="nofollow" href="/delivery/" id="ben-one" title="Узнать подробности">
        <span class="ben-img"></span>
          "Доставка"<br>"Текст"
        </a>
      </li>
    <li>
      <a id="ben-two">
        <span class="ben-img"></span>
          "Наличие"<br>"Текст"
        </a>
      </li>
    <li class="last">
      <a id="ben-three">
        <span class="ben-img"></span>
          "Качество"<br>"Текст"
        </a>
      </li>
    </ul>
  </div>

Это вставляем в stylesheet.css 

.benefits {
			width: 100%;
			margin: 10px 0px;
		}
		.benefits ul {
			list-style: none;
			overflow: hidden;
			margin: 0px; padding: 0px;
		}
		.benefits ul li {
			float: left;
			margin-left: 33px; 
		}
		.benefits ul li.first{
		margin-left: 33px; 
		}

		.benefits ul li.last{
			margin-right: 0px; 
		}

		
		.benefits ul li a {
			text-decoration: none;
			text-transform: uppercase;
			text-align: center;
			font-family: Roboto, Arial, Helvetica, sans-serif;
			font-size: 16px;
			font-weight: normal; 
			line-height: 24px;
			display: block;
			width: 220px;
			color: #000;
			background-repeat: no-repeat;
			background-position: top center;
		}
		.ben-img {
			height: 120px;
			display: block;
			margin: 10px auto;
		}
		#ben-one .ben-img {
			background-image: url('../image/home/1.png');
			background-position: 0 0;
			width: 120px;
		}
		a#ben-one:hover {
			text-decoration: underline!important;
		}
		
		#ben-two .ben-img {
			background-image: url('../image/home/2.png');
			background-position: 0px 0;
			width: 120px;
		}
		
		#ben-three .ben-img {
			background-image: url('../image/home/3.png');
			background-position: 0px 0;
			width: 120px;
		}
		
		a#ben-three:hover {
			text-decoration: underline!important;
		}
		
		a#ben-two {cursor: default!important;}

Результат:

602d95dbad2dc0d836a76c31bea57e49-prev.jp

Змінено користувачем Lifeamove
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду