Сделать резиновым шаблон

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

  1. Offline

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

    Регистрация:
    22.09.2016
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Женский
    У меня шаблон BT_Moda от Ice Theme. Разработчики утверждают что шаблон адаптирован для мобильных устройств, но на телефоне он представляет собой плачевное зрелище. Все дело в том, что в самих настройках шаблона надо прописать общую ширину, изначально 1500, использование этой ширины с % и или 100% не помогает, пустое значение тоже не решает проблему. У всех файлов шаблона есть дубли, например template.css и template_rti.css. Я так понимаю, что за вторым вариантом скрывается слово responsive.
    вот template_rtl.css
    Код (css):
    1. . И как можно применить мета-тег viewport в данном случае? Где его нужно вставить в код, чтобы заработало  так <meta name="viewport" content="width=device-width">. Сам сайт http://дизайнерскаямебельсуламита.рф
    2. * {
    3.      font-size: 100%;
    4.      margin: 0px 0px 0px 0px;
    5.      padding: 0px 0px 0px 0px;
    6. }
    7. * html body {
    8.      height: 100%;
    9. }
    10. html { }
    11. body {
    12.      font-size: 13px;
    13.      font-weight: 400;
    14.      font-family: PT Sans, sans-serif;
    15.      line-height: 1.7;
    16.      width: 100%;
    17.    
    18.      height: 100%;
    19.      min-height: 100%;
    20.      margin: 0px 0px 0px 0px;
    21.      padding: 0px 0px 0px 0px;
    22. }
    23. div.@-o-viewport {
    24.     width: device-width;
    25. }
    26. .clearfix {
    27.      display: block;
    28.      clear: both;
    29. }
    30. * html .clearfix {
    31.      height: 1%;
    32. }
    33.  
    34. /* --- offline page --- */
    35. .bt_offline_image {
    36.      background-position: top center;
    37.      background-repeat: no-repeat;
    38.      width: 704px;
    39.      height: 353px;
    40.      margin: 40px auto 40px auto;
    41. }
    42.  
    43. /* --- logo --- */
    44. div.bt_fade_logo.bt_fade_img {
    45.      background-position: right top;
    46.      background-repeat: no-repeat;
    47.      width: 100%;
    48.      height: 86px;
    49.      position: relative;
    50. }
    51. div.bt_fade_logo.bt_fade_img a {
    52.      background-position: right bottom;
    53.      background-repeat: no-repeat;
    54.      position: absolute;
    55.      top: 0px;
    56.      left: 0px;
    57.      bottom: 0px;
    58.      right: 0px;
    59. }
    60. #bt_popup .bt_popup_links {
    61.      text-align: center;
    62. }
    63. #bt_popup .bt_popup_links p { }
    64. #bt_popup .bt_popup_links span { }
    65. #bt_popup .bt_login_form a:link, #bt_popup .bt_login_form a:active, #bt_popup .bt_login_form a:visited { }
    66. #bt_popup .bt_login_form a:hover, #bt_popup .bt_login_form a:focus { }
    67. #bt_popup .bt_login_form ul li { }
    68. #bt_popup .bt_popup_links a {
    69.      font-weight: 700;
    70. }
    71. #bt_popup .bt_popup_links a:hover { }
    72. #bt_popup .bt_login_sign_in, #bt_popup .bt_login_logout { }
    73. #bt_popup .bt_login_sign_in:hover, #bt_popup .bt_login_logout:hover { }
    74. #bt_popup .bt_login_register { }
    75.  
    76. /* --- mod_search --- */
    77. div.module_content div.search {
    78.      overflow: hidden;
    79. }
    80. div.module_content div.search.style2 { }
    81. div.module_content label[for="mod-search-searchword"] {
    82.      display: none;
    83. }
    84. div.module_content input#mod-search-searchword { }
    85. div.module_content input#mod-search-searchword:hover { }
    86. div.module_content input#mod-finder-searchword { }
    87. div.module_content input#mod-finder-searchword:hover { }
    88.  
    89. /* --- mod_breadcrumbs --- */
    90. .bt_sub_pathway {
    91.      overflow: hidden;
    92.      margin: 20px 0px 0px 0px;
    93. }
    94. .bt_sub_pathway .breadcrumbs {
    95.      font-size: 14px;
    96.      line-height: 16px;
    97.      border-top-right-radius: 5px;
    98.      -webkit-border-top-right-radius: 5px;
    99.      -moz-border-radius-topright: 5px;
    100.      border-top-left-radius: 5px;
    101.      -webkit-border-top-left-radius: 5px;
    102.      -moz-border-radius-topleft: 5px;
    103.      border-bottom-left-radius: 5px;
    104.      -webkit-border-bottom-left-radius: 5px;
    105.      -moz-border-radius-bottomleft: 5px;
    106.      border-bottom-right-radius: 5px;
    107.      -webkit-border-bottom-right-radius: 5px;
    108.      -moz-border-radius-bottomright: 5px;
    109.      min-height: 14px;
    110.      margin: 0px 0px 0px 0px;
    111.      padding: 0px 25px 0px 15px;
    112. }
    113. .bt_sub_pathway .bt_breadcrumbs_img {
    114.      margin: 0px 0px 0px 0px;
    115.      padding: 0px 0px 0px 0px;
    116. }
    117. .bt_sub_pathway .bt_breadcrumbs_img a {
    118.      background-position: right top;
    119.      background-repeat: no-repeat;
    120.      width: 17px;
    121.      height: 14px;
    122.      float: right;
    123.      margin: 0px 0px 0px 0px;
    124.      padding: 0px 0px 0px 0px;
    125. }
    126. .bt_sub_pathway span.showHere {
    127.      font-weight: bold;
    128.      background: none;
    129.      margin: 0px 0px 0px 5px;
    130. }
    131. .bt_sub_pathway img {
    132.      position: relative;
    133.      top: 5px;
    134.      margin: 0px 3px 0px 3px;
    135. }
    136. .bt_sub_pathway a, .bt_sub_pathway span {
    137.      font-weight: 700;
    138.      margin: 0px 2px 0px 2px;
    139. }
    140. .bt_sub_pathway a {
    141.      font-weight: 700 !important;
    142. }
    143.  
    144. /* --- Social Icons --- */
    145. .bt_social_icons {
    146.      text-align: center;
    147. }
    148. .bt_social_icon {
    149.      width: 30px;
    150.      height: 30px;
    151.      display: inline-block;
    152.      margin: 6px 9px 0px 9px;
    153. }
    154. .bt_social_icon_bg {
    155.      background-position: right top;
    156. }
    157. .bt_social_icon_bg:hover {
    158.      background-position: right -30px;
    159. }
    160. #social_icon_facebook { }
    161. #social_icon_email { }
    162. #social_icon_rss { }
    163. #social_icon_twitter { }
    164. #social_icon_google { }
    165.  
    166. .bt_go_top_button_img a {
    167.      width: 46px;
    168.      height: 16px;
    169. }
    170. .bt_go_top_button_img a:hover {
    171.      background-position: 0 -16px;
    172. }
    173. #bt_gotop_message a {
    174.      margin-top: -80px;
    175.      margin-right: -20px;
    176.      display: none;
    177.      z-index: 999;
    178.      position: fixed;
    179.      top: 100%;
    180.      right: 95%;
    181. }
    182. div.bt_powered_by_logo.bt_fade_img {
    183.      background-position: right top;
    184.      background-repeat: no-repeat;
    185.      width: 27px;
    186.      height: 20px;
    187.      position: relative;
    188. }
    189. div.bt_powered_by_logo.bt_fade_img a {
    190.      background-position: right bottom;
    191.      background-repeat: no-repeat;
    192.      position: absolute;
    193.      top: 0px;
    194.      left: 0px;
    195.      bottom: 0px;
    196.      right: 0px;
    197. }
     
  2.  
  3. draff
    Offline

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

    Регистрация:
    17.01.2011
    Сообщения:
    6 034
    Симпатии:
    518
    Пол:
    Мужской
    Вряд ли. Изменяет на арабский формат текст справа налево .
     
  4. Offline

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

    Регистрация:
    22.09.2016
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Женский
    Я по возможности, почти все настройки ширины сделала 100%, но не у блока со статьей на главной странице
     
  5. draff
    Offline

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

    Регистрация:
    17.01.2011
    Сообщения:
    6 034
    Симпатии:
    518
    Пол:
    Мужской
    firebug в помощь. Узнаешь имя поля,куда нужно вводить значение ширины шаблона. Потом в файле шаблона ищешь поле, где применяется значение поля и меняешь на нужный формат измерения .
     

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

Загрузка...