Tocant la plantilla ja

Com modificar la plantilla ja-purity / How to modify the ja-purity template
per/by Marcel SKOUMAL, marcelskoumal@gmail.com
Menu de barra horitzontal amb opció de persiana. Controlat per l’arxiu ja-sosdmenu.css
Horizontal navigation bar with drop-down option. Controlled by the ja-sosdmenu.css file

En aquesta presentació mostro la relació entre el codi a l’arxiu ja-sosdmenu.css i els canvis al disseny d’aquesta barra horitzontal.
In this presentation I show the relationship between the code in the ja-sosdmenu.css file and the changes in the design of this horizontal bar.

-1

#ja-mainnavwrap { #ja-mainnavwrap {
border-top: 1px solid #666666; border-top: 1px solid #0000FF;
background: #444444; background: #444444;
Linieta superior a la hornav canvia a color blau (#0000FF).
Upper ribbon is changed to blue colour (#0000FF).
0

#ja-mainnavwrap { #ja-mainnavwrap {
border-top: 1px solid #666666; border-top: 1px solid #666666;
background: #444444; background: #0000FF;
Zona de “fons” de la barra horitzontal del hornav.
“Background” zone of the hornbar changes to blue.

1

/* -------- Top level -------- */ /* -------- Top level -------- */
#ja-mainnav > ul { #ja-mainnav > ul {
background-color: #444444; background-color: #0000FF;
padding-left: 20px; padding-left: 20px;
Color d’estat passiu de botons passa de gris (#444444) a blau (#0000FF).
Passive state button colour from grey (#444444) to blue (#0000FF).
2

#ja-mainnav > ul > li { #ja-mainnav > ul > li {
border-left: 1px solid #666666; border-left: 1px solid #666666;
border-right: 1px solid #333333; border-right: 1px solid #333333;
margin-right: 1px; margin-right: 1px;
} }
En principi no hi observo pas cap canvi.
No changes observed.
3

background-color: #444444; background-color: #444444;
border-left: 1px solid #666666; border-left: 1px solid #0000FF;
} }

Els marges esquerres dels botons de 1r grau queden blaus.
Left margines of 1st grade buttons become blue.
4

background-color: #444444; background-color: #444444;
border-right: 1px solid #333333; border-right: 1px solid #0000FF;
} }
Els marges drets dels botons de 1r grau queden blaus.
Right margin 1st grade buttons become blue.
5

#ja-mainnav > ul > li.active { #ja-mainnav > ul > li.active {
background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom
bottom center #444444; center #0000FF;
color: #CCCCCC; color: #CCCCCC;
} }
No observo canvis.
No changes observed.
6

#ja-mainnav > ul > li.active { #ja-mainnav > ul > li.active {
bottom center #444444; center #444444;
color: #CCCCCC; color: #0000FF;
} }
No observo canvis
No changes observed
7

#ja-mainnav > ul > li:hover, #ja-mainnav > ul > li:hover,
#ja-mainnav > ul > li:active, #ja-mainnav > ul > li:active,
#ja-mainnav > ul > li:focus { #ja-mainnav > ul > li:focus {
color: #FFFFFF; color: #FFFFFF;
} }
No observo canvis
No changes observed
8

#ja-mainnav > ul > li:hover, #ja-mainnav > ul > li:hover,
#ja-mainnav > ul > li:active, #ja-mainnav > ul > li:active,
#ja-mainnav > ul > li:focus { #ja-mainnav > ul > li:focus {
color: #FFFFFF; color: #0000FF;
} }
No observo canvis
No changes observed
xx

ja-mainnav ul.menu { ja-mainnav ul.menu {
margin: 0; /* all lists */ margin: 0; /* all lists */
padding: 0; padding: 0;

float: left; float: left;
} }
Franja entre marge dret i marge esquerre de botó següent tenyida de blau
Ribbon between right and following left margin dyed blue
9

/* -------- sub-levels -------- */ /* -------- sub-levels -------- */
#ja-mainnav ul ul li { #ja-mainnav ul ul li {
border-bottom: 1px solid #333333; border-bottom: 1px solid #333333;
margin-bottom: 1px; margin-bottom: 1px;
} }
Apareix una voreta en blau a l’esquerra dels subbotons

10

} }
No observo canvis
No changes observed

11

} }
No observo canvis
No changes observed
12

border-bottom: 1px solid #333333; border-bottom: 1px solid #0000FF;
} }
No observo canvis
No changes observed
13

#ja-mainnav li ul { /* second-level lists */ #ja-mainnav li ul { /* second-level lists */
} }

No observo canvis
No changes observed
14

#ja-mainnav li a { #ja-mainnav li a {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
} }
No observo canvis
No changes observed
15

#ja-mainnav ul ul li:hover, #ja-mainnav ul ul li:hover,
#ja-mainnav ul ul li:active, #ja-mainnav ul ul li:active,
#ja-mainnav ul ul li:focus { #ja-mainnav ul ul li:focus {
} }
No observo canvis
No changes observed
16

#ja-mainnav ul ul li:hover, #ja-mainnav ul ul li:hover,
#ja-mainnav ul ul li:active, #ja-mainnav ul ul li:active,
#ja-mainnav ul ul li:focus { #ja-mainnav ul ul li:focus {
} }

No observo canvis
No changes observed
17

ja-mainnav ul.menu { ja-mainnav ul.menu {
margin: 0; /* all lists */ margin: 0; /* all lists */
padding: 0; padding: 0;
float: left; float: left;
} }
Frangeta entre els marge dret i marge esquerre de botó següent
tenyit a blau (REPETIT!!!)
18

/* STYLING THE MENU /* STYLING THE MENU
-----------------------------------*/ -----------------------------------*/
/* 1st level */ /* 1st level */
#ja-mainnav ul.menu li a { #ja-mainnav ul.menu li a {
margin: 0; margin: 0;
padding: 10px 20px; padding: 10px 20px;
Tots els marges esquerres dels botons passats a blau
All button left margins become blue
19

display: block; display: block;

Marges drets de 1r nivell a blau
1st level right margins to blue
20

Aquest paràmetre marca el color del text en estat passiu. L’he passat de blanc
(#CCCCCC) a blau (#0000FF).
This parameter controls the passive state text colour. I have changed it from white
(#CCCCCC) to blue (#0000FF).
21

#ja-mainnav ul.menu li a:hover, #ja-mainnav ul.menu li a:hover,
#ja-mainnav ul.menu li a:active, #ja-mainnav ul.menu li a:active,
#ja-mainnav ul.menu li a:focus { #ja-mainnav ul.menu li a:focus {
} }
Paràmetre que controla el color del botó seleccionat (desplegat o no). Només els
1aris.
Parameter controlling colour of 1ary selected button (expanded or not).
22

#ja-mainnav ul.menu li a:hover, #ja-mainnav ul.menu li a:hover,
#ja-mainnav ul.menu li a:active, #ja-mainnav ul.menu li a:active,
#ja-mainnav ul.menu li a:focus { #ja-mainnav ul.menu li a:focus {
} }
Paràmetre que controla el color del text del botó seleccionat (desplegat o no).
Parameter controlling colour of selected button (expanded or not) text.
23

#ja-mainnav ul.menu li:hover, #ja-mainnav ul.menu li:hover,
#ja-mainnav ul.menu li.sfhover, #ja-mainnav ul.menu li.sfhover,
#ja-mainnav ul.menu li.parentsfhover, #ja-mainnav ul.menu li.parentsfhover,
#ja-mainnav ul.menu li.parent-activesfhover { #ja-mainnav ul.menu li.parent-activesfhover {
} }
Paràmetre que controla el color del botó superior un cop
desplegat quan el ratolí es troba dins d’un dels seus
subbotons. Passat de gris 555555 a blau 0000FF.
24

#ja-mainnav ul.menu li:hover, #ja-mainnav ul.menu li:hover,
#ja-mainnav ul.menu li.sfhover, #ja-mainnav ul.menu li.sfhover,
#ja-mainnav ul.menu li.parentsfhover, #ja-mainnav ul.menu li.parentsfhover,
#ja-mainnav ul.menu li.parent-activesfhover { #ja-mainnav ul.menu li.parent-activesfhover {
} }

No differences observed.

25

#ja-mainnav ul.menu li.active a, #ja-mainnav ul.menu li.active a,
#ja-mainnav ul.menu li.active a:hover, #ja-mainnav ul.menu li.active a:hover,
#ja-mainnav ul.menu li.active a:active, #ja-mainnav ul.menu li.active a:active,
#ja-mainnav ul.menu li.active a:focus { #ja-mainnav ul.menu li.active a:focus {
} }
Paràmetre que regeix el color de botons primaris seleccionats, que no tenen
subbotons.
Parameter controlling the colour of selected primary buttons.
26

#ja-mainnav ul.menu li.active a, #ja-mainnav ul.menu li.active a,
#ja-mainnav ul.menu li.active a:hover, #ja-mainnav ul.menu li.active a:hover,
#ja-mainnav ul.menu li.active a:active, #ja-mainnav ul.menu li.active a:active,
#ja-mainnav ul.menu li.active a:focus { #ja-mainnav ul.menu li.active a:focus {
} }
Paràmetre que regeix el color de la lletra de botons primaris seleccionats, que no
tenen subbotons.
Parameter controlling the text colour of 1ary selected buttons.

27

/* 2nd level and above */ /* 2nd level and above */
#ja-mainnav ul.menu li ul { #ja-mainnav ul.menu li ul {
border: 1px solid #555555; border: 1px solid #0000FF;
background: url(../images/opaque.png); background: url(../images/opaque.png);
Apareix un rivet blau (#0000FF) al voltant de tots els submenus implicats en passar-hi
el ratolí per sobre.
A blue (#0000FF) ribbon around all involved hovered submenus appears.
28

#ja-mainnav ul.menu li ul li { #ja-mainnav ul.menu li ul li {
background: none; background: none;
} }
Paràmetre que controla el color de la linieta superior dels subbotons implicats en
passar-hi el ratolí per sobre.
Parameter that controls the colour of the upper line of subbuttons involved in a
hovering.

29

#ja-mainnav ul.menu li ul li { #ja-mainnav ul.menu li ul li {
border-bottom: 1px solid #444444; border-bottom: 1px solid #0000FF;
} }
Paràmetre que regula el color de la linieta inferior dels subbotons implicats en passar
el ratolí per sobre.
Parameter that controls the colour of the lower line of subbuttons involved in a
hovering.
30

#ja-mainnav ul.menu li ul a { #ja-mainnav ul.menu li ul a {
border-right: none; border-right: none;
margin: 0; margin: 0;
padding: 7px 10px; padding: 7px 10px;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
text-transform: none; text-transform: none;
} }

Paràmetre que controla el color de text dels subbotons pares que es mantenen
oberts en passar el ratolí per sobre d’un botó fill seu. No afecta el botó sobre el qual
passa el ratolí.
Parameter that controls the font colour of subbutons in dropdown menu kept open,
but not being directly hovered.
31

color: #CCCCCC; color: #CCCCCC;
Paràmetre que controla el color de subbotons sota el pas del ratolí. També afecta els
seus botons pare, excepte els botons primaris.
Parameter that controls the colour of hover-active subbutons (and the butons they
come from, except the primary buttons).
32

Paràmetre que controla el color del text de subbotons quan el ratolí hi passa per
sobre.
Parameter that controls the test colour of hover-active subbutons.

33

#ja-mainnav ul.menu ul li.active a, #ja-mainnav ul.menu ul li.active a,
#ja-mainnav ul.menu ul li.active a:hover, #ja-mainnav ul.menu ul li.active a:hover,
#ja-mainnav ul.menu ul li.active a:active, #ja-mainnav ul.menu ul li.active a:active,
#ja-mainnav ul.menu ul li.active a:focus { #ja-mainnav ul.menu ul li.active a:focus {
background: none !important; background: none !important;
font-weight: bold; font-weight: bold;
} }
No s’observa cap canvi
No changes observed

Tocant la plantilla ja

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Tocant la plantilla ja