Перейти к содержанию

Рекомендуемые сообщения

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

Задача создать картинки с подписями (допустим "доставка по всей россии", "работаем 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">

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Версия 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

А еще  system nginx restart

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
18 часов назад, snastik сказал:

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

 

А еще  system nginx restart

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Скачал PuTTy, получилось зайти в PuTTy... ввожу reboot пишет Need to be root, пишу shutdown -r now пишет command not found... что Я делаю не так?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В общем получилось перезагрузить сервер при помощи смены версии PHP поменял на 5.5 и вернул назад на 5.4.

Итог: css стили не вступили в силу...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Всем привет!

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

Это вставляем в 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.