--=REKLAMA=--
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
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?
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
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{}
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
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.
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:
The possibilites become more apparent and combining the examples and techniques here will produce individually styling to a great degree.
Stosowanie przyrostka klasy strony w Joomla! wymaga prostej procedury. Wykonaj czynności przedstawione poniżej:
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.
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
Please note that the example below takes random CSS styling.
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:
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: