Images différentes à chaque catégorie [modernBB]
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Images différentes à chaque catégorie [modernBB]
Détails techniques
Version du forum : ModernBBPoste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour,J'ai le même soucis que sur ce sujet : https://forum.forumactif.com/t385900-mettre-une-image-differente-en-fond-de-chaque-categorie.
A savoir, je souhaiterais mettre une image de background différente à chaque catégorie. Cependant, je suis sur le modernBB, donc de ce fait le code donné pour l'autre sujet ne fonctionne pas. Ce qui est au final normal.
Pouvez-vous m'aider ? Vous serez des z'amours
Merci d'avance.
Dernière édition par LouSheeta le Lun 12 Fév 2018 - 21:33, édité 2 fois
Re: Images différentes à chaque catégorie [modernBB]
Upinup ?
Je rajoute mon template
Je rajoute mon template
- Code:
<ul class="linklist-top">
<!-- BEGIN switch_user_logged_in -->
<li>
<a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
</li>
<li>
<a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
</li>
<!-- END switch_user_logged_in -->
<li>
<a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
</li>
<!-- BEGIN switch_user_logged_in -->
<li>
<a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
</li>
<!-- END switch_user_logged_in -->
</ul>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<section class="cat">
<h2>{catrow.tablehead.L_FORUM}</h2>
<ul class="fow">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<li style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat 0 30px, rgba(250, 250, 250, 0.8); background-size: 70% 170px, cover;">
<h3>
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</h3>
<div class="lastpost">
<!-- BEGIN ads -->
<img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" />
<span>
<a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
</span>
<!-- END ads -->
<!-- BEGIN avatar -->
<span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
<div>
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br/>
<span class="lp-infos">{catrow.forumrow.ads.DATE} {catrow.forumrow.ads.LOCATION} {catrow.forumrow.USER_LAST_POST}</span>
<!-- END switch_topic_title -->
</div>
</div>
<div class="desc">
{catrow.forumrow.FORUM_DESC}
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
</div>
</li>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</ul>
</section>
<!-- END tablefoot -->
<!-- END catrow -->
<!-- BEGIN switch_on_index -->
<ul class="linklist-bottom">
<li>
<a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
</li>
<li>
<a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
</li>
<li>
<a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
</li>
<!-- BEGIN switch_delete_cookies -->
<li>
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{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></div>', {
class: 'btn-collapse'
});
var btn_collapse_show = $('<i></i>', {
class: 'ion-android-add-circle hidden',
'data-tooltip': '{L_EXPEND_CAT}'
}).appendTo(btn_collapse);
var btn_collapse_hide = $('<i></i>', {
class: 'ion-android-remove-circle',
'data-tooltip': '{L_HIDE_CAT}'
}).appendTo(btn_collapse);
var collapsed = [];
if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
collapsed = readCookie('collapsed').split(',');
}
$(document).on('click', '.btn-collapse', function() {
$(this).children('.ion-android-add-circle').toggleClass('hidden');
$(this).children('.ion-android-remove-circle').toggleClass('hidden');
$(this).parents('.forabg').toggleClass('hidden');
if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
collapsed = readCookie('collapsed').split(',');
}
if (!$(this).parents('.forabg').hasClass('hidden')) {
removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);
createCookie('collapsed', collapsed);
} else {
collapsed.push('' + $(this).parents('.forabg').data('cindex'));
createCookie('collapsed', collapsed);
}
});
$('.forabg').each(function(i) {
$(this).data('cindex', '' + i);
$(btn_collapse)
.clone()
.attr('id', 'forabg' + i)
.appendTo($(this).find('.header'));
if ($.inArray('' + i, collapsed) > -1) {
$(this).toggleClass('hidden');
$('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
$('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
}
});
});
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;
}
$(function(){
$('section.cat h2:contains("Général")').closest('section.cat').attr('id','IDENTIFIANT1');
});
//]]>
</script>
- Code:
/*BASES*/
/*BASES BASES*/
body, html, header, footer, nav, p {
margin: 0;
padding: 0;
width: 100%;
background-color: #f1f1f1;
font-family: 'Verdana';
}
ul, ol{
list-style-type: none !important;
margin: 0;
padding: 0;
}
/*BASES TITLES*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Times New Roman';
position: relative;
}
h1{
text-align: center;
font-size: 30pt;
}
h2{
margin: 0 0 0 3em;
font-size: 25pt;
clear:both;
}
h3{
text-align: center;
font-size: 20pt;
}
h4{}
/*BASES IMAGES*/
img{
width: 50px;
height: 50px;
}
/*BASES LINKS*/
a{
text-decoration: none !important;
text-transform: uppercase;
color: silver;
transition-property: all;
transition-duration: 0.5s;
}
a:hover{color: #006391;}
a:active{color: #006391;}
/*HEADER*/
/*HEADER BASES*/
header{
background-color: #1D262C;
background-image: url(https://i62.servimg.com/u/f62/19/85/65/29/header10.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 450px;
background-size: cover;
height: 550px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
/*HEADER NAV*/
ul#nav {
width: 100%;
z-index: 999;
top: 0;
position: fixed;
text-align: center;
margin: 0 auto;
padding: 0;
background-color: #f1f1f1;
box-shadow: 0 2px 10px 1px rgba(80, 80, 80, 0.5);
-webkit-box-shadow: 0 2px 10px 1px rgba(80, 80, 80, 0.5);
}
#nav li{
display: inline-block;
margin: 0;
padding: 10px 0;
}
#nav li img{
width: 0;
height: 0;
}
#nav li a{
font-family: 'Pacifico', cursive;
letter-spacing: 0px;
margin: 0;
padding: 10px 15px;
font-size: 15px;
text-transform: none;
color: #fff;
text-shadow: -1px 0 0 rgba(69, 69, 69, 1),
1px 0 0 rgba(69, 69, 69, 1),
0 -1px 0 rgba(69, 69, 69, 1),
0 1px 0 rgba(69, 69, 69, 1),
-1px 0 1px rgba(69, 69, 69, 1),
1px 0 1px rgba(69, 69, 69, 1),
0 -1px 1px rgba(69, 69, 69, 1),
0 1px 1px rgba(69, 69, 69, 1);
}
#nav li a:hover{
color: #a0edfd;
}
/*CATEGORIES*/
/*CATEGORIES BASES*/
.cat {
box-sizing: content-box;
width: 100%;
height: auto;
position: relative;
text-align: center;
word-spacing: 0px;
margin: 0 auto;
padding: 50px 0 130px;
background-image: url(https://pre00.deviantart.net/3197/th/pre/i/2015/019/e/c/fantasy_landscape_by_raymondminnaar-d8eii74.jpg);
background-size: cover;
background-position: center center;
}
.cat::before {
box-sizing: content-box;
width: 100%;
height: 80px;
position: absolute;
content: "";
top: 0px;
left: 0px;
z-index: 50;
background-image: url(http://nsm07.casimages.com/img/2018/02/11//18021105093212157315551309.png);
background-size: 100% 100%;
}
.cat::after {
box-sizing: content-box;
width: 100%;
height: 80px;
position: absolute;
z-index: 50;
content: "";
bottom: 0px;
left: 0;
background-image: url(http://nsm07.casimages.com/img/2018/02/11//18021105093112157315551308.png);
background-size: 100% 100%;
}
.cat ul{
text-align: center;
margin: 0 auto;
vertical-align: top;
}
/*CATEGORIES TITLES*/
.cat h2{
color: #fff;
font-family: Pacifico, cursive;
font-size: 35px;
letter-spacing: 0;
margin: -20px 0 50px 0;
padding: 0 15px;
text-shadow: -1px 0 0 rgba(69,69,69,1), 1px 0 0 rgba(69,69,69,1), 0 -1px 0 rgba(69,69,69,1), 0 1px 0 rgba(69,69,69,1), -1px 0 1px rgba(69,69,69,1), 1px 0 1px rgba(69,69,69,1), 0 -1px 1px rgba(69,69,69,1), 0 1px 1px rgba(69,69,69,1);
text-transform: none;
}
/*FORUM*/
/*FORUM BASES*/
ul.fow{
width: 100%;
}
.fow li{
position: relative;
width: 40%;
height: 200px;
display: inline-block;
margin: 0 2.5% 5%;
text-align: center;
box-shadow: 0 0 10px 0 #3B3B3B;
-o-box-shadow: 0 0 10px 0 #3B3B3B;
-webkit-box-shadow: 0 0 10px 0 #3B3B3B;
}
.fow a{
font-family: 'Poiret One', cursive;
font-size: 18px;
color: #fff;
width: 100%;
padding: 0 auto;
}
/*FORUM TITLE*/
.fow h3{
width: 100%;
height: 30px;
vertical-align: middle;
background-color: rgba(145, 145, 145, 0.5);
text-shadow: -1px 0 0 rgba(69, 69, 69, 1),
1px 0 0 rgba(69, 69, 69, 1),
0 -1px 0 rgba(69, 69, 69, 1),
0 1px 0 rgba(69, 69, 69, 1),
-1px 0 1px rgba(69, 69, 69, 1),
1px 0 1px rgba(69, 69, 69, 1),
0 -1px 1px rgba(69, 69, 69, 1),
0 1px 1px rgba(69, 69, 69, 1);
}
/*FORUM CONTENUE*/
/*FORUM DESCRIPTION*/
.desc{
position: absolute;
right: 0;
bottom: 0;
padding: 5px 5px 10px 5px;
overflow: auto;
height: 80px;
width: 76%;
font-family: 'Verdana';
font-size: 10px;
text-align: justify;
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-bottom-left-radius: 40px;
-moz-border-radius-bottomleft: 40px;
-webkit-border-bottom-left-radius: 40px;
}
/*FORUM LAST POST*/
.lastpost{
position: absolute;
right: 0;
top: 26;
width: 75%;
height: 70px;
margin: 10px 5px 10px 0;
padding: auto 0;
font-size: 10px;
font-family: 'Verdana';
}
.lastpost-avatar img {
display: block;
position: relative;
z-index: 1;
height: 55px;
width: 55px;
padding:0;
background-color :rgba(250, 250, 250, 1);
border: 2px solid #fff;
border-radius: 55px;
box-shadow: 0 0 5px -0 rgba(69,69,69,1);
-moz-box-shadow: 0 0 5px -0 rgba(69,69,69,1);
-webkit-box-shadow: 0 0 5px -0 rgba(69,69,69,1);
}
.lastpost-avatar::after{
display:none;
}
.lastpost div{
position: absolute;
left: 25px;
width: 80%;
height: 48px;
margin: 14px 0 0 0;
overflow: hidden;
background-color :rgba(250, 250, 250, 0.5);
border-color: #5e5e5e;
border-style: dotted;
border-width: 1px 0;
}
.lastpost a{
font-weight: bolder;
font-size: 12px;
color: #404040;
}
.lp-infos a{
font-size: 10px;
}
.last-post-icon img{
height: 8px;
width: auto;
}
/*LISTLINK*/
.linklist-top, .linklist-bottom{
width: 100%;
text-align: center;
margin: 0 0 20px 0;
}
.linklist-top li, .linklist-bottom li{
display: inline-block;
}
.linklist-top a, .linklist-bottom a{
font-size: 10px;
}
#IDENTIFIANT 1{
background : url(http://abduzeedo.com/sites/default/files/originals/floating_islands_by_sebastianwagner-d606krh.jpg);
}
Dernière édition par LouSheeta le Lun 12 Fév 2018 - 21:23, édité 1 fois
Re: Images différentes à chaque catégorie [modernBB]
Bonjour LouSheeta,
En utilisant le tuto cité dans votre premier message, remplacer le code javascript par le code suivant
En utilisant le tuto cité dans votre premier message, remplacer le code javascript par le code suivant
- Code:
$(function(){
$('section.cat h2:contains("NOM DE LA CATEGORIE 1")').closest('section.cat').attr('id','IDENTIFIANT1');
});
Re: Images différentes à chaque catégorie [modernBB]
Je vais tester cela et je vous dis ce qu'il en est. Merci.
Re: Images différentes à chaque catégorie [modernBB]
Ca fonctionne merci beaucoup ^^
Sujets similaires
» Images différentes pour chaque catégorie
» Image de bas de catégo différentes pour chaque
» Mettre des couleurs de fond différentes à chaque catégorie
» Modernbb : donner une couleur différentes au profil membre par rapport au groupe
» Couleurs différentes par Catégorie
» Image de bas de catégo différentes pour chaque
» Mettre des couleurs de fond différentes à chaque catégorie
» Modernbb : donner une couleur différentes au profil membre par rapport au groupe
» Couleurs différentes par Catégorie
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum