Navigate / search

Úprava nového tématu pro Connections

U IBM Connections můžete upravovat vzhled — skinovat je. Dělá se to tak, že do customization podadresáře uložíte vlastní CSS stylopis pro ty třídy, které chcete přetížit (postup). Výhodu to má tu, že nezasahujete do originálních stylopisů a pokud se něco pokazí, tak smažete váš custom.css a vše je zpět v defaultním vzhledu.

Koncem června se objevilo nové „šedé“ téma pro Connections 4.5 CR1; říká se mu NextGen. To se do systému nahrává jinak, než tak, že vytvoří nové custom.css — toto téma je kompletně uloženo v archivu JAR a odkaz na něj vede z konfiguračního souboru LotusConnections.config.xml. Je to proto, že nové téma je vyladěno a dodáváno jako celek. Pokud chcete výrazně měnit vzhled Connections, použijte základní téma a přizpůsobujte pomocí custom.css. Pokud se vám ale nové šedé téma líbí, chcete jej používat, ale jenom s drobnými úpravami (například změna loga), tak můžete, jenom ale své změny budete psát na jiné místo.

Nové téma je uloženo v archivu com.ibm.social.gen4.theme_4.0.0.20130530-1409.jar. Ten najdete v adresáři WAS_PROFILE/installedApps/CELL/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/. Uvnitř JARu hledejte soubor defaultTheme.css a to je ten soubor, kde budete dělat úpravy stylopisu. To znamená, že upravujete přímo základní CSS pro šedé téma, nevytváříte přetěžující soubor.

Ve své instalaci Connections jsem chtěl změnit pouze logo — místo nápisu IBM Connections tam dát obrázek Renovations. Pomocí FireBugu zjistíte, že tuto oblast ovlivňuje třída .lotusui30 div.lotusBanner .lotusLogo .lotusAltText. Pomocí ručního ladění zjistíte, že ji potřebujete změnit na:

.lotusui30 div.lotusBanner .lotusLogo .lotusAltText {
    background-image: url("images/Renovations_Light_Small.png");
    background-repeat: no-repeat;
    color: #FFFFFF;
    font-size: 0;
    padding: 14px 0;
    width: 155px;
}

To znamená, že v JARu zeditujete soubor defaultTheme.css, najdete třídu .lotusui30 div.lotusBanner .lotusLogo .lotusAltText a nahradíte její původní obsah tím novým. Nezapomeňte zálohovat! Současně s tím nakopírujte do JARu obrázek s logem, na který se odkazujete v background-image. Všechno uložte, zrestartuje Connections a zkontrolujte, jestli vidíte změny.

Máte-li zájem, stáhněte si tuto moji jednoduchou úpravu – jestli budete chtít měnit pouze logo, tak dejte svůj obrázek do podadresáře images a příslušně upravte třídu v defaultTheme.css.

Za tip děkuji: Klaus Bild