Ici nous ne modifions que des images, c'est un de?but de personnalisation. En fait, pour modifier du texte et autres, ce n'est pas plus complique?. Vous avez par de?faut a? chaque fois un fichier html, un fichier css et un fichier js du widget concerne? ou? vous pouvez aise?ment tout faire.
Rappel : Les widgets sont stocke?s par de?faut dans le re?pertoire devwidgets de 3akai_ux.
Nous allons modifier trois parties : la barre de navigation, le bandeau juste en dessous et l'image
dans l'encadre? principal. Mine de rien, nous allons toucher trois widgets !
Barre supe?rieure de navigation
Pour placer le logo de l'universite? sur la barre du haut, il faut modifier le widget intitule? topnavigation.
Commencez par envoyer votre image dans topnavigation/images. Nous l'avons appele? topnav_logo.png et nous lui avons affecte?s les dimensions de 101×36 pixels.
Editez le fichier topnavigation.html
@@ -1,6 +1,9 @@
<link rel="stylesheet" type="text/css"
href="http://www.univ-valenciennes.fr/devwidgets/topnavigation/css/topnavigat
ion.css"/>
<div id="topnavigation_container">
+ <div id="topnavigation_logo">
+ <a href="http://www.univ-valenciennes.fr/" target="_blank"><img
src="/devwidgets/topnavigation/images/topnav_logo.png" alt="UVHC" /></a>
+ </div>
<a class="s3d-jump-link s3d-bold s3d-aural-text"
href="#topnavigation_target" title="_MSGSKIP_TOP_MENU_"
accesskey="_MSGSKIP_TOP_MENU_KEY_"
id="topnavigation_skip">_MSGSKIP_TOP_MENU_</a>
<a class="s3d-jump-link s3d-bold s3d-aural-text"
href="#lhnavigation_target" title="_MSGSKIP_TO_LH_MENU_"
accesskey="_MSGSKIP_TO_LH_MENU_KEY_" id="lhnavigation_skip"
style="display:none">_MSGSKIP_TO_LH_MENU_</a>
<div id="topnavigation_scroll_to_top_container">
Editez la feuille de style dans css/topnavigation.css
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations under the License. \*/
\#topnavigation_container {width:960px; margin-left:auto; margin-right:auto;}
\+#topnavigation_logo {width:101px; margin:2px 8px 0; float:left;}
/* NAVIGATION */
.topnavigation_explore {margin: 0 0 0 6px;}
Lors des tests, si le logo apparai?t mais que le reste de la barre ne se cale pas a? co?te? du logo, c'est le cache qui vous joue un mauvais tour.
Si besoin, tapez le fichier css a? partir de votre navigateur pour ensuite forcer la mise a? jour !
Bandeau
Cette fois, le widget s'appelle institutionalskinning
Nous allons remplacer l'image, donc envoyez d'abord votre nouvelle image dans institutionalskinning/images. Nous l'avons appele? banner.jpg et elle est de 960×91 pixels (taille par de?faut).
Le fichier a? modifier pour prendre en compte la nouvelle image est
institutionalskinning/css/institutionalskinning.css
@@ -15,4 +15,4 @@
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License. */
-.institutionalskinning_widget #institutionalskinning_logo
{width:100%;height:91px;background:url('/devwidgets/institutionalskinning/ima
ges/sakai_default.png') no-repeat top left #fff;}
\ No newline at end of file
+.institutionalskinning_widget #institutionalskinning_logo
{width:100%;height:91px;background:url('/devwidgets/institutionalskinning/ima
ges/banner.jpg') no-repeat top left #fff;}
\ No newline at end of file
Image de l'encadre? principal
Le widget concerne? s'appelle welcome. Ce sera sans doute le widget que vous voudriez le plus modifier.
Pour le moment, nous ne modifions que l'image pour que ce soit plus personnalise?.
Nous envoyons notre fichier appele? welcome.jpg dans le re?pertoire images de welcome. Pas vraiment de contraintes sur la taille, vous e?tes carre?ment libre.
Modifier le fichier welcome.html @@ -7,7 +7,7 @@