• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
joomla ja_purity template
 

joomla ja_purity template

on

  • 714 views

 

Statistics

Views

Total Views
714
Views on SlideShare
693
Embed Views
21

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 21

http://www.scienceandtrade.com 20
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    joomla ja_purity template joomla ja_purity template Presentation Transcript

    • Com modificar la plantilla ja-purity / How to modify the ja-purity template per/by Marcel SKOUMAL, marcelskoumal@gmail.comMenu de barra horitzontal amb opció de persiana. Controlat per l’arxiu ja-sosdmenu.cssHorizontal navigation bar with drop-down option. Controlled by the ja-sosdmenu.css fileEn 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 { background-color: #444444; background-color: #0000FF; 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 #ja-mainnav > ul > li { #ja-mainnav > ul > li { background-color: #444444; background-color: #444444; border-left: 1px solid #666666; border-left: 1px solid #0000FF; border-right: 1px solid #333333; border-right: 1px solid #333333; margin-right: 1px; margin-right: 1px; } }
    • Els marges esquerres dels botons de 1r grau queden blaus. Left margines of 1st grade buttons become blue.4 #ja-mainnav > ul > li { #ja-mainnav > ul > li { background-color: #444444; background-color: #444444; border-left: 1px solid #666666; border-left: 1px solid #666666; border-right: 1px solid #333333; border-right: 1px solid #0000FF; margin-right: 1px; margin-right: 1px; } } 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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #444444; center #444444; color: #CCCCCC; color: #0000FF; } } No observo canvis No changes observed7 #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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #555555; center #0000FF; color: #FFFFFF; color: #FFFFFF; } } No observo canvis No changes observed8 #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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #555555; center #555555; color: #FFFFFF; color: #0000FF; } } No observo canvis No changes observedxx ja-mainnav ul.menu { ja-mainnav ul.menu { margin: 0; /* all lists */ margin: 0; /* all lists */ padding: 0; padding: 0;
    • float: left; float: left; border-right: 1px solid #555555; border-right: 1px solid #0000FF; } } Franja entre marge dret i marge esquerre de botó següent tenyida de blau Ribbon between right and following left margin dyed blue9 /* -------- sub-levels -------- */ /* -------- sub-levels -------- */ #ja-mainnav ul ul li { #ja-mainnav ul ul li { border-left: 1px solid #666666; border-left: 1px solid #0000FF; border-right: 1px solid #333333; border-right: 1px solid #333333; border-top: 1px solid #666666; border-top: 1px solid #666666; 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 subbotons10 /* -------- sub-levels -------- */ /* -------- sub-levels -------- */ #ja-mainnav ul ul li { #ja-mainnav ul ul li { border-left: 1px solid #666666; border-left: 1px solid #666666; border-right: 1px solid #333333; border-right: 1px solid #0000FF; border-top: 1px solid #666666; border-top: 1px solid #666666; border-bottom: 1px solid #333333; border-bottom: 1px solid #333333; margin-bottom: 1px; margin-bottom: 1px; } } No observo canvis No changes observed
    • 11 /* -------- sub-levels -------- */ /* -------- sub-levels -------- */ #ja-mainnav ul ul li { #ja-mainnav ul ul li { border-left: 1px solid #666666; border-left: 1px solid #666666; border-right: 1px solid #333333; border-right: 1px solid #333333; border-top: 1px solid #666666; border-top: 1px solid #0000FF; border-bottom: 1px solid #333333; border-bottom: 1px solid #333333; margin-bottom: 1px; margin-bottom: 1px; } } No observo canvis No changes observed12 /* -------- sub-levels -------- */ /* -------- sub-levels -------- */ #ja-mainnav ul ul li { #ja-mainnav ul ul li { border-left: 1px solid #666666; border-left: 1px solid #666666; border-right: 1px solid #333333; border-right: 1px solid #333333; border-top: 1px solid #666666; border-top: 1px solid #666666; border-bottom: 1px solid #333333; border-bottom: 1px solid #0000FF; margin-bottom: 1px; margin-bottom: 1px; } } No observo canvis No changes observed13 #ja-mainnav li ul { /* second-level lists */ #ja-mainnav li ul { /* second-level lists */ background-color: #555555; background-color: #0000FF; } }
    • No observo canvis No changes observed14 #ja-mainnav li a { #ja-mainnav li a { color: #CCCCCC; color: #0000FF; font-weight: bold; font-weight: bold; text-decoration: none; text-decoration: none; } } No observo canvis No changes observed15 #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 { background: #444444; background: #0000FF; color: #FFFFFF; color: #FFFFFF; } } No observo canvis No changes observed16 #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 { background: #444444; background: #444444; color: #FFFFFF; color: #0000FF; } }
    • No observo canvis No changes observed17 ja-mainnav ul.menu { ja-mainnav ul.menu { margin: 0; /* all lists */ margin: 0; /* all lists */ padding: 0; padding: 0; float: left; float: left; border-right: 1px solid #555555; border-right: 1px solid #0000FF; } } 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; border-left: 1px solid #555555; border-left: 1px solid #0000FF; Tots els marges esquerres dels botons passats a blau All button left margins become blue19 border-right: 1px solid #333333; border-right: 1px solid #0000FF; display: block; display: block;
    • Marges drets de 1r nivell a blau 1st level right margins to blue20 color: #CCCCCC; color: #0000FF; 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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #555555; center #0000FF; color: #FFFFFF; color: #FFFFFF; } } 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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #555555; center #555555; color: #FFFFFF; color: #0000FF; } } 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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #555555; center #0000FF; color: #FFFFFF; color: #FFFFFF; } } 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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #555555; center #555555; color: #FFFFFF; color: #0000FF; } }
    • 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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #333333; center #0000FF; color: #FFFFFF; color: #FFFFFF; } } 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 { background: url(../images/arrow2.png) no-repeat background: url(../images/arrow2.png) no-repeat bottom bottom center #333333; center #333333; color: #FFFFFF; color: #0000FF; } } 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 { border-top: 1px solid #777777; border-top: 1px solid #0000FF; border-bottom: 1px solid #444444; border-bottom: 1px solid #444444; 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-top: 1px solid #777777; border-top: 1px solid #777777; border-bottom: 1px solid #444444; border-bottom: 1px solid #0000FF; background: none; background: none; } } 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; background: none; background: none; color: #CCCCCC; color: #0000FF; 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 background: #333333; background: #0000FF; 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 background: #333333; background: #333333; color: #CCCCCC; color: #0000FF; 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; color: #FFFFFF; color: #0000FF; font-weight: bold; font-weight: bold; } } No s’observa cap canvi No changes observed