Fork me on GitHub




(1) 2 »


Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Régulier
Inscrit: 12/01/2005 21:04
Messages: 296
Bonjour,

Je suis encore débutant sous XOOPS ... mais j'avance peu à peu grâce à votre aide !

J'avoue aussi que la gestion graphique des thèmes n'est pas ma tasse de thé.

Je rève un peu et c'est vrai que j'apprécierais assez un logiciel comme Artisteer pour Xoops.

Voici donc ma problématique : j'aimerais intégrer cette barre à mon vieux thème phpkaox.

Open in new window

Est-ce possible ? Si oui, comment ?


Je vous remercie de votre patience.

Cordialement.

PS : BRAVO ! pour l'ergonomie de la nouvelle version 2.50 RC2. C'est de la bombe.

Quelques informations utiles :
- Version Xoops 2.45
- Barre issue du thème Simple de Kris

- Code :
<!-- Include Socialbookmark bar -->             <div id="xo-socialbookmark">      <ul class="xo-socials">         <li rel="external" class="script-style"><a href="http://scriptandstyle.com/submit?url=http://www.edeps51.org&title=" title="Soumettre ceci sur Script & Style"> </a></li>         <li rel="external" class="blinklist"><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=http://www.edeps51.org&Title=" title="Suivre ceci sur Blinklist"> </a></li>         <li rel="external" class="delicious"><a href="http://del.icio.us/post?url=http://www.edeps51.org&title=" title="Suivre ceci sur del.icio.us"> </a></li>         <li rel="external" class="digg"><a href="http://digg.com/submit?phase=2&url=http://www.edeps51.org&title=" title="Digg ceci !"> </a></li>         <li rel="external" class="furl"><a href="http://www.furl.net/storeIt.jsp?t=&u=http://www.edeps51.org" title="Suivre ceci sur Furl"> </a></li>          <li rel="external" class="reddit"><a href="http://reddit.com/submit?url=http://www.edeps51.org&title=" title="Suivre ceci sur Reddit"> </a></li>         <li rel="external" class="yahoo"><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&u=http://www.edeps51.org" title="Sauvegarder sur Yahoo MyWeb"> </a></li>         <li rel="external" class="stumble"><a href="http://www.stumbleupon.com/submit?url=http://www.edeps51.org&title=" title="Suivre ceci sur StumbleUpon"> </a></li>         <li rel="external" class="twitter"><a href="http://twitter.com/home?status=Browsing:%20http://www.edeps51.org" title="Tweet ceci !"> </a></li>         <li rel="external" class="technorati"><a href="http://technorati.com/faves?add=http://www.edeps51.org" title="Suivre ceci sur Technorati"> </a></li>         <li rel="external" class="mixx"><a href="http://www.mixx.com/submit?page_url=http://www.edeps51.org&amp;title=" title="Suivre ceci sur Mixx"> </a></li>          <li rel="external" class="myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/?u=http://www.edeps51.org&amp;t=" title="Poster sur MySpace"> </a></li>         <li rel="external" class="designfloat"><a href="http://www.designfloat.com/submit.php?url=http://www.edeps51.org&amp;title=" title="Soumettre ceci sur DesignFloat"> </a></li>         <li rel="external" class="facebook"><a href="http://www.facebook.com/share.php?u=http://www.edeps51.org&amp;t=" title="Suivre ceci sur Facebook"> </a></li>     </ul> </div>            <!-- Include Footer -->             <!-- [* $Idxo_footer.html 228 2010-04-05 10:34:37Z kris_fr $ *] -->



Posté le : 28/10/2010 14:31
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Semi pro
Inscrit: 10/11/2004 13:40
Messages: 1659
Bonjour ,

- dans ton fichier theme.html par exemple tu places ton code en bas de page
<div id="xo-socialbookmark">
<
ul class="xo-socials">
    <
li rel="external" class="script-style"><a href="http://scriptandstyle.com/submit?url=<{$xoops_url}>&title=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_SCRIPSTYLE}>"> </a></li>
    <
li rel="external" class="blinklist"><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=<{$xoops_url}>&Title=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_BLINKLIST}>"> </a></li>
    <
li rel="external" class="delicious"><a href="http://del.icio.us/post?url=<{$xoops_url}>&title=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_DELICIOUS}>"> </a></li>
    <
li rel="external" class="digg"><a href="http://digg.com/submit?phase=2&url=<{$xoops_url}>&title=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_DIGG}>"> </a></li>
    <
li rel="external" class="furl"><a href="http://www.furl.net/storeIt.jsp?t=<{$xoops_pagetitle}>&u=<{$xoops_url}>" title="<{$smarty.const.THEME_BK_FURL}>"> </a></li>
    <
li rel="external" class="reddit"><a href="http://reddit.com/submit?url=<{$xoops_url}>&title=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_REDDIT}>"> </a></li>
    <
li rel="external" class="yahoo"><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<{$xoops_pagetitle}>&u=<{$xoops_url}>" title="<{$smarty.const.THEME_BK_YAHOO}>"> </a></li>
    <
li rel="external" class="stumble"><a href="http://www.stumbleupon.com/submit?url=<{$xoops_url}>&title=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_STUMBLE}>"> </a></li>
    <
li rel="external" class="twitter"><a href="http://twitter.com/home?status=Browsing:%20<{$xoops_url}>" title="<{$smarty.const.THEME_BK_TWITTER}>"> </a></li>
    <
li rel="external" class="technorati"><a href="http://technorati.com/faves?add=<{$xoops_url}>" title="<{$smarty.const.THEME_BK_TECHNORATI}>"> </a></li>
    <
li rel="external" class="mixx"><a href="http://www.mixx.com/submit?page_url=<{$xoops_url}>&title=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_MIXX}>"> </a></li>
    <
li rel="external" class="myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/?u=<{$xoops_url}>&t=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_MYSPACE}>"> </a></li>
    <
li rel="external" class="designfloat"><a href="http://www.designfloat.com/submit.php?url=<{$xoops_url}>&title=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_DESIGNFLOAT}>"> </a></li>
    <
li rel="external" class="facebook"><a href="http://www.facebook.com/share.php?u=<{$xoops_url}>&t=<{$xoops_pagetitle}>" title="<{$smarty.const.THEME_BK_FACEBOOK}>"> </a></li>
</
ul>
</
div>


- à la suite du fichier .css de ton thème , style.css habituellement
/* ------------ Socialbookmark ------------ */
#xo-socialbookmark{
    
display:                     block;
    
float:                         left;
    
width:                         75%;
    
margin-left:                180px;
    
text-align:                    center !important;
}
ul.xo-socials {}
ul.xo-socials li {
    
display:                    inline-block;
    
height:                        29px;
    
width:                        50px;
    
margin:                        0 2px 0 0;
    list-
style-type:            none;
    
cursor:                        pointer;
}
ul.xo-socials a {
    
display:                    block;
    
width:                        50px;
    
height:                        29px;
    
font-size:                    0;
    
color:                        transparent;
}
.
furl, .furl:hover, .digg, .digg:hover, .reddit, .reddit:hover, .stumble, .stumble:hover, .delicious, .delicious:hover, .yahoo, .yahoo:hover, .blinklist, .blinklist:hover, .technorati, .technorati:hover, .facebook, .facebook:hover, .twitter, .twitter:hover, .myspace, .myspace:hover, .mixx, .mixx:hover, .script-style, .script-style:hover, .designfloat, .designfloat:hover, .rss, .rss:hover  {background:url("../img/socialbookmark.png"no-repeat;}
.
furl {    background-position:-300px top;}
.
furl:hover {background-position:-300px bottom;}
.
digg {    background-position:-500px top;}
.
digg:hover {background-position:-500px bottom;}
.
reddit {background-position:-100px top;}
.
reddit:hover {    background-position:-100px bottom;}
.
stumble {    background-position:-50px top;}
.
stumble:hover {    background-position:-50px bottom;}
.
delicious {    background-position:left top;}
.
delicious:hover {    background-position:left bottom;}
.
yahoo {    background-position:-650px top;}
.
yahoo:hover {    background-position:-650px bottom;}
.
blinklist {    background-position:-600px top;}
.
blinklist:hover {    background-position:-600px bottom;}
.
technorati {    background-position:-700px top;}
.
technorati:hover {    background-position:-700px bottom;}
.
myspace {    background-position:-200px top;}
.
myspace:hover {    background-position:-200px bottom;}
.
twitter {    background-position:-350px top;}
.
twitter:hover {    background-position:-350px bottom;}
.
facebook {    background-position:-450px top;}
.
facebook:hover {    background-position:-450px bottom;}
.
mixx {    background-position:-250px top;}
.
mixx:hover {    background-position:-250px bottom;}
.
rss {    background-position:-150px top;}
.
rss:hover {    background-position:-150px bottom;}
.
script-style {    background-position:-400px top;}
.
script-style:hover background-position:-400px bottom;}
.
designfloat background-position:-550px top;}
.
designfloat:hover {    background-position:-550px bottom;}


- dans le code du css si le chemin vers l'image n'est pas le bon tu le modifies
background:url("../img/socialbookmark.png")


- image "socialbookmark.png" à placer dans ton répertoire d'images du thème (img ou autres)
Open in new window



Posté le : 28/10/2010 15:13

PS : Toujours faire une sauvegarde des fichiers avant de les modifier !
-------------------------------------------
http://www.aideordi.com
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Régulier
Inscrit: 12/01/2005 21:04
Messages: 296
Bonjour Nikita,

Je te remercie pour ton aide.

J'ai suivi tes instructions à la lettre.

Cela dysfonctionne ...

Voici ce que j'obtiens :
Open in new window


Si je rajoute aussi le morceau de code dans le fichier styleNN.css, j'obtiens ceci :
Open in new window

Qu'en penses-tu ?

A bientôt.

Posté le : 28/10/2010 16:21
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Semi pro
Inscrit: 10/11/2004 13:40
Messages: 1659
tu as bien mis ton code dans style.css ? et vide aussi les caches au cas où
si ça ne marche pas tu peux me filer un lien vers le téléchargement de ton thème , j'essaierais en local

Posté le : 28/10/2010 16:58

PS : Toujours faire une sauvegarde des fichiers avant de les modifier !
-------------------------------------------
http://www.aideordi.com
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Régulier
Inscrit: 12/01/2005 21:04
Messages: 296
Bonsoir Nikita,

Les caches sont vidés et j'ai bien intégré le code dans le fichier style.css.

Voici le lien pour télécharger ce thème et le tester en local : http://www.humyo.fr/FHPwCvz/Mes%20documents/xoops/?a=8HZM0A4fmDk

Merci de ton soutien !

Posté le : 28/10/2010 18:45
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Semi pro
Inscrit: 10/11/2004 13:40
Messages: 1659
bonsoir,

dans ton styleNN.css , si tu rajoutes aussi
/* ------------ Socialbookmark ------------ */
#xo-socialbookmark{
    
display:                     block;
    
float:                         left;
    
width:                         75%;
    
margin-left:                180px;
    
text-align:                    center !important;
}
ul.xo-socials {}
ul.xo-socials li {
    
display:                    inline-block;
    
height:                        29px;
    
width:                        50px;
    
margin:                        0 2px 0 0;
    list-
style-type:            none;
    
cursor:                        pointer;
}
ul.xo-socials a {
    
display:                    block;
    
width:                        50px;
    
height:                        29px;
    
font-size:                    0;
    
color:                        transparent;
}
.
furl, .furl:hover, .digg, .digg:hover, .reddit, .reddit:hover, .stumble, .stumble:hover, .delicious, .delicious:hover, .yahoo, .yahoo:hover, .blinklist, .blinklist:hover, .technorati, .technorati:hover, .facebook, .facebook:hover, .twitter, .twitter:hover, .myspace, .myspace:hover, .mixx, .mixx:hover, .script-style, .script-style:hover, .designfloat, .designfloat:hover, .rss, .rss:hover  {background:url("images/socialbookmark.png"no-repeat;}
.
furl {    background-position:-300px top;}
.
furl:hover {background-position:-300px bottom;}
.
digg {    background-position:-500px top;}
.
digg:hover {background-position:-500px bottom;}
.
reddit {background-position:-100px top;}
.
reddit:hover {    background-position:-100px bottom;}
.
stumble {    background-position:-50px top;}
.
stumble:hover {    background-position:-50px bottom;}
.
delicious {    background-position:left top;}
.
delicious:hover {    background-position:left bottom;}
.
yahoo {    background-position:-650px top;}
.
yahoo:hover {    background-position:-650px bottom;}
.
blinklist {    background-position:-600px top;}
.
blinklist:hover {    background-position:-600px bottom;}
.
technorati {    background-position:-700px top;}
.
technorati:hover {    background-position:-700px bottom;}
.
myspace {    background-position:-200px top;}
.
myspace:hover {    background-position:-200px bottom;}
.
twitter {    background-position:-350px top;}
.
twitter:hover {    background-position:-350px bottom;}
.
facebook {    background-position:-450px top;}
.
facebook:hover {    background-position:-450px bottom;}
.
mixx {    background-position:-250px top;}
.
mixx:hover {    background-position:-250px bottom;}
.
rss {    background-position:-150px top;}
.
rss:hover {    background-position:-150px bottom;}
.
script-style {    background-position:-400px top;}
.
script-style:hover background-position:-400px bottom;}
.
designfloat background-position:-550px top;}
.
designfloat:hover {    background-position:-550px bottom;}


pour le chemin de l'image
{background:url("images/socialbookmark.png"no-repeat;}


c'est mieux ?

un spécialiste des css a surement son aide, un éclaircissement ou une correction à apporter


Merci

Posté le : 28/10/2010 23:09

PS : Toujours faire une sauvegarde des fichiers avant de les modifier !
-------------------------------------------
http://www.aideordi.com
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Supporter Xoops
Inscrit: 17/12/2005 01:41
De Alpes Maritimes
Messages: 1682
je regarderai ce week end si tu veux

Posté le : 29/10/2010 00:27
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Régulier
Inscrit: 12/01/2005 21:04
Messages: 296
Bonjour,

Je vous remercie de votre aide.

Mon problème est résolu grâce à vous !

La barre est visible.

J'espère ne pas abuser de votre patience en vous demandant comment faire pour que cette barre soit centrée ?

Je me suis rendu compte qu'en fonction du navigateur et de la résolution choisie le résultat est différent. (IE, FF, Chrome ...)

A voir ici : http://edeps51.org


Merci de votre aide.


Cordialement.


Posté le : 29/10/2010 12:25
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Semi pro
Inscrit: 08/06/2005 17:15
De Where ?
Messages: 513

Posté le : 29/10/2010 14:20
Partager Twitter Partagez cette article sur GG+
Re: Est-il possible d'intégrer une "Socialbookmark bar" dans mon vieux thème ?
Régulier
Inscrit: 12/01/2005 21:04
Messages: 296
Merci à tous !

C'est vrai que le tutoriel vidéo est très explicite !
Bravo Kris.

J'ai tenu compte des conseils avisés de Nikita et pris dans la vidéo ce qui m'intéressait.
En effet, l'architecture de mon thème est préhistorique ...

Grâce à vos lumières, mon problème est résolu.

Mille mercis pour votre pédagogie ! votre réactivité !

Cordialement.

Posté le : 29/10/2010 15:48
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

127 Personne(s) en ligne (96 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 127 | Plus ...