Jump to content

Recommended Posts

Много категорий в главном меню заставило меня етим заняться.
Раньше нашел такую же тему, но конкретно так и никто не сказал как ето сделать. Потратил время и сделал.
Хочу облегчить всем жизнь и сберечь время, у меня OpenCart 1.5.1.3, но я думаю что у всех будет так же.

Значит так:

Заходим в css, и ищем файл stylesheet.css. Путь к файлу: www/catalog/view/theme/theme001/stylesheet/stylesheet.css.
Там ищем #menu > ul > li > a, и добавим сразу же text-align: center; ето позволит сделать текст по центру один под другим.
потом идет такой код ето лично в моем CSS.

font-size: 12px;
color: #FFF;
line-height: 14px;
text-decoration: none;
Видим следующую строку  display: block; изменяем на  display: table-caption; ето сделает текст в столбец.
padding: 5px 7px 11px 7px;-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s; (в padding изменяется свойства ячеек).
z-index: 6;
position: relative; text-transform:uppercase;font-family: 'Open Sans', sans-serif;
 
 
Еслы отцентрирую ячейки напишу как)

post-676929-0-85159500-1391767691_thumb.jpg

Share this post


Link to post
Share on other sites

Сделал.
Заходим в css, и ищем файл stylesheet.css. Путь к файлу: www/catalog/view/theme/theme001/stylesheet/stylesheet.css.
Там ищем #menu > ul > li > a,           и тупо меняем код.  А дальше Дорогие мои двигаем CSS сами.
 {
width: 100px;
text-align: center;
overflow: auto;
margin: 0px auto 0px auto;
vertical-align: top;
color:#fff;
margin-left: 30px;
margin-right: 30px;
display: inline-block;
}

 

Возможно надо будет опустить чуточку меню в низ. вот тут

/* menu */

#menu {
background: url('../image/tail-menu.gif') left top repeat-x;
height: 37px;   <------------------ тут  просто добавляем пиксилей что бы не соскальзывала левая колонка.
margin-bottom:0px;
 
ПРОБУЕМ ЕКСПЕРЕМЕНТИРУЕМ) всем хороших правок)
 

Кому помогло, не забываем ставить  мне плюсик)

СПАСИБО)

для вас старался)
 

Share this post


Link to post
Share on other sites

Сделал.

Заходим в css, и ищем файл stylesheet.css. Путь к файлу: www/catalog/view/theme/theme001/stylesheet/stylesheet.css.

Там ищем #menu > ul > li > a, и тупо меняем код. А дальше Дорогие мои двигаем CSS сами.

{

width: 100px;

text-align: center;

overflow: auto;

margin: 0px auto 0px auto;

vertical-align: top;

color:#fff;

margin-left: 30px;

margin-right: 30px;

display: inline-block;

}

Возможно надо будет опустить чуточку меню в низ. вот тут

/* menu */

#menu {

background: url('../image/tail-menu.gif') left top repeat-x;

height: 37px; <------------------ тут просто добавляем пиксилей что бы не соскальзывала левая колонка.

margin-bottom:0px;

ПРОБУЕМ ЕКСПЕРЕМЕНТИРУЕМ) всем хороших правок)

Кому помогло, не забываем ставить мне плюсик)

СПАСИБО)

для вас старался)

Все получилось, спасибо!

Edited by lemast

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  

  • Similar Content

    • By gime74
      Всем привет! Прошу помочь с проблемой, не могу сделать название товара в 2-ве строки. Много времени убил на решения вопроса, сдаюсь и прошу подсказать знающих.
      ocStore Версия 1.5.5.1.2, шаблон  XDS OC Default 2.0.
      Интернет-магазин Агротехник
  • 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.