--=REKLAMA=--

Beez/obszar header logo

Z Joomla!WikiPL

Wprowadzenie

W obszarze nagłówka umieszczono przykładowe logo witryny - trzy pszczółki. W przypadku, gdy przeglądarka nie wyświetla z jakiegoś powodu obrazka, wyświetlany jest tekst alternatywny: Logo Beez, Trzy małe pszczółki. W miejscu obrazka umieszczony jest również tekst nazwy witryny - Dostępny szablon dla Joomla!, ukryty przed internautami, ale odczytywany przez wyszukiwarki internetowe.

Możesz:

  • zamienić obrazek logo na własny
  • zastąpić tekst alternatywny własnym
  • zastąpić tekst nazwy witryny własną

Odwołanie w HTML

Miejsce przechowywania: Główny plik szablonu - index.php

  1. <h1 id="logo">
  2.     <img src="<?php echo $this->baseurl ?>/templates/beez/images/logo.gif" border="0" 
  3.       alt="<?php echo JText::_('Logo Beez, Three little Bees'); ?>" width="300" height="97" />
  4.     <span class="header1"><?php echo JText::_('Joomla Accessible Template'); ?></span>
  5. </h1>

Zamiana obrazka

Zmień ścieżkę

/templates/beez/images/logo.gif

albo wczytaj nowy obrazek "logo.gif" przez swojego klienta ftp.

Zastąpienie tekstu alternatywnego

JText::_('Logo Beez, Three little Bees');

Znajdź w pliku językowym en-GB.tpl_beez.ini deklarację "LOGO BEEZ, THREE LITTLE BEES=Logo Beez, Three little Bees" i zmodyfikuj ją:

/* #### en.GB.tpl_beez.ini line 18 #### */
 
LOGO BEEZ, THREE LITTLE BEES=Twój tekst tutaj!

Zastąpienie tekstu nagłówka

JText::_('Joomla Accessible Template');

Znajdź w pliku językowym en-GB.tpl_beez.ini deklarację "JOOMLA ACCESSIBLE TEMPLATE=Joomla! accessible Template" i zmodyfikuj ją:

/* #### en.GB.tpl_beez.ini line 15 #### */
 
JOOMLA ACCESSIBLE TEMPLATE=Twój tekst tutaj!

Odwołania w CSS

Poniższe klasy i id wpływają na "pojemnik" włączający obraz i tekst. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie napisana przez powyższą klasę.

Podstawowa klasa

Miejsce przechowywania: layout.css

  1. #logo
  2. {
  3.     font-size:1em !important;
  4.     font-weight:bold !important;
  5.     position:relative;
  6.     text-align:left;
  7.     text-transform:none !important;
  8.     z-index:0;
  9.     margin-top:1em;
  10. }

Dodatkowe klasy

Miejsce przechowywania: position.css

  1. #logo
  2. {
  3.     font-size: 1em !important;
  4.     font-weight: bold !important;
  5.     position: relative;
  6.     text-align: left;
  7.     text-transform: none !important;
  8.     z-index: 0;
  9.     margin-top: 1em;
  10. }

Miejsce przechowywania: layout.css

  1. #header h1
  2. {
  3.     font-size:1.5em;
  4.     font-weight:normal;
  5.     text-transform:uppercase;
  6. }

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*

#logo img

Poniższe klasy i id wpływają na samą grafikę logo. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie napisana przez powyższą klasę.

Podstawowa klasa

Miejsce przechowywania: layout.css

  1. #logo img
  2. {
  3.     display:block;
  4. }

Dodatkowe klasy

Miejsce przechowywania: position.css

  1. #logo  img { display: block; }

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*

#logo span

Poniższe klasy i id wpływają na tekst pod obrazkiem logo. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie napisana przez powyższą klasę.

Podstawowa klasa

Miejsce przechowywania: layout.css

  1. #logo span
  2. {
  3.     display:block;
  4.     margin:0 0 2px 100px !important;
  5.     border-bottom:solid 1px #666;
  6. }

Dodatkowe klasy

Miejsce przechowywania: position.css

  1. #logo span
  2. {
  3.     display: block;
  4.     margin: 0px 0 0 100px !important;
  5.     border-bottom: solid 1px #666;
  6. }

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*



Dziękujemy za wkład

» Stefan Wajda [zwiastun],