Добавление

Mertos · 30 Июл 2013

Здравствуйте. Как добавить рамку вокруг блока?

NuBiK · 30 Июл 2013

Вот html блок,он сделает круглую рамку.Он прописан,что и как.
А вот как сделать именно ту рамку,еще не знаю.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Закругленные уголки</title>
  <style type="text/css">
  .color_block {
    border: 2px #808080 solid; /* Параметры рамки */
    background: #e3ffec; /* Цвет фона */
  }
  em.bt, em.bt b, em.bb, em.bb b {
    display: block; /* Блочный элемент */
    height: 10px; /* Высота уголка */
    font-size: 0; /* Размер шрифта */
    background: url(images/corners.png) no-repeat; /* Путь к файлу с уголками */
    position: relative; /* Относительное позиционирование */
  }
  em.bt {
    top: -2px; /* Сдвигаем левый верхний уголок вверх */
    left: -2px; /* Сдвигаем влево */
  }
  em.bt b {
    background-position:  100% -10px; /* Рисунок сдвигается к следующему уголку */
    left: 4px; /* Сдвигаем вправо */
  }
  em.bb { background-position: 0 -20px; top: 2px; left: -2px; }
  em.bb b { background-position: 100% -30px; left: 4px; }
  .color_block .block_content {
    padding: 0 7px; /* Поля вокруг текста */
  }
  </style>
  </head>
  <body>
  <div class="color_block">
    <em class="bt"><b>&nbsp;</b></em>
    <div class="block_content">
    Чтобы изготовить пугало для горного поля, делают фигуру человека,
    который держит в руках лук и стрелы. Птицы и звери видят его
    и убегают. И хотя у пугала нет никаких намерений, олень не
    подойдет к нему близко. Так пугало выполняет свое назначение,
    и поэтому говорят, что оно стоит в горном поле не напрасно.
    </div>
    <em class="bb"><b>&nbsp;</b></em>
  </div>
</body>
</html>

Mertos · 30 Июл 2013

так и не решил проблему.

Код:

<xen:if hascontent="true">   
    <xen:require css="sidebar_share_page.css" />
    <div class="section infoBlock sharePage">
        <div class="secondaryContent">
            <h3>{xen:phrase share_this_page}</h3>
            <xen:contentcheck>
                <xen:hook name="sidebar_share_page_options">
                <xen:if is="{$xenOptions.tweet.enabled}">
                    <div class="tweet shareControl">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"
                            data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
                            data-url="{$url}"
                            {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
                            {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
                    </div>
                </xen:if>       
                <xen:if is="{$xenOptions.facebookLike}">
                    <div class="facebookLike shareControl">
                        <xen:container var="$facebookSdk">1</xen:container>
                        <fb:like href="{$url}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                    </div>
                </xen:if>
                <xen:if is="{$xenOptions.plusone}">
                    <div class="plusone shareControl">
                        <div class="g-plusone" data-size="medium" data-count="true" data-href="{$url}"></div>
                    </div>
                </xen:if>   
                </xen:hook>       
            </xen:contentcheck>

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://vk.com/js/api/share.js?85" charset="windows-1251"></script>

<!-- Put this script tag to the place, where the Share button will be -->
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>
        </div>
    </div>
</xen:if>

Как в этом коде сделать рамку?

ЦукерОо · 30 Июл 2013

шаблон xenforo_sections.css

ищем

Код:

.secondaryContent
{
   @property "secondaryContent";
   background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
   padding: 10px;
   border-bottom: 1px solid @primaryLighterStill;
   @property "/secondaryContent";

}

Добавляем

Код:

-webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
   border: 1px solid #d2d2d2;
   -webkit-box-shadow: rgba(0,0,0,0.05) 0px 1px 4px; -moz-box-shadow: rgba(0,0,0,0.05) 0px 1px 4px; -khtml-box-shadow: rgba(0,0,0,0.05) 0px 1px 4px; box-shadow: rgba(0,0,0,0.05) 0px 1px 4px;
   background: rgb(255, 255, 255);

Получаем

Код:

.secondaryContent
{
   @property "secondaryContent";
   background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
   padding: 10px;
   border-bottom: 1px solid @primaryLighterStill;
   @property "/secondaryContent";

-webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
   border: 1px solid #d2d2d2;
   -webkit-box-shadow: rgba(0,0,0,0.05) 0px 1px 4px; -moz-box-shadow: rgba(0,0,0,0.05) 0px 1px 4px; -khtml-box-shadow: rgba(0,0,0,0.05) 0px 1px 4px; box-shadow: rgba(0,0,0,0.05) 0px 1px 4px;
   background: rgb(255, 255, 255);
}

Можно тени убрать будет так

Код:

.secondaryContent
{
background: #f0f7fc url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 10px;
border-bottom: 1px solid #d7edfc;
border: 1px solid #d2d2d2;
background: rgb(255, 255, 255);
}

После изменений выглядит так:

Hope · 30 Июл 2013

Название темы приводим к информативному виду и все изображения заливаем к нам на сервер.

Добавление

Mertos

NuBiK

Mertos

ЦукерОо

Hope

Похожие темы

Мы ценим вашу конфиденциальность