как сузить футер

Автор reddevil46, 16 июня 2015, 20:07:53

« назад - далее »
Печать
Вниз Страницы1
Действия пользователя

reddevil46

16 июня 2015, 20:07:53
Подскажите пожалуйста как сузить футер ,(сайт  аудиопрофи.рф)
если я правильно понимаю то его надо вытащить из контейнера , а вот как это сделать чет не получается

Adik

#1
17 июня 2015, 09:37:26
Установить для футера ширину
Код Выделить
#footer {width:..}

reddevil46

#2
17 июня 2015, 09:45:35
спасибо.только где ее установить. в глобал css не получается

Adik

#3
17 июня 2015, 09:59:54
В global.css в конце файла.

reddevil46

#4
17 июня 2015, 10:05:05 Последнее редактирование: 17 июня 2015, 10:30:57 от DarinSr
Будь другом подскажи где. ну ни как не догоняю что куда ,свтавляю все равно не получается

Код Выделить
footer-container {
  background-color: #333333; }
  @media (min-width: 768px) {
    .footer-container {
      background:  repeat-x #000; } }
  .footer-container .container {
    padding-bottom: 15px; }
  .footer-container #footer {
    color: #777777; }
    .footer-container #footer .row {
      position: relative; }
    .footer-container #footer .footer-block {
      margin-top: 45px; }
      @media (max-width: 767px) {
        .footer-container #footer .footer-block {
          margin-top: 20px; } }
    .footer-container #footer a {
      color: #777777; }
      .footer-container #footer a:hover {
        color: white; }
    .footer-container #footer h4 {
      font: 600 18px/22px "Open Sans", sans-serif;
      color: white;
      margin: 0 0 13px 0; }
      @media (max-width: 767px) {
        .footer-container #footer h4 {
          position: relative;
          margin-bottom: 0;
          padding-bottom: 13px; }
          .footer-container #footer h4:after {
            display: block;
            content: "\f055";
            font-family: "FontAwesome";
            position: absolute;
            right: 0;
            top: 1px; }
          .footer-container #footer h4.active:after {
            content: "\f056"; } }
      .footer-container #footer h4 a {
        color: white; }
    .footer-container #footer ul li {
      padding-bottom: 8px; }
      .footer-container #footer ul li a {
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4); }
    .footer-container #footer #block_contact_infos {
      border-left: 1px solid #515151; }
      @media (max-width: 767px) {
        .footer-container #footer #block_contact_infos {
          border: none; } }
      .footer-container #footer #block_contact_infos > div {
        padding: 0 0 0 0px; }
        @media (max-width: 767px) {
          .footer-container #footer #block_contact_infos > div {
            padding-left: 0; } }
        .footer-container #footer #block_contact_infos > div ul li {
          padding: 0 0 7px 25px;
          overflow: hidden;
          line-height: 20px; }
          .footer-container #footer #block_contact_infos > div ul li > span,
          .footer-container #footer #block_contact_infos > div ul li > span a {
            color: white;
            font-weight: normal; }
          .footer-container #footer #block_contact_infos > div ul li i {
            font-size: 25px;
            width: 32px;
            text-align: center;
            padding-right: 12px;
            float: left;
            color: #fff; }
    .footer-container #footer .blockcategories_footer {
      clear: left; }
    .footer-container #footer #social_block {
      float: left;
      width: 50%;
      padding: 22px 15px 0 15px; }
      @media (max-width: 767px) {
        .footer-container #footer #social_block {
          width: 100%;
          float: left;
          padding-top: 5px; } }
      .footer-container #footer #social_block ul {
        float: right; }
        @media (max-width: 767px) {
          .footer-container #footer #social_block ul {
            float: none; } }
        .footer-container #footer #social_block ul li {
          float: left;
          width: 40px;
          text-align: center; }
          @media (min-width: 768px) and (max-width: 991px) {
            .footer-container #footer #social_block ul li {
              width: 30px; } }
          .footer-container #footer #social_block ul li a {
            display: inline-block;
            color: #908f8f;
            font-size: 28px; }
            @media (min-width: 768px) and (max-width: 991px) {
              .footer-container #footer #social_block ul li a {
                font-size: 20px; } }
            .footer-container #footer #social_block ul li a span {
              display: none; }
            .footer-container #footer #social_block ul li a:before {
              display: inline-block;
              font-family: "FontAwesome";
              vertical-align: -5px; }
            .footer-container #footer #social_block ul li a:hover {
              color: white; }
          .footer-container #footer #social_block ul li.facebook a:before {
            content: "\f09a"; }
          .footer-container #footer #social_block ul li.twitter a:before {
            content: "\f099"; }
          .footer-container #footer #social_block ul li.rss a:before {
            content: "\f09e"; }
          .footer-container #footer #social_block ul li.youtube a:before {
            content: "\f167"; }
          .footer-container #footer #social_block ul li.google-plus a:before {
            content: "\f0d5"; }
          .footer-container #footer #social_block ul li.pinterest a:before {
            content: "\f0d2"; }
      .footer-container #footer #social_block h4 {
        float: right;
        margin-bottom: 0;
        font-size: 21px;
        line-height: 25px;
        text-transform: none;
        padding: 0 10px 0 0; }
        @media (max-width: 767px) {
          .footer-container #footer #social_block h4 {
            display: none;
            text-align: center; } }
    .footer-container #footer .bottom-footer {
      position: absolute;
      bottom: -55px;
      left: 0; }
      .footer-container #footer .bottom-footer div {
        padding: 15px 0 0 0;
        border-top: 1px solid #515151;
        width: 100%; }

DarinSr

#5
17 июня 2015, 10:33:05
Цитата: Adik от 17 июня 2015, 09:59:54
В global.css в конце файла.
Установить для футера ширину
Код Выделить
#footer {width:..}
Что не понятно? В самом конце файла добавьте правило css для футера.
Ширину можно задать в px или %.

reddevil46

#6
17 июня 2015, 12:15:42
Цитата: DarinSr от 17 июня 2015, 10:33:05
Цитата: Adik от 17 июня 2015, 09:59:54
В global.css в конце файла.
Установить для футера ширину
Код Выделить
#footer {width:..}
Что не понятно? В самом конце файла добавьте правило css для футера.
Ширину можно задать в px или %.
вставляю в конец файла global css. #footer {width:..} сам футер не уменьшается ,просто сужаюстя надписи, а мне надо чтоб сам футер уменьшился до уровня страницы с товаром

VictorD

#7
17 июня 2015, 12:55:32
Футер только стилями не уменьшить. Нужно менять структуру.
Если нужно чтобы он был как центральная колонка, то нужно менять шаблон footer.tpl
Код Выделить
<!-- Footer -->
<div class="footer-container">
<div class="container">
    <div class="row">
<div class="column col-xs-12 col-sm-3"></div>
<div id="center_column" class="center_column col-xs-12 col-sm-9">
<footer id="footer"  class="container">
<div class="row">{$HOOK_FOOTER}</div>
</footer>
</div>
    </div><!-- .row -->
    </div>
</div>
<!-- #footer -->

reddevil46

#8
17 июня 2015, 14:55:15
всем спасибо, но все равно ни фига не получилось

Виталий

#9
17 июня 2015, 17:38:06
Ширина в теме на основе bootsrap меняется стилями col-xs-1...12 col-sm-1...12. Всего 12 колонок.
У вас в футере находяться 4 блока, которые занимают 12 колонок.
Код Выделить
<section class="blockcategories_footer footer-block col-xs-12 col-sm-2">
<section id="block_various_links_footer" class="footer-block col-xs-12 col-sm-2">
<section class="footer-block col-xs-12 col-sm-4">
<section id="block_contact_infos" class="footer-block col-xs-12 col-sm-4">
Прежде чем менять ширину футера, удалите несколько блоков. Модуль blockcategories в футере или blockcontactinfos.
Cоздание интернет сайтов Webstudio UwK

reddevil46

#10
17 июня 2015, 21:24:18
Цитата: Виталий от 17 июня 2015, 17:38:06
Ширина в теме на основе bootsrap меняется стилями col-xs-1...12 col-sm-1...12. Всего 12 колонок.
У вас в футере находяться 4 блока, которые занимают 12 колонок.
Код Выделить
<section class="blockcategories_footer footer-block col-xs-12 col-sm-2">
<section id="block_various_links_footer" class="footer-block col-xs-12 col-sm-2">
<section class="footer-block col-xs-12 col-sm-4">
<section id="block_contact_infos" class="footer-block col-xs-12 col-sm-4">
Прежде чем менять ширину футера, удалите несколько блоков. Модуль blockcategories в футере или blockcontactinfos.
спасибо. основу понял буду пробовать
Печать
Вверх Страницы1
Действия пользователя