Joomla!WikiPL

Zanim rozpoczniesz

Licencja GNU GPL pozwala na dowolne modyfikacje skryptów udostępnionych na jej warunkach. Jest tak również w przypadku szablonów. Zanim jednak wprowadzisz jakieś zmiany, rozważ, co się stanie, gdy popełnisz błąd albo gdy w trakcie aktualizacji Joomla! zmodyfikowane przez Ciebie pliki zostaną zastąpione nowszymi wersjami. W pierwszym przypadku będzie Cię to kosztować jedynie trochę dodatkowej pracy - kod szablonu Beez jest w każdej instalacji Joomla!, więc nietrudno będzie odzyskać oryginalną wersję plików. Gorzej w przypadku, gdy stracisz naniesione wcześniej poprawki np. w trakcie aktualizacji Joomla! Dlatego jeśli nawet zdecydujesz się na stosowanie jednego z domyślnych szablonów Joomla!, np. szablonu Beez, skopiuj go do nowego katalogu nazwanego np. mojszablon oraz zmień nazwę szablonu w pliku manifestu XML - templateDetails.xml.

Krok 1

Zapisz następujący kod do pliku moje_lib.js w katalogu javascript swojego szablonu. Jest to kod przeznaczony dla starszych wersji przeglądarki IE, które nie obsługiwały zgodnie ze standardami własności pseudoklasy :hover.

Kod:

1. sfHover = function()

2.     {

3.        var sfEls = document.getElementById("top_menu").getElementsByTagName("LI");

4.        for (var i=0; i<sfEls.length; i++)

5.        {

6.           sfEls[i].onmouseover=function()

7.           {

8.              this.className+=" sfhover";

9.           }

11.           sfEls[i].onmouseout=function()

12.           {

13.              this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

14.           }

15.        }

16.     }

17. if (window.attachEvent) window.attachEvent("onload", sfHover);

Krok 2

Otwórz do edycji plik templates/twoj_szablon/css/position.css i znajdź około wiersza 53 sekcję #header

53. #header

54. {

55.    background: #fff;

56.    color: #000000;

57.    margin: 0;

58.    position: relative;

59.    text-align: right;

60.    border-bottom: solid 4px #ccc; /* ramka ponizej modulow Sciezka powrotu i Szukaj */

61. }

63. border-bottom: solid 0px #ccc;  /* ramka ponizej modulow Sciezka powrotu i Szukaj */

i dodaj poniższy wiersz

61. z-index: 10;

W efekcie ten fragment powinien wyglądać następująco:

53. #header

54. {

55.    background: #fff;

56.    color: #000000;

57.    margin: 0;

58.    position: relative;

59.    text-align: right;

60.    border-bottom: solid 4px #ccc;

61.    z-index: 10;

62. }

Krok 3

Otwórz do edycji plik templates/twoj_szablon/index.php i znajdź około wiersza 32 wiersz

32.    <!--[if lte IE 6]>

33.       <link href="<?php echo $this->baseurl ?>/templates/beez/css/ieonly.css" rel="stylesheet" type="text/css" />

34.    <![endif]-->

Poniżej umieść następujący kod:

32.    <!--[if lte IE 6]>

33.       <link href="<?php echo $this->baseurl ?>/templates/beez/css/ieonly.css" rel="stylesheet" type="text/css" />

34.       <script type="text/javascript" src="templates/<?php echo $this->template; ?>/javascript/moje_lib.js"></script>

35.    <![endif]-->

Następnie znajdź:

69. <jdoc:include type="modules" name="user3" />

i zastąp następującym kodem:

69. <div id="top_menu">

70.    <jdoc:include type="modules" name="user3" style="xhtml" />

71. </div>

Krok 4

Otwórz do edycji plik templates/twoj_szablon/layout.css i dodaj na samym dole wybraną z poniższych wersję stylów

Menu wyrównane do lewej

1. #header #top_menu ul{

2.    margin: -3px 0 0;

3.    padding: 0 0 0 10px;

4.    background-color: #EFDEEA;

5.    height: 2em;

6.    clear: both;

7. }

8. #header #top_menu li {

9.    list-style: none;

10.    float: left;

11.    margin: 0 15px 0 0;

12.    padding: 0;

13.    position: relative;

14. }

15. #header #top_menu a {

16.    float: left;

17.    height: 2em;

18.    line-height: 2em;

19.    text-decoration: none;

20.    color: #000000;

21.    font-weight: bold;

22.    padding: 0 10px;

23.    background-color: #DBB0CD;

24.    white-space: nowrap;

25.    border: 1px solid #3D1E00;

26.    margin: -1px 0 0 0;

27. }

28. #header #top_menu a:hover {

29.    background-color: #000; 

30.    border-color: #EFDEEA;

31.    color: #fff;

32. }

33. #header #top_menu li ul {

34.    position: absolute;

35.    left: -999em;

36.    top: 2em;

37.    width: 9em;

38.    margin: 0;

39.    padding: 0;

40.    background: #3D1E00;

41. }

42. #header #top_menu li ul li {

43.    margin: 0;

44.    width: 100%;

45. }

46. #header #top_menu li ul li a {

47.    float: none;

48.    display: block;

49. }

50. #header #top_menu li ul ul {

51.    top: 0px;

52.    margin-left: 9em;

53. }

54. #header #top_menu li:hover {

55.    z-index: 10;

56. }

57. #header #top_menu li:hover ul ul, #header #top_menu li.sfhover ul ul {

58.    left: -999em;

59. }

60. #header #top_menu li:hover ul, #header #top_menu ul li.sfhover ul,

61. #header #top_menu ul ul li:hover ul, #header #top_menu ul ul li.sfhover ul{

62.    left: 0px;

63.    z-index: 10;

64. }

65. #header #top_menu ul li ul a {

66.    padding:0;

67.    text-align: center;

68. }

69. #header #top_menu ul li ul a:hover {

70.    border-color: #000000;

71. }

Menu wyśrodkowane

1. #header #top_menu {

2.    height: 2.5em;

3.    background-color: #EFDEEA;

4.    margin-top: -3px

5. }

6. #header #top_menu .moduletable {

7.    position: relative;

8.    float: left;

9.    left: 50%;

10. }

11. #header #top_menu ul{

12.    margin: 0 0 0;

13.    padding: 0 0 0 10px;

14.    background-color: #EFDEEA;

15.    height: 2em;

16.    clear: both;

17.    position: relative;

18.    left: -50%;

19. }

20. #header #top_menu li {

21.    list-style: none;

22.    float: left;

23.    margin: 0 15px 0 0;

24.    padding: 0;

25.    position: relative;

26. }

27. #header #top_menu a {

28.    float: left;

29.    height: 2em;

30.    line-height: 2em;

31.    text-decoration: none;

32.    color: #000000;

33.    font-weight: bold;

34.    padding: 0 10px;

35.    background-color: #DBB0CD;

36.    white-space: nowrap;

37.    border: 1px solid #3D1E00;

38.    margin: -1px 0 0 0;

39. }

41. #header #top_menu a:hover {

42.    background-color: #000; 

43.    border-color: #EFDEEA;

44.    color: #fff;

45. }

47. #header #top_menu li ul {

48.    position: absolute;

49.    left: -999em;

50.    top: 2em;

51.    width: 9em;

52.    margin: 0;

53.    padding: 0;

54.    background: #3D1E00;

55. }

56. #header #top_menu li ul li {

57.    margin: 0;

58.    width: 100%;

59. }

60. #header #top_menu li ul li a {

61.    float: none;

62.    display: block;

63. }

64. #header #top_menu li ul ul {

65.    top: 0px;

66.    margin-left: 9em;

67. }

68. #header #top_menu li:hover {

69.    z-index: 10;

70. }

71. #header #top_menu li:hover ul ul, #header #top_menu li.sfhover ul ul {

72.    left: -999em;

73. }

74. #header #top_menu li:hover ul, #header #top_menu ul li.sfhover ul,

75. #header #top_menu ul ul li:hover ul, #header #top_menu ul ul li.sfhover ul{

76.    left: 0px;

77.    z-index: 10;

78. }

79. #header #top_menu ul li ul a {

80.    padding:0;

81.    text-align: center;

82. }

83. #header #top_menu ul li ul a:hover {

84.    border-color: #000000;

85. }

---

Źródło:

• Porada DKY na oficjalnym forum Joomla

Dziękujemy za wkład

» Stefan Wajda [zwiastun],