Masquer la barre Over-blog

Publié le par Seifer



Bonjour à tous!

J'ai récemment trouvé, après de nombreuses recherches, comment masquer la barre qu'Over-blog a grâcieusement installée sur l'ensemble des Blogs. Mais cette barre que je trouve personnellement pas très élégante et plutôt chiante qu'autre chose, je vous fais part du résultat de ma recherche.

Recopiez le code ci-dessous:

html body .expand ul.buttons {
           display:none!important;
}

La trace de la barre OB



Mais un problème persiste, il y a un écart entre la bordure du navigateur et l'header du site, pour régler ce problème, c'est très simple, il suffit d'insérer cette ligne dans le CSS :




margin-top: -35px;

Cette ligne se place dans la classe "body". Celle-ci variera peut-être selon le blog, ça sera à vous de voir pour ce problème, voilà pour la barre d'Over-blog, j'espère que j'aurais pû être utile à certains. ;)

Publié dans HTML & CSS

Pour être informé des derniers articles, inscrivez vous :
Vous aimerez aussi :
Se connecter à un channel IRC sous Windows 8 avec mIRC
Se connecter à un channel IRC sous Windows 8 avec mIRC
Icônes épinglées à la barre des tâches disparues
Icônes épinglées à la barre des tâches disparues
Problème de boot après avoir désinstallé Linux?
Problème de boot après avoir désinstallé Linux?
Définir sa page d'accueil sous Mozilla Firefox
Définir sa page d'accueil sous Mozilla Firefox
News!
Créer une ombre sous votre texte avec le CSS
Commenter cet article
H
Hamza93
23/02/2010 23:22
<br /> Eh Ben salut seifer il y a une facon plus efficace que ca = .expand{margin-top:-999;} mais bon tu peux la desactiver depuis ton administration car ob la rendu desactivable ^^<br /> Cordialement Hamza93<br /> <br /> <br />
Répondre
S
Seifer
24/02/2010 12:34
<br /> Merci bien Hamza. <br /> <br /> Cordialement.<br /> <br /> <br />
N
NHS
17/02/2010 00:50
<br /> Oups ! Ouis je parlais du design à réaliser sur toshop. Surtout le mien ! Mais bon, simple et efficace, comme on dit.<br /> <br /> Je parle de résolution inhabituelle (1440X900) car la plupart des écrans c'est du 1280X1024, ou alors du 1600X1200... Les portables 15" (1280X800) sont plus courants que les 17"... Bref ça<br /> représente pas beaucoup d'internautes en %. Enlève ceux qui n'ont Firefox...<br /> <br /> Et merci pour le CSS.<br /> <br /> <br />
Répondre
S
Seifer
17/02/2010 00:58
<br /> Oui, puis le tiens j'aime beaucoup à vrai dire, je suis plutôt pour le minimaliste en général.<br /> <br /> Oui oui je suis au courant pour ça, cela m'a même surpris en voyant ma résolution, qui est d'ailleurs la résolution maximum de mon PC portable. Mais bon, je re-travaille ce blog sur un pc configuré<br /> en 1680*1050 afin d'essayer de repérer les éventuels problèmes de compatibilité selon la résolution d'écran.<br /> <br /> Pour ceux qui n'ont pas Firefox, je ne les comprends décidemment pas, le manque de compatibilité est parfois plus que choquant, ou peut-être ai-je l'oeil trop exigeant...<br /> <br /> <br />
N
NHS
17/02/2010 00:28
<br /> Zut... Ton nouveau design m'a fait oublier pourquoi je postais un commentaire .<br /> J'allais faire un tuto là-dessus. Bref, ton article comporte à mon sens deux défauts: la première est conséquente:<br /> display: none; ne fait que rendre ta barre invisible, elle ne la supprime pas. Si tu regardes bien, en pointant ton curseur les liens sont toujours là.<br /> L'autre défaut, c'est trois fois rien; le nombre de pixels que tu mets pour remonter le conteneur ne concerne que ton blog... Non ? D'ailleurs, pour retrouver l'écart initial, celui avant la barre,<br /> c'est exactement -48px, soit la hauteur de la barre.<br /> <br /> Cordialement,<br /> <br /> <br />
Répondre
S
Seifer
17/02/2010 00:37
<br /> Oups, je n'avais pas remarqué la présence des liens. ^^'<br />  Je ne la voyais plus donc je pensais qu'elle avait été supprimée, je n'ai pas pensé à vérifier la présence des liens.<br /> <br /> Pour l'écart, étant donné que la ligne est placée dans body, à mon sens, j'ai la même conclusion que toi, cela s'adresse au Blog, mais je n'ai pas trouvé d'autre place où cette ligne prenait effet,<br /> je n'ai pas tellement cherché à retrouver l'écart initial, mais un écart qui me semblait correct et pas mal pour le blog.<br /> <br /> Merci pour tes remarques. Je m'empresse tout de suite de modifier le titre de l'article! ;)<br /> <br /> EDIT : A noter que même si les "liens" sont toujours présents, ils n'ont plus la moindre utilité car ils semblent désactivés.<br /> <br /> <br />
N
NHS
17/02/2010 00:13
<br /> Héhé... Ca sent le thème Wordpress. Mais c'est joli. Très.<br /> Manque plus que les liens des menus horizontaux.<br /> Ce qui est génial avec nos blogs, c'est que c'est super simple à réaliser mais les effets marchent à chaque fois...<br /> Un (très léger) bémol: La résolution de ton écran est assez inhabituelle... T'aurais pas un HP ou un Toshiba par hasard ?<br /> <br /> tu peux me passer le css des dates de tes articles de ton ancien thème ? Méga tuto en vue...<br /> <br /> <br />
Répondre
S
Seifer
17/02/2010 00:29
<br /> Pour le nouveau thème de mon blog, j'ai au début essayé de faire un truc sophistiqué mais ça m'a vite pris la tête alors j'ai pris la forme ellipse de Photoshop et je me suis amusé. Xd<br /> <br /> Pour les liens des menus horizontaux je me demande encore si je vais mettre des imagemaps ou les liens bruts placés avec le CSS.<br /> <br /> Je ne comprends pas trop le sens de ta phrase?<br /> <br /> Ce qui est génial avec nos blogs, c'est que c'est super simple à réaliser mais les effets marchent à chaque fois...<br /> <br /> Pour la résolution de mon écran, je dispose d'un Packard Bell, c'est un ordinateur portable de 17", d'où peut-être la résolution inhabituelle?<br /> <br /> Et pour terminer, voilà le CSS de la date d'articles de mon ancien design :<br /> <br /> .date {<br />    font-weight: bold;<br />    padding: 3px 3px 5px;<br />    text-transform: uppercase;<br />    margin: -15 0 20 -10px;<br />    position: absolute;<br />    color: darkgray;<br />    width:65px;<br />    height:45px;<br />    word-spacing:45px;<br />    border-right: 1px dotted lightgrey;<br />    background:transparent url(http://idata.over-blog.com/2/86/92/01/Fond-date.png) no-repeat;<br /> }<br /> <br /> <br />