Stylish pour Diaspora*

Stylish est une extension pour votre navigateur qui vous permet de personnaliser le design des sites que vous visitez. De façon simple en téléchargeant des templates (des design), ou si vous connaissez le HTML / CSS, vous pouvez créer le votre.

Je vous propose mon design, légèrement rétro, pour le réseau social Diaspora* avec le publisher fixe.

Le résultat

Avant

Diaspora avant
UserStyles

Après

Stylish retro
Diaspora

stylish_retro_diaspora_annoted

stylish_retro_diaspora_post

stylish_retro_diaspora_profil

Le code

Le téléchargement (méthode simple)

Vous pouvez retrouver le style sur cette page, en cliquant sur le bouton Install with stylish

Le code source

MAJ : 07 - 04 - 13

@namespace url(http://www.w3.org/1999/xhtml);



@-moz-document domain("diasp.eu"),domain("diasp.org"),domain("joindiaspora.com"),domain("pod.geraspora.de"){

body{

    background: #28616a !important;



}





@font-face {

  font-family: 'Boogaloo';

  font-style: normal;

  font-weight: 400;

  src: local('Boogaloo'), local('Boogaloo-Regular'), url(https://themes.googleusercontent.com/static/fonts/boogaloo/v3/1x_XysQB9ZwoSzu9a0nb7PesZW2xOQ-xsNqO47m55DA.woff) format('woff');

}









/*****************************************************************************************

*

*                   Header

*

*******************************************************************************************/



header{

    background-image: none !important;

    background-color: #28616A !important;

    font-family: Boogaloo !important;

}



header .header-nav a{

    font-size: 17px !important;

    color: #E9E4CA !important;



}



header .header-nav a:hover{



    background: #C94C46 !important;

}



.diaspora_header_logo{

    display:none !important;



}



.dark-header:before{

    content: 'Diaspora*';

    display: inline-block !important;

    position: absolute !important;

    margin-left: 40% !important;



    font-size: 22px !important;

}



#notification_dropdown{

    font-size: 15px !important;

}



.notifications .notification_element .hovercardable{color: #C94C46 !important;}



#user_menu .avatar{

    border-radius: 11px !important;

}



#global_search form input{

    background-color: #E9E4CA !important;

    box-shadow: 0 0 0px #CCCCCC !important;

    border-radius: 3px 0px 0px 3px !important;

}



/*****************************************************************************************

*

*                   Body

*

*******************************************************************************************/



.span-24{

    width: 100% !important;

}



.container{

    width: 100% !important;

}



.rightBar{

    margin-top: 180px !important;

}



/*****************************************************************************************

*

*                   Navigation (right)

*

*******************************************************************************************/



.span-5{

    width: 16% !important;



}



.leftNavBar{

    float: right !important;

    display: inline-block !important;

    margin-top: 100px !important;



}



#home_user_badge img{

    height: 50px !important;

    width: 50px !important;

    position: relative !important;

    background: #fff !important;

    padding: 4px !important;

    border-radius: 25px !important;



}





#home_user_badge h4{

    font-size: 30px !important;

    font-family: Boogaloo !important;

    font-style: italic !important;

    text-shadow: -3px 1px 4px #28616A !important;

    color: #E9E4CA !important;

}



.section .left_nav a.aspect_selector,

.section .left_nav a.home_selector{

    color: #E9E4CA !important;

    text-align: center !important;

}



ul.left_nav a.aspect_selector:hover,

ul.left_nav a.home_selector:hover,

ul.left_nav a.tag_selector:hover,

ul.left_nav a.element_selector:hover{

    background: #C94C46 !important;

    font-style: italic !important;

}









.section .left_nav ul.sub_nav a.aspect_selector, .section .left_nav ul.sub_nav a.tag_selector{

    color: #E9E4CA !important;

}



ul.left_nav a.aspect_selector:hover:before, ul.left_nav a.home_selector:hover:before, ul.left_nav a.tag_selector:hover:before, ul.left_nav a.element_selector:hover:before{

    color: #333 !important;

}



/*****************************************************************************************

*

*                   Main content

*

*******************************************************************************************/



.span-13{

    width: 60% !important;

    background: #E9E4CA !important;

    margin-top:-19px !important;

}



#aspect_stream_container>h3:first-child{

    font-size: 66px !important;

}



.span-13 h3{

    font-size: 32px !important;

}



/*************************** Fixed publisher */



#publisher{

    position: fixed !important;

    display: block !important;

    width: 36% !important;

    max-height: 85% !important;

    right: 0px !important;

    top: 40px !important;

    background: #E9E4CA !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.898) !important;

}



.stream .stream_element:first-child{

    margin-top: 110px;

}



#publisher #status_message_fake_text{



    max-height: 400px !important;

    resize: vertical !important;

    overflow: visible !important;

}





/*************************** End fixed publisher */



#aspect_stream_header{

    font-size: 24px !important;

    font-style: italic !important;

    margin-bottom: 20px !important;

}



.stream_element:before{

    content: '' !important;

    display: block !important;

    font-size: 22px !important;

    font-family: Boogaloo !important;

    margin-bottom: -35px !important;

    margin-left: -1px !important;

    width: 0;

    height: 0;

    border-top: 15px solid transparent;

    border-left: 20px solid #28616a;

    border-bottom: 15px solid transparent;

}



.stream_element{

    border-top: 1px solid #28616A !important;

}



.question_mark img,

.block_user img,

.hide_post img{

    background: #fff !important;

    border-radius: 4px !important;

    padding: 1px !important;

    border: 1px solid #000 !important;

}



.stream_element a.author{

    color: #C94C46 !important;

    font-family: Boogaloo !important;

}



.media .img img{

    border-radius: 50px !important;

}



.stream_element .collapsible .expander{

    box-shadow: 0px -1px 2px #000 !important;

    background-color: #28616A !important;

    background-image: none !important;

    font-size: 20px !important;

    text-shadow: none !important;

    line-height: 34px !important;

    font-family: Boogaloo !important;

    color: #E9E4CA !important;



}



.stream_container{

    border-left: 1px solid #505050 !important;





}







.comment.media{

    /*background-color: #fff !important;*/

    border-bottom: none !important;



    color: #333 !important;

}



.comment{

    border-bottom: none !important;

}



.comment.media>.bd{

    border-radius: 5px !important;

    border: 3px solid #28616a !important;

    padding: 3px !important;

    }



.comment.media>.img:after{

    content: '' !important;

    display: inline-block !important;

    position: relative !important;

    border-right: 9px solid #28616a !important;

    border-bottom: 9px solid transparent !important;

    border-top: 9px solid transparent !important;

    left: 38px !important;

    top: -45px !important;

    }







.stream_element .collapsible p{

    color: #333 !important;

}



.collapsible.comment-content > p{

    color: #333 !important;

}



.likes img{

    background: none !important;

    padding: 0 !important;

}



.avatar.small{

    padding: 2px !important;

    background: #fff !important;

    box-shadow: 1px 1px 1px #000 !important;

}



.stream_container h3,

.post-content h3,

.post-content h2,

.post-content h1{

    color: #C94C46 !important;



    font-family: Boogaloo !important;

}

/*

p{

    color: #333 !important;



}*/



.diaspora_handle{

    color: #333 !important;

}



#profile ul#profile_information > li{

    color: #E9E4CA !important;

}



#profile p{color: #E9E4CA !important;}



/*****************************************************************************************

*

*                   Right column (misc)

*

*******************************************************************************************/

#selected_aspect_contacts .avatar{

    border-radius: 20px !important;

}



.rightBar{

    margin-top: 100px !important;

    color: #E9E4CA !important;

}



.rightBar a{

    color: #E9E4CA !important;

    font-weight: bold !important;

}



.rightBar .title h5{

    font-family: Boogaloo !important;

    font-size: 1em !important;

    color: #E9E4CA !important;

    margin-left: 3px !important;

}



.title img{

    background: none !important;





}



.button{

    background: #C94C46 !important;

    color: #E9E4CA !important;

}



#back-to-top{

    font-size: 35px !important;

    border-radius: 50px !important;

    background-color: #C94C46 !important;



    border: 10px solid #333 !important;

    color: #E9E4CA !important;

}



/*****************************************************************************************

*

*                   Single post

*

*******************************************************************************************/



article.newspaper header{

    color: #333 !important;

}



article.newspaper>.container,

article.newspaper .photo_viewer,

article.newspaper header,

#post-content .container,

article header, article header p{

    background: #E9E4CA !important;

    }



#post-author{

    background: #28616a !important;

    box-shadow: 2px 2px 4px #333 !important;

    display: inline-block !important;

    position: absolute !important;

    opacity: 0.2 !important;

    }



#post-author:hover{opacity: 1 !important;}



/*** comments - simple post ***/

/*.post-comment p:last-child{background: #E9E4CA !important;}

.bd .collapsible p{background: #E9E4CA !important;}*/

#post-reactions{background: #e9e4ca !important;}

#post-reactions .author-name{color: #C94C46 !important;}

.darken .body{background: #e9e4ca !important;}



.span-18{

    background: #E9E4CA !important;

    width: 60% !important;

    margin-top: -19px !important;



}



.span-6{

    float: right !important;

    margin-top: 150px !important;

    width: 30% !important;

}



#profile_information h4{

    font-family: Boogaloo !important;

    font-size: 1.5em !important;

    font-style: italic !important;

}



#author-info .author-name{

    color: #E9E4CA !important;

}



/*.bd a,*/

.post-time,.hovercardable{

    color: #E9E4CA !important;

}



/*****************************************************************************************

*

*                   Tags page

*

*******************************************************************************************/



#main_stream,.tags_people{

    background: #e9e4ca !important;

    }

.tags_people .side_stream .people_stream a{color: #333 !important;}



.darken .darken-content{display: block !important;}

.photo-fill{

    display: inline-block !important;



    position: absolute !important;

    overflow: visible !important;

    resize: vertical !important;

    }



/*****************************************************************************************

*

*                   Private conversation

*

*******************************************************************************************/



#conversation_show .stream{

    background: #E9E4CA !important;

    }



#conversation_inbox,

#left_pane_header{background: #E9E4CA !important;}



}

Ce code est sous licence CC-BY. Libre à vous de le modifier, et redistribuer. Mais merci de me citer comme auteur (on a tous notre petit égo :) )

La police utilisée est Boogaloo sur le site Google Fonts.

diaspora*
Retour maison