Jump to content

Recommended Posts

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

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

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

Share this post


Link to post
Share on other sites

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

Edited by Lifeamove

Share this post


Link to post
Share on other sites

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

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

 

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

Edited by Lifeamove

Share this post


Link to post
Share on other sites

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

 

А еще  system nginx restart

  • +1 1

Share this post


Link to post
Share on other sites
18 часов назад, snastik сказал:

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

 

А еще  system nginx restart

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Всем привет!

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

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

Edited by Lifeamove

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.