bonjour donc voila j ai fait plusieurs trucs mais aucun resultats je voudrais mettre une icone FA et centrer le titre
toujours xf 2.1.8 patch 2 et [XenGenTr] Resimli one cikan konular 3.0.10
voici le xgt_OneCikan_Konular.less
voici le template xgt_OneCikan_Konular
toujours xf 2.1.8 patch 2 et [XenGenTr] Resimli one cikan konular 3.0.10
voici le xgt_OneCikan_Konular.less
CSS:
/*********************************************
** [XenGenTr] Resimli öne çıkan konular **
** 03.06.2020 **
** www.xenforo.gen.tr **
**********************************************/
// Öne çıkan konular listesi
.xgtResimliOnecikanlar--sayfa
{
width: 100%;
padding: 30px 10px;
.sayfa-onecikan--blok
{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-align-content: left;
-ms-flex-line-pack: left;
align-content: left;
-ms-flex-align: start;
align-items: start;
.BosHucre
{
position: relative;
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
.sayfa-onecikan--hucre
{
-webkit-flex: 0 0 33.3%;
-ms-flex: 0 0 33.3%;
flex: 0 0 33.3%;
max-width: 33.3%;
margin-bottom: 20px;
@media (max-width: @xf-responsiveWide)
{
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
@media (max-width: @xf-responsiveNarrow)
{
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.onecikan-overlay
{
opacity: @xf-xgtOneCikan_overlay;
mix-blend-mode: multiply;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
height: 100%;
width: 100%;
position: absolute;
background: url('styles/XenGenTr/XGTOnecikanKonular/onecikan_overlay-min.png') repeat;
}
.onecikan-blok
{
position: relative;
border-radius: 10px;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0,0.6);
a
{
color: @xf-xgtOnecikan_detaylar--color;
&:hover
{
text-decoration: none;
color: fade(@xf-xgtOnecikan_detaylar--color, 80%)
}
}
.onecikan-icerik93
{
height: 93px;
}
.onecikan-icerik70
{
height: 70px;
}
.onecikan-icerik55
{
height: 55px;
}
.onecikan-icerik30
{
height: 30px;
}
.onecikan-icerik
{
position: relative;
.onecikan-icerik--overlay
{
img
{
transform: rotate(180deg) scale(0.99);
position: relative;
z-index: 1;
filter: blur(@xf-xgtOneCikan_blur);
-webkit-filter: blur(@xf-xgtOneCikan_blur);
}
}
.oncecikan-detaylar
{
position: absolute;
z-index: 9;
top: 0;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
padding: 0px 8px 0px 8px;
.xf-xgtOnecikan_detaylar();
a
{
color: @xf-xgtOnecikan_detaylar--color;
&:hover
{
text-decoration: none;
color: xf-intensify(@xf-xgtOnecikan_detaylar--color, 3%);
}
}
.onecikan-verileri
{
line-height: 25px;
dl
{
margin: 0;
padding: 0;
width: 80%;
float: left;
dd
{
padding: 0;
margin: 0;
margin: 0px 10px 0px 0px;
float: left;
}
dt
{
padding: 0;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.mesajsayisi
{
float: right;
}
}
.onecikan-baslik
{
font-size: 16px;
font-weight: 600;
height: 26px;
overflow: hidden;
border-bottom: solid 1px fade(@xf-xgtOnecikan_detaylar--color,20%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.onecikan-mesaj
{
color: fade(@xf-xgtOnecikan_detaylar--color,70%);
font-size:12px;
height: 35px;
overflow: hidden;
}
}
}
}
}
}
}
.xgtResimliOnecikanlar
{
padding: 0;
.xf-xgtOneCikan_arkaplan();
<xf:if is="{{ $xf.options.xgt_onecikankonu_mobilgizle }}">
@media (max-width: @xf-responsiveNarrow)
{
display:none;
}
</xf:if>
.oncecikan-govde
{
width: 100%;
padding: 10px 10px 0px 10px;
margin: 0;
}
.onecikan-overlay
{
opacity: @xf-xgtOneCikan_overlay;
mix-blend-mode: multiply;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
height: 100%;
width: 100%;
position: absolute;
background: url('styles/XenGenTr/XGTOnecikanKonular/onecikan_overlay-min.png') repeat;
}
.onecikan-blok
{
position: relative;
border-radius: 10px;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0,0.6);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
&:hover
{
-webkit-transform: scale(1.01);
-moz-transform: sscale(1.01);
-ms-transform: scale(1.01);
-o-transform: scale(1.01);
transform: scale(1.01);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.onecikan-icerik93
{
height: 93px;
}
.onecikan-icerik70
{
height: 70px;
}
.onecikan-icerik55
{
height: 55px;
}
.onecikan-icerik30
{
height: 30px;
}
.onecikan-icerik
{
position: relative;
.onecikan-icerik--overlay
{
img
{
transform: rotate(180deg) scale(0.99);
position: relative;
z-index: 1;
filter: blur(@xf-xgtOneCikan_blur);
-webkit-filter: blur(@xf-xgtOneCikan_blur);
}
}
.oncecikan-detaylar
{
position: absolute;
z-index: 9;
top: 0;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
padding: 0px 8px 0px 8px;
.xf-xgtOnecikan_detaylar();
a
{
color: @xf-xgtOnecikan_detaylar--color;
&:hover
{
text-decoration: none;
color: xf-intensify(@xf-xgtOnecikan_detaylar--color, 3%);
}
}
.onecikan-verileri
{
line-height: 25px;
dl
{
margin: 0;
padding: 0;
width: 80%;
float: left;
dd
{
padding: 0;
margin: 0;
margin: 0px 10px 0px 0px;
float: left;
}
dt
{
padding: 0;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.mesajsayisi
{
float: right;
}
}
.onecikan-baslik
{
font-size: 16px;
font-weight: 600;
height: 26px;
overflow: hidden;
border-bottom: solid 1px fade(@xf-xgtOnecikan_detaylar--color,20%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.onecikan-mesaj
{
color: fade(@xf-xgtOnecikan_detaylar--color,70%);
font-size:12px;
height: 35px;
overflow: hidden;
}
}
}
}
.onecikan-header
{
display: flex;
font-weight: 400;
text-decoration: none;
.xf-xgtOneCikan_header();
.onecikan-baslik
{
margin-right: auto;
max-width: 100%;
}
}
@media (max-width: @xf-responsiveNarrow)
{
.collapseTrigger
{
display:none;
}
}
.collapseTrigger
{
margin-right: 10px;
&.is-active
{
&:before
{
content: "\f077";
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
}
&:before
{
content: "\f078";
}
.collapseTrigger--block
{
&:before
{
float: none;
margin-right: 0;
margin-left: 0;
}
}
}
.block-container
{
:hover
{
.collapseTrigger
{
opacity: 1;
}
}
}
}//--xgtResimliOnecikanlar
.block-body.block-body--collapsible
{
overflow-y: hidden;
height: 0;
display: none;
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-webkit-transition-property: all, -xf-opacity;
transition-property: all, -xf-opacity;
-webkit-transition-property: all, -xf-height;
transition-property: all, -xf-height;
}
.block-body.block-body--collapsible.is-active
{
&::before
{
transition: transform 0.90s ease;
}
}
.block--category.collapseTrigger::before
{
transition: transform 0.90s ease;
}
//-Slick slider sistemine aittir
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
.slick-track, .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slick-slide
{
display: none;
float: left;
min-height: 1px;
border: none;
vertical-align: middle;
padding: 10px;
img
{
height: auto;
width: auto;
margin: auto;
vertical-align: middle;
max-width: 100%;
display: inline-block;
width: 100%;
display: block;
}
}
.featuredWidget
{
text-align: left;
flex: 1;
p
{
margin: 0px 0;
max-height: 85px;
min-height: 85px;
overflow: hidden;
text-overflow: ellipsis;
}
iframe
{
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
iframe, img
{
width: 100% !important;
transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-webkit-transition: all .35s ease-in-out;
}
img:hover
{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-webkit-transition: all .35s ease-in-out;
}
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-slide, .icon-slide
{
display: none;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
&:focus
{
outline: none;
}
.dragging
{
cursor: pointer;
cursor: hand;
}
}
.slick-dots
{
margin: auto;
padding: 0;
width: auto;
position: relative;
display: block;
list-style: none;
text-align: center;
box-sizing: border-box;
li
{
position: relative;
display: inline-block;
margin: 0;
padding: 0;
cursor: pointer;
button
{
font-size: 0;
line-height: 0;
display: block;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
&::before
{
background: @xf-xgtOnecikanPasifNokta;
border-radius: @xf-xgtOnecikanRadius;
content: "";
display: inline-block;
height: 10px;
overflow: hidden;
text-indent: -999em;
width: 10px;
position: relative;
z-index: 99;
-webkit-transition: all 0.5s linear 0s;
transition: all 0.2s linear 0s;
top: -2px;
opacity: .3;
}
}
}
}
.slick-dots li.slick-active button:before
{
background: @xf-xgtOnecikanAktifNokta;
opacity: 1;
}
.slick-prev, .slick-next
{
background-color: transparent;
font-size:20px;
border: none;
line-height: 0;
position: absolute;
top: 0;
display: block;
cursor: pointer;
outline: none;
height: 70%;
}
.has-fa
{
.slick-prev, .slick-next
{
width: 40px;
z-index: 100;
&:before
{
position: absolute;
width: 30px;
height: 40px;
display: inline-block;
line-height: 40px;
.xf-xgtOneCikan_ilerigeributon();
.m-faBase();
}
}
.slick-prev
{
left: 0;
&:before
{
content: "\f053";
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
margin-left: -28px;
}
}
.slick-next
{
right: 0;
&:before
{
content: "\f054";
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
margin-left: -8px;
}
}
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden
{
display: none;
}
.featuredInner
{
position: relative;
height: 100%;
border-radius:4px;
}
.featuredWidget .featuredInner > div:first-of-type:only-child
{
height: 100%;
box-sizing: border-box;
}
.breadBoxBottom + .slick_container
{
margin-bottom: 0;
}
.boxedContent .slick_container.toEdge
{
margin: -14px -14px 14px -14px;
margin: - - 14px -;
}
.anchor_wide + .slick_container.iconSlider:last-of-type
{
margin-top: 14px;
margin-bottom: 0;
}
.featureImg
{
overflow: hidden;
position: relative;
border-top-left-radius: 4;
border-top-right-radius: 4;
}
.featuredWidget:hover .featureImg:after
{
opacity: 1;
}
.featureDescription
{
background: transparent;
padding: 0px 10px;
position: relative;
}
.featuredWidget:hover .featureDescription
{
background: transparent;
}
span.read-more
{
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
}
@media (max-width: 650px)
{
.iconSliderHideTablet .slick_container.iconSlider
{
display: none;
}
.slick_container.toEdge
{
margin: 0 0 14px 0;
}
}
@media (max-width: 480px)
{
.iconSliderHideMobile .slick_container.iconSlider
{
display: none;
}
}voici le template xgt_OneCikan_Konular
HTML:
<xf:if is="{{ $xf.options.xgt_onecikankonu_kapat }}">
<xf:css src="xgt_OneCikan_Konular.less" />
<xf:include template="xgt_OneCikan_Konular.js" />
<div class="block xgtResimliOnecikanlar"{{ widget_data($widget) }}>
<xf:if is="{{ $xf.options.xgt_onecikankonu_opsiyonlari.headegor }}">
<h3 class="onecikan-header">
<div class="onecikan-baslik">
<a href="{{ link('onecikan-konular') }}" rel="nofollow"> {{$xf.options.xgt_onecikankonu_baslik}}</a>
</div>
<span id="collapse-{$node.node_id}"
class="collapseTrigger collapseTrigger--block is-active"
data-xf-click="toggle"
data-xf-init="toggle-storage"
data-target=".xgtResimliOnecikanlar .block-body"
data-storage-key="xgtOnecikanKonular_wd">
</span>
</h3>
</xf:if>
<div class="block-body block-body--collapsible is-active oncecikan-govde">
<section class="regular autoplay has-fa">
<xf:foreach loop="$onecikanlar" value="$onecikan" i="$key">
<div class="icon-slide featuredWidget">
<a href="{{ link('threads', $onecikan.Thread) }}" title="{{ $onecikan.onecikan_baslik ? $onecikan.onecikan_baslik : $onecikan.Thread.title }}">
<div class="featuredInner">
<div class="featureImg onecikan-blok">
<div class="onecikan-overlay"></div>
<img src="{{ base_url($onecikan.image) }}" alt="{{ $onecikan.onecikan_baslik ? $onecikan.onecikan_baslik : $onecikan.Thread.title }}" title="{{ $onecikan.onecikan_baslik ? $onecikan.onecikan_baslik : $onecikan.Thread.title }}">
<div class="onecikan-icerik {{ ($xf.options.xgt_onecikankonu_opsiyonlari.konuicerigi AND $xf.options.xgt_onecikankonu_opsiyonlari.detaylar) ? 'onecikan-icerik93' : '' }} {{ (!$xf.options.xgt_onecikankonu_opsiyonlari.detaylar) ? 'onecikan-icerik70' : '' }} {{ (!$xf.options.xgt_onecikankonu_opsiyonlari.konuicerigi) ? 'onecikan-icerik55' : '' }} {{ (!$xf.options.xgt_onecikankonu_opsiyonlari.konuicerigi AND !$xf.options.xgt_onecikankonu_opsiyonlari.detaylar) ? 'onecikan-icerik30' : '' }}">
<div class="onecikan-icerik--overlay">
<img src="{{ base_url($onecikan.image) }}" alt="{{ $onecikan.onecikan_baslik ? $onecikan.onecikan_baslik : $onecikan.Thread.title }}" title="{{ $onecikan.onecikan_baslik ? $onecikan.onecikan_baslik : $onecikan.Thread.title }}">
</div>
<div class="oncecikan-detaylar">
<div class="onecikan-baslik">
{{ $onecikan.onecikan_baslik ? $onecikan.onecikan_baslik : $onecikan.Thread.title }}
</div>
<xf:if is="{{ $xf.options.xgt_onecikankonu_opsiyonlari.konuicerigi }}">
<div class="onecikan-mesaj">
{{ snippet($onecikan.onecikan_aciklama, $options.trim ?: $xf.options.xgt_onecikankonu_karakter_siniri, {'stripBbCode': true}) }}
</div>
</xf:if>
<xf:if is="{{ $xf.options.xgt_onecikankonu_opsiyonlari.detaylar }}">
<div class="onecikan-verileri">
<dl>
<dd>
<xf:avatar user="$onecikan.Thread.User" size="xxs" defaultname="{$fallbackName}" itemprop="image" />
</dd>
<dt>
<xf:username user="$onecikan.Thread.User" rich="true" defaultname="{$fallbackName}" itemprop="name" />
</dt>
</dl>
<div class="mesajsayisi">
<i class="fad fa-comments"></i> {{ $onecikan.Thread.reply_count|number }}
</div>
</div>
</xf:if>
</div>
</div>
</div>
</div>
</a>
</div>
</xf:foreach>
</section>
</div>
</div>
</xf:if>
