пятница, 10 декабря 2010 г.

2.Как "прикрутить" всплывающее боковое меню к штатному шаблону "Корпорация Чудеса"

Вот два фрагмента CSS из Firebug левый - для внутренненго элемента меню, правый для li первого уровня.
Все хаки здесь. Главный хак - вставка в "ul#nav li a " форматирования "-webkit-box-shadow:"...., менял еще где-то padding,
Главный недостаток полученного слоя - все внутренние списки выглядят также, как и главные.

element.style {
}
Matched CSS Rules
ul#nav li a:hover, ul#nav li a:focus {
color: #AEFF5E;
}
ul#nav ul li a {
padding: 10px 15px;
}
ul#nav li a {
-webkit-box-shadow:
rgba(0, 0, 0, 0.199219) 0px 0px 20px;
background: #FEFDFA;
background-color: #FEFDFA;
border: 1px solid #AAB123;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: white;
font-family: 'Lucida Sans', 'Century Gothic',
'Franklin Gothic Book', 'Franklin Gothic',
helvetica, arial, verdana, sans;
padding: 20px 30px;
text-decoration: none;
}
.sidebar .widget a:hover {
color: #D52A33;
}
.sidebar .widget a:link {
color: #D52A33;
}
ul.sf-menu ul a {
zoom: 0.7;
}
ul.sf-menu a {
display: block;
position: relative;
}
ul.sf-menu, ul.sf-menu * {
margin: 0px;
padding: 0px;
}
a:hover {
color: #D52A33;
text-decoration: underline;
}
a:link {
color: #D52A33;
text-decoration: none;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: auto;
text-decoration: underline;
}
Inherited from li
ul.sf-menu li:hover {
visibility: inherit;
}
.main-inner .widget ul li, .main-inner
.widget #ArchiveList ul.flat li {
color: #666;
text-indent: 0px;
}
ul.sf-menu li {
list-style: none;
}
.widget li, .BlogArchive
#ArchiveList ul.flat li {
text-indent: 0px;
}
Inherited from ul.multicolumn.triplecolumn
.main-inner .widget ul, .main-inner
.widget #ArchiveList ul.flat {
list-style: none;
}
.widget ul {
line-height: 1.2;
}
user agent stylesheet
ol ol ul, ol ul ul, ul ol ul, ul ul ul {
list-style-type: square;
}
user agent stylesheet
ul ul, ol ul {
list-style-type: circle;
}
user agent stylesheet
ul, menu, dir {
list-style-type: disc;
}
Inherited from li.sf-parent
ul.sf-menu li:hover {
visibility: inherit;
}
.main-inner .widget ul li, .main-inner
.widget #ArchiveList ul.flat li {
color: #666;
text-indent: 0px;
}
ul.sf-menu li {
list-style: none;
}
.widget li, .BlogArchive
#ArchiveList ul.flat li {
text-indent: 0px;
}
Inherited from ul
.main-inner .widget ul, .main-inner
.widget #ArchiveList ul.flat {
list-style: none;
}
.widget ul {
line-height: 1.2;
}
user agent stylesheet
ul ul, ol ul {
list-style-type: circle;
}
user agent stylesheet
ul, menu, dir {
list-style-type: disc;
}
Inherited from li.sf-parent
ul.sf-menu li:hover {
visibility: inherit;
}
.main-inner .widget ul li, .main-inner
.widget #ArchiveList ul.flat li {
color: #666;
text-indent: 0px;
}
ul.sf-menu li {
list-style: none;
}
.widget li, .BlogArchive #ArchiveList
ul.flat li {
text-indent: 0px;
}
Inherited from ul#nav.sf-menu
ul#nav {
font-size: 120%;
}
.main-inner .widget ul, .main-inner
.widget #ArchiveList ul.flat {
list-style: none;
}
.widget ul {
line-height: 1.2;
}
user agent stylesheet
ul, menu, dir {
list-style-type: disc;
}
Inherited from div#HTML9.widget.HTML
.sidebar .widget {
color: #333;
font: normal normal normal 14px/normal Arial,
Tahoma, Helvetica, FreeSans, sans-serif;
}
.widget {
line-height: 1.4;
}
Inherited from table.section-columns.columns-2
user agent stylesheet
table {
border-spacing: 2px 2px;
border-collapse: separate;
}
Inherited from body
body {
color: #333;
font: normal normal normal 13px/normal Arial,
Tahoma, Helvetica, FreeSans, sans-serif;
}
Элемент ul li
element.style {
}
Matched CSS Rules
.main-inner .widget ul li, .main-inner
.widget #ArchiveList ul.flat li {
border-bottom: 1px solid transparent;
border-top: 0px solid #AAB123;
color: #666;
padding: 0.5em 15px;
text-indent: 0px;
}
ul.sf-menu li {
display: block;
float: left;
list-style: none;
position: relative;
}
ul.sf-menu, ul.sf-menu * {
margin: 0px;
padding: 0px;
}
.widget li, .BlogArchive #ArchiveList
ul.flat li {
margin: 0px;
padding: 0.25em 0px;
text-indent: 0px;
}
user agent stylesheet
li {
display: list-item;
}
Inherited from ul#nav.sf-menu
ul#nav {
font-size: 120%;
}
.main-inner .widget ul, .main-inner
.widget #ArchiveList ul.flat {
list-style: none;
}
.widget ul {
line-height: 1.2;
}
user agent stylesheet
ul, menu, dir {
list-style-type: disc;
}
Inherited from div#HTML9.widget.HTML
.sidebar .widget {
color: #333;
font: normal normal normal 14px/normal
Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
.widget {
line-height: 1.4;
}
Inherited from table.section-columns.columns-2
user agent stylesheet
table {
border-spacing: 2px 2px;
border-collapse: separate;
}
Inherited from body
body {
color: #333;
font: normal normal normal 13px/normal Arial,
Tahoma, Helvetica, FreeSans, sans-serif;
}
element.style {
    }
    Matched CSS Rules (Первый слой меню)
    ul#nav li a {
    1. -webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
    2. background: #FEFDFA;
    3. background-color: #FEFDFA;
    4. border: 1px solid #AAB123;
    5. border-bottom-left-radius: 5px 5px;
    6. border-bottom-right-radius: 5px 5px;
    7. border-top-left-radius: 5px 5px;
    8. border-top-right-radius: 5px 5px;
    9. color: white;
    10. font-family: 'Lucida Sans', 'Century Gothic', 'Franklin Gothic Book', 'Franklin Gothic', helvetica, arial, verdana, sans;
    11. padding: 20px 30px;
    12. text-decoration: none;
    }
    .sidebar .widget a:link {
    1. color: #D52A33;
    }
    ul.sf-menu a {
    1. display: block;
    2. position: relative;
    }
    ul.sf-menu, ul.sf-menu * {
    1. margin: 0px;
    2. padding: 0px;
    }
    a:link {
    1. color: #D52A33;
    2. text-decoration: none;
    }
    user agent stylesheet
    a:-webkit-any-link {
    1. color: -webkit-link;
    2. cursor: auto;
    3. text-decoration: underline;
    }
    Inherited from li
    .main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
    1. color: #666;
    2. text-indent: 0px;
    }
    ul.sf-menu li {
    1. list-style: none;
    }
    .widget li, .BlogArchive #ArchiveList ul.flat li {
    1. text-indent: 0px;
    }
    Inherited from ul#nav.sf-menu
    ul#nav {
    1. font-size: 120%;
    }
    .main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
    1. list-style: none;
    }
    .widget ul {
    1. line-height: 1.2;
    }
    user agent stylesheet
    ul, menu, dir {
    1. list-style-type: disc;
    }
    Inherited from div#HTML9.widget.HTML
    .sidebar .widget {
    1. color: #333;
    2. font: normal normal normal 14px/normal Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    }
    .widget {
    1. line-height: 1.4;
    }
    Inherited from table.section-columns.columns-2
    user agent stylesheet
    table {
    1. border-spacing: 2px 2px;
    2. border-collapse: separate;
    }
    Inherited from body
    body {
    1. color: #333;
    2. font: normal normal normal 13px/normal Arial, Tahoma, Helvetica, FreeSans, sans-serif;

    element.style {
      }
      Matched CSS Rules (Третий слой меню)
      ul#nav li a:hover, ul#nav li a:focus{
      1. color: #AEFF5E;
      }
      ul#nav ul li a {
      1. padding: 10px 15px;
      }
      ul#nav li a {
      1. -webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
      2. background: #FEFDFA;
      3. background-color: #FEFDFA;
      4. border: 1px solid #AAB123;
      5. border-bottom-left-radius: 5px 5px;
      6. border-bottom-right-radius: 5px 5px;
      7. border-top-left-radius: 5px 5px;
      8. border-top-right-radius: 5px 5px;
      9. color: white;
      10. font-family: 'Lucida Sans', 'Century Gothic', 'Franklin Gothic Book', 'Franklin Gothic', helvetica, arial, verdana, sans;
      11. padding: 20px 30px;
      12. text-decoration: none;
      }
      .sidebar .widget a:hover {
      1. color: #D52A33;
      }
      .sidebar .widget a:link {
      1. color: #D52A33;
      }
      ul.sf-menu ul a {
      1. zoom: 0.7;
      }
      ul.sf-menu a {
      1. display: block;
      2. position: relative;
      }
      ul.sf-menu, ul.sf-menu * {
      1. margin: 0px;
      2. padding: 0px;
      }
      a:hover {
      1. color: #D52A33;
      2. text-decoration: underline;
      }
      a:link {
      1. color: #D52A33;
      2. text-decoration: none;
      }
      user agent stylesheet
      a:-webkit-any-link {
      1. color: -webkit-link;
      2. cursor: auto;
      3. text-decoration: underline;
      }
      Inherited from li
      ul.sf-menu li:hover {
      1. visibility: inherit;
      }
      .main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
      1. color: #666;
      2. text-indent: 0px;
      }
      ul.sf-menu li {
      1. list-style: none;
      }
      .widget li, .BlogArchive #ArchiveList ul.flat li {
      1. text-indent: 0px;
      }
      Inherited from ul.multicolumn.triplecolumn
      .main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
      1. list-style: none;
      }
      .widget ul {
      1. line-height: 1.2;
      }
      user agent stylesheet
      ol ol ul, ol ul ul, ul ol ul, ul ul ul {
      1. list-style-type: square;
      }
      user agent stylesheet
      ul ul, ol ul {
      1. list-style-type: circle;
      }
      user agent stylesheet
      ul, menu, dir {
      1. list-style-type: disc;
      }
      Inherited from li.sf-parent
      ul.sf-menu li:hover {
      1. visibility: inherit;
      }
      .main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
      1. color: #666;
      2. text-indent: 0px;
      }
      ul.sf-menu li {
      1. list-style: none;
      }
      .widget li, .BlogArchive #ArchiveList ul.flat li {
      1. text-indent: 0px;
      }
      Inherited from ul
      .main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
      1. list-style: none;
      }
      .widget ul {
      1. line-height: 1.2;
      }
      user agent stylesheet
      ul ul, ol ul {
      1. list-style-type: circle;
      }
      user agent stylesheet
      ul, menu, dir {
      1. list-style-type: disc;
      }
      Inherited from li.sf-parent
      ul.sf-menu li:hover {
      1. visibility: inherit;
      }
      .main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
      1. color: #666;
      2. text-indent: 0px;
      }
      ul.sf-menu li {
      1. list-style: none;
      }
      .widget li, .BlogArchive #ArchiveList ul.flat li {
      1. text-indent: 0px;
      }
      Inherited from ul#nav.sf-menu
      ul#nav {
      1. font-size: 120%;
      }
      .main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
      1. list-style: none;
      }
      .widget ul {
      1. line-height: 1.2;
      }
      user agent stylesheet
      ul, menu, dir {
      1. list-style-type: disc;
      }
      Inherited from div#HTML9.widget.HTML
      .sidebar .widget {
      1. color: #333;
      2. font: normal normal normal 14px/normal Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      }
      .widget {
      1. line-height: 1.4;
      }
      Inherited from table.section-columns.columns-2
      user agent stylesheet
      table {
      1. border-spacing: 2px 2px;
      2. border-collapse: separate;
      }
      Inherited from body
      body {
      1. color: #333;
      2. font: normal normal normal 13px/normal Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      }
      Автор: altersego на 12/10/2010 07:23:00 PM
      Ярлыки: , ,

      Комментариев нет:

      Отправить комментарий

      Подписаться на: Комментарии к сообщению (Atom)