Решено! Хочу настроить чтобы Superfish menu использовал мой личный css

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем Super_Panda, 12.11.2013.

Статус темы:
Закрыта.
  1. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Добрый день,такой вопрос.
    В joomle 2.5 а точнее в отдельно загруженном модуле superfish menu, есть окно рис. 1. в котором я хочу указать путь к своему css файлу который у меня лежит в темплэйтах /css/menu.css (например)
    doppar_500.jpg

    В joomle 1.5 это делается вот таким способом см рис.2. Вопрос как прописать это же в joomle 2.5 и в какой строчке на рисунке 1 это указать. Т.е. Я хочу настроить чтобы модуль меню брал css из моего файла.
    doppar_500-2.jpg

    P.S. я не хочу менять css самого модуля меню, а хочу чтобы меню менялось за счет моего личного css
     
  2.  
  3. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Если Вы в CSS Вашего шаблона примените стили для элементов страницы, они заменят "родные" стили расширения.

    Если этого не произошло - укажите !important после свойства:
    Код (html):
    1. class {
    2.     width: 500px !important;
    3. }
     
  4. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    А что мне в самой джумле указывать в этом окне? doppar_500.jpg

    Как джумла узнает какой css ей нужно использовать для замены оформления Superfish menu?
     
  5. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Ещё раз: Joomla сначала читает css-файл шаблона, если находит в нём стили для каких-то ID или классов - берёт их, если не находит - берёт "родные" стили расширения.
    Ничего не надо указывать. Можете вписать суффикс класса и применить все стили к нему, указывая при необходимости !important. Но лучше просто скопировать стили с родного файла и вставить в css шаблона...
     
  6. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Попробовал просто скопировать в файл css файл моего шаблона, не заработало.
    попробовал написать !important , тоже ничего не изменилось, либо я не там пишу, или не правильно, подскажите.

    Пишу это в своем css в файле шаблона, !important не воспринимает.

    .ext-menu li {
    background: #CFDEFF !important;
    }
     
  7. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    т.е. это одна из строчек, которую я написал в файле css файле который использует мой шаблон
    находиться он в www\templates\joom\css\template.css
     
  8. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    joomla все равно берет настройки из файла модуля суперфиш меню www\modules\mod_ext_superfish_menu\css\superfish.css
     
  9. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    !important может не сработать только в 2-х случаях:
    - если в "родном" файле стили уже указаны с !important (тогда, скорее всего, разработчики - босяки :))
    - если стили устанавливаются с помощью JS/jQ, но у нас не этот вариант

    Мне кажется, что вы всё-таки не там пишете или неправильно цепляете элемент. К сожалению, я не телепат и не могу консультировать Вас без ссылки на сайт [!]
     
  10. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской

    К сожалению делаю пока у себя на диске С, на сайт не делал.
    могу выложить весь текст css в нем 303 строчка
    заранее благодарен.
     
  11. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Код (html):
    1. @charset "utf-8";
    2. /* CSS Document */
    3. html, body, div, span, applet, object, iframe,
    4. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    5. a, abbr, acronym, address, big, cite, code,
    6. del, dfn, em, font, img, ins, kbd, q, s, samp,
    7. small, strike, strong, sub, sup, tt, var,
    8. b, u, i, center,
    9. dl, dt, dd, ol, ul, li,
    10. fieldset, form, label, legend,
    11. table, caption, tbody, tfoot, thead, tr, th, td {
    12.     margin: 0;
    13.     padding: 0;
    14.     border: 0;
    15.     outline: 0;
    16.     font-size: 100%;
    17.     vertical-align: baseline;
    18.     background: transparent;
    19. }
    20. body {
    21.     line-height: 1;
    22.     background-color:#eff3fc;
    23.     height:100%;
    24.     min-width:970px;
    25. }
    26. ol, ul {
    27.     list-style: none;
    28. }
    29. blockquote, q {
    30.     quotes: none;
    31. }
    32. blockquote:before, blockquote:after,
    33. q:before, q:after {
    34.     content: '';
    35.     content: none;
    36. }
    37.  
    38. /* remember to define focus styles! */
    39. :focus {
    40.     outline: 0;
    41. }
    42.  
    43. /* remember to highlight inserts somehow! */
    44. ins {
    45.     text-decoration: none;
    46. }
    47. del {
    48.     text-decoration: line-through;
    49. }
    50.  
    51. /* tables still need 'cellspacing="0"' in the markup */
    52. table {
    53.     border-collapse: collapse;
    54.     border-spacing: 0;
    55. }
    56.  
    57. html {
    58.     height:100%}
    59.  
    60. /*--------------------------------------------*/
    61.  
    62. #wrapper {
    63.     height:100%;}
    64.  
    65. /*--------------------------------------------*/
    66.  
    67. #header{
    68.     height:113px;
    69.     width:100%;
    70.     background-image:url(../images/back_header.png);
    71.     background-repeat:repeat-x ;}
    72.  
    73.  
    74. #logo{
    75.     margin-top:14px;
    76.     margin-left:7.5%;
    77.     height:85px;
    78.     width:463px;
    79.  
    80.     float:left;}
    81.  
    82.  
    83. #loz{
    84.     height:113px;
    85.     width:400px;
    86.     float:right;
    87.     background-image:url(../images/back_loz.png);
    88.     background-repeat:no-repeat;
    89.     background-position:right;
    90.     color:#FFFFFF;
    91.     font-size:17px;
    92.     font-family:Verdana, Arial, Helvetica, sans-serif;
    93.     font-style:italic;
    94.     font-weight:bold;
    95.     text-align:center;
    96.     line-height:28px;}
    97.    
    98.  
    99. /*--------------------------------------------*/
    100.  
    101. #nav{
    102.     height:40px;
    103.     width:100%;
    104.     background-image:url(../images/back_nav.png);
    105.     background-repeat: repeat-x;
    106.     margin-bottom:15px;}
    107.    
    108.    
    109. #menu{
    110.     width:700px;
    111.     margin:0 auto;}
    112. /*--------------------------------------------*/   
    113. #container{
    114.     width:85%;
    115.     margin:0 auto;}
    116.  
    117. #content{
    118.     width:100%;
    119.     float:left;
    120.     }
    121.  
    122. #all{
    123.     margin:0 214px;}
    124.    
    125. #sodergan{
    126.     background-color:#FFFFFF;
    127.     border-left:2px solid #e1dede;
    128.     border-right:2px solid #e1dede;
    129.     padding:0 25px;
    130.     overflow:hidden;}
    131.    
    132. #text{}
    133.  
    134. #news{
    135.     width:100$;}
    136.    
    137. .colon{
    138.     width:50%;
    139.     float:left;}
    140.  
    141.  
    142.    
    143.  
    144.  
    145.  
    146.  
    147. #top{
    148.     width:100%;}
    149.    
    150. #top_back, #top_left, #top_right,#bot_back,#bot_left,#bot_right{
    151.     height:12px;}
    152.  
    153. #top_back{
    154.     width:100%;
    155.     background-image:url(../images/back_top.png);
    156.     background-repeat:repeat-x;}
    157.    
    158. #top_left{
    159.     background-image:url(../images/top_left.png);
    160.     background-repeat:no-repeat;}
    161.    
    162. #top_right{
    163.     background-image:url(../images/top_right.png);
    164.     background-repeat:no-repeat;
    165.     background-position:right top;
    166.     height:15px;}
    167.    
    168. #bot_back{
    169.     width:100%;
    170.     background-image:url(../images/back_bot.png);
    171.     background-repeat:repeat-x;}
    172.  
    173. #bot_left{
    174.     background-image:url(../images/bot_left.png);
    175.     background-repeat:no-repeat;
    176.     background-position:left;}
    177.  
    178. #bot_right{
    179.     background-image:url(../images/bot_right.png);
    180.     background-repeat:no-repeat;
    181.     background-position:right;}
    182.  
    183.  
    184. /*--------------------------------------------*/   
    185. #left_s{
    186.     width:204px;
    187.     float:left;
    188.     margin-left:-100%;
    189.    
    190.    
    191.     }
    192. /*--------------------------------------------*/
    193.  
    194. #right_s{
    195.     width:204px;
    196.     float:left;
    197.     margin-left:-204px;
    198.     }
    199.    
    200.    
    201. /*--------------------------------------------*/
    202.  
    203. #footer {
    204.     text-align:center;
    205.     margin-top:-20px;
    206.     font-family:Tahoma;
    207.     font-size:11px;
    208.     color:#7f7f7f;
    209.     width:100%;
    210.     clear:both;
    211.     height:20px;
    212.     }  
    213.    
    214. #footer a, #footer a:visited {
    215.     color:#58a7d5;
    216.     text-decoration:none;
    217.     }
    218.    
    219. #footer a:hover{
    220.     text-decoration:underline;}
    221.    
    222. /*
    223. # ------------------------------------------------------------------------
    224. # Extensions for Joomla 2.5 - Joomla 3.x
    225. # ------------------------------------------------------------------------
    226. # Copyright (C) 2011-2013 Ext-Joom.com. All Rights Reserved.
    227. # @license - PHP files are GNU/GPL V2.
    228. # Author: Ext-Joom.com
    229. # Websites:  http://www.ext-joom.com
    230. # Date modified: 02/08/2013 - 10:00
    231. # ------------------------------------------------------------------------
    232. */
    233.  
    234.  
    235. /*** ESSENTIAL STYLES ***/
    236. .ext-menu, .ext-menu * {
    237.     margin:         0;
    238.     padding:        0;
    239.     list-style:     none;
    240. }
    241. .ext-menu {
    242.     line-height:    1.0;
    243. }
    244. .ext-menu ul {
    245.     position:       absolute;
    246.     top:            -999em;
    247.     width:          10em; /* left offset of submenus need to match (see below) */
    248. }
    249. .ext-menu ul li {
    250.     width:          100%;
    251. }
    252. .ext-menu li:hover {
    253.     visibility:     inherit; /* fixes IE7 'sticky bug' */
    254. }
    255. .ext-menu li {
    256.     float:          left;
    257.     position:       relative;
    258. }
    259. .ext-menu a {
    260.     display:        block;
    261.     position:       relative;
    262. }
    263. .ext-menu li:hover ul,
    264. .ext-menu li.sfHover ul {
    265.     left:           0;
    266.     top:            2.5em; /* match top ul list item height */
    267.     z-index:        99;
    268. }
    269. ul.ext-menu li:hover li ul,
    270. ul.ext-menu li.sfHover li ul {
    271.     top:            -999em;
    272. }
    273. ul.ext-menu li li:hover ul,
    274. ul.ext-menu li li.sfHover ul {
    275.     left:           10em; /* match ul width */
    276.     top:            0;
    277. }
    278. ul.ext-menu li li:hover li ul,
    279. ul.ext-menu li li.sfHover li ul {
    280.     top:            -999em;
    281. }
    282. ul.ext-menu li li li:hover ul,
    283. ul.ext-menu li li li.sfHover ul {
    284.     left:           10em; /* match ul width */
    285.     top:            0;
    286. }
    287.  
    288. /*** DEMO SKIN ***/
    289. .ext-menu {
    290.     float:          left;
    291.     margin-bottom:  1em;
    292. }
    293. .ext-menu a {
    294.     border-left:    1px solid #fff;
    295.     border-top:     1px solid #CFDEFF;
    296.     padding:        .75em 1em;
    297.     text-decoration:none;
    298. }
    299. .ext-menu a, .ext-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    300.     color:          #13a ;
    301. }
    302. .ext-menu li {
    303.     background:     #FFFFFF !important;
    304. }
    305. .ext-menu li li {
    306.     background:     #FFFFFF !important;
    307. }
    308. .ext-menu li li li {
    309.     background:     #FFFFFF !important;
    310. }
    311. .ext-menu li:hover, .ext-menu li.sfHover,
    312. .ext-menu a:focus, .ext-menu a:hover, .ext-menu a:active {
    313.     background:     blue;
    314.     outline:        0;
    315. }
    316.  
    317. /*** arrows **/
    318. .ext-menu a.sf-with-ul {
    319.     padding-right:  2.25em;
    320.     min-width:      1px; /* trigger IE7 hasLayout so spans position accurately */
    321. }
    322. .sf-sub-indicator {
    323.     position:       absolute;
    324.     display:        block;
    325.     right:          .75em;
    326.     top:            1.05em; /* IE6 only */
    327.     width:          10px;
    328.     height:         10px;
    329.     text-indent:    -999em;
    330.     overflow:       hidden;
    331.     background:     url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
    332. }
    333. a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    334.     top:            .8em;
    335.     background-position: 0 -100px; /* use translucent arrow for modern browsers*/
    336. }
    337. /* apply hovers to modern browsers */
    338. a:focus > .sf-sub-indicator,
    339. a:hover > .sf-sub-indicator,
    340. a:active > .sf-sub-indicator,
    341. li:hover > a > .sf-sub-indicator,
    342. li.sfHover > a > .sf-sub-indicator {
    343.     background-position: -10px -100px; /* arrow hovers for modern browsers*/
    344. }
    345.  
    346. /* point right for anchors in subs */
    347. .ext-menu ul .sf-sub-indicator { background-position:  -10px 0; }
    348. .ext-menu ul a > .sf-sub-indicator { background-position:  0 0; }
    349. /* apply hovers to modern browsers */
    350. .ext-menu ul a:focus > .sf-sub-indicator,
    351. .ext-menu ul a:hover > .sf-sub-indicator,
    352. .ext-menu ul a:active > .sf-sub-indicator,
    353. .ext-menu ul li:hover > a > .sf-sub-indicator,
    354. .ext-menu ul li.sfHover > a > .sf-sub-indicator {
    355.     background-position: -10px 0; /* arrow hovers for modern browsers*/
    356. }
    357.  
    358. /*** shadows for all but IE6 ***/
    359. .sf-shadow ul {
    360.     background: url('../images/shadow.png') no-repeat bottom right;
    361.     padding: 0 8px 9px 0;
    362.     -moz-border-radius-bottomleft: 17px;
    363.     -moz-border-radius-topright: 17px;
    364.     -webkit-border-top-right-radius: 17px;
    365.     -webkit-border-bottom-left-radius: 17px;
    366. }
    367. .sf-shadow ul.sf-shadow-off {
    368.     background: transparent;
    369. }
     
  12. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    из всего этого, вот эти строчки
    Код (html):
    1. .ext-menu li {
    2.     background:     #FFFFFF !important;
    3. }
    4. .ext-menu li li {
    5.     background:     #FFFFFF !important;
    6. }
    7. .ext-menu li li li {
    8.     background:     #FFFFFF !important;
    9. }
     
  13. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    И где там можно указать путь к твоим стилям?
    Альтернативный макет-это не файл .css

    Переопределяй вывод модуля,через копирование/изменение дефолтного файла модуля
    в templates/you/html/mod_you
     
  14. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Блин народ ну вы чё такую тему простую накручиваете?)
    Переопределять шаблоны чтобы другие стили подключать :'(

    Если у вас в "родном" файле CSS прописано:
    Код (html):
    1. .item .spacer ul li {
    2.     padding: 10px 0 0 10px;
    3. }


    То в CSS шаблона нужно написать точно так же, но с !
    Код (html):
    1. .item .spacer ul li {
    2.     padding: 10px 0 5px 20px !important;
    3. }

    Попробуйте кэш почистить...
     
    Super_Panda нравится это.
  15. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Через копирование дефолтного, я как раз делал, это работает. Но так я как раз не хочу.
     
  16. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    У меня складывается впечатление, что "Мне нужно порезать хлеб, но ножом я пользоваться не хочу" :X
     
  17. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Всмысле, я наоборот поддерживаю Ваше высказывание, Вы сами написали -
    "Блин народ ну вы чё такую тему простую накручиваете?)
    Переопределять шаблоны чтобы другие стили подключать "

    Я как раз написал, что не хочу переопределять шаблон Superfish menu/
     
  18. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Почистил кэш, и проблема решилась, спасибо Вам shurikkan.
    И работает даже без !important. В моем случае.
     
  19. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Всё потому, что:
    Вопрос решён? Закрываем тему?
     
  20. Offline

    Super_Panda Недавно здесь

    Регистрация:
    09.11.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Закрываем
     
Статус темы:
Закрыта.

Поделиться этой страницей

Загрузка...