dicas, geekices

Um estilo personalizado para o Scoop.it

Um estilo personalizado que torna a visualização dos tópicos no Scoop.it uma tarefa mais leve

Embora cada vez mais utilizadores estejam a usar o Pinterest, eu decidi voltar a virar-me para o Scoop.it (o meu tópico é este). Este serviço permite criar tópicos sobre qualquer tema, receber sugestões automáticas baseadas nas tags definidas aquando da criação, seguir outros tópicos e ainda receber sugestões de conteúdos dos outros utilizadores. Toda a informação adicionada nos tópicos pode ser partilhada nas redes sociais Twitter, Facebook, G+ e LinkedIn, e também em blogs WordPress e Tumblr.

Uma funcionalidade interessante do Scoop.it é a estatística sobre as visitas. Embora a grande vantagem desta só esteja disponível para as contas pagas, as gratuitas têm alguma informação básica útil e ainda um comparativo entre o número de visitas da conta e dos contactos.

O ponto mais fraco, para mim, no Scoop.it é o interface demasiado escuro, que torna a utilização mais pesada e faz com que me canse rapidamente de o utilizar. Para contrariar isso, criei este estilo personalizado que é aplicado a qualquer tópico. Precisam apenas do Firefox ou Chrome/C hromium, a extensão Stylish e o seguinte código:

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

@-moz-document url-prefix('http://www.scoop.it/t/') {

#foot {
box-shadow: 0 1px 10px #444444 !important;
}

#headbanner {
box-shadow: 0 -1px 10px #444444 !important;
}

body {
background-color: #CCCAC9 !important;
font-family: ubuntu !important;
background-image: none !important;
}

#themeHeader #titleAndDescription, #themeTitleA, #themeDescription, #themeAuthor, #themeAuthor a {
color: #000 !important;
/*text-shadow: 0 0 2px #fff !important;*/
font-family: serif !important;
line-height: 1.5 !important;
}

#themeHeader #titleAndDescription #themeTitle h1 {
font-weight: bold !important;
}

.paginator {
background-color: rgba(221, 72, 20, 0.5) !important;
font-family: sans-serif !important;
margin: 10px !important;
box-shadow: inset 0 0px 10px rgba(0,0,0,0.2) !important;
border-radius: 5px !important;
padding: 10px !important;
}

.viewbox {
margin-bottom: 25px !important;
}

#themeTitle a {
color: #DD4814 !important;
}

#themeTitle a:hover {
color: #77216f !important;
text-decoration: none !important;
}

.postView .title a:hover {
color: #DD4814 !important;
text-decoration: none !important;
}

.postView .title a {
color: /*#77216f*/#509DEB !important;
}

#headbanner, #foot {
background-color: #2f2f2f !important;
}

.postView:hover {
border: 1px solid #aaa !important;
}

.onePost .actionsBar {
position: relative !important;
width: 460px !important;
margin: 0px auto !important;
border-top: 1px solid #bbb !important;
border-right: 1px solid #bbb !important;
border-left: 1px solid #bbb !important;
border-bottom: 1px solid #bbb !important;
padding: 0px !important;
}

.reactionsZone, .shareZone {
width: 458px !important;
margin: 0px auto !important;
border-left: 1px solid #bbb !important;
border-right: 1px solid #bbb !important;
border-bottom: 1px solid #bbb !important;
border-radius: 0px 0px 5px 5px !important;
padding: 0px !important;
}

.commentForm textarea {
width: 440px !important;
}

#copyLink {
padding: 5px !important;
}

#copyLinkZone {
margin: 5px !important;
width: 437px !important;
}

.shareZone .textAreaToCopy {
border: 1px solid #d0d0d0 !important;
}

.sn, #shareThisOn, .buttons {
padding: 5px !important;
}

.shareZone .shareButton {
padding-right: 5px !important;
}

}

Estejam à vontade para fazerem qualquer alteração; o estilo é partilhado sob a licença CC BY-SA-3.0.

Standard

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>