comment modifie le style d un skin jalbum

Transcription

Comment j’ai modifié le style d’un skin BluPlusPlus dans
Jalbum .
1/ Les cadres
Je voulais que mes photos apparaissent tel quel, dans mes albums , sans encadrement !
Sauf que … Le skin BluPlusPlus (BPP) ne propose pas cette option. L’affichage se fait
toujours avec des bordures, des ombres, des cadres de couleur …..
Il m’a donc fallu créer un « frame » que j’ai nommé : black_fefe.xbp
# Name: frame_fefe.xbp
# Version: 1.0.1
#------------------------------------------------------------------filter1.class=XBorderFilter
filter1.frWidth=12
filter1.frCol=black
filter1.bgOffX=100
filter1.bgCol=$styleBackgroundColor
filter1.bgFile=$styleBackgroundFile
Pour créer ce frame, j’ai créé un fichier frame_fefe.xbp avec le bloc notes.
J’y ai collé le code ci-dessus, et enregistré dans C> Program Files> JalbumWin> skins>
BluPlusPlus> frames.
Pour plus de simplicité, il est tout à fait possible de modifier une copie d’un frame existant, j’ai bien dit :
une copie.
Une fois cela fait, vous n’aurez plus qu’à sélectionner votre frame dans Jalbum, comme cela :
2/ Les styles :
Des styles proposés dans le skin BPP, celui qui me convenait le plus, c’était le black. Mais
voilà … la topbar était bleue, et je l’aurais voulu noire.
Et la bottom bar (le body) était grise, alors que je l’aurrais préféré noire, aussi.
Tout ceci, dans l’unique but d’intégrer au mieux mes albums Jalbum sur la page de mon site.
Pour que nous parlions de la même chose, voici comment sont nommées les différentes
parties d’un album :
Le détail des fichiers .css :
Annotated Original CSS file for Arcs.css
/* Combined style sheet for the index pages and the slide pages. */
/* Style for all bodies and to control the margin on top. */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 16px;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #F0F0F0;
}
The ‘body’ selector controls the font-face and font-size for all text not governed by some other css. The
background color specified here appears in the footer section below the image section. The margin
properties prevent any offset from the edge of the html page.
html {
SCROLLBAR-FACE-COLOR: #ACC2E3;
SCROLLBAR-HIGHLIGHT-COLOR: #F7F7F7;
SCROLLBAR-SHADOW-COLOR: #F7F7F7;
SCROLLBAR-3DLIGHT-COLOR: #ACC2E3;
SCROLLBAR-ARROW-COLOR:#F7F7F7;
SCROLLBAR-TRACK-COLOR:#F7F7F7;
SCROLLBAR-DARKSHADOW-COLOR: #ACC2E3;
SCROLLBAR-BASE-COLOR: #F7F7F7;
overflow-x: auto;
}
The ‘html’ selector permits the scrollbar properties to be altered. Note that customizing scrollbasrs only
works in IE on a PC. The ‘overflow’ parameters solve the vertical and horizontal scrollbar bugs in IE 6+.
/* Style for the Top bar */
.topbar {
background-color: #6595D6;
background-image: url(../topbars/blue/classic.gif);
background-repeat: repeat-x;
height: 25px;
}
The ‘topbar’ selector creates the blue bar at the top of all BPP pages. By changing the image ‘topbar.gif’
one can change the look of this bar. The height property can be changed to alter the vertical size of the
bar. The background-color property is not strictly needed; it is there so that on slow internet
connections a blue bar will appear immediately rather than being delayed until the image ‘topbar.gif’
finishes loading. If one changes the color scheme for ‘topbar.gif’, it might be wise to redefine the
background-color property to match.
/* Style for the Top ruler */
.topruler {
background-image: url(arcs/rule.gif);
background-position: center;
background-repeat: no-repeat;
height: 10px;
}
The ‘topruler’ selector creates the ruler above the thumbnails on the index page or above the slide
image on the slide page. Not all styles have this optional ruler. By changing the image ‘rule.gif’ one can
change the look of the ruler.
/* Style for the Bottom bar */
.bottomruler {
/*background-image: url(arcs/rule.gif);
background-position: center;
background-repeat: no-repeat;
height:10px;*/
height: 0px;
}
The ‘bottomruler’ selector is commented out and therefore has no effect. If a bottom ruler is desired,
remove the ‘/*’ and ‘*/’ that surrounds the css. The bottom ruler is identical to the top ruler and
appears below the thumbnail or slide images to separate them from the comments and footers. Note: in
the annotated slide image page the bottomruler appears for illustrative purposes.
/* Style for the Image/Folder Path Information */
.bpppath {
font-size: 12px;
font-weight: bold;
color: #FAFAFA;
}
The ‘bpppath’ selector controls the non-link text (just the >> symbol) in the topbar (See the a:path
selectors for information on styling the links.)
/* Style for the Image/Folder Index Information */
.bppindex {
color: #FAFAFA;
}
The ‘bppindex’ selector controls the text for the image title and the image count.
/* Style for the Header */
.bppheader {
color: #000000;
}
The ‘bppheader’ selector controls the appearance of any included header.
/* Style for the Footer */
.bppfooter {
color: #000000;
font-size: 10px;
}
The ‘bppfooter’ selector controls the appearance of any included footer.
/* Style for the Page Bottom Shadow */
.shadow {
}
The ‘shadow’ selector controls whether the shadow separating the index and slide page footers from the
rest of the page is displayed. Add ‘visibility:hidden;’ to omit the shadow.
/* Style for the page body */
.index-pagebody, .slide-pagebody, .original-slide-pagebody {
background-image: url(arcs/background.jpg);
padding: 10px;
}
The three ‘pagebody’ selectors control the appearance of most of the slide or index pages. Some styles
specify a background color here; others specify a background image. To specify a background color,
change background-image:url(arcs/background.jpg); to background-color: #xxyyzz; where #xxyyzz is
the desired background color.
/* Style for the Image Comment */
.comment {
color: #000000;
font-size: 10px;
}
The ‘comment’ selector controls the appearance of any user-provided comments.
/* Style for the Image comment header */
.commentheader {
vertical-align: top;
font-weight: bold;
color: black;
margin-right: 10px;
}
The ‘commentheader’ selector controls the appearance of the prefix to user-provided comments
(“Comments:” in English).
/* Style for any note/comment */
.note {
color: #000000;
font-size: 10px;
}
The ‘note’ selector controls the appearance of a the image title, size, and date below slide images.
/* Style for help-tips statusbar */
.statusbar1, .statusbar2 {
color: #000000;
font-size: 10px;
text-align: center;
margin-top: 10px;
}
The ‘statusbar’ selectors control the appearance of a the statusbar that appears below the navigation
icons.
/* Style for photographic meta information */
.photometainfo {
position:absolute;
left:75px;
top:100px;
z-index:1;
background-color: #FFFFCC;
layer-background-color: #FFFFFF;
color: #999999;
visibility: hidden;
border: 1px dashed #000000;
padding: 5px 5px 5px 5px;
}
The ‘photometainfo’ selector controls the appearance of the box that appears when the ‘show metadata
info’ icon is clicked. The position, z-index, and visibility parameters should not be changed unless one is
very familiar with CSS; the other parameters can be changed to alter the appearance and location of
the metadata info box.
.metainfo-header {
font-weight: bold;
}
.metainfo-name {
}
.metainfo-value {
font-style: italic;
}
The ‘metainfo-header’ selector controls the style of the headers, that is, text preceded by <title>. The
‘metainfo-name’ selector controls the style of the metadata field names. The ‘metainfo-value’ selector
controls the style of the metadata field contents.
/* Style for help tips */
.help {
position: absolute;
right: 40px;
top: 80px;
z-index: 1;
background-color: #FFFFCC;
layer-background-color: #FFFFFF;
color: #999999;
visibility: hidden;
border: 1px dashed #000000;
}
The ‘help’ selector controls the appearance of the box that appears when the ‘Navigation tips’ icon is
clicked. The position, z-index, and visibility parameters should not be changed unless one is very
familiar with CSS; the other parameters can be changed to alter the appearance and location of the
Navigation tips info box.
.small {
font-size: 9px;
}
The ‘small’ selector controls the appearance of the optional drop-down menu (at the right of the top
blue bar, used to rapidly switch to another page). This menu only appears if the
‘includeJumpToPageAction’ user-variable is set to true.
/* Style for server side error messages */
.errorbox {
background-color: #fcc;
border: 1px solid #c00;
padding: 5px;
margin: 10px 0px 10px 0px;
}
The ‘errorbox’ selector controls the appearance of the box in which error messages appear on slide
image pages when there is an error with Viewer Remarks.
.errormessage {
color: #c00;
}
The ‘errormessage’ selector controls the text color of Viewer Remarks error messages.
/* Style for remarks*/
.remarksheader {
font-size: 14px;
font-weight: bold;
font-family: Arial, sans-serif;
color: #003366;
border-bottom: 1px solid #3c78b5;
}
The ‘remarksheader’ selector controls the appearance of the remarks header text (“N Viewer Remarks
[Hide/Show]”).
.remarksbody {
width: 80%;
visibility: hidden;
display: none;
}
The ‘remarksbody’ selector forces the entire viewer remarks section to be invisible by default.
.remarksinput {
border: 1px solid #ddd;
padding: 10px;
background: #f0f0f0;
width: 70%;
}
The ‘remarksinput’ selector forces the entire viewer remarks section to be invisible by default.
.remarksadmin {
border: 1px dashed #3c78b5;
padding: 10px;
background: #f0f0f0;
}
The ‘remarksadmin’ selector controls the appearance of the admin mode box.
.remarksadminheader {
font-weight: bold;
vertical-align: super;
}
The ‘remarksadminheader’ selector controls the appearance of the ‘Administration Console’ text.
.remarkbox {
border: 1px #bbb solid;
}
The ‘remarkbox’ selector controls the appearance of the box that displays the viewer remarks.
.remarkblock {
color: #000000;
}
The ‘remarkblock’ selector controls the appearance of the the viewer remarks text.
.remarksource {
font-size: 9px;
color: #666666;
width: 98%;
}
The ‘remarksource’ selector controls the appearance of the ‘Posted by:’ text.
.remarkstatusbox {
border: 1px dashed red;
background-color: #f0f0f0;
font-size: 11px;
font-style: italic;
}
The ‘remarkstatusbox’ selector controls the styling of status messages (such as informing the user that
a remark has been deleted in admin mode).
/* Custom link styles */
a:active {
text-decoration: none;
color: #000000;
}
a:visited {
color: #000000;
}
a:link {
color: #000000;
}
The ‘a:’ selectors above control the appearance of the hyperlinks used on the page (except for the
hyperlinks with the ‘gray’ or ‘note’ or ‘path’ classes assigned to them).
a.note:active {
color: #000000;
}
a.note:visited {
color: #000000;
}
a.note:link {
color: #000000;
}
The ‘a:note’ selectors above control the appearance of the hyperlinks used within a section with the
‘note’ class (see explanation of ‘note’ selector above). For example, the titles below folders and
thumbnails on index pages are links controlled by this selector.
a.path:active {
font-size: 12px;
font-weight: bold;
color: #FAFAFA;
}
a.path:visited {
font-size: 12px;
font-weight: bold;
color: #FAFAFA;
}
a.path:link {
font-size: 12px;
font-weight: bold;
color: #FAFAFA;
}
The ‘a:path’ selector controls the appearance of the text in the optional drop-down menu at the right of
the top blue bar.
a:hover {
color: red;
}
a.note:hover {
color: red;
}
a.path:hover {
text-decoration: underline;
font-size: 12px;
font-weight: bold;
color: #FAFAFA;
}
Donc maintenant, entrons dans le vif du sujet….
a : modification de la topbar
Dans C> Program files> JalbumWin> Skins> BluPlusPlus> res> styles
Sélectionner le fichier black.css, et faites en une copie que vous renommerez blackfefe.css .
Ouvrez blackfefe.css avec le bloc notes et changez background-image:
url(../topbars/blue/classic.gif); en background-image: url(../topbars/black/classic.gif);
/* Style for the Top bar */
.topbar {
background-color: #6595D6;
background-image: url(../topbars/black/classic.gif);
background-repeat: repeat-x;
height: 25px;
b : modification de la bottombar
Dans C> Program files> JalbumWin> Skins> BluPlusPlus> res> styles
Ouvrez le fichier blackfefe.css , et changez background-color: #333333; en backgroundcolor: #000000; dans le body
body {
font-size: 11px;
line-height: 16px;
color: #D0D0D0;
margin: 0px;
padding: 0px;
background-color: #000000;
}
N’oubliez pas d’ enregistrer vos modifications.
Pour finir, allez dans > Program files> JalbumWin> Skins> BluPlusPlus> styles et créez-y un
fichier blackfefe.css vide. Par simplicité, vous pouvez faire une copie du fichier blackfefe.css
de > Program files> JalbumWin> Skins> BluPlusPlus> res> styles que vous viderez de son
contenu ……
Voilà, la prochaine fois que vous ouvrirez Jalbum, vous devriez avoir ce choix :
En résumé, voilà où il faut aller déposer tous ces fichiers :
En espérant que ce mini tuto ne vous aura pas refilé la diarrhée ……………

comment modifie le style d un skin jalbum

Transcription

Documents pareils

Max Control ® ASX-8

VW Transporter 3 / Vanagon Gear selector fork

CyberDome®

On-load tap-changers