--=REKLAMA=--

Stosowanie przyrostków klas CSS

Z Joomla!WikiPL

Mergefrom.png
Zasugerowano, aby z tym artykułem zintegrować artykuł: Stosowanie przyrostków klas w Joomla! 1.5. (dyskusja)
Ikona przetlumacz.png
 Uwaga o zawartości

Ta strona wymaga przetłumaczenia lub jest w trakcie tłumaczenia! Pomoc jest mile widziana. Ostatnio edytowane przez Zwiastun (dyskusja. Data edycji: Thu, 30 Dec 2010 19:32:18 +0000

What is the Page Class Suffix?

http://tutorials.rockettheme.com/joomla-tutorials/template-tutorials/page-class-suffix.html#what Przyrostek klasy stylu CSS strony jest parametrem, który możesz ustawić dla swoich stron z treścią, aby rzeczywiście zindywidualizować ich formatowanie. W wyniku zastosowania przyrostka klasy CSS strony każda strona z treścią mogłaby mieć własne rożne od innych style: kolor/obraz tła, kolor/rozmiar/krój czcionki, kolor/rozmiar/krój/dekorację odnośników, własną typografię dla strony i wiele innych. Możliwości są prawie nieograniczone - jedynym ograniczeniem jest to, co można dodać do strony. Dlatego, cokolwiek wstawiasz na stronę - obraz, jakiś tekst, tabelę albo listę - może to być oznaczone klasą z przyrostkiem... Jeśli rozumiesz, czym są przyrostki klasy modułu, to jest to jedynie odpowiednik dla mainbody. Przyrostek klasy strony nie jest ograniczany (limitowany) przez pozycje treści, ale zasadniczo jest to coś, co jest przetwarzane w obszarze mainbody. Ale co jest wczytywane do obszaru mainbody?

  1. Wszystkie pozycje treści, zarówno dynamiczne, jak i statyczne, jak przykładowe FAQ.
  2. Wszystkie komponenty strony frontowej przetwarzane są w obszarze mainbody, jak np. PU Arcade

Hence, the page class suffix can go beyond the examples suggested earlier in terms on content to the context that is extensions, i.e. components. The best example for a use of the page class suffix for a component is the wrapper. The wrapper usually conforms to the template's stylesheets in respects to the mainbody styling, this is usually padding and margins. However, this extra space generating from the margins and padding may be useful for content items but useless for the wrapper as you want "true" full width. This is where you would apply the page class suffix with no margins or padding

Dodawanie przyrostka klasy strony do arkusza stylów

The page class suffix is loaded from the CSS/stylesheet files. Depending on your how extensive your page class suffixes are and their purposes, determines which CSS file you shall place them in. If you are editing the structure of the content page such as removing the margins for the wrapper component, place the suffix into template_css.css or similar file such as default.css. However, if it is a suffix based on style such as content background colour, then choose style.css or similar file. If it is a mixture, divide them into both files, the structural styles in template_css.css and colours in style.css. Choosing which CSS file is not important in terms of the output of the suffix but is more efficient organisation of your stylesheets.

What are the prefixes that make the class suffix work? Probably the most important part of this tutorial is what you need to insert into your style sheets. Content items and components load different classes which you need to cater for. The main section of content items is controlled by the following class:

 table.contentpaneopen-suffix{}

The suffix itself can be any name and is anything that proceeds .contentpaneopen. You would then place your css code between the {} tags. However, components such as the wrapper or controlled by a different class:

 div.contentpane-suffix{}

The suffix itself can be any name and is anything that proceeds .contentepane.If you wanted to combine both classes for a possibility of less confusion, use the class below. However, sometimes it is best to separate the 2 for ease of management

 div.contentpane,
 table.contentpaneopen{}

Basic Suffixes

Let us show a few examples from the snippets above and describe the effects. Starting with content item suffix

table.contentpaneopen-suffix1{
background:#000;
color:#fc0;
font-size:15px;
font-family:Comic Sans MS;
border:5px solid #fc0;
text-align:justify;
}

From the snippet above, I have concentrated on styling so I would place that in my template's style.css file. The following lists describes the effect/purpose of each line

  1. background:#000; - this changes the background colour of the content item to back as generated by the HEX colour #000
  2. color:#fc0; - this changes the colour of the text within the content item. #fc0 is the HEX colour for gold.
  3. font-size:15px; - this changes the size of the text within the content items. Ensure it is complete with a size unit such as px(pixel).
  4. font-family:Comic Sans MS; - this generates which font is loaded in the content such as my example Comic Sans MS. Please be aware that if you choose a font that is only available to your computer, it will not appear to others.
  5. border:5px solid #fc0; - this produces a solid gold border of 5px thickness around the content item.
  6. text-align:justify; - this aligns all the text in a justify format.

The next example will be for a component such as the wrapper and take on the structural abilities of the page class suffix over style, see example below:

div.contentpane_flush-wrapper{
margin:-10px;
}

In this scenario, the content page would have margins of -10px on all its boundaries. Therefore, it will extend 10px beyond its normal boundaries. As by the suffix that I have used _flush-wrapper, I want to have a flush wrapper so I would apply this to the wrapper menu item. This will overcome the 10px padding generated by the template's normal CSS file for the mainbody.

Combine both examples and techniques together to conform to your personal preferences.

Advanced Suffixes

The previous section introduces you to the basics of the page class suffix but does not show the more advanced techniques of using the class. Furthermore, the snippets previously would not change the link colours/styling independently of the normal stylesheets of the template. Consequently, we will need to advanced open the page class statement itself (we do not need to edit the CSS values just the titles for the values). An example for links may demonstrate to a greater degree.

table.contentpaneopen-suffix1 a{
color:#fff;
}

The a is the title defines the anchor in HTML. Anchor is the term used for links, therefore, this new statement makes all links for the Page Class suffix "-suffix1" have a white colour. This is determined by color:#fff;.

We are now in a position to style anything that is within the limits of your page class suffix so this could be:

  • table.contentpaneopen-suffix1 ul{ which controls unordered links
  • table.contentpaneopen-suffix1 li{ which controls list bullets
  • table.contentpane-suffix1 span.note{ which could change the settings for the span class typography

The possibilites become more apparent and combining the examples and techniques here will produce individually styling to a great degree.

Jak stosować przyrostek klasy strony w Joomla!?

Stosowanie przyrostka klasy strony w Joomla! wymaga prostej procedury. Wykonaj czynności przedstawione poniżej:

  • Najpierw zaloguj się na stronę zaplecza administracyjnego. Dostęp do zaplecza uzyskasz, uzupełniając adres witryny ukośnikiem i słowem 'administrator':
http://www.twoja_domena.com/administrator

Zostanie wyświetlona strona z modułem logowania. Wpisz swoją nazwę i hasło administratora, a nastepnie naciśnij Enter.

  • Po pomyślnym zalogowaniu sie na zaplecze, musisz uzyskać dostęp do pozycji, w których stosowany jest własny przyrostek klasy strony. W tym przypadku uzyskamy dostęp do strony prezentującej w Joomla z przykładowymi danymi artykuł Licencja Joomla! oczywiście, może to być każda inna pozycja menu, zarówno z treścią statyczną, jak i dynamiczną. Wykonaj poniższe czynności:
Artykuły(górne menu nawigacyjne) > Materiały statyczne albo Wszystkie artykuły)

Gdy chcesz zastosować przyrostek klasy strony dla komponentu, musisz ustawić pozycję menu. Wykonaj następujące czynności:

Menu(górne menu nawigacyjne) > nazwa Menu jak np. mainmenu
  • Following on with our example, we are now in the Static Content Manager's pages. As you can observe from the screenshot, we have the item Joomla! License Guidelines in our list. Click the title to access the content item. As for other items, select them accordingly.
  • We are in the manager for the individual content, in this case Joomla! License Guidelines. For Page Class Suffix, we need to access the parameters tab which is located on the right column of the content manager. From this tab, you will notice a field for page class suffix, this is where you type in your suffix from your stylesheets such as -suffix
  • Finally, save the content item and view on your Joomla! website's frontend. You should now notice that the content page's style has changed in respects to your customisation in the style sheet. View the screenshot below.

Please note that the example below takes random CSS styling.




Stosowanie przyrostków klas CSS

Niekiedy chcesz nadać niektórym modułom albo stronom specyficzny, różniący je od standardowego wygląd. Problem ten rozwiązuje w skryptach parametry moduleclass_sfx oraz pageclass_sfx, np.

<div class="componentheading<?php echo $params->get( 'pageclass_sfx' ); ?>">
   <?php echo $title->name; ?>
</div>

Przykład 2

 <div class="module<?php echo $moduleclass_sfx; ?>">
   tu kod wyswietlający modul
</div>

Objaśnienie: Jeśli w pierwszym przypadku zostanie wykryty parametr pageclass_sfx, to w arkuszu stylów CSS będzie wyszukiwana klasa .componentheading+parametr, a w drugim przypadku klasa .module+parametr.

Aby uzyskać zamierzony efekt, należy:

  • w arkuszu stylów CSS umieścić reguły dla odpowiednich klas
  • wyszczególnić w parametrach pozycji menu lub w parametrach modułu przyrostek klasy CSS.

Przykładowe definicje klas dla modułu:

table.moduletable_przyrostek {
  width: 100%;
  margin-bottom: 5px;
  padding: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
}
 
table.moduletable_przyrostek th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
  text-align: left;
  padding-top: 4px;
  padding-left: 4px;
  height: 21px;
  font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
}
 
table.moduletable_przyrostek td {
  font-size: 11px;
  padding: 0px;
  margin: 0px;
  font-weight: normal;
}

W parametrach modułu, który ma korzystać z tych klas należy wpisać przyrostek _przyrostek.

Dla modułu umieszczonego w pozycji oznaczonej stylem -3 (zobacz dalej), trzeba określić reguły dla klasy .module__przyrostek.

Przyrostek klasy strony, jeśli zostanie określony w parametrach pozycji menu, dodawany jest do wszystkich klas związanych z prezentacją w głównym obszarze zawartości. Jeśli w arkuszu stylów parser PHP nie znajdzie definicji klasy, użyje klasy podstawowej. Trzeba więc w arkuszu CSS rozważyć umieszczenie reguł dla następujących klas:

  • .componentheading_innyWygladStrony
  • .conentheading_innyWygladStrony
  • .contentpane_innyWygladStrony
  • .contentdescription_innyWygladStrony
  • .sectiontableheader_innyWygladStrony
  • .sectiontableentry1_innyWygladStrony
  • .sectiontableentry2_innyWygladStronyy
  • .sectiontablefooter_innyWygladStrony
  • .contentpaneopen_innyWygladStrony
  • .readon_innyWygladStrony
  • .category_innyWygladStrony
  • .small_innyWygladStrony
  • .contact_e-mail_innyWygladStrony

Dziękujemy za wkład

» Stefan Wajda [zwiastun],