abo-karim
06-29-2017, 04:33 PM
السلام عليكم ورحمه الله وبركاته
درسنا اليوم راعينا فيه استخدم مكتبه الخطوط Font Awesome والخط الكوفى لان القالب الاقتباس اليوم ليس كاى قالب لانه القالب الخاص بمعهد هيلبرنت اليوم اطرحه بعد تحويله ولله الحمد من vbulletin الى xenforo لان الكل يعرف ان الاسكريبت المستخدم بمعهد هيلبرنت هو الفى بى او vbulletin .
لنبدء على بركة الله
http://www.helpernt.com/vb/attachment.php?attachmentid=651&stc=1&d=1498742602
1- قم بتسجيل الدخول للوحة تحكم المنتدى >>>> ثم الى المظهر >>>> ثم البحث فى القوالب >>>>> ابحث عن قالب اسمه bb_code_tag_quote
2- امسح ما بداخله من اكواد ثم قم باستبدال محتواه بهذا الكود
<xen:require css="bb_code.css" />
<xen:comment><!-- content is escaped via parser --></xen:comment>
<div class="bbCodeBlock bbCodeQuote{xen:if $ignored, ' ignored'}"{xen:if $nameHtml, ' data-author="{$nameHtml}"'}>
<aside>
<xen:if is="{$nameHtml}">
<div class="attribution type">{xen:phrase x_said, 'name={xen:raw $nameHtml}'}:
<xen:if is="{$source}">
<a href="{xen:link 'goto/{$source.type}', '', 'id={$source.id}'}#{$source.type}-{$source.id}" class="AttributionLink">↑</a>
</xen:if>
</div>
</xen:if>
<blockquote class="quoteContainer"><div class="QuoteIcon fa fa-quote-right"></div><div class="quote">{xen:raw $content}</div><div class="quoteExpand">{xen:phrase click_to_expand}</div></blockquote>
</aside>
</div>3- قم بالدخول للوحة تحكم المنتدى >>>> ثم الى المظهر >>>> ثم البحث فى القوالب >>>>> ابحث عن قالب اسمه bb_code.css
4- امسح ما بداخله من اكواد ثم قم باستبدال محتواه بهذا الكود
/* .bbCodeX classes are designed to exist inside .baseHtml. ie: they have no CSS reset applied */
.bbCodeBlock
{
@property "bbCodeBlock";
border: 1px solid #f1d8ac;
border-radius: 5px;
box-shadow: 0 0 3px #eee;
margin-bottom: 10px;
margin-top: 10px;
overflow: hidden;
padding: 1px;
@property "/bbCodeBlock";
}
.bbCodeBlock .bbCodeBlock,
.hasJs .bbCodeBlock .bbCodeSpoilerText,
.messageList.withSidebar .bbCodeBlock
{
margin-right: 0;
}
/* mini CSS reset */
.bbCodeBlock pre,
.bbCodeBlock blockquote
{
margin: 0;
}
.bbCodeBlock img
{
border: none;
}
.bbCodeBlock .type
{
@property "bbCodeBlockType";
font-size: 13px;
font-family: @body.font-family;
color: #c1611a;
background-color: #fff5d3;
padding: 7px 8px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #FFF;
border-top-left-radius: @fa_borderradiuss;
border-top-right-radius: @fa_borderradiuss;
@property "/bbCodeBlockType";
}
.bbCodeBlock pre,
.bbCodeBlock .code
{
@property "bbCodeCode";
font-size: 10pt;
font-family: Consolas, 'Courier New', Courier, monospace;
background-color: rgb(255, 255, 255);
padding: 10px;
border-radius: @fa_borderradiuss;
word-wrap: normal;
overflow: auto;
line-height: 1.24;
min-height: 30px;
max-height: 500px;
_width: 600px;
direction: ltr;
@property "/bbCodeCode";
}
.bbCodeBlock .code
{
white-space: nowrap;
}
.bbCodeQuote
{
@property "bbCodeQuote";
overflow: auto;
@property "/bbCodeQuote";
}
.bbCodeQuote .attribution
{
@property "bbCodeQuoteAttribution";
@property "/bbCodeQuoteAttribution";
}
.QuoteIcon {
color: #cd8a33;
float: left;
font-size: 36px !important;
text-shadow: 0 1px 1px #fff;
margin-right: 10px;
}
.bbCodeQuote .quoteContainer
{
overflow: hidden;
position: relative;
@property "bbCodeQuoteMessage";
font-style: italic;
font-size: 9pt;
background-color: #fff5d3;
padding: 10px;
border-radius: @fa_borderradiuss;
@property "/bbCodeQuoteMessage";
}
<xen:if is="@bbCodeQuoteMaxHeight">
.bbCodeQuote .quoteContainer .quote
{
max-height: @bbCodeQuoteMaxHeight;
overflow: hidden;
padding-bottom: 1px;
}
.NoJs .bbCodeQuote .quoteContainer .quote
{
max-height: none;
}
.bbCodeQuote .quoteContainer .quoteExpand
{
display: none;
box-sizing: border-box;
position: absolute;
height: 80px;
top: {xen:calc '@bbCodeQuoteMaxHeight + intval(@bbCodeQuoteMessage.padding-top) + intval(@bbCodeQuoteMessage.padding-bottom) - 80'}px;
left: 0;
right: 0;
font-size: 11px;
line-height: 1;
text-align: center;
color: @secondaryLight;
cursor: pointer;
padding-top: 65px;
background: -webkit-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
background: -moz-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
background: -o-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
background: linear-gradient(to bottom, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
border-bottom-left-radius: @bbCodeQuoteMessage.border-bottom-left-radius;
border-bottom-right-radius: @bbCodeQuoteMessage.border-bottom-right-radius;
}
.bbCodeQuote .quoteContainer .quoteExpand.quoteCut
{
display: block;
}
.bbCodeQuote .quoteContainer.expanded .quote
{
max-height: none;
}
.bbCodeQuote .quoteContainer.expanded .quoteExpand
{
display: none;
}
<xen:else />
.bbCodeQuote .quoteContainer .quoteExpand
{
display: none;
}
</xen:if>
.bbCodeQuote img
{
max-height: 150px;
}
.bbCodeQuote iframe,
.bbCodeQuote .fb_iframe_widget,
.bbCodeQuote object,
.bbCodeQuote embed
{
max-width: 200px;
max-height: 150px;
}
.bbCodeQuote iframe:-webkit-full-screen
{
max-width: none;
max-height: none;
}
.bbCodeQuote iframe:-moz-full-screen
{
max-width: none;
max-height: none;
}
.bbCodeQuote iframe:-ms-fullscreen
{
max-width: none;
max-height: none;
}
.bbCodeQuote iframe:fullscreen
{
max-width: none;
max-height: none;
}
.bbCodeSpoilerButton
{
margin: 5px 0;
max-width: 99%;
}
.bbCodeSpoilerButton > span
{
display: inline-block;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.hasJs .bbCodeSpoilerText
{
display: none;
@property "bbCodeSpoilerText";
background-color: @primaryLightest;
padding: 5px;
margin-top: 5px;
margin-right: @messageInfo.margin-left;
margin-bottom: 5px;
border: 1px solid @primaryLighterStill;
border-radius: @fa_borderradiuss;
overflow: auto;
@property "/bbCodeSpoilerText";
}
.hasJs .bbCodeSpoilerText .bbCodeSpoilerText,
.hasJs .bbCodeSpoilerText .bbCodeBlock,
.hasJs .messageList.withSidebar .bbCodeSpoilerText
{
margin-right: 0;
}
.NoJs .bbCodeSpoilerContainer
{
background-color: @contentText; /* fallback for browsers without currentColor */
background-color: currentColor;
}
.NoJs .bbCodeSpoilerContainer > .bbCodeSpoilerText
{
visibility: hidden;
}
.NoJs .bbCodeSpoilerContainer:hover
{
background-color: transparent;
}
.NoJs .bbCodeSpoilerContainer:hover > .bbCodeSpoilerText
{
visibility: visible;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
.Responsive .bbCodeBlock,
.Responsive.hasJs .bbCodeSpoilerText
{
margin-right: 0;
}
}
</xen:if>
النتيجة الان
http://www.helpernt.com/vb/attachment.php?attachmentid=652&stc=1&d=1498742602
تم ولله الحمد
انتظرو منا الحصرى دائما على موقع هيلبرنت (http://www.helpernt.com/vb)
دروس قد تحتاج لها لو ان استايلك لا يدعم تاخط الكوفى او مكتبه الخطوط
شرح تغيير خط منتدى الزين فورو xenforo إلى الخط الكوفي (http://www.helpernt.com/vb/showthread.php?t=4143)
شرح طريقة تغيير نوع الخط المشاركات والمواضيع بسكربت XenForo إلى الخط الكوفي (http://www.helpernt.com/vb/showthread.php?t=4156)
طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo (http://www.helpernt.com/vb/showthread.php?t=4409)
الى اللقاء
اخوكم ابو كريم
درسنا اليوم راعينا فيه استخدم مكتبه الخطوط Font Awesome والخط الكوفى لان القالب الاقتباس اليوم ليس كاى قالب لانه القالب الخاص بمعهد هيلبرنت اليوم اطرحه بعد تحويله ولله الحمد من vbulletin الى xenforo لان الكل يعرف ان الاسكريبت المستخدم بمعهد هيلبرنت هو الفى بى او vbulletin .
لنبدء على بركة الله
http://www.helpernt.com/vb/attachment.php?attachmentid=651&stc=1&d=1498742602
1- قم بتسجيل الدخول للوحة تحكم المنتدى >>>> ثم الى المظهر >>>> ثم البحث فى القوالب >>>>> ابحث عن قالب اسمه bb_code_tag_quote
2- امسح ما بداخله من اكواد ثم قم باستبدال محتواه بهذا الكود
<xen:require css="bb_code.css" />
<xen:comment><!-- content is escaped via parser --></xen:comment>
<div class="bbCodeBlock bbCodeQuote{xen:if $ignored, ' ignored'}"{xen:if $nameHtml, ' data-author="{$nameHtml}"'}>
<aside>
<xen:if is="{$nameHtml}">
<div class="attribution type">{xen:phrase x_said, 'name={xen:raw $nameHtml}'}:
<xen:if is="{$source}">
<a href="{xen:link 'goto/{$source.type}', '', 'id={$source.id}'}#{$source.type}-{$source.id}" class="AttributionLink">↑</a>
</xen:if>
</div>
</xen:if>
<blockquote class="quoteContainer"><div class="QuoteIcon fa fa-quote-right"></div><div class="quote">{xen:raw $content}</div><div class="quoteExpand">{xen:phrase click_to_expand}</div></blockquote>
</aside>
</div>3- قم بالدخول للوحة تحكم المنتدى >>>> ثم الى المظهر >>>> ثم البحث فى القوالب >>>>> ابحث عن قالب اسمه bb_code.css
4- امسح ما بداخله من اكواد ثم قم باستبدال محتواه بهذا الكود
/* .bbCodeX classes are designed to exist inside .baseHtml. ie: they have no CSS reset applied */
.bbCodeBlock
{
@property "bbCodeBlock";
border: 1px solid #f1d8ac;
border-radius: 5px;
box-shadow: 0 0 3px #eee;
margin-bottom: 10px;
margin-top: 10px;
overflow: hidden;
padding: 1px;
@property "/bbCodeBlock";
}
.bbCodeBlock .bbCodeBlock,
.hasJs .bbCodeBlock .bbCodeSpoilerText,
.messageList.withSidebar .bbCodeBlock
{
margin-right: 0;
}
/* mini CSS reset */
.bbCodeBlock pre,
.bbCodeBlock blockquote
{
margin: 0;
}
.bbCodeBlock img
{
border: none;
}
.bbCodeBlock .type
{
@property "bbCodeBlockType";
font-size: 13px;
font-family: @body.font-family;
color: #c1611a;
background-color: #fff5d3;
padding: 7px 8px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #FFF;
border-top-left-radius: @fa_borderradiuss;
border-top-right-radius: @fa_borderradiuss;
@property "/bbCodeBlockType";
}
.bbCodeBlock pre,
.bbCodeBlock .code
{
@property "bbCodeCode";
font-size: 10pt;
font-family: Consolas, 'Courier New', Courier, monospace;
background-color: rgb(255, 255, 255);
padding: 10px;
border-radius: @fa_borderradiuss;
word-wrap: normal;
overflow: auto;
line-height: 1.24;
min-height: 30px;
max-height: 500px;
_width: 600px;
direction: ltr;
@property "/bbCodeCode";
}
.bbCodeBlock .code
{
white-space: nowrap;
}
.bbCodeQuote
{
@property "bbCodeQuote";
overflow: auto;
@property "/bbCodeQuote";
}
.bbCodeQuote .attribution
{
@property "bbCodeQuoteAttribution";
@property "/bbCodeQuoteAttribution";
}
.QuoteIcon {
color: #cd8a33;
float: left;
font-size: 36px !important;
text-shadow: 0 1px 1px #fff;
margin-right: 10px;
}
.bbCodeQuote .quoteContainer
{
overflow: hidden;
position: relative;
@property "bbCodeQuoteMessage";
font-style: italic;
font-size: 9pt;
background-color: #fff5d3;
padding: 10px;
border-radius: @fa_borderradiuss;
@property "/bbCodeQuoteMessage";
}
<xen:if is="@bbCodeQuoteMaxHeight">
.bbCodeQuote .quoteContainer .quote
{
max-height: @bbCodeQuoteMaxHeight;
overflow: hidden;
padding-bottom: 1px;
}
.NoJs .bbCodeQuote .quoteContainer .quote
{
max-height: none;
}
.bbCodeQuote .quoteContainer .quoteExpand
{
display: none;
box-sizing: border-box;
position: absolute;
height: 80px;
top: {xen:calc '@bbCodeQuoteMaxHeight + intval(@bbCodeQuoteMessage.padding-top) + intval(@bbCodeQuoteMessage.padding-bottom) - 80'}px;
left: 0;
right: 0;
font-size: 11px;
line-height: 1;
text-align: center;
color: @secondaryLight;
cursor: pointer;
padding-top: 65px;
background: -webkit-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
background: -moz-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
background: -o-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
background: linear-gradient(to bottom, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
border-bottom-left-radius: @bbCodeQuoteMessage.border-bottom-left-radius;
border-bottom-right-radius: @bbCodeQuoteMessage.border-bottom-right-radius;
}
.bbCodeQuote .quoteContainer .quoteExpand.quoteCut
{
display: block;
}
.bbCodeQuote .quoteContainer.expanded .quote
{
max-height: none;
}
.bbCodeQuote .quoteContainer.expanded .quoteExpand
{
display: none;
}
<xen:else />
.bbCodeQuote .quoteContainer .quoteExpand
{
display: none;
}
</xen:if>
.bbCodeQuote img
{
max-height: 150px;
}
.bbCodeQuote iframe,
.bbCodeQuote .fb_iframe_widget,
.bbCodeQuote object,
.bbCodeQuote embed
{
max-width: 200px;
max-height: 150px;
}
.bbCodeQuote iframe:-webkit-full-screen
{
max-width: none;
max-height: none;
}
.bbCodeQuote iframe:-moz-full-screen
{
max-width: none;
max-height: none;
}
.bbCodeQuote iframe:-ms-fullscreen
{
max-width: none;
max-height: none;
}
.bbCodeQuote iframe:fullscreen
{
max-width: none;
max-height: none;
}
.bbCodeSpoilerButton
{
margin: 5px 0;
max-width: 99%;
}
.bbCodeSpoilerButton > span
{
display: inline-block;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.hasJs .bbCodeSpoilerText
{
display: none;
@property "bbCodeSpoilerText";
background-color: @primaryLightest;
padding: 5px;
margin-top: 5px;
margin-right: @messageInfo.margin-left;
margin-bottom: 5px;
border: 1px solid @primaryLighterStill;
border-radius: @fa_borderradiuss;
overflow: auto;
@property "/bbCodeSpoilerText";
}
.hasJs .bbCodeSpoilerText .bbCodeSpoilerText,
.hasJs .bbCodeSpoilerText .bbCodeBlock,
.hasJs .messageList.withSidebar .bbCodeSpoilerText
{
margin-right: 0;
}
.NoJs .bbCodeSpoilerContainer
{
background-color: @contentText; /* fallback for browsers without currentColor */
background-color: currentColor;
}
.NoJs .bbCodeSpoilerContainer > .bbCodeSpoilerText
{
visibility: hidden;
}
.NoJs .bbCodeSpoilerContainer:hover
{
background-color: transparent;
}
.NoJs .bbCodeSpoilerContainer:hover > .bbCodeSpoilerText
{
visibility: visible;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
.Responsive .bbCodeBlock,
.Responsive.hasJs .bbCodeSpoilerText
{
margin-right: 0;
}
}
</xen:if>
النتيجة الان
http://www.helpernt.com/vb/attachment.php?attachmentid=652&stc=1&d=1498742602
تم ولله الحمد
انتظرو منا الحصرى دائما على موقع هيلبرنت (http://www.helpernt.com/vb)
دروس قد تحتاج لها لو ان استايلك لا يدعم تاخط الكوفى او مكتبه الخطوط
شرح تغيير خط منتدى الزين فورو xenforo إلى الخط الكوفي (http://www.helpernt.com/vb/showthread.php?t=4143)
شرح طريقة تغيير نوع الخط المشاركات والمواضيع بسكربت XenForo إلى الخط الكوفي (http://www.helpernt.com/vb/showthread.php?t=4156)
طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo (http://www.helpernt.com/vb/showthread.php?t=4409)
الى اللقاء
اخوكم ابو كريم