Welcome

Halloween Liste des sujets

Liste sujets Morsmordre

Halloween, LS codage Forumactif Templates & Eléments Liste des sujets Morsmordre

PHPBB2

Optimisé Une navigation, un footer, un index complet, un profil, un profil & message, une liste des membres, une fiche administrative, un listing, une fiche publicité et une fiche de présentation sont également disponibles. Les images sont en 35*149px.
Plusieurs infobulles au survol de certaines images (araignée sur la PA, beuglante, balais etc.).

Retour

Codage Liste sujets Morsmordre Halloween Forumactif

Overall_header

Pour ajouter la police, dans le template Overall_header coller la ligne suivante juste avant "{T_HEAD_STYLESHEET}" :

Topics_list_box

<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
	var all_checked = true;
	for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
		if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
			all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
		}
	}
	document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
	for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
		if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
			document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
		}
	}
}
</script>

<div class="liste_sujets">
	<h2>
  	</h2>
	
	<div class="liste_sujets_pagination">
          	{PAGINATION}
  	</div>

{topics_list_box.row.END_TABLE_STICKY}
  	<div class="bloc_liste_sujets">
          	
			<div class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></div>
		
          
          	<img class="statut_liste_sujets" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
          
          	<div class="liste_sujets_informations">
                  	<div class="ls_auteur">
                          	{topics_list_box.row.PARTICIPATE_POST_IMG}
                          	{topics_list_box.row.TOPIC_AUTHOR}
                  	</div>
                  
                  	<div class="ls_titre">
                          	<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                                  	{topics_list_box.row.TOPIC_TITLE}
                          	</a>
                  	</div>
                  
                  	<div class="clear">
                  	</div>
                  
                  	<div class="ls_description">
                          	
					{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
				
                  	</div>
                  
                  	<div class="ls_pagination">
                          	{topics_list_box.row.TOPIC_NAV_TREE} 
                  	</div>
                  
                  	<div class="clear">
                  	</div>
          	</div>
          
          	<div class="ls_avatar">
                  	
            			{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}
            		
          	</div>
          
          	<div class="ls_dernier">
                  	{topics_list_box.row.LAST_POST_AUTHOR}<br />	
                  	{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.LAST_POST_IMG}<br />
                  	<span>{topics_list_box.row.REPLIES}</span> Réponses <span class="ls_vues">{topics_list_box.row.VIEWS}</span> Vues
          	</div>
          
          	<div class="clear">
          	</div>
  	</div>
	
	
	<div class="ls_sans_message">
          	{topics_list_box.row.L_NO_TOPICS}
  	</div>
	
	
	<div class="ls_footer_pagination">
          	{PAGINATION}
  	</div>

</div><br class="gensmall" />

Viewforum_body

{BOARD_INDEX}

{TOPICS_LIST_BOX}

<div class="ls_options">
  	<div class="ls_options1">
          	<a href="{U_MARK_READ}">
                  	{L_MARK_TOPICS_READ}
          	</a>
  	</div>
  
  	<div class="infobulle beuglante">
		<img alt="" src="https://i.imgur.com/PWGX9qv.png" />     
		<div>			        
			<div class="fleche">
			</div>
			        
			<div class="bouh">
				            J'EN AI MARRE DE GUEULER !         
			</div>
			    
		</div>
	</div>
  
  	<div class="ls_options2">
          	{S_WATCH_FORUM}
  	</div>
  
  	<div class="clear">
  	</div>
</div>

CSS

/*********************************** LISTE SUJETS ***********************************/
.clear {
  	clear: both;
}

a, a:hover {
  	text-decoration: none !important;
  	transition: .5s all;
  	color: #d9d9d9 !important;
}

/* BEUGLANTE */
.infobulle.beuglante {
    	float: left;
}

.infobulle.beuglante div {
    	left: 530px;
}

/* BULLE */
.infobulle > div {
        left: 80px;
        opacity: 0;
        position: absolute;
        top: 0;
        transform: scale(0.3) rotate(-45deg);
        transition: all .3s linear;
        visibility: hidden;
}

.infobulle:hover > div {
        opacity: 1;
        visibility: visible;
  	transform: scale(1) rotate(0deg);
}

.bouh {
        background: #183d23;
        border-radius: 5px;
        color: #d9d9d9;
        padding: 5%;
        text-align: center;
        width: 200px;
        margin-top: -33px;
}

.fleche {
        border: 5px solid transparent;
        border-bottom: 10px solid #183d23;
        margin-left: -5px;
        width: 0;
        transform: rotate(30deg);
        margin-top: 20px;
}

/* ENTETE */
.nav { 
  	font-size: 0;
}
    
.nav a { 
        font-weight: normal;
        font-size: 14px;
        font-family: 'Alegreya Sans SC', sans-serif;
}
     
a.nav:before {
        background: url(https://i.imgur.com/JMQCncn.png);
    	content: "";
    	display: inline-block;
    	height: 10px;
    	margin: 0 .5% 0 0;
    	width: 10px;
}
     
.nav > a.nav:empty:before, .nav > a.nav:first-child:before { content:""; }

.ls_entete_gauche .nav a {
        font-weight: normal;
        font-size: 14px;
        font-family: 'Alegreya Sans SC', sans-serif;
}

.ls_entete_gauche {
        float: left;
        width: 60%;
}

.entete_liste_sujets {
        width: 100%;
        margin: 2% 0;
}

.ls_entete_droite {
    	float: right;
}

.liste_sujets_pagination, .ls_footer_pagination {
        font-family: 'Alegreya Sans SC', sans-serif;
        text-align: right;
}

/* TITRE */
.liste_sujets h2 {
        background: url(https://i.imgur.com/hO9TPAp.png) no-repeat center, url(https://i.imgur.com/q46je9p.jpg);
        content: "";
        display: block;
        width: 100%;
        height: 115px;
        margin: 0;
}

.liste_sujets {
        background: url('https://i.imgur.com/1Czb7Ck.png') no-repeat bottom left, url(https://i.imgur.com/q46je9p.jpg);
        padding: 2%;
        position: relative;
        width: 100%;
  	box-sizing: border-box;
  	color: #d9d9d9;
}

/* BLOC SUJET */
.bloc_liste_sujets {
        background: rgba(0,0,0,.2);
        box-sizing: border-box;
        margin: 2% 0;
        position: relative;
        width: 100%;
        height: 100px;
  	font-family: 'Vollkorn', serif;
}

.liste_sujets_informations {
        float: left;
        margin: 2.8% 0 0 10%;
        width: 50%;
}

/* Statut */
img.statut_liste_sujets {
        position: absolute;
        transform: rotate(50deg);
        top: -40%;
        left: 1%;
}

/* Auteur */
.ls_auteur {
        font-style: italic;
        letter-spacing: -2px;
        font-family: Times New Roman;
        text-transform: lowercase;
        font-size: 20px;
        float: left;
}

/* Titre */
.ls_titre a::before {
        content: " → ";
        margin: 1% 2%;
        display: inline-block;
}

a.topictitle {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 14px;
}

/* Description */
.ls_description {
        font-size: 12px;
        font-style: italic;
}

/* Avatar */
.ls_avatar img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        margin: 1% 0 0 0;
  	float: left;
}

/* Dernier */
.ls_dernier {
        float: left;
        width: 20%;
        margin: 2% 0 2% 8%;
        font-size: 14px;
        font-family: 'Alegreya Sans SC', sans-serif;
}

.ls_dernier span {
    	color: #568A25;
}

.ls_dernier a {
        font-size: 18px;
        font-family: Times New Roman;
        font-style: italic;
        letter-spacing: -2px;
        text-transform: lowercase;
}

span.ls_vues::before {
        content: " + ";
        padding: 0 5%;
}

/* FOOTER LISTE SUJET */
.footer_liste_sujets {
    	margin: 2% 0;
}

.ls_footer_gauche {
        float: left;
        width: 50%;
  	font-size: 0;
}

.ls_footer_gauche a {
        background: #183d23;
        font-size: 14px;
        font-family: 'Alegreya Sans SC', sans-serif;
        padding: 1% 2%;
}

.ls_options {
        font-family: 'Alegreya Sans SC', sans-serif;
        position: relative;
  	margin: 2% 0;
}

.ls_options a::before {
        background: url(https://i.imgur.com/JMQCncn.png) no-repeat;
        width: 10px;
        height: 10px;
        content: "";
        display: inline-block;
        padding: 0 1% 0 0;
}

.ls_options1, .ls_options2 {
        float: left;
        width: 47%;
        text-align: center;
        margin: 2% 0 0 0;
}

.ls_sans_message {
        font-size: 12px;
        margin: 2% 0;
        height: 50px;
        text-align: center;
}

/* PANNEAU ADMINISTRATION */
#page-footer a[href^="/admin"] {
        background: url(https://i.imgur.com/f2Gmrxf.png) center no-repeat;
        display: block;
        font-family: times new roman;
        font-size: 35px;
        font-style: italic;
        letter-spacing: -2px;
        margin: 2% auto;
        padding: 5% 0;
        text-align: center;
        text-transform: lowercase;
}

Dernière modification : 25 April 2020 23 : 33.

#morsmordre #navigation #forumactif #codage #libreservice

Halloween