community.css

Type de document :

Documentation et tutoriels

Solution(s) :

e-majine

Module(s) :

Communauté

community.css

Retrouvez ici la dernière version de la feuille de style ainsi que les différentes évolutions de cette dernière au fil des mises à jour.

Télécharger la feuille de style

Liste des mises à jour :

1.17
1.20
1.21
1.26

Mise à jour 1.17

Code ajouté :

Cette portion de code permet la mise en forme du lien vers le détail d'un statut :

[...]
.linkDetailStatus,
.totalRatingImg, .linkLike .likeRatingImg, .linkDislike .dislikeRatingImg {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(/common_images/community/community_pictos.png) 0 -730px no-repeat;
}
.linkDetailStatus {
    margin-left: 5px;
    background-position: -60px -730px;
}
.wWall .message_detail {
    padding: 0 15px;
    margin-top: 5px;
    font-size: 10px;
    font-weight: normal;
    color: #44abdd;
    background-position: 0 -263px;
}
[...]

Cette portion de code permet la mise en forme de l'information présentant le type du groupe :

[...]
.groupStatus {
	display: inline-block;
	height: 26px;
	padding: 0 5px;
	line-height: 26px;
	border: 1px solid #999;
}
[...]

Cette portion de code permet la mise en forme des informations présentant le propriétaire et le(s) administrateur(s) d'un groupe ainsi que les nouvelles fonctionnalités sur les groupes :

[...]
#membersListSummary .membersInfos #ownerGroup { position: relative; }
.pictOwner, .pictAdmin {
    position: absolute;
    top: -5px;
    left: 5px;
    z-index: 2;
    display: block;
    width: 20px;
    height: 30px;
    background: url(/common_images/community/community_pictos.png) 0 -690px;
    cursor: pointer;
}
.pictAdmin { background-position: -30px -690px; }
.groupItem .pictOwner, .groupItem .pictAdmin,
#membersList .pictOwner, #membersList .pictAdmin,
#membersListSummary .pictOwner, #membersListSummary .pictAdmin {
    top: 0;
    left: 12px;
}
#membersGroup .pictOwner, #membersGroup .pictAdmin {
    content: '';
    top: -2px;
    left: 5px;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
}
#membersGroup .pictOwner > span, #membersGroup .pictAdmin > span {
    top: -40px;
    left: 32px;
    -webkit-transform: scale(1.35);
    -ms-transform: scale(1.35);
    transform: scale(1.35);
}
#membersGroup .actions a.blacklistMemberGroup        { background-position: -140px -40px,important; }
#membersGroup .actions a.unsetAdminRightsMemberGroup { background-position: -160px 0,important; }
#membersGroup .actions a.setAdminRightsMemberGroup   { background-position: -140px 0,important; }
#membersGroup .actions a.whitelistMemberGroup        { background-position: -80px -1px,important; }
}
[...]

Cette portion de code permet la mise en forme du nouveau fonctionnement des actions sur les statuts et commentaires du mur d'activités de votre communauté :

[...]
.blocMessage:hover .blocMessageActions, .blocMessage:hover .commentActions { display: block; }
.blocMessageActions, .commentActions {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 100px;
    height: 20px;
    text-align: right;
}
.blocMessageActions > a, .commentActions > a,
.wWall .blocMessage.owner:hover .waitingModeration .blocMessageActions a {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    background-image: url(/common_images/community/community_pictos.png);
    opacity: 0.3;
    -moz-opacity: 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}
.blocMessageActions > a.updateAction, .commentActions > a.updateAction { background-position: -100px -20px; }
.deleteAction:hover, .updateAction:hover, .validMessage:hover, .cancelMessage:hover,
.wWall .blocMessage.owner .waitingModeration .blocMessageActions a:hover {
    opacity: 0.8;
    -moz-opacity: 0.8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}
.wWall .blocMessage.owner .waitingModeration .blocMessageActions a:hover { background-color: transparent; }
.validMessage > span, .cancelMessage > span,
.deleteAction > span, #membersGroup .deleteMemberGroup > span, .updateAction > span,
#membersGroup .blacklistMemberGroup > span, #membersGroup .unsetAdminRightsMemberGroup > span,
#membersGroup .setAdminRightsMemberGroup > span, #membersGroup .whitelistMemberGroup > span,
#membersGroup .blacklistMemberGroup > span,
#membersGroup .acceptMemberGroup > span, #membersGroup .refuseMemberGroup > span {
    position: absolute;
    top: -27px;
    right: 0;
    z-index: 2;
    display: none;
    padding: 2px 5px;
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    background: #000;
}
#membersGroup .deleteMemberGroup > span, #membersGroup .acceptMemberGroup > span,
#membersGroup .blacklistMemberGroup > span, #membersGroup .unsetAdminRightsMemberGroup > span,
#membersGroup .setAdminRightsMemberGroup > span, #membersGroup .whitelistMemberGroup > span,
#membersGroup .blacklistMemberGroup > span,
#membersGroup .refuseMemberGroup > span {
    top: -27px;
    left: 0;
    right: auto;
}
.validMessage:hover > span, .cancelMessage:hover > span,
.deleteAction:hover span, #membersGroup .deleteMemberGroup:hover > span, .updateAction:hover > span,
#membersGroup .setAdminRightsMemberGroup:hover > span, #membersGroup .unsetAdminRightsMemberGroup:hover > span,
#membersGroup .blacklistMemberGroup:hover > span,
#membersGroup .acceptMemberGroup:hover > span, #membersGroup .refuseMemberGroup:hover > span { display: block; }
.wWall .blocMessage .waitingModeration {
	padding: 5px;
	background-color: #e7f4fa;
	border: 1px solid #31a5da,important;
}
.waitingModeration.admin .blocMessageActions, .row_comment.waitingModeration.admin .commentActions {
	top: 50%;
	margin-top: -15px;
	display: block;
	width: auto;
	height: 30px;
	padding: 5px;
	background: #31a5da;
	opacity: .3;
	-webkit-transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
}
.waitingModeration.admin .updateAction, .waitingModeration.admin .deleteAction { display: none; }
.wWall .blocMessage .waitingModeration.admin .blocMessageActions a:first-child,
.row_comment.waitingModeration.admin .commentActions a:first-child { margin-left: 0; }
.wWall .blocMessage:hover .blocMessageActions,
.row_comment:hover .commentActions,
.wWall .blocMessage:hover .waitingModeration.admin .blocMessageActions a,
.row_comment.waitingModeration.admin:hover .commentActions,
.row_comment.waitingModeration.admin:hover .commentActions a { opacity: 1; }
.wWall .blocMessage .waitingModeration.admin .blocMessageActions a:hover,
.row_comment.waitingModeration.admin .commentActions a:hover { background-color: rgba(255,255,255,.2); }
.wWall .blocMessage .waitingModeration .message_datas { margin-bottom: 0; }
.wWall .blocMessage.owner:hover .waitingModeration .blocMessageActions { display: block; }
.blocMessageActions a, .commentActions a {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	opacity: 0.3;
	-moz-opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
}
.actionsPublication a.accept, .actionsGroup a.accept, .validMessage  { background-position: -41px -1px; }
.actionsPublication a.refuse, .actionsGroup a.refuse, .cancelMessage { background-position: -20px -1px; }
.actionsPublication .detailAction                                    { background-position: -61px 0; }
[...]

Cette portion de code permet la mise en forme des nouveaux paramètres disponibles pour les groupes :

[...]
#community_group_create #config label {
    width: auto;
    padding-left: 5px;
}
#community_group_create #config .row:nth-child(4) label,
#community_group_create #config .row:nth-child(5) label { width: 500px; }
#community_group_create #config .optionsInvitation {
	padding-top: 10px;
	padding-left: 20px;
	margin-left: 5px;
	border-left: 1px solid #ccc;
}
#community_group_create #config .multi_radio { display: block; }
[...]

Cette portion de code permet la mise en forme de fenêtre de confirmation des actions importantes, remplaçant une fenêtre navigateur :

[...]
/* -------------------------------------------- */
/* MODAL DE LA COMMUNAUTE                       */
/* -------------------------------------------- */
#overDiv.od_community {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    display: block;
    padding: 0;
    background: rgba(0,0,0,.5);
    border: none;
    visibility: visible;
}
#overDiv.od_community .modalWrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    width: 400px;
    margin-left: -200px;
    background: #fff;
    border: 1px solid #31a5da;
    visibility: visible;
    transform: translateY(-50%);
    border-radius: 5px;
}
#overDiv.od_community .modalWrapper a {
    cursor: pointer;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
#overDiv.od_community .modalTitle {
    height: 40px;
    padding: 0 30px;
    font-size: 16px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
}
#overDiv.od_community .modalClose {
    position: absolute;
    top: 11px;
    right: 12px;
    z-index: 2;
    font-size: 30px;
    line-height: 20px;
    opacity: .3;
}
#overDiv.od_community .modalClose:hover { opacity: 1; }
#overDiv.od_community .modalContent {
    padding: 20px 30px;
    font-size: 13px;
    line-height: 24px;
}
#overDiv.od_community .modalActions {
    padding: 10px;
    text-align: right;
    border-top: 1px solid #ccc;
}
#overDiv.od_community .modalActions:after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
#overDiv.od_community .modalActions a {
    float: right;
    display: block;
    padding: 0 10px;
    margin-left: 10px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
}
#overDiv.od_community .modalActions a.actionValid {
    color: #31a5da;
    border: 1px solid #31a5da;
    border-radius: 5px;
}
#overDiv.od_community .modalActions a.actionValid:hover {
    color: #fff;
    background-color: #31a5da;
}
#overDiv.od_community .modalActions a.actionCancel:hover { text-decoration: underline; }
[...]

Code retiré :

Cette portion de code n'est plus utilisée pour l'affichage des actions sur les statuts et commentaires :

[...]
.deleteAction, .updateAction {
	position: absolute;
	top: 0;
	right: 0;
	display: none;
	width: 20px;
	height: 20px;
	background: url(/common_images/community/community_pictos.png) no-repeat;
	opacity: 0.3;
	-moz-opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
}
.updateAction {
	right: 25px;
	background: url(/common_images/community/community_pictos.png) -101px -21px no-repeat;
}
.deleteAction:hover, .updateAction:hover {
	opacity: 0.8;
	-moz-opacity: 0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
}
[...]

Mise à jour 1.20

Code ajouté :

Cette portion de code met en forme la liste de vos contacts pouvant être cités dans votre statut.

[...]
/* -------------------------------------------- */
/* GESTION DE L'AUTO-COMPLETION                 */
/* -------------------------------------------- */
.wall_tags { display: none; }
.textcomplete-dropdown {
	list-style-type: none;
	padding: 0;
	margin: 0;
	border: 1px solid #999;
}
.textcomplete-dropdown li {
	background-image: none;
	background-color: #fff;
	padding: 5px;
}
.textcomplete-dropdown li:after {
	content: '';
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.textcomplete-dropdown li .personImg {
	width: 40px;
	height: 40px;
	line-height: 36px;
	background-color: #fff;
}
.textcomplete-dropdown li img {
	max-height: 100%;
}
.textcomplete-dropdown li .personImg + span {
	display: block;
	margin-left: 50px;
	line-height: 40px;
}
.textcomplete-dropdown li:first-child { border-top: none; }
.textcomplete-dropdown li:hover { background-color: rgb(247,211,211); }
.textcomplete-dropdown li.active a, .textcomplete-dropdown li.active,
.textcomplete-dropdown li.active:hover, .textcomplete-dropdown li.active:hover a:hover {
	color: #fff;
	background-color: rgb(218,36,37);
}
.textcomplete-dropdown a:hover { cursor: pointer; }

Cette portion de code met en place les styles pour la fonctionnalité suivre/ne pas suivre un statut et le placement d'autres éléments qui en découle (par exemple : le lien "Voir le détail").

[...]
.wWall .addLinkedElements { 
    min-height: 40px;
    padding: 10px 0 10px 10px; 
    margin-right: 100px; 
}
[...]
.wWall .blocMessage {
    margin: 0;
    border-top: 1px solid #ccc;
}
.wWall .blocMessage .aMessage:first-child { padding: 10px 0; }
.wWall .blocMessage .aMessage:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
}
.wWall .blocMessage:first-child { margin-top: 20px; }
.selectOrder + .wWall .blocMessage:first-child {
    margin-top: 0;
    border-top: none;
}
.wWall .blocMessage:last-child { border-bottom: 1px solid #ccc; } 
[...]
.respons { 
    display: none; 
    margin: 0 0 5px 50px;
    background: #eee;
}
.respons .row_comment { 
    position: relative; 
    padding: 5px;
    border-bottom: 1px solid #fff; 
    clear: both; 
}
[...]
.respons .personImg {
	width: 30px;
	height: 30px;
	margin: 5px 10px 5px 5px;
	line-height: 26px;
}
.respons .row_comment .editComment {
	width: 550px;
[...]
.respons .formComment { 
	width: 100%; 
	padding: 5px;
}
[...]
.respons .row.commentZone textarea { 
    float: left; 
    width: 550px;
    height: 30px;
    margin-top: 0;
    padding: 0 5px;
    line-height: 30px;
} 
.respons .submit { margin: 0 5px; }
.respons .submit input { 
    height: 30px;
    line-height: 20px; 
} 
[...]
.linkDetailStatus { background-position: -60px -730px; }
[...]
.blocMessage .message_actions {
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 2;
	text-align: right;
}
.blocMessage .message_actions > a {
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
}
.blocMessage .message_actions > a.messageActionFollow { color: #ccc; }
.blocMessage .message_actions > a.messageActionFollow.active { color: #007aaa; }
.blocMessage .message_actions > a.messageActionsToggle {
	border: 1px solid #ccc;
	border-top: none;
}
.blocMessage .message_actions > a.messageActionsToggle.active { border-color: #007AAA; }
.blocMessageActions {
	position: absolute;
	top: 19px;
	right: 0;
	z-index: 3;
	display: none;
	width: 200px;
	text-align: left;
	background-color: #fff;
	border: 1px solid #007AAA;
}
.blocMessageActions > a {
	display: block;
	height: 30px;
	padding: 0 10px;
	line-height: 30px;
	text-decoration: none;
	border-bottom: 1px solid #eee;
}
.blocMessageActions > a.deleteAction:hover {
	color: rgb(234,97,97);
	background-color: rgba(234,97,97,.2);
}
.blocMessageActions > a:last-child { border-bottom: none; }
.blocMessageActions > a:hover { background-color: rgba(0,122,170,.2); }
.commentActions {
	position: absolute;
	top: 0;
	right: 0;
	display: none;
	width: 100px;
	height: 20px;
	text-align: right;
}
[...]

Code retiré :

[...]
.wWall .blocMessage { 
    position: relative; 
    margin: 5px 0 10px; 
    padding: 0 0 10px; 
    border-bottom: 1px solid #ccc; 
} 
.wWall .blocMessage:first-child { margin-top: 0; }
[...]
.wWall .blocMessage .waitingModeration { 
    padding: 5px; 
    background-color: #e7f4fa; 
    border: 1px solid #007aaa; 
} 
.wWall .blocMessage .waitingModeration .blocMessageActions, .wWall .row_comment.waitingModeration.admin .commentActions { 
	top: 50%; 
	margin-top: -15px; 
	display: block; 
	width: auto; 
	height: 30px; 
	padding: 5px; 
	background: #5c8fab; 
	opacity: .3; 
} 
.wWall .blocMessage:hover .waitingModeration .blocMessageActions, 
.wWall .blocMessage .waitingModeration .blocMessageActions a, 
.wWall .row_comment.waitingModeration.admin:hover .commentActions, 
.wWall .row_comment.waitingModeration.admin:hover .commentActions a { opacity: 1; } 
.wWall .blocMessage .waitingModeration .message_datas { margin-bottom: 0; } 
.wWall .blocMessage .waitingModeration .message_datas a { display: none; } 
.wWall .blocMessage.owner .waitingModeration .blocMessageActions, .wall.blocMessage .commentActions { 
	top: 0; 
	margin-top: 0; 
	display: none; 
	width: 100px; 
	height: auto; 
	padding: 0; 
	background: none; 
} 
.wWall .blocMessage.owner:hover .waitingModeration .blocMessageActions { display: block; }
[...]
.blocMessageActions > a.updateAction, .commentActions > a.updateAction { background-position: -100px -20px; } 
.wWall .blocMessage.owner .waitingModeration .blocMessageActions a:hover { background-color: transparent; }
[...]
.wWall .message_datas { margin: 0 0 10px; } 
[...]
.respons .row_comment.waitingModeration { margin-bottom: 1px; }
[...]
.linkDetailStatus { 
    margin-left: 5px;
    background-position: -60px -730px; 
}
[...]
.blocMessage:hover .blocMessageActions, .blocMessage:hover .commentActions { display: block; }
[...]
.blocMessageActions > a, .commentActions > a,
[...]
.deleteAction > span, #membersGroup .deleteMemberGroup > span, .updateAction > span,
[...]

Mise à jour 1.21

Code ajouté :

Ce code permet la gestion du partage d'éléments.

/* -------------------------------------------- */
/* GESTION DU PARTAGE                           */
/* -------------------------------------------- */

.sharedElement { padding: 10px 0; }
.sharedElementDisplay {
	border: 1px solid #ccc;
	cursor: pointer;
}
.sharedElementDisplay:hover,
.sharedElementDisplay:hover .sharedElementPicture + div { border-color: #007aaa; }
.sharedElementPicture {
	width: 130px;
	height: 130px;
	line-height: 126px;
	text-align: center;
	background-color: #ddd;
	overflow: hidden;
}
.sharedElementPicture > img {
	vertical-align: middle;
	max-height: 100%;
}
.sharedElementPicture > img + img { display: none; }
.sharedElementPicture + div {
	position: relative;
	min-height: 130px;
	padding: 20px 20px 40px;
	margin-left: 130px;
	border-left: 1px solid #ccc;
}
.sharedElement .sharedElementTitle {
	padding-bottom: 10px;
	font-size: 1.3334em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.SharedElementStatus .sharedElementTitle a {
	font-weight: bold;
	text-decoration: none;
}
.sharedElement .sharedElementSummary {
	height: 40px;
	padding: 5px 0;
	overflow: hidden;
}
.sharedElementLink {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
	display: none;
	height: 0;
	padding: 0 10px;
	line-height: 30px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
#overDiv #newStatusForm {
	padding-top: 20px;
	margin-top: 20px;
	border-top: 1px solid #ccc;
}
#newStatusForm .personImg {
	width: 40px;
	height: 40px;
	line-height: 36px;
}
#newStatusForm .divwall_textarea {
	display: block;
	width: auto;
	padding-left: 10px;
	margin-left: 40px;
}
#newStatusForm .divwall_textarea textarea {
	width: 100%;
	vertical-align: top;
}
.sharedElementNoResult { border: 1px solid #ccc; }
.sharedElementNoResult .sharedElementPicture + div {
	padding: 20px;
	font-size: 1.3334em;
	line-height: 90px;
	color: #999;
	text-align: center;
	border-left: 1px solid #ccc;
}
.sharedElementNoResult .sharedElementPicture + div > div {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}
.blocMessageActions .shareLinkNumber {
	height: 18px;
	padding: 0 5px;
	margin-top: 6px;
	font-size: 10px;
	color: #fff;
	line-height: 20px;
	background-color: #007AAA;
}
.followUpActions, .communityShareLink + a { border-top: 1px solid #ccc; }
.sharedElementAdditionnals {
	position: absolute;
	bottom: 10px;
	left: 0;
	z-index: 2;
	width: 100%;
	margin: 0;
	padding-left: 20px;
}
.sharedElementAdditionnals li {
	float: left;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0 20px 0 0;
	line-height: 20px;
	background: none;
}
.sharedElementAdditionnals li > * {
	display: inline-block;
	vertical-align: middle;
}
.sharedElementAdditionnals li > .icons {
	width: 20px;
	height: 20px;
}

Ce code permet la mise en forme de la recherche communautaire.

/* -------------------------------------------- */
/* RECHERCHE COMMUNAUTAIRE                      */
/* -------------------------------------------- */
#searchCommunityResults * {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.searchCommunityForm {
	padding: 10px;
	border-bottom: 1px solid #999;
}
.searchCommunityForm label {
	float: none;
	display: block;
}
.searchCommunityForm input[type="text"] { width: 100%; }
#searchCommunityResultsMenu {
	width: 200px;
	padding-top: 20px;
}
#searchCommunityResultsMenu ul { margin: 0; }
#searchCommunityResultsMenu ul li {
	padding-left: 0;
	background: none;
}
#searchCommunityResultsMenu ul li a {
	display: block;
	height: 30px;
	padding: 0 10px;
	line-height: 30px;
	text-decoration: none;
	border-bottom: 1px solid #ccc;
}
#searchCommunityResultsMenu ul li a:hover { text-decoration: underline; }
#searchCommunityResultsMenu ul li a > span {
	width: 30px;
	height: 18px;
	margin-top: 6px;
	font-size: 11px;
	line-height: 18px;
	color: #fff;
	text-align: center;
	background-color: #007aaa;
	border-radius: 20px;
}
#searchCommunityResultsMenu ul li.active a {
	color: #fff;
	text-decoration: none;
	background-color: #007aaa;
}
#searchCommunityResultsMenu ul li.active a > span {
	color: #007aaa;
	background-color: #fff;
}
#searchCommunityResultsList {
	padding: 20px 0 0 20px;
	margin-left: 200px;
}
#searchCommunityResultsList > h3 { margin-top: 0; }
#searchCommunityResultsList h4 {
	height: 30px;
	padding: 0 10px;
	line-height: 30px;
	background-color: #eee;
}
.searchCommunityResult .personImg,
.searchCommunityResult .groupImg {
	float: left;
	border: none;
}
.searchCommunityResult .personInfos,
.searchCommunityResult .groupInfos {
	position: relative;
	display: block;
	height: 90px;
	padding: 10px;
	margin-left: 90px;
	border-left: 1px solid #ccc;
}
.searchCommunityResult .personInfos h5,
.searchCommunityResult .groupInfos h5,
.searchCommunityResult .groupInfos .description {
	margin-top: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.searchCommunityCategoryMore a { font-weight: bold; }
.searchCommunityResult {
	margin-bottom: 10px;
	border: 1px solid #ccc;
	cursor: pointer;
}
.searchCommunityResult:hover,
.searchCommunityResult:hover .personInfos,
.searchCommunityResult:hover .groupInfos { border-color: #007aaa; }
.searchCommunityResultLink { display: none; }
.searchCommunityCategoryStatus .person {
	float: left;
	width: 60px;
	padding: 10px;
}
.searchCommunityCategoryStatus .person:hover { background-color: transparent; }
.searchCommunityCategoryStatus .personImg {
	width: 40px;
	height: 40px;
	line-height: 36px;
}
.searchCommunityCategoryStatus .message_wall {
	padding: 10px 10px 10px 0;
	margin-left: 60px;
}
.searchCommunityResult .message_time {
	padding: 5px 0 0 15px;
	font-size: 11px;
	color: #bbb;
	line-height: 10px;
	background: url(/common_images/community/community_pictos.png) 0 -655px no-repeat;
}
.searchCommunityResult .comment { background-color: #eee; }
.searchCommunityResult .comment .person {
	width: 40px;
	padding: 5px;
}
.searchCommunityResult .comment .personImg {
	width: 30px;
	height: 30px;
	line-height: 26px;
}
.searchCommunityResult .comment .comment_wall {
	padding: 5px;
	margin-left: 40px;
}
.searchCommunityResult > * strong.highlight {
	font-weight: bold;
	color: #000;
	background-color: #ffe4d8;
}

Mise à jour 1.26

Ce code permet l'affichage du nouveau système de notifications.

[...]

#messagesResume .viewMore a, #notificationResume .viewMore a,
#contactsResume .viewMore a {
	display: block;
	padding: 10px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
#messagesResume .viewMore a:hover, #notificationResume .viewMore a:hover,
#contactsResume .viewMore a:hover { background-color: #eee; }

[...]
#addContact .person.active, .publicationElement:hover, .person:hover, .groupBox:hover,
#messagesResume .wallNotification.unread, 
#contactsResume .wallNotification.unread, 
#notificationResume .wallNotification.unread { background: #e7f4fa; } 
#messagesResume .wallNotification.unread:hover, 
#contactsResume .wallNotification.unread:hover, 
#notificationResume .wallNotification.unread:hover { background: #cbe4ef; } 
#messagesResume .wallNotification:hover, 
#contactsResume .wallNotification:hover, 
#notificationResume .wallNotification:hover { background: #f6f6f6; }
[...]
#addMember .person.active, #addContact .person.active, #community_relationship .person.active {
    color: #fff;
    line-height: 12px;
    color: #fff;
    background: #f00;
    background-color: #31a5da;
}
#messagesResume, #notificationResume, #contactsResume { 
    position: absolute; 
    top: 30px; 
    left: -225px; 
    right: 0; 
    display: none; 
    width: 250px; 
    width: 300px; 
    height: 400px; 
    padding: 40px 0; 
    text-align: left; 
    background: #fff; 
    border: 1px solid #000; 
    z-index: 1000; 
} 
#messagesResume .arrow, #notificationResume .arrow, #contactsResume .arrow { left: 230px; } 
.noTalk, .noReaction { padding: 5px; } 
.noContact { text-align: center; } 
.notificationTitle { 
    position: absolute,important; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 2; 
    height: 40px; 
    padding: 10px; 
    font-size: 1.25rem; 
    background-color: #fff; 
    border-bottom: 1px solid #999; 
} 
.contentMessage { 
    height: 100%; 
    overflow: scroll; 
    overflow-x: hidden; 
} 
.manageMessage { 
    position: absolute,important; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 2; 
    display: flex; 
    height: 40px; 
    background-color: #fff; 
    border-top: 1px solid #999; 
} 
.manageMessage > * { 
    display: block; 
    width: 50%; 
    text-align: center; 
    height: 39px; 
    line-height: 40px; 
} 
.manageMessage > * + * { border-left: 1px solid #ccc; } 
.manageMessage > *:hover { background-color: #eee; } 
.wallNotification { 
    display: flex; 
    padding: 10px 10px 5px; 
    border-bottom: 1px solid #eee; 
    cursor: pointer; 
    overflow: hidden; 
} 
.wallNotification .userLogo { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px; 
    height: 40px; 
} 
.wallNotification .userLogo img { max-height: 100%; } 
.wallNotification .action { 
    position: absolute; 
    top: 10px; 
    right: 0; 
    z-index: 2; 
    display: block; 
    width: 30px; 
    height: 30px; 
    padding: 5px; 
    background-color: #5c8fab; 
    transform: translateX(30px); 
    transition: transform .2s ease-in-out, background-color .2s ease-in-out; 
} 
.wallNotification .action.twoActions { 
    display: flex; 
    width: 60px; 
    padding: 0; 
    transform: translateX(60px); 
} 
.wallNotification .action.twoActions a { 
    display: block; 
    width: 30px; 
    height: 30px; 
    padding: 5px; 
    transition: background-color .2s ease-in-out; 
} 
.wallNotification .action i { 
    display: block; 
    width: 20px; 
    height: 20px; 
    background-image: url(/common_images/community/community_pictos.png); 
    background-position: -140px -40px; 
} 
.wallNotification:hover .action { transform: translateX(0); } 
.wallNotification .action:hover, 
.wallNotification .action.twoActions a:hover { background-color: #3b6c87; } 
.wallNotification .action.twoActions:hover { background-color: #5c8fab; } 
.wallNotification .contactAccept i, .wallNotification .groupAccept i { background-position: -40px 0; } 
.wallNotification .contactRefuse i, .wallNotification .groupRefuse i { background-position: -20px 0; } 
.wallNotificationContent { 
    width: calc(100% - 40px); 
    padding-left: 10px; 
} 
.wallNotificationContent a { 
    color: #444; 
    text-decoration: none; 
} 
.wallNotificationContent a.userName { font-weight: bold; } 
.wallNotificationContent .datePublication { 
    padding-top: 5px; 
    font-size: .625rem; 
    color: #999; 
} 
#messagesResume .arrow, #notificationResume .arrow, #contactsResume .arrow { 
    position: absolute; 
    left: auto; 
    right: 10px; 
}
.noResult {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 16px;
	color: #ccc;
	text-align: center;
} 
.noContact > div {
[...]
} 
#messagesResume > div, #contactsResume > div, 
#notificationResume > div { position: relative; } 
#messagesResume .arrow:hover, #contactsResume .arrow:hover, 
#notificationResume .arrow:hover { background: url(/common_images/community/community_pictos.png) 0 -20px no-repeat; } 
#messagesResume .arrowBlack, #contactsResume .arrowBlack, #notificationResume .arrowBlack { display: none; } 
#messagesResume > div:last-child, #contactsResume > div:last-child, 
#notificationResume > div:last-child { 
    position: absolute; 
    border: none; 
} 
#messagesResume > div:first-child, #contactsResume > div:first-child, 
#notificationResume > div:first-child { border: none; } 
.linkMessage { 
    display: inline-block; 
    width: 194px; 
    margin-top: 5px; 
    text-decoration: none; 
    overflow: hidden; 
} 
#messagesResume .personName, #notificationResume .personName, 
#contactsResume .personName { 
    text-align: left; 
    font-weight: bold; 
} 
#messagesResume .contact_message { white-space: nowrap; } 
#contactsResume .group_notification { height: 52px; } 
#contactsResume span { display: inline-block; } 
 
/* ----------------
[...]
        margin-right: 3%; 
} 
.communityNotificationManage #divallowedactivitywalltypenotif .multi_radio label, 
.communityNotificationManage #divallowedgrouptypenotif .multi_radio label, 
.communityNotificationManage #divallowedmessagingtypenotif .multi_radio label, 
.communityNotificationManage #divallowedrelationshiptypenotif .multi_radio label { 
	display: block; 
.communityNotificationManage .selectWithBlocs { display: flex; } 
.communityNotificationManage .selectWithBlocs label { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
    padding: 20px 10px; 
    text-align: center; 
    border: 1px solid #ccc;
    cursor: pointer; 
}
.communityNotificationManage #divallowedactivitywalltypenotif .multi_radio label:hover,
.communityNotificationManage #divallowedactivitywalltypenotif input[type="radio"]:checked + label,
.communityNotificationManage #divallowedgrouptypenotif .multi_radio label:hover,
.communityNotificationManage #divallowedgrouptypenotif input[type="radio"]:checked + label,
.communityNotificationManage #divallowedmessagingtypenotif .multi_radio label:hover,
.communityNotificationManage #divallowedmessagingtypenotif input[type="radio"]:checked + label,
.communityNotificationManage #divallowedrelationshiptypenotif .multi_radio label:hover,
.communityNotificationManage #divallowedrelationshiptypenotif input[type="radio"]:checked + label {
.communityNotificationManage .selectWithBlocs label:hover {
    color: #007aaa;
    background-color: #e2f6fe;
    border-color: #007aaa;
}
.communityNotificationManage #divallowedactivitywalltypenotif input[type="radio"]:checked + label, 
.communityNotificationManage #divallowedgrouptypenotif input[type="radio"]:checked + label, 
.communityNotificationManage #divallowedmessagingtypenotif input[type="radio"]:checked + label, 
.communityNotificationManage #divallowedrelationshiptypenotif input[type="radio"]:checked + label { box-shadow: inset 0 0 0 1px #007aaa; } 
.communityNotificationManage #divallowedactivitywalltypenotif input[type="radio"], 
.communityNotificationManage #divallowedgrouptypenotif input[type="radio"], 
.communityNotificationManage #divallowedmessagingtypenotif input[type="radio"], 
.communityNotificationManage #divallowedrelationshiptypenotif input[type="radio"] { 
.communityNotificationManage .selectWithBlocs input[type="radio"]:checked + label { box-shadow: inset 0 0 0 1px #007aaa; } 
.communityNotificationManage .selectWithBlocs input[type="radio"] {
    position: absolute; 
    right: 0;
    bottom: 0;
    visibility: hidden; 
} 
.communityNotificationManage .deleteThread { 
    display: inline-block; 
    vertical-align: middle; 
    opacity: .5; 
} 
.communityNotificationManage .deleteThread:hover { opacity: 1; } 
.communityNotificationManage .deleteThread i { 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    background-position: 4px -78px; 
}
#groupsSpecificSettings #divallownotifmygroup > label { display: none; }
#groupsSpecificSettings .groupTableHead,
#groupsSpecificSettings .groupTableRow {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #ccc;
}
#groupsSpecificSettings .groupTableRow > div {
	padding: 5px 0;
	line-height: 20px;
}
#groupsSpecificSettings .groupTitle {
	flex: 0 0 200px;
	font-weight: bold;
}
#groupsSpecificSettings .groupRadio {
	flex: 0 0 calc((100% - 250px) / 3);
}
#groupsSpecificSettings .groupDelete { flex: 0 0 50px; }
#groupsSpecificSettings .groupDelete a {
	display: inline-block;
	height: 20px;
}
#groupSpecificAdd { padding-top: 10px; }

Modèle Communauté

Retrouvez la dernière version de la feuille de style pour les éléments de la Communauté sur ce modèle.

Télécharger la feuille de style pour le modèle Communauté