Avada KedagraphConnexion

description[terminé] - Sujet sous AwesomeBB

more_horiz
Bonjour,

J'aimerais réaliser mon futur design sous awesomeBB et surtout garder la particularité du profil demon fofo. Mais du coup, si cela est compliqué ou quoi, le faire sous phbb2 pour ne pas trop vous déranger avec ma commande ^^

Pseudo

Le type du code :- Sujet (contenant message & bloc avatar/infos) sous awesomeBB

Le schéma: Je fais souvent des maquettes pour mes design, j'espère que ça vous ira en schéma!

Spoiler :

Acceptez-vous que le code soit mis en LS sur AK ?mais ouiiiiiiii c'est votre travail en plus, il est impensable que je dise non!
Les éléments : Textes/url/couleur/images/police ... N'hésitez pas à écrire vos dimensions et tout ce qui m'aidera à intégrer. hum je n'ai pas encore tout choisis.
Un lien vers votre forum/site/Autre: http://chroniqueambrosia.forumactif.org/
Autre chose? Avec un grand merci Very Happy

fiche réalisée par laxy

descriptionRe: [terminé] - Sujet sous AwesomeBB

more_horiz
Coucou ! Pardon pour le délai de réponse ! ça devrait être dans mes cordes de te faire ça ! Parfait pour la maquette, c'est le top du top, ça me rend la tache très facile Wink

Tu as réfléchis au comportement sur mobile de ton index ? Car c'est la toute la particularité d'awesomeBB.

Tu es sur notre Discord ? Je vais t'ouvrir une petite zone pour ton forum pour qu'on puisse plus rapidement & facilement communiqué sur l'avancé de ta commande ! Wink

J'essaye de te coder ça pour milieu semaine prochaine, ça t'irai ? Ce weekend, je risque de ne pas avoir trop le temps ... :/

descriptionRe: [terminé] - Sujet sous AwesomeBB

more_horiz
Coucou

Alors pas du tout, je dois avouer que je suis tombée amoureuse de awesome et je l'ai utilisé pour mon nouveau fofo, mais je n'ai pas plus de connaisssance, j'essaye d'y aller un peu à l'impro pour apprendre toute seule et puis aussi m'essayer!

Je vous ai rejoins du coup Wink sur le discord!

Tu as le temps pour le codage, je m'y prend un peu ena vance, Ambro aura deux ans et je voulais pas m'y prendre a la dernière minute, voilà voila Very Happy

descriptionRe: [terminé] - Sujet sous AwesomeBB

more_horiz
Deux ans fin janvier !! J'ai oublié un bout de ma phrase XD

descriptionRe: [terminé] - Sujet sous AwesomeBB

more_horiz
Et voilà ! Comme vu sur le discord, voici les codes :

Le CSS :

Code:

:root{
  --fondbody: #CBBEB5; /* beige du fond */
  --fondfonce: #D0BFAD; /* beige un peu plus foncé */
  --fondclair: #DCCFBC; /* beige clair */
 
  --colorone: #483F30; /* marron -- titre */
  --colortwo: #948369; /* doré -- liens voir nouveau message etc.. */
}

/* Affichage d'un sujet -- Jamy -- Avada Kedagraph */

.actionSurSujet{background: var(--fondfonce);width:80%; margin: 10px auto; box-shadow:1px 2px 1px 1px grey; padding: 5px; text-align:center;}
.topic-actions a{text-transform: uppercase;color: var(--colortwo);font-size:12px;}

.post-body {display: flex;flex-direction: column;}

/* poster information */
.post-aside{margin: 90px 0 0;padding:0;border-radius: 0;box-shadow: none;}
/* avatar + name + rang */
.part1{background: var(--fondclair);height: 200px; display: flex;}
.post-author-avatar { margin: 0; width: 50%; text-align:right;}
.post-author-avatar .avatar-big img{width: 400px; height: 250px!important; border-radius: 100%; box-shadow: none; display: inline-block; margin: -60px 0 0;}

.post-author{width: 50%; text-align:center;padding-top: 17px;}
.post-author-name a{ text-transform: uppercase;font-size:40px;color: var(--colorone);}
.post-author-title{ text-transform: uppercase;font-size:20px; color: var(--colorone);}
.post-author-contact{background: none;}
.post-author-contact a{display:inline-block; margin: 5px; vertical-align:middle;}
.post-author-status{float:none; position:relative; top:0; left:0; display: inline-block !important; vertical-align:middle;}

/* details on poster - user profil field */
.part2{background: var(--fondfonce); height:150px; padding:40px 200px;column-count: 2; column-width: 150px;}
.post-author-details dt{text-transform:uppercase; }
.post-author-details{margin: 0;}

/* the post */
.post{border-radius:0;box-shadow:none;background: var(--fondclair); margin:0;}
.post > div{margin:50px 170px;background: var(--fondfonce);padding: 10px; width: auto;}

.topicDateAndTitle{display: inline-block; width: 60%; vertical-align:top;}
.post .material-icons{font-size:15px; color: #fff; vertical-align: middle;}
.post .post-date{float: none; display: inline-block; color: #000;}

.post-buttons{display: inline-block; vertical-align:top; width: 40%;}
.post-buttons ul{float: right;}
.post-buttons,.post-buttons li {margin:0;}
.post-buttons a, .post-buttons span, .post-buttons a .material-icons { color: #000;}
.post-buttons a { background:none;padding: 0 5px;}

.post-content {font-size: 12px;line-height: 1.4;word-wrap: break-word;margin: 25px 5px;text-align:justify}

.post-signature{ max-height: 220px; overflow: auto;width: 100%;margin: 0; }

.topic-actions.bottom {margin-top: 10px !important;}

@media (min-width: 960px){
}

/* ------- FIN affichage d'un sujet -------- */


Je vais me grouiller de faire un tuto sur les variables de la feuille CSS, mais en gros, la première partie sert à définir les noms des variables & les couleurs associées, comme ça, quand tu réutilises le nom de la variable, c'est automatiquement remplacé par la bonne couleur, ça va te simplifier la vie si tu veux modifier les couleurs Wink


et le template (je t'ai touuuut copié, donc remplace tout ! ^^)

Code:

<script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };

    $(function(){
        if(typeof(_atc) == "undefined") {
            _atc = {  };
        }
    });

    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function(id)
    {
        try
        {
            var regId = parseInt(id, 10);
            if( isNaN(regId) ) { regId = 0; }

            if( regId > 0)
            {
                $('.post--' + id).parent().toggle(0, function()
                {
                    if( $(this).is(":visible") )
                    {
                        $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                    }
                    else
                    {
                        $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                    }
                });
            }
        }
        catch(e) { }

        return false;
    };
    //]]>
</script>

<main id="topic">
    <div class="topic-header">
        <h1><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></h1>
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="btn btn-default" title="{L_POST_NEW_TOPIC}">
            <i class="material-icons">mode_edit</i>
            <span>{L_POST_NEW_TOPIC}</span>
        </a>
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default">
            <i class="material-icons">reply</i>
            <span>{L_POST_REPLY_TOPIC}</span>
        </a>
        <!-- END switch_user_authreply -->
        <div id="breadcrumbs" class="breadcrumbs-topic">
            <a href="{U_INDEX}"><i class="material-icons">home</i> <span>{L_INDEX}</span></a>
            {NAV_CAT_DESC}
        </div>
        <!-- BEGIN topicpagination -->
        <div class="pagination">
            {PAGINATION}
        </div>
        <!-- END topicpagination -->
    </div>

    <div class="topic-actions">
        <div class="topic-actions-buttons">
            <div class="plus-menu-wrap">
                <script type="text/javascript">//<![CDATA[
                    insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
                    //]]>
                </script>
            </div>

            <!-- BEGIN switch_twitter_btn -->
            <span>
                <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          </span>
            <!-- END switch_twitter_btn -->

            <!-- BEGIN switch_fb_likebtn -->
            <script>(function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s); js.id = id;
                    js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));</script>
            <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
            <!-- END switch_fb_likebtn -->

            <a class="addthis_button">{L_SHARE}</a>
        </div>
    </div>
 
    {POLL_DISPLAY}

    <!-- BEGIN postrow -->
    <!-- BEGIN hidden -->
    <div class="post-wrap {postrow.hidden.ROW_CLASS} post-hidden">
        <div class="block">
            <div class="block-content">
                {postrow.hidden.MESSAGE}
                <div class="block-footer" style="display: none;">
                    <!-- END hidden -->

                    <!-- BEGIN displayed -->
                    <div id="post-{postrow.U_POST_ID}" class="post-wrap {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}">
                       
                        <div class="post-body">
                            <aside class="post-aside">
                                <div class="part1">
                                  <div class="post-author-avatar">
                                      <div class="avatar-big">
                                          {postrow.displayed.POSTER_AVATAR}
                                      </div>
                                  </div>
                               
                                  <div class="post-author">
                                        <span class="post-author-name">
                                                {postrow.displayed.POSTER_NAME}
                                        </span>
                                        <span class="post-author-title">
                                                {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                                        </span>
                                 
                                        <div class="post-author-contact">
                                            {postrow.displayed.PROFILE_IMG}
                                            {postrow.displayed.PM_IMG}
                                            <!-- BEGIN contact_field -->
                                            {postrow.displayed.contact_field.CONTENT}
                                            <!-- END contact_field -->
                                         
                                            <div class="post-author-status"></div>
                                        </div>
                                    </div>
                                </div>
                             
                                <div class="part2">
                                  <dl class="post-author-details">
                                      <!-- BEGIN profile_field -->
                                      <dt>{postrow.displayed.profile_field.LABEL}</dt>
                                      <dd>{postrow.displayed.profile_field.CONTENT}</dd>
                                      <!-- END profile_field -->
                                  </dl>
                                  <div class="post-author-rpg">
                                      {postrow.displayed.POSTER_RPG}
                                  </div>
                              </div>
                            </aside>
                         
                            <div class="post">
                              <div id="{postrow.U_POST_ID}">
                                <div class="topicDateAndTitle">
                                    <span class="postdetails">
                                      <img src="http://image.noelshack.com/fichiers/2018/51/1/1545043422-icon-minipost.gif" border="0" />
                                    {L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp;
                                    <img src="http://image.noelshack.com/fichiers/2018/51/1/1545043444-icon-miniposted.gif" alt="" border="0" />
                                      {postrow.displayed.POST_DATE}</span>
                                </div>
                                <div class="post-buttons">
                                    <ul>
                                        <li class="btn-quote">
                                            {postrow.displayed.QUOTE_IMG}
                                        </li>
                                        <li class="btn-edit">
                                            {postrow.displayed.EDIT_IMG}
                                        </li>
                                        <li class="btn-delete">
                                            {postrow.displayed.DELETE_IMG}
                                        </li>
                                        <li class="btn-ip">
                                            {postrow.displayed.IP_IMG}
                                        </li>
                                    </ul>
                                </div>
                           
                              <div class="post-content">
                                  {postrow.displayed.MESSAGE}
                              </div>
                               
                               
                                <!-- BEGIN switch_signature -->
                                <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                                <!-- END switch_signature -->
                            </div>
                        </div>
                    </div>
                    <!-- END displayed -->

                    <!-- BEGIN hidden -->
                </div>
            </div>
        </div>
    </div>
    <!-- END hidden -->
    <!-- END postrow -->
    <!-- BEGIN switch_forum_rules -->
    <div class="block" id="forum_rules">
        <div class="block-header">
            {L_FORUM_RULES}
        </div>
        <div class="block-content">
            <table class="postbody">
                <tr>
                    <!-- BEGIN switch_forum_rule_image -->
                    <td class="logo">
                        <img src="{RULE_IMG_URL}" alt="" />
                    </td>
                    <!-- END switch_forum_rule_image -->
                    <td class="rules content">
                        {RULE_MSG}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- END switch_forum_rules -->

    <div class="topic-actions bottom">
        <div class="topic-actions-buttons">
            <!-- BEGIN switch_user_logged_in -->
            <!-- BEGIN watchtopic -->
            {S_WATCH_TOPIC}
            <!-- END watchtopic -->
            <!-- END switch_user_logged_in -->
        </div>
    </div>

    <!-- BEGIN topicpagination -->
    <div class="pagination">
        {PAGINATION}
    </div>
    <!-- END topicpagination -->

    {INLINE_MESSAGE}

    {QUICK_REPLY_FORM}

    <form class="jumpbox" action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
        <label>
            <span>{L_JUMP_TO}:</span>
            <div class="jumpbox-wrap">
                {S_JUMPBOX_SELECT}
                <input type="submit" value="{L_GO}" />
            </div>
        </label>
    </form>

    <!-- BEGIN viewtopic_bottom -->
    <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}">
        <input type="hidden" name="t" value="{TOPIC_ID}" />
        <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
        <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
        <label>
            <span>{L_MOD_TOOLS}:</span>
            <div class="quickmod-wrap">
                {S_SELECT_MOD}
                <input type="submit" value="{L_GO}" />
            </div>
        </label>
    </form>

    <div class="topic-admin">{S_TOPIC_ADMIN}</div>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN show_permissions -->
    <div class="block">
        <div class="block-header">
            {L_TABS_PERMISSIONS}
        </div>
        <div class="block-content">
            {S_AUTH_LIST}
        </div>
    </div>
    <!-- END show_permissions -->

    <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}">
        <i class="material-icons">reply</i>
    </a>
    <!-- END switch_user_authreply -->
</main>

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        $('.post-author-contact').each(function () {
            $(this).find('a:nth-child(5n)').each(function () {
                $(this).after('<br />');
            });
        });
    });
    //]]>
</script>

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
    $(document).ready(function() {
        $('pre, code').each(function(i, block) {
            hljs.highlightBlock(block);
        });

        $('.post-author-contact').on('click', function() {
            if ($(this).parents('.post-body').css('flex-direction') == 'row') {
                $(this).children('.dropdown-box').css({
                    'left': 'auto',
                    'right': '0'
                });
            } else {
                $(this).children('.dropdown-box').css({
                    'left': '0',
                    'right': 'auto'
                });
            }
        });
    });
</script>

descriptionRe: [terminé] - Sujet sous AwesomeBB

more_horiz
Du coup, le nouveau CSS, pour que ce soit responsive ! I love you

Code:

:root{
  --fondbody: #CBBEB5; /* beige du fond */
  --fondfonce: #D0BFAD; /* beige un peu plus foncé */
  --fondclair: #DCCFBC; /* beige clair */
 
  --colorone: #483F30; /* marron -- titre */
  --colortwo: #948369; /* doré -- liens voir nouveau message etc.. */
}

/* Affichage d'un sujet -- Jamy -- Avada Kedagraph */

.actionSurSujet{background: var(--fondfonce);width:80%; margin: 10px auto; box-shadow:1px 2px 1px 1px grey; padding: 5px; text-align:center;}
.topic-actions a{text-transform: uppercase;color: var(--colortwo);font-size:12px;}

.post-body {display: flex;flex-direction: column;}

/* poster information */
.post-aside{margin: 15px 0 0;padding:0;border-radius: 0;box-shadow: none;}
/* avatar + name + rang */
.part1{background: var(--fondclair);}
.post-author-avatar { margin: 0; width: 100%; text-align:center;}
.post-author-avatar .avatar-big img{width: 90%; border-radius: 100%; box-shadow: none; display: inline-block; margin: 0;}

.post-author{width: 100%; text-align:center;padding-top: 17px;}
.post-author-name a{ text-transform: uppercase;font-size:40px;color: var(--colorone);}
.post-author-title{ text-transform: uppercase;font-size:20px; color: var(--colorone);}
.post-author-contact{background: none; float:none;}
.post-author-contact a{display:inline-block; margin: 5px; vertical-align:middle;}
.post-author-status{float:none; position:relative; top:0; left:0; display: inline-block !important; vertical-align:middle;}

/* details on poster - user profil field */
.part2{background: var(--fondfonce); min-height:50px; padding:10px;}
.post-author-details dt{text-transform:uppercase; }
.post-author-details{margin: 0; display: block;}

/* the post */
.post{border-radius:0;box-shadow:none;background: var(--fondclair); margin:0;}
.post > div{margin:0;background: var(--fondfonce);padding: 10px; width: auto;}

.topicDateAndTitle{display: inline-block; width: 60%; vertical-align:top;}
.post .material-icons{font-size:15px; color: #fff; vertical-align: middle;}
.post .post-date{float: none; display: inline-block; color: #000;}

.post-buttons{display: inline-block; vertical-align:top; width: 40%;}
.post-buttons ul{float: right;}
.post-buttons,.post-buttons li {margin:0;}
.post-buttons a, .post-buttons span, .post-buttons a .material-icons { color: #000;}
.post-buttons a { background:none;padding: 0 5px;}

.post-content {font-size: 12px;line-height: 1.4;word-wrap: break-word;margin: 25px 5px;text-align:justify}

.post-signature{ max-height: 220px; overflow: auto;width: 100%;margin: 0; }

.topic-actions.bottom {margin-top: 10px !important;}

@media (min-width: 960px){
 
  .post-aside{margin: 90px 0 0;}
 
  .part1{height: 200px; display: flex;}
  .post-author-avatar { width: 50%; text-align:right;}
  .post-author{width: 50%;}
 
  .post-author-avatar .avatar-big img{width: 400px; height: 250px!important;}
  .part2{height:150px; padding:40px 200px;column-count: 2; column-width: 150px;}
  .post > div{margin:50px 170px;}
 
}

/* ------- FIN affichage d'un sujet -------- */

descriptionRe: [terminé] - Sujet sous AwesomeBB

more_horiz
Pour réparer l'avatar :3
(tout le code CSS)

Code:

/* Affichage d'un sujet -- Jamy -- Avada Kedagraph */

.actionSurSujet{background: var(--fondfonce);width:80%; margin: 10px auto; box-shadow:1px 2px 1px 1px grey; padding: 5px; text-align:center;}
.topic-actions a{text-transform: uppercase;color: var(--colortwo);font-size:12px;}

.post-body {display: flex;flex-direction: column;}

/* poster information */
.post-aside{margin: 15px 0 0;padding:0;border-radius: 0;box-shadow: none;}
/* avatar + name + rang */
.part1{background: var(--fondclair);}
.post-author-avatar { margin: 0; width: 100%; text-align:center;}
.post-author-avatar .avatar-big img{width: 90%; border-radius: 100%; box-shadow: none; display: inline-block; margin: 0;}

.post-author{width: 100%; text-align:center;padding-top: 17px;}
.post-author-name a{ text-transform: uppercase;font-size:40px;color: var(--colorone);}
.post-author-title{ text-transform: uppercase;font-size:20px; color: var(--colorone);}
.post-author-contact{background: none; float:none;}
.post-author-contact a{display:inline-block; margin: 5px; vertical-align:middle;}
.post-author-status{float:none; position:relative; top:0; left:0; display: inline-block !important; vertical-align:middle;}

/* details on poster - user profil field */
.part2{background: var(--fondfonce); min-height:50px; padding:10px;}
.post-author-details dt{text-transform:uppercase; }
.post-author-details{margin: 0; display: block;}

/* the post */
.post{border-radius:0;box-shadow:none;background: var(--fondclair); margin:0;}
.post > div{margin:0;background: var(--fondfonce);padding: 10px; width: auto;}

.topicDateAndTitle{display: inline-block; width: 60%; vertical-align:top;}
.post .material-icons{font-size:15px; color: #fff; vertical-align: middle;}
.post .post-date{float: none; display: inline-block; color: #000;}

.post-buttons{display: inline-block; vertical-align:top; width: 40%;}
.post-buttons ul{float: right;}
.post-buttons,.post-buttons li {margin:0;}
.post-buttons a, .post-buttons span, .post-buttons a .material-icons { color: #000;}
.post-buttons a { background:none;padding: 0 5px;}

.post-content {font-size: 12px;line-height: 1.4;word-wrap: break-word;margin: 25px 5px;text-align:justify}

.post-signature{ max-height: 220px; overflow: auto;width: 100%;margin: 0; }

.topic-actions.bottom {margin-top: 10px !important;}

@media (min-width: 960px){
 
  .post-aside{margin: 90px 0 0;}
 
  .part1{height: 200px; display: flex;}
  .post-author-avatar { width: 50%; text-align:right;}
  .post-author{width: 50%;}
 
  .post-author-avatar .avatar-big img{width: 400px; height: 250px!important; margin-top:-70px}
  .part2{height:150px; padding:40px 200px;column-count: 2; column-width: 150px;}
  .post > div{margin:50px 170px;}
 
}

/* ------- FIN affichage d'un sujet -------- */

descriptionRe: [terminé] - Sujet sous AwesomeBB

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