Skocz do zawartości
  • Zarejestruj się
Zaloguj się, aby obserwować  
Invisionize.eu

[IPS News] Theme Tip: Styling specific elements on specific pages

Polecane posty

Occasionally you'll want to style a specific element on a specific page of your community - maybe you want to change how topic titles are shown inside a topic, or do something specific to the styles used in activity streams, without also altering other screens where the same elements are used.

Your first instinct might be to open the template editor and add some custom classnames so you can style them. This would certainly work, but the downside is your template is now customized, so any future IPS4 updates would leave the template out of date. Not ideal by any means.

Instead, you can use some helpful attributes that IPS4 adds to the body element, and then build a CSS selector around them. There's four attributes, and they always reference the current page the user is on:

  • data-pageApp - The application key (e.g. core, forums, cms etc.)
  • data-pageModule - The current module with the application (e.g. pages)
  • data-pageController - The current controller within the module (e.g. topic, page etc.)
  • data-pageLocation - Either admin or front.

So let's say we want to change how the .ipsPageHeader element looks within topic view. Our selector would look like this:

body[data-pageapp="forums"][data-pagemodule="forums"][data-pagecontroller="topic"] .ipsPageHeader {
	...your styles
}

If you don't want to be that specific, you can just use the attributes you need. For example, if you want to change all .ipsPageHeader styles in the Forums app, you'd do:

body[data-pageapp="forums"] .ipsPageHeader {
	...your styles
}

Tip: If you don't know the correct app/module/controller for the page you're on, you can find out by visiting the page and then viewing the page source. You'll see these attributes in the body tag near the top.

And as always, be sure you add your CSS to custom.css to keep your upgrades easy ^_^ 

This theme tip is taken from our guides section.

Wyświetl pełny wpis

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Zaloguj się, aby obserwować  

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.

×

Ważne informacje

W celu świadczenie usług przez nasz Serwis na najwyższym poziomie, w ramach Serwisu wykorzystujemy pliki Cookies (tzw. ciasteczka). Korzystając ze stron Serwisu IPSBEYOND.PL bez zmiany ustawień przeglądarki będą one zapisane w pamięci urządzenia. Jeżeli nie dokonacie Państwo zmiany ustawień przeglądarki internetowej to wyrażacie zgodę na zapisywanie plików Cookies.