Avada KedagraphConnexion

description[pris en charge par Jamy #1] Catégorie sous AwesomeBB

more_horiz
Bonjour bonjour c'est encore moi XD

Pseudo

Le type du code : Catégories
Le schéma: obligatoire. [spoiler][/code]
Acceptez-vous que le code soit mis en LS sur AK ? gogogogo LS
Les éléments : Textes/url/couleur/images/police ... N'hésitez pas à écrire vos dimensions et tout ce qui m'aidera à intégrer. Alors les caté sont pour une largeur de ... hum 45% -sur la dimension du fofo test j'ai mis en pourcent-

Je suis pas sure de la typo ceci dit, sur mon toshop c'est du Vanadine mais sur page web je crains que ce soit illisible.

J'aimerias bien que quand la taille de l'écrna se rétrécit, les fofos se mettent les uns en dessous des autres histoire de respecter une harmonie visuelle Very Happy voila Very Happy
Un lien vers votre forum/site/Autre: Ce sera pour ici http://chroniqueambrosia.forumactif.org/ mais d'abord je cale là pour continuer le design http://ambrosiatest.forumactif.com/
Autre chose? Je suis déjà sur le discord avec vous, j'ai tenté de coder mais je maitrise pas le responsive donc ça va pas XD je vous remercie Very Happy

fiche réalisée par laxy

descriptionRe: [pris en charge par Jamy #1] Catégorie sous AwesomeBB

more_horiz
C'est noté ! Je m'en occupe après l'affichage d'un message, je te fais ça au plus vite ! I love you

descriptionRe: [pris en charge par Jamy #1] Catégorie sous AwesomeBB

more_horiz
Code CSS :

Code:

/* Catégorie -- Jamy -- Avada Kedagraph */
.forum-header{background:none; text-align:center;  box-shadow:none; padding:0;}
.category-title{float:none; margin: 0 auto; padding: 10px; width: 80%; border-bottom: 2px solid var(--colorone);    box-sizing: border-box;}
.category-title h2{color: var(--colorone); font-size:24px !important;text-transform: uppercase;}

.forum-section{width:95%; border-radius:0; margin: 1%; padding:0; background-size: cover !important;}

.forum-content{width:100%;margin:0;text-align:center;margin-top: 15px;    height: 222px;}
.forum-content h3{ padding: 8px 0 !important; background: var(--fondbody);font-size:20px !important;text-transform: uppercase; font-weight: 400 !important;}
.forum-content h3 a{color: var(--colorone);}
.forum-content:after{display: none;}
.forum-statistics{float:none; padding: 0; width:80%; margin: 0 auto; text-transform: uppercase;background: var(--fondclair); font-size: 11px;line-height: 15px; margin-top:-5px}

.wrapStatSousfo{padding:5px; display: flex; justify-content: space-between; margin-top: 38px;}
.subforum{width:40%;}
.subforum a{background: var(--fondclair); font-size: 12px; display: block !important; width:100%; padding:1px 2px; margin: 2px !important;text-transform: uppercase;color: var(--colorone);}


.forum-lastpost{width:45%;line-height: 12px; font-size: 11px; text-transform: uppercase;color: var(--colorone);background: var(--fondbody);position:relative;}
.forum-lastpost-inner{margin: 0;width: 65%; display:inline-block !important; vertical-align: bottom !important; float:none; padding: 5px;}
.avatar-default{float:none !important; margin:0 !important; display:inline-block !important; padding: 5px;}

.avatar-default img{width: 50px; height:50px;}

.forum-lastpost .topic-title, .forum-lastpost-time a{font-size: 11px; text-transform: uppercase;color: var(--colorone);font-weight: 400 !important;}
.forum-lastpost-author{display: inline;}
.forum-description{display: none;}

.triangle{
  margin-top:13px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 190px;
  border-color: transparent transparent var(--dark) transparent;
}

.iconNewOld{ position: absolute; left: 55%;
    bottom: 0px;}
.New_Old_Lock{width:40px;}
@media (min-width: 960px){
  .forum-section{width:48%;display: inline-block;    vertical-align: top;}

}

/* FIN Catégorie -- Jamy -- Avada Kedagraph */


Et le template :

Code:

<ul class="action-bar action-bar-top">
    <!-- BEGIN switch_user_logged_in -->
    <li>
        <a href="{U_SEARCH_NEW}">
            <i class="material-icons">new_releases</i> {L_SEARCH_NEW}
        </a>
    </li>
    <li>
        <a href="{U_SEARCH_SELF}">
            <i class="material-icons">account_box</i> {L_SEARCH_SELF}
        </a>
    </li>
    <!-- END switch_user_logged_in -->
    <li>
        <a href="{U_SEARCH_UNANSWERED}">
            <i class="material-icons">chat_bubble_outline</i> {L_SEARCH_UNANSWERED}
        </a>
    </li>
    <!-- BEGIN switch_user_logged_in -->
    <li class="rightside">
        <a href="{U_MARK_READ}" accesskey="m">
            <i class="material-icons">done_all</i> {L_MARK_FORUMS_READ}
        </a>
    </li>
    <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="forum {catrow.tablehead.TYPE_TABLE_SECTION}">
    <div class="forum-header">
        <div class="category-title">{catrow.tablehead.L_FORUM}</div>
    </div>
    <!-- END tablehead -->

    <!-- BEGIN forumrow -->
    <div class="forum-section {catrow.forumrow.FOLDER_CLASSNAME} {catrow.forumrow.TYPE_SECTION}">

        <div class="forum-content">
          <h3><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h3>
          <div class="forum-statistics">{catrow.forumrow.TOPICS} <span>correspondances</span> ✉️ {catrow.forumrow.POSTS} <span>missives</span></div>
                
          <div class="wrapStatSousfo">
           <div class="subforum">
                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </div>
          
          
              <div class="forum-lastpost">
                  <div class="forum-lastpost-inner">
                      <!-- BEGIN switch_topic_title -->
                      <a class="topic-title" href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
                      <!-- END switch_topic_title -->
                      <span>
                        <span class="forum-lastpost-time"><a href="{catrow.forumrow.U_LATEST_TOPIC_POST}">{catrow.forumrow.LAST_POST_HOUR}</a></span>
                        BY <span class="forum-lastpost-author">{catrow.forumrow.USER_LAST_POST}</span>
                      </span>
                  </div>
                
                  <div class="avatar-default">
                      <!-- BEGIN avatar -->
                      {catrow.forumrow.avatar.LAST_POST_AVATAR}
                      <!-- END avatar -->
                  </div>
                  <div class="triangle"></div>
                
                 <div class="iconNewOld">
                  <img class="New_Old_Lock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}"
                    src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                </div>
              </div>
          </div>
          
            <div class="forum-description">
               <p>{catrow.forumrow.FORUM_DESC}</p>
             </div>
          
        </div>
    </div>
    <!-- END forumrow -->

    <!-- BEGIN tablefoot -->
</div><!-- <div class="forum" /> -->
<!-- END tablefoot -->
<!-- END catrow -->

<script type="text/javascript">
 $('.subforum').each(function() {
      var string = $(this).html();
      $(this).html(string.replace(/,/g , ' '));
  });
  
   $('.forum-description p img').each(function(){
       var img = $(this).attr("src");
       var value = "background: url('" + img + "')";
       $(this).parent().parent().parent().parent().attr("style", value);

       console.log(img);
    });
  
 
</script>

<!-- BEGIN switch_on_index -->
<ul class="action-bar action-bar-bottom">
    <li>
        <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
    </li>
    <li>
        <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
    </li>
    <li class="last">
        <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
    </li>
    <!-- BEGIN switch_delete_cookies -->
    <li class="rightside">
        <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
            <i class="material-icons">delete</i>&nbsp;{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
        </a>
    </li>
    <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var btn_collapse = $('<div/>', {
            class: 'forum-hide',
            html: '<div class="forum-hide-icon-a"></div><div class="forum-hide-icon-b"></div>',
        });

        var collapsed = [];

        if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
            collapsed = readCookie('collapsed').split(',');
        }

        $(document).on('click', '.forum-hide', function() {
            $(this).toggleClass('forum-show');
            $(this).parents('.forum').toggleClass('forum-hidden');

            if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
                collapsed = readCookie('collapsed').split(',');
            }

            if (!$(this).parents('.forum').hasClass('forum-hidden')) {
                removeFromArray('' + $(this).parents('.forum').data('cindex'), collapsed);

                createCookie('collapsed', collapsed);
            } else {
                collapsed.push('' + $(this).parents('.forum').data('cindex'));

                createCookie('collapsed', collapsed);
            }
        });

        $('.forum').each(function(i) {
            $(this).data('cindex', '' + i);

            $(btn_collapse)
                .clone()
                .attr('id', 'forum' + i)
                .appendTo($(this).find('.forum-header'));

            if ($.inArray('' + i, collapsed) > -1) {
                $(this).find('.forum-hide').toggleClass('forum-show');
                $(this).toggleClass('forum-hidden');
            }

            if ($(this).find('.type-classified').length) {
                $(this)
                    .addClass('type-table-classified')
                    .find('.forum-statistics-header-posts, .forum-statistics-posts').remove();
            }
        });
    });

    function removeFromArray(item, array) {
        var i = array.indexOf(item);

        if (i > -1) {
            array = array.splice(i, 1);
        }
    }

    function createCookie(name, value, days) {
        var expires;

        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }
        document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
    }

    function readCookie(name) {
        var nameEQ = encodeURIComponent(name) + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
        }
        return null;
    }
    //]]>
</script>



ouuups, j'avais pas noté que j'étais pas sur le bon compte hahaha Arrow
c'est Jamy. I love you

descriptionRe: [pris en charge par Jamy #1] Catégorie sous AwesomeBB

more_horiz
Et voici le CSS version responsive ! Very Happy

Code:

/* Catégorie -- Jamy -- Avada Kedagraph */
.forum-header{background:none; text-align:center;  box-shadow:none; padding:0;}
.category-title{float:none; margin: 0 auto; padding: 10px; width: 80%; border-bottom: 2px solid var(--colorone);    box-sizing: border-box;}
.category-title h2{color: var(--colorone); font-size:15px !important;text-transform: uppercase;}

.forum-section{width:100%; border-radius:0; margin: 0 0 10px 0; padding:0; background-size: cover !important;}

.forum-content{width:100%;margin:0;text-align:center;padding-top: 15px;}
.forum-content h3{ padding: 8px 0 !important; background: var(--fondbody);font-size:15px !important;text-transform: uppercase; font-weight: 400 !important;}
.forum-content h3 a{color: var(--colorone);}
.forum-content:after{display: none;}
.forum-statistics{display: none;}

.wrapStatSousfo{padding:5px; display: flex; justify-content: space-between; margin-top: 15px;}
.subforum{width:40%;}
.subforum a{background: var(--fondclair); font-size: 12px; display: block !important; width:100%; padding:1px 2px; margin: 2px !important;text-transform: uppercase;color: var(--colorone);    height: 25px;
    overflow: auto;}


.forum-lastpost{width:50%;line-height: 12px; margin: 0; font-size: 11px; text-transform: uppercase;color: var(--colorone);background: var(--fondbody);position:relative;padding:0px;border:0;}
.forum-lastpost-inner{margin: 0 auto;width: 100%; display:inline-block !important; vertical-align: bottom !important; float:none; padding: 8px;}
.avatar-default{float:none !important; margin:0 !important; display:inline-block !important; padding: 5px;}

.avatar-default img{width: 50px; height:50px;}

.forum-lastpost-time {display:block !important; float:none;}

.forum-lastpost .topic-title, .forum-lastpost-time a{font-size: 11px; text-transform: uppercase;color: var(--colorone);font-weight: 400 !important;}
.forum-lastpost-author{display: inline; float:none;}
.forum-description{display: none;}

.triangle{ margin-top:-21px; width: 0; height: 0; border-style: solid; border-width: 0 0 25px 190px; border-color: transparent transparent var(--dark) transparent;}

.iconNewOld{ position: absolute; left: 55%; bottom: 0px;}
.New_Old_Lock{width:40px;}


@media (min-width: 960px){
  .category-title h2{color: var(--colorone); font-size:24px !important;text-transform: uppercase;}
  .forum-section{width:48%;display: inline-block; vertical-align: top; margin: 1%;}
  .forum-content{ height: 222px;}
  .forum-content h3{    margin-top: 0px; font-size:20px !important;}
  .forum-statistics{float:none; padding: 0; width:80%; margin: 0 auto; text-transform: uppercase;background: var(--fondclair); font-size: 11px;line-height: 15px; margin-top:-5px}
  .wrapStatSousfo{margin-top: 38px;}
  .forum-lastpost{width:45%;}
  .forum-lastpost-inner{margin: 0;width: 62%; padding: 5px; float:left;}
  .forum-lastpost{    padding: 0 !important;}
  .avatar-default{float:right;}
  .triangle{ margin-top:23px; }

}

/* FIN Catégorie -- Jamy -- Avada Kedagraph */



Tu me dis quand c'est tout bon pour archivage ? I love you

descriptionRe: [pris en charge par Jamy #1] Catégorie sous AwesomeBB

more_horiz
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum