egy sablon, több oldal - más-más háttérrel

Több
11 éve 9 hónapja - 11 éve 9 hónapja #718 Írta: coilevi
coilevi válaszolt a következő témában: Válasz: egy sablon, több oldal - más-más háttérrel
Hát a háttered nem hiszem, hogy pusztán egy :before vagy :after szelektorral megadott valami.
Az általad bekopizott <head> rész sem hinném, hogy pusztán annyi lenne.
A "modulban CSS" megoldás magyarázatát én itt feladtam. :) Tényleg le van írva ebben a topikban többször, többféleképpen. Sőt, már te is felfedezted, csak úgy tűnik, útközben kiment a fejedből.
Szerintem nézd meg a CSS alapjait, és akkor lehet, világos lesz az egésznek a lényege.
www.w3schools.com/css/default.asp
Utolsó szerkesztés: 11 éve 9 hónapja coilevi által.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
11 éve 9 hónapja - 11 éve 9 hónapja #719 Írta: tibor16
tibor16 válaszolt a következő témában: Válasz: egy sablon, több oldal - más-más háttérrel
szia - nem akartalak azzal büntetni, hogy elküldöm neked a vonatkozó CSS fájlt - ami az Artisteer-nél 2600 sor. Az ide vonatkozó részt copyzom csak ki. De ha kéred, akkor elküldöm, magánba, ide be is szúrhatom.. stb Csak ha ide beszúrok 2600 sort, az garantáltan szétnyomja a fórumot.

Gondolom, nem jól kérdezek, mert nem arra kapom a válaszaidat, amit kérdezek. :)

Mivel az egész sablon grafikáját, a program motorja rakja össze, azért sok, bonyolult és egy csomó felesleges kódolást tartalmaz a template.css. Azok is benne vannak amire van lehetőség, de éppen nem használja a program.

Az Artisteernél nem lehet megadni háttér képet, csak színt. Ehhez a program készít egy szín képet, egy png-t, aminek a neve sheet.png. Használ átlátszóságot is - és ehhez kell a png. Ezt használja háttérképnek.

Ezt cserélem ki arra a képre, amit háttérnek akarok. Persze ehhez átnevezem. Nyilván, ez csak egy pótlólagos megoldás. Ezért van ez a furcsa kódolás, mert eredetileg nem ilyen típusú háttérképhez készült, hanem egy kis méretű csík képet, amiből eredetileg felépítené a hátteret.
Azért nem nyúlok bele a template.css-be, nem törlök ki belőle dolgokat, mert én is használom pl az átlátszóságot, amit viszont valahogy másképpen szabályoz - talán scriptből vagy maga a kép átlátszóságával. Erre vonatkozóan nem találtam ugyanis, a template.css-ben kódot...

Tehát jobb híján, machinálom az Artisteerrel készült sablont, de óvatosan nyúkálok bele, mert a működése nem csak ettől a css fájltól függ, hanem az általam nem ismert háttér motortól, scriptektől, xml fájloktól. Ha lehet, akkor egyelőre maradnék ennél a felállásnál, - kis módosítással elérni a kívánt eredményt (nem biztos, hogy meg akarok tanulni Joomla-t programozni, hogy megértsem a teljes működését).
Ezért ilyenek a kérdéseim.

Visszatérve a problémára -

Tény: ha egyéni HTML-be egy olyan css lapra mutató linket rakok be, amiben benne vannak az idevonatkozó, a hátteret szabályozó class-ok, ez felülírja az eredetieket és így megváltozik a háttér.

Kérdések: Mivel nem fogad el más nevű class-t, kérdezem -

1: van-e valami trükkje a kódolásban annak hogy egy class nevet megváltoztassak, úgy hogy az eredeti névről (mivel azt fogadja el) átugorjon egy másikra. Tudom is én, átirányítani egyik class-ról a másikra.
2: egy CSS fájl linkelésére az egyéni HTML modul megfelelő módszer-e a Joomla-ban?
3: - mivel ezt akarom használni - ha nincs jobb - lehet-e ebből a későbbiekben probléma. Összeboríthat-e bármit is, esetleg zavarja-e valaminek a működését, hogy ha nem szabályos az, hogy az egyéni HTML modult egy másik css fájl behívására használom.

Részlet a template,css-ből, - ez szabályozza eredetileg a hátteret.

Code:
/* begin Box, Sheet */ .art-sheet { max-width:940px; margin-top: 5px; margin-bottom: 0; cursor:auto; width: 940px; } .art-sheet-body { padding:0; min-width:40px; min-height:40px; padding-top:0; padding-bottom:0; } .art-sheet:before, .art-sheet:after { content: url('../images/sheet_t.png'); font-size: 0; background-image: url('../images/sheet_b.png'); } .art-sheet:after{ clip:rect(auto, auto, auto, 920px); } .art-sheet:before,.art-sheet-body:before{ right:20px; } .art-sheet-body:after{ width: 20px; top:20px; bottom:20px; background-image:url('../images/sheet.png'); } .art-sheet-body:before{ top:20px; bottom:20px; background-image:url('../images/sheet.png'); } /* end Box, Sheet */
Utolsó szerkesztés: 11 éve 9 hónapja Balázs által.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
11 éve 9 hónapja #729 Írta: coilevi
coilevi válaszolt a következő témában: Válasz: egy sablon, több oldal - más-más háttérrel

tibor16 írta: Kérdések: Mivel nem fogad el más nevű class-t, kérdezem -

Ezt írtad többször, hogy más class-ra hiába írsz formázást, nem érzékeli. Én ebből gondoltam, hogy érdemes belenézni a CSS alapokba. Hiszen ha egy HTML elemnek meg van adva egy CSS class, és azon keresztül formázható, akkor azon keresztül formázható. Pont. Erre van a class, hogy azon keresztül lehet hivatkozni rá. És ez nem csak CSS class-okra vonatkozik, hanem ha a sablonodban pl. a com_content blognézet címsorai H2-ben listázódnak ki, akkor hiába írsz bármi másra formázást. A H2-ként megjelenített elemekre csak a H2-re írt formázások lesznek érvényesek. Így működik a CSS.

tibor16 írta: 1: van-e valami trükkje a kódolásban annak hogy egy class nevet megváltoztassak, úgy hogy az eredeti névről (mivel azt fogadja el) átugorjon egy másikra. Tudom is én, átirányítani egyik class-ról a másikra.

Az első hozzászólásomban erre írtam megoldást.

Mivel ez a megoldás CSS osztály utótaghoz kapcsolódik, azt pedig menüpontonként lehet megadni, ezért ez nálad nem biztos, hogy járható út, hiszen lehet, hogy az általad formázni kívánt cikkek nincsenek valamilyen formában menüpontokhoz rendelve. A "valamilyen formában" itt arra vonatkozik, hogy nem feltétlenül kell hogy a cikkek egyesével legyenek menüpontokhoz rendelve. Ha kategória alapján pl. blognézetben hozzá vannak rendelve menüpontokhoz (ez ugye elég gyakori), és az adott kategóriában lévő cikkeknek ugyanazt az egyedi formázást szeretnéd adni (ez is gyakori), akkor ez a megoldás használható.

Ha viszont kategóriától függetlenül szeretnél eltérő formázásokat adni, akkor viszont ez a megoldás már nem használható. Ilyen CSS osztály utótagos vagy ehhez hasonló megoldásra - tudomásom szerint - nincs lehetőség a Joomla alaprendszerben, hogy cikkeknek egyesével adjunk egyedi formázásokat.

Na ilyenkor kell külső kiegészítőhöz nyúlni, ekkor jönnek jól a modulok, amiket hozzá lehet kötni cikkekhez.

tibor16 írta: 2: egy CSS fájl linkelésére az egyéni HTML modul megfelelő módszer-e a Joomla-ban?

Ahogy írtam , szerintem nem, hiszen ezáltal nem a szabványoknak megfelelő módon, tehát a </head> előtt, hanem az után, már a <body> részben lesz meghívva a CSS fájl, ami már nem szabványos.

Ezért javasoltam azokat a modulokat, amik a <head> részben hívják meg az általad megadott CSS-t.

tibor16 írta: Részlet a template,css-ből, - ez szabályozza eredetileg a hátteret. (...)

Az általad bemásolt kódok közül én az index.php <head> részére figyeltem fel, hogy valószínűleg nem a teljes blokkot látjuk, hiszen egy darab CSS fájl sincs meghívva a bemásolt kódrészletben. Így nem tudjuk, mi történik az általad modullal berakott CSS-ek érvényesülése UTÁN. Márpedig az a lényeg, hiszen a CSS úgy működik, hogy ha egy adott elemre egymás után több formázás "érkezik", akkor mindig a legutolsó szerint fogják megjeleníteni a böngészők. Tehát a lényeg, hogy a modulban általad megadott formázások a sablon CSS fájljának betöltődése után íródjanak be a <head> részbe. Ha ez most fordítva van (nem látjuk ugye a teljes <head> blokkot, tehát csak valószínűsíteni tudom), akkor a sablon index.php-jában hozd előrébb a CSS fájlok meghívását.
A következő felhasználók mondtak köszönetet: tibor16

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
11 éve 9 hónapja - 11 éve 9 hónapja #730 Írta: tibor16
tibor16 válaszolt a következő témában: Válasz: egy sablon, több oldal - más-más háttérrel
Köszönöm, ez igazán kimerítő válasz volt:)

És akkor elérkeztünk a "Húszmilliós kérdéshez" - mi az amit javasolsz?
Úgy látom, hogy a cikkenkénti más-más css fájl linkelése - szabályosan! - lenne a megoldás. Ehhez kellene egy modul...
Te tudsz esetleg erre valamit? - külső css linkelése a laphoz... cikkenként más css...

A külön-külön sablon nem járható út, nem lehetne ennyi sablont kezelni...

A "Tilos-az-A" amit át szeretnk Joomla-ba rakni, már most, több mint 200 db HTML-t tartalmaz. Mind egyedi, legalábbis hátterében egyedi oldal. És ha újra indítom, akkor lesznek olyan írók, akik saját fejlécces , színvilágos lapokkal kell hogy rendelkezzenek. Ezzel is megkülönböztetve magukat a többi szerzőtől. Ezért kezdtem a Joomla-ba, úgy egy évvel ezelőtt, hogy ne nekem kelljen minden egyes html-t megszerkeszteni, az alapoktól kezdve. Meg kell oldanom, hogy minél kevesebb sablonnal készüljön, a lehető legnagyobb lehetőséggel a változatosságra.

A 2. kérdésben adott válaszodban hivatkozol egy korábbi válaszodra:

Tehát:
- menünél a Osztály utótaghoz: akármi
- template.css-ben: .akármi{formázás}

Ez az Artisteer sablonnál, szerintem, a fix Class nevek miatt nem működik. - megelőzően, kb 3 napot töltöttem keresve a megoldást - ki van pipálva - nem írja felül, csak a teljesen, betűre ugyanaz a class az eredetit.

Ez működik
- bár a legkevésbé sem szabályos - a body-ba írja az egyéni html által tartalmazott külső css fájlt, amivel azonos class névvel, formázom a hátteret

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu-hu" lang="hu-hu" dir="ltr"> <head> <meta name="google-site-verification" content="aaoEXDymydG61rzkBc5_FBMT2Pm8EQAmr1HQM2FsXn4" /> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <base href="http://localhost/tilos-az-a/index.php/próba-2.html" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Tatai Tibor, fotóművész, fotóművészet, szabadidő, magazin, fotó, művelődés, művészet, zene, blues, rock, színház, író, film, vélemény, élmény, játék, kutya, kedvencek, kirándulás, utazás,állatfotó, gyerek, szülő, család, galéria, sport, hobby, fórum, Tatabánya, Hungary" /> <meta name="rights" content="Weblap tulajdonos: Tatai Tibor Copyright © 2012. All Rights Reserved. A lap teljes tartalmát védik az alkotók szerzői jogai! " /> <meta name="author" content="Super User" /> <meta name="description" content="&quot;Tilos az A&quot; - közösségi szabadidő magazin" /> <meta name="generator" content="Joomla! - Open Source Content Management" /> <title>Tilos az A webmagazin - Próba 2</title> <link href="/tilos-az-a/templates/index/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <script src="/tilos-az-a/media/system/js/mootools-core.js" type="text/javascript"></script> <script src="/tilos-az-a/media/system/js/core.js" type="text/javascript"></script> <script src="/tilos-az-a/media/system/js/caption.js" type="text/javascript"></script> <script type="text/javascript"> window.addEvent('load', function() { new JCaption('img.caption'); }); </script> <link rel="stylesheet" href="/tilos-az-a/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/tilos-az-a/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/tilos-az-a/templates/index/css/template.css" media="screen" /> <!--[if IE 6]><link rel="stylesheet" href="/tilos-az-a/templates/index/css/template.ie6.css" type="text/css" media="screen" /><![endif]--> <!--[if IE 7]><link rel="stylesheet" href="/tilos-az-a/templates/index/css/template.ie7.css" type="text/css" media="screen" /><![endif]--> <script type="text/javascript">if ('undefined' != typeof jQuery) document._artxJQueryBackup = jQuery;</script> <script type="text/javascript" src="/tilos-az-a/templates/index/jquery.js"></script> <script type="text/javascript">jQuery.noConflict();</script> <script type="text/javascript" src="/tilos-az-a/templates/index/script.js"></script> <script type="text/javascript">if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script> </head> <body> <div id="art-main"> <div class="cleared reset-box"></div> <div class="art-box art-sheet"> <div class="art-box-body art-sheet-body"> <div class="art-header"> <div class="art-logo"> <h1 class="art-logo-name"><a href="/tilos-az-a/"></a></h1> <h2 class="art-logo-text"></h2> </div> </div> <div class="cleared reset-box"></div> <div class="art-bar art-nav"> <div class="art-nav-outer"> <div class="art-hmenu-extra2"><ul class="art-vmenu"><li class="item-110"><a href="http://www.port.hu/pls/tv/tv.prog">TV műsor</a></li><li class="item-111"><a class="art-vmenu" href="http://www.cinemacity.hu/">Moziműsor</a></li><li class="item-112"><a class="art-vmenu" href="http://www.szerencsejatek.hu/">Totó, Lottó</a></li><li class="item-113"><a class="art-vmenu" href="http://www.idokep.hu/">Időjárás</a></li><li class="item-114"><a class="art-vmenu" href="http://translate.google.com/">Webfordító</a></li></ul></div> <div class="art-nav-center"> <ul class="art-hmenu"><li class="item-101"><a href="/tilos-az-a/">Főoldal</a></li><li class="item-115"><a class="separator-without-submenu">Művészet</a></li><li class="item-116"><a class="separator-without-submenu">Művelődjünk</a></li><li class="item-117"><a href="/tilos-az-a/index.php?Itemid=102">Környezetünk</a></li><li class="item-118"><a class="separator-without-submenu">Játék - Mese</a></li><li class="item-121"><a class="separator-without-submenu">Galériák</a></li><li class="item-119"><a href="http://tilos-az-a.hu/kapcs.html">Kapcsolat</a></li><li class="item-120"><a href="http://localhost/tilos-az-a/forum.html">Fórum</a></li></ul> </div> </div> </div> <div class="cleared reset-box"></div> <div class="art-layout-wrapper"> <div class="art-content-layout"> <div class="art-content-layout-row"> <div class="art-layout-cell art-sidebar1"> <div class="art-box art-vmenublock"> <div class="art-box-body art-vmenublock-body"> <div class="art-box art-vmenublockcontent"> <div class="art-box-body art-vmenublockcontent-body"> <ul class="art-vmenu"><li class="item-104"><a class="art-vmenu" href="/tilos-az-a/index.php/belépés.html" target="_blank">Belépés</a></li><li class="item-106"><a href="/tilos-az-a/index.php/kijelentkezés.html">Kijelentkezés</a></li><li class="item-107 current active"><a class="proba active" href="/tilos-az-a/index.php/próba-2.html">Próba 2</a></li><li class="item-108"><a class="proba" href="/tilos-az-a/index.php/próba-3.html">Próba 3</a></li></ul> <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> <div class="art-layout-cell art-content"> <div class="art-nostyle"> <div class="custom" style="background-image: url('/tilos-az-a/images/proba2.jpg')" > <link href="/tilos-az-a/templates/02lapok/css/02lap.css" rel="stylesheet" type="text/css" /></div> </div> <div class="item-page.proba-sheet-body"><div class="art-box art-post"> <div class="art-box-body art-post-body"> <div class="art-post-inner"> <div class="art-postheadericons art-metadata-icons"> <span class="art-postauthoricon">Írta: <a href="/tilos-az-a/index.php/component/contact/contact/" >Super User</a></span> | <a href="/tilos-az-a/index.php/próba-2.html?tmpl=component&amp;print=1&amp;page=" title="Nyomtatás" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/tilos-az-a/templates/index/images/system/printButton.png" alt="Nyomtatás" /></a> | <a href="/tilos-az-a/index.php/component/mailto/?tmpl=component&amp;template=index&amp;link=f60e9edce482e786b21b48dc042bfda4010af730" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/tilos-az-a/templates/index/images/system/emailButton.png" alt="E-mail" /></a> | Találatok: 218 </div> <div class="art-postcontent"> <div class="art-article"><h1>Próba 2</h1> <p> </p> <h1>Próba2a</h1> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p> <p>Próba</p></div> </div> <div class="cleared"></div> <div class="art-postfootericons art-metadata-icons"> <span class="art-postcategoryicon">Kategória: <span class="art-post-metadata-category-name"><a href="/tilos-az-a/index.php/próba-2/8-tartalom.html">Tartalom</a></span></span> </div> </div> <div class="cleared"></div> </div> </div> </div> <div class="cleared"></div> </div> </div> </div> </div> <div class="cleared"></div> <div class="art-footer"> <div class="art-footer-body"> <div class="art-footer-text"> <p>Designed by <a href="mailto:tt.kreativ@gmail.com">Tatai Tibor</a></p><p><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #9AB0B6; text-align: center;"> A lap teljes tartalmát védi az alkotók szerzői joga!<br /></span><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #9AB0B6; text-align: center;"> Copyright © 2012. All Rights Reserved.</span></p><p><a href="http://kreativ.try.hu/" target="_blank">Kreatív műhely</a><br /></p> </div> <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> </div> <div class="cleared"></div> <p class="art-page-footer"></p> <div class="cleared"></div> </div> </body> </html>

Mellékelem a template.css fájlt, - ez az Artisteer sablon alap stíluslapja.
Code:
/* begin Page */ /* Created by Artisteer v3.1.0.48375 */ #art-main, table { font-family: Arial, Helvetica, Sans-Serif; font-size: 14px; } h1, h2, h3, h4, h5, h6, p, a, ul, ol, li { margin: 0; padding: 0; } .art-postcontent, .art-postheadericons, .art-postfootericons, .art-blockcontent-body, ul.art-vmenu a { text-align: left; } .art-postcontent, .art-postcontent li, .art-postcontent table, .art-postcontent a, .art-postcontent a:link, .art-postcontent a:visited, .art-postcontent a.visited, .art-postcontent a:hover, .art-postcontent a.hovered { font-family: Arial, Helvetica, Sans-Serif; font-size: 14px; text-indent: 0; } .art-postcontent p { margin: 8px 0 11px; } .art-postcontent h1, .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:visited, .art-postcontent h1 a:hover, .art-postcontent h2, .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:visited, .art-postcontent h2 a:hover, .art-postcontent h3, .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:visited, .art-postcontent h3 a:hover, .art-postcontent h4, .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:visited, .art-postcontent h4 a:hover, .art-postcontent h5, .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:visited, .art-postcontent h5 a:hover, .art-postcontent h6, .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:visited, .art-postcontent h6 a:hover, .art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover, .art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover, .art-logo-name, .art-logo-name a, .art-logo-name a:link, .art-logo-name a:visited, .art-logo-name a:hover, .art-logo-text, .art-logo-text a, .art-logo-text a:link, .art-logo-text a:visited, .art-logo-text a:hover, .art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover { font-weight:normal; font-family: Arial, Helvetica, Sans-Serif; font-size: 22px; } .art-postcontent a { text-decoration: underline; color: #000033; } .art-postcontent a:link { text-decoration: underline; color: #000033; } .art-postcontent a:visited, .art-postcontent a.visited { color: #021717; } .art-postcontent a:hover, .art-postcontent a.hover { font-style: normal; font-weight: bold; text-decoration: none; color: #D50101; } .art-postcontent h1 { color: #42565C; margin: 11px 0 13px; font-style: normal; font-weight: normal; text-align: left; line-height: 100%; } .art-blockcontent h1 { margin: 11px 0 13px; font-style: normal; font-weight: normal; text-align: left; line-height: 100%; } .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:hover, .art-postcontent h1 a:visited, .art-blockcontent h1 a, .art-blockcontent h1 a:link, .art-blockcontent h1 a:hover, .art-blockcontent h1 a:visited { font-style: normal; font-weight: normal; text-align: left; line-height: 100%; } .art-postcontent h2 { color: #42565C; margin: 10px 0 12px; font-style: normal; font-weight: normal; font-size: 20px; line-height: 100%; } .art-blockcontent h2 { margin: 10px 0 12px; font-style: normal; font-weight: normal; font-size: 20px; line-height: 100%; } .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:hover, .art-postcontent h2 a:visited, .art-blockcontent h2 a, .art-blockcontent h2 a:link, .art-blockcontent h2 a:hover, .art-blockcontent h2 a:visited { font-style: normal; font-weight: normal; font-size: 20px; line-height: 100%; } .art-postcontent h3 { color: #42565C; margin: 9px 0 11px; font-style: normal; font-weight: normal; font-size: 18px; } .art-blockcontent h3 { margin: 9px 0 11px; font-style: normal; font-weight: normal; font-size: 18px; } .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:hover, .art-postcontent h3 a:visited, .art-blockcontent h3 a, .art-blockcontent h3 a:link, .art-blockcontent h3 a:hover, .art-blockcontent h3 a:visited { font-style: normal; font-weight: normal; font-size: 18px; } .art-postcontent h4 { color: #123436; margin: 8px 0 10px; font-style: normal; font-weight: normal; font-size: 16px; } .art-blockcontent h4 { margin: 8px 0 10px; font-style: normal; font-weight: normal; font-size: 16px; } .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:hover, .art-postcontent h4 a:visited, .art-blockcontent h4 a, .art-blockcontent h4 a:link, .art-blockcontent h4 a:hover, .art-blockcontent h4 a:visited { font-style: normal; font-weight: normal; font-size: 16px; } .art-postcontent h5 { color: #123436; margin: 7px 0 8px; font-style: normal; font-weight: normal; font-size: 14px; } .art-blockcontent h5 { margin: 7px 0 8px; font-style: normal; font-weight: normal; font-size: 14px; } .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:hover, .art-postcontent h5 a:visited, .art-blockcontent h5 a, .art-blockcontent h5 a:link, .art-blockcontent h5 a:hover, .art-blockcontent h5 a:visited { font-style: normal; font-weight: normal; font-size: 14px; } .art-postcontent h6 { color: #1A4B4D; margin: 6px 0 7px; font-style: normal; font-weight: normal; font-size: 12px; } .art-blockcontent h6 { margin: 6px 0 7px; font-style: normal; font-weight: normal; font-size: 12px; } .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:hover, .art-postcontent h6 a:visited, .art-blockcontent h6 a, .art-blockcontent h6 a:link, .art-blockcontent h6 a:hover, .art-blockcontent h6 a:visited { font-style: normal; font-weight: normal; font-size: 12px; } ul { list-style-type: none; } ol { list-style-position: inside; } html, body { height:100%; } #art-main { position: relative; z-index: 0; width: 100%; min-height: 100%; left: 0; top: 0; cursor:default; overflow:hidden; } body { padding: 0; margin:0; min-width: 940px; color: #123436; background-color: #000033; } .cleared { display:block; clear: both; float: none; margin: 0; padding: 0; border: none; font-size: 0; height:0; overflow:hidden; } .reset-box { overflow:hidden; display:table; } form { padding: 0 !important; margin: 0 !important; } table.position { position: relative; width: 100%; table-layout: fixed; } /* Start Box */ .art-box, .art-box-body { margin:0 auto; position:relative; } .art-box:before, .art-box:after, .art-box-body:before, .art-box-body:after { position:absolute; top:0; bottom:0; content:' '; background-repeat: no-repeat; line-height:0; } .art-box:before,.art-box-body:before{ left:0; } .art-box:after,.art-box-body:after{ right:0; } .art-box:before { overflow:hidden; background-position: bottom left; direction: ltr; z-index:-3; } .art-box:after { background-position: bottom right; z-index:-3; } .art-box-body:before, .art-box-body:after { background-repeat:repeat-y; } .art-box-body:before { background-position: top left; z-index:-3; } .art-box-body:after { background-position: top right; z-index:-3; } .art-box .art-box:before, .art-box .art-box:after, .art-box-body .art-box-body:before, .art-box-body .art-box-body:after { z-index:-2; } .art-box .art-box .art-box:before, .art-box .art-box .art-box:after, .art-box-body .art-box-body .art-box-body:before, .art-box-body .art-box-body .art-box-body:after { z-index:-1; } /* End Box */ /* Start Bar */ .art-bar { position:relative; } .art-bar:before, .art-bar:after { position:absolute; top:0; bottom:0; content:' '; background-repeat:repeat; z-index:-1; } .art-bar:before { left:0; background-position: top left; } .art-bar:after { right:0; background-position: top right; } /* End Bar */ li h1, .art-postcontent li h1, .art-blockcontent-body li h1 { margin:1px; } li h2, .art-postcontent li h2, .art-blockcontent-body li h2 { margin:1px; } li h3, .art-postcontent li h3, .art-blockcontent-body li h3 { margin:1px; } li h4, .art-postcontent li h4, .art-blockcontent-body li h4 { margin:1px; } li h5, .art-postcontent li h5, .art-blockcontent-body li h5 { margin:1px; } li h6, .art-postcontent li h6, .art-blockcontent-body li h6 { margin:1px; } li p, .art-postcontent li p, .art-blockcontent-body li p { margin:1px; } /* end Page */ /* begin Box, Sheet */ .art-sheet { max-width:940px; margin-top: 5px; margin-bottom: 0; cursor:auto; width: 940px; } .art-sheet-body { padding:0; min-width:40px; min-height:40px; padding-top:0; padding-bottom:0; } .art-sheet:before, .art-sheet:after { content: url('../images/sheet_t.png'); font-size: 0; background-image: url('../images/sheet_b.png'); } .art-sheet:after{ clip:rect(auto, auto, auto, 920px); } .art-sheet:before,.art-sheet-body:before{ right:20px; } .art-sheet-body:after{ width: 20px; top:20px; bottom:20px; background-image:url('../images/sheet.png'); } .art-sheet-body:before{ top:20px; bottom:20px; background-image:url('../images/sheet.png'); } /* end Box, Sheet */ /* begin Header */ div.art-header { margin: 0 auto; position: relative; width:100%; height: 120px; margin-top: 0; margin-bottom: 0; } .art-header:after { position: absolute; z-index:-1; display:block; content:' '; top: 0; width:100%; height: 120px; background-image: url('../images/header.jpg'); background-repeat: no-repeat; background-position: center center; } /* end Header */ /* begin Logo */ div.art-logo { display: block; position: absolute; top: 8px; left: 76%; margin-left: -94px; } .art-logo-name { display: block; text-align: left; font-size: 24px; text-decoration: none; padding: 0; margin: 0; color: #003638 !important; } .art-logo-name a, .art-logo-name a:link, .art-logo-name a:visited, .art-logo-name a:hover { font-size: 24px; text-decoration: none; padding: 0; margin: 0; color: #003638 !important; } .art-logo-text { display: block; text-align: left; font-size: 20px; padding: 0; margin: 0; color: #003638 !important; } .art-logo-text a, .art-logo-text a:link, .art-logo-text a:visited, .art-logo-text a:hover { font-size: 20px; padding: 0; margin: 0; color: #003638 !important; } /* end Logo */ /* begin Menu */ /* menu structure */ ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover { outline: none; position: relative; z-index: 11; } ul.art-hmenu, ul.art-hmenu ul { display: block; margin: 0; padding: 0; border: 0; list-style-type: none; } ul.art-hmenu li { margin: 0; padding: 0; border: 0; display: block; float: left; position: relative; z-index: 5; background: none; } ul.art-hmenu li:hover{ z-index: 10000; white-space: normal; } ul.art-hmenu li li{ float: none; width: auto; } ul.art-hmenu li:hover>ul { visibility: visible; top: 100%; } ul.art-hmenu li li:hover>ul { top: 0; left: 100%; } ul.art-hmenu:after, ul.art-hmenu ul:after { content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both; } ul.art-hmenu, ul.art-hmenu ul { min-height: 0; } ul.art-hmenu ul { visibility: hidden; position: absolute; z-index: 10; left: 0; top: 0; background-image: url('../images/spacer.gif'); padding: 10px 30px 30px 30px; margin: -10px 0 0 -30px; } ul.art-hmenu ul.art-hmenu-left-to-right { right: auto; left: 0; margin: -10px 0 0 -30px; } ul.art-hmenu ul.art-hmenu-right-to-left { left: auto; right: 0; margin: -10px -30px 0 0; } ul.art-hmenu ul ul { padding: 30px 30px 30px 10px; margin: -30px 0 0 -10px; margin-left: -11px; z-index: -1; } ul.art-hmenu ul ul.art-hmenu-left-to-right { right: auto; left: 0; padding: 30px 30px 30px 10px; margin: -30px 0 0 -10px; margin-left: -11px; } ul.art-hmenu ul ul.art-hmenu-right-to-left { left: auto; right: 0; padding: 30px 10px 30px 30px; margin: -30px -10px 0 0; margin-right: -11px; } ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right { right: auto; left: 100%; } ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left { left: auto; right: 100%; } ul.art-hmenu{ position:relative; padding: 2px 2px 2px 2px; float: left; left: 50%; } div.art-nav-center{ position: relative; float: right; right: 50%; } .firefox2 ul ul.art-hmenu{ float: none; } /* end menu structure */ /* menu bar */ .art-nav { margin:0 auto; min-height: 31px; z-index: 100; margin-top: 0; margin-bottom: 0; } .art-nav:before, .art-nav:after{ background-image: url('../images/nav.png'); } .art-nav:before{ right: 20px; } .art-nav:after{ width: 20px; } /* end menu bar */ .art-nav-outer{ position:absolute; width:100%; } .art-hmenu-extra1 { position : absolute; left: 0; top: 0; width: auto; height: 31px; background-position: center; } .art-hmenu-extra2 { position: absolute; right: 0; top: 0; width: auto; height: 31px; background-position: center; } /* images in menu items */ ul.art-hmenu img.art-menu-image, ul.art-hmenu img.art-menu-image-left { vertical-align: middle; margin-right: 5px; } ul.art-hmenu img.art-menu-image-right { vertical-align: middle; margin-left: 5px; } /* end Menu */ /* begin MenuItem */ ul.art-hmenu>li>a { position: relative; display: block; height: 27px; cursor: pointer; text-decoration: none; color: #D3DCDF; padding: 0 17px; line-height: 27px; text-align: center; } ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after { position: absolute; display: block; content:' '; top: 0; bottom:0; z-index: -1; background-image: url('../images/menuitem.png'); } ul.art-hmenu>li>a:before { left: 0; right: 4px; background-position: top left; } ul.art-hmenu>li>a:after { width: 4px; right: 0; background-position: top right; } .art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover { text-align: left; text-decoration: none; } ul.art-hmenu>li>a.active:before { background-position: bottom left; } ul.art-hmenu>li>a.active:after { background-position: bottom right; } ul.art-hmenu>li>a.active { color: #FFFFFF; } ul.art-hmenu>li>a:hover:before, ul.art-hmenu>li:hover>a:before { background-position: center left; } ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after { background-position: center right; } ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a{ color: #F2F2D4; } .art-hmenu a:hover.separator-without-submenu { cursor: default; } .art-hmenu a:hover.separator-without-submenu .t { color: #D3DCDF; } .art-hmenu li:hover a.separator-without-submenu .t { color: #D3DCDF; } a:hover.separator-without-submenu .r, a:hover.separator-without-submenu .l { top: 0 !important; } /* end MenuItem */ /* begin MenuSeparator */ ul.art-hmenu>li:before { position:absolute; display: block; content:' '; top:0; left: -2px; width:2px; height: 27px; background: url('../images/menuseparator.png') center center no-repeat; } ul.art-hmenu>li { margin-left:2px; } ul.art-hmenu>li:first-child { margin-left:0; } ul.art-hmenu>li:first-child:before{ display:none; } /* end MenuSeparator */ /* begin MenuSubItem */ .art-hmenu ul a { display: block; white-space: nowrap; height: 24px; background-image: url('../images/subitem.png'); background-position: left top; background-repeat: repeat-x; border-width: 1px; border-style: solid; border-top-width: 0; border-color: #2F606F; min-width: 7em; text-align: left; text-decoration: none; line-height: 24px; color: #D3DCDF; font-size: 13px; margin:0; padding: 0 22px; } .art-hmenu ul>li:first-child>a { border-top-width: 1px; } .art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active { text-align: left; text-decoration: none; line-height: 24px; color: #D3DCDF; font-size: 13px; margin:0; padding: 0 22px; } .art-hmenu ul li a:hover { color: #FFFFFF; background-position: left bottom; border-color: #8CA5AB; border-top-width: 1px !important; } .art-hmenu ul li a.art-hmenu-before-hovered { border-bottom-width: 0 !important; } .art-hmenu ul li:hover>a { color: #FFFFFF; background-position: left bottom; border-color: #8CA5AB; border-top-width: 1px !important; } /* end MenuSubItem */ /* begin Layout */ .art-layout-wrapper { position:relative; margin:0 auto 0 auto; } .art-content-layout { display: table; width:100%; table-layout: fixed; border-collapse: collapse; } .art-content-layout-row { display: table-row; } .art-layout-cell { display: table-cell; vertical-align: top; } /* end Layout */ /* begin Box, Block, VMenuBlock */ .art-vmenublock { max-width:940px; margin: 14px; } .art-vmenublock-body { padding:8px; min-width:6px; min-height:6px; } .art-vmenublock:before, .art-vmenublock:after { content: url('../images/vmenublock_t.png'); font-size: 0; background-image: url('../images/vmenublock_b.png'); } .art-vmenublock:after{ clip:rect(auto, auto, auto, 929px); } .art-vmenublock:before,.art-vmenublock-body:before{ right:11px; } .art-vmenublock-body:after{ width: 11px; top:11px; bottom:11px; background-image:url('../images/vmenublock.png'); } .art-vmenublock-body:before{ top:11px; bottom:11px; background-image:url('../images/vmenublock.png'); } /* end Box, Block, VMenuBlock */ /* begin BlockHeader, VMenuBlockHeader */ .art-vmenublockheader { margin-bottom: 0; min-height: 36px; line-height:36px; } .art-vmenublockheader .t { min-height: 36px; line-height:36px; color: #2D3A3E; font-style: normal; font-weight: normal; font-size: 16px; margin:0; padding: 0 10px 0 5px; white-space: nowrap; } .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover { color: #2D3A3E; font-style: normal; font-weight: normal; font-size: 16px; } /* end BlockHeader, VMenuBlockHeader */ /* begin Box, Box, VMenuBlockContent */ .art-vmenublockcontent { max-width:940px; } .art-vmenublockcontent-body { padding:0; } /* end Box, Box, VMenuBlockContent */ /* begin VMenu */ ul.art-vmenu, ul.art-vmenu ul { list-style: none; display: block; } ul.art-vmenu, ul.art-vmenu li { display: block; margin: 0; padding: 0; width: auto; line-height: 0; } ul.art-vmenu { margin-top: 0; margin-bottom: 1px; } ul.art-vmenu ul { display: none; margin: 0; padding: 0; position:relative; margin-left: 0; margin-right: 0; } ul.art-vmenu ul.active { display: block; } /* images in menu items */ ul.art-vmenu img.art-menu-image, ul.art-vmenu img.art-menu-image-left { vertical-align: middle; margin-right: 5px; } ul.art-vmenu img.art-menu-image-right { vertical-align: middle; margin-left: 5px; } /* end VMenu */ /* begin VMenuItem */ ul.art-vmenu a { display: block; cursor: pointer; z-index:0; text-decoration: none; font-family: Arial, Helvetica, Sans-Serif; font-size: 14px; margin-left:0; margin-right:0; position:relative; } ul.art-vmenu li{ position:relative; } ul.art-vmenu>li>a { color: #D3DCDF; padding: 0 11px 0 11px; height: 26px; line-height: 26px; white-space: nowrap; } ul.art-vmenu>li>a.active { color: #FFFFFF; } ul.art-vmenu a:hover, ul.art-vmenu a.active:hover { color: #F2F2D4; } ul.art-vmenu>li>a:before, ul.art-vmenu>li>a:after { position: absolute; display: block; content: ' '; z-index:-1; background-image: url('../images/vmenuitem.png'); top:0; height:26px; } ul.art-vmenu>li>a:before{ left: 0; right: 3px; background-position: top left; } ul.art-vmenu>li>a:after{ width: 3px; right: 0; background-position: top right; } ul.art-vmenu>li>a.active:before { background-position: bottom left; } ul.art-vmenu>li>a.active:after { background-position: bottom right; } ul.art-vmenu>li>a:hover { background-color: transparent; } ul.art-vmenu>li>a:hover:before { background-position: center left; } ul.art-vmenu>li>a:hover:after { background-position: center right; } ul.art-vmenu>li{ margin-top:0; } ul.art-vmenu>li>ul{ margin-top:0; padding-bottom: 0; } ul.art-vmenu>li:first-child{ margin-top:0; } /* end VMenuItem */ /* begin VMenuSubItem */ ul.art-vmenu ul li{ margin: 0; padding: 0; } ul.art-vmenu li li, ul.art-vmenu li li a { position:relative; } ul.art-vmenu ul a { display: block; position:relative; white-space: nowrap; height: 24px; overflow: visible; background-image: url('../images/vsubitem.png'); background-repeat: repeat-x; background-position: top left; padding:0; padding-left:18px; padding-right:0; line-height: 24px; color: #D3DCDF; font-size: 13px; margin-left: 0; margin-right: 0; } ul.art-vmenu ul a.active{ background-position: bottom left; } ul.art-vmenu ul a:hover{ background-position: center left; line-height: 24px; color: #D3DCDF; font-size: 13px; margin-left: 0; margin-right: 0; } ul.art-vmenu ul li li a:hover, ul.art-vmenu ul li li a:hover.active{ background-position: left center; } ul.art-vmenu ul a:after { display: block; position:absolute; top:9px; content:' '; width: 3px; height: 5px; overflow: visible; background-image: url('../images/vsubitemicon.png'); background-position: top left; background-repeat: no-repeat; left: 10px; } ul.art-vmenu ul a:hover:after{ background-position: center left; } ul.art-vmenu ul a.active:hover:after{ background-position: center left; } ul.art-vmenu ul a.active:after{ background-position: bottom left; } ul.art-vmenu ul a:link, ul.art-vmenu ul a:visited, ul.art-vmenu ul a:active { line-height: 24px; color: #D3DCDF; font-size: 13px; margin-left: 0; margin-right: 0; } ul.art-vmenu>li>ul>li:first-child{ padding-top: 0; margin-top:0; } ul.art-vmenu li li{ position:relative; margin-top:0; } ul.art-vmenu ul ul a:after{ left:20px; } ul.art-vmenu ul ul ul a:after{ left:30px; } ul.art-vmenu ul ul ul ul a:after{ left:40px; } ul.art-vmenu ul ul ul ul ul a:after{ left:50px; } ul.art-vmenu ul ul a{ padding-left:28px; } ul.art-vmenu ul ul ul a{ padding-left:38px; } ul.art-vmenu ul ul ul ul a{ padding-left:48px; } ul.art-vmenu ul ul ul ul ul a{ padding-left:58px; } ul.art-vmenu ul li a.active { color: #FFFFFF; } ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a:hover.active { color: #F2F2D4; } ul.art-vmenu li li a { border: 1px solid transparent; border-style: none solid; border-width: 0 1px; margin-top: 1px; margin-bottom: 1px; border-color: #3D6266; } ul.art-vmenu li li a.active:hover { border-color: #3D6266; } ul.art-vmenu li li a span.border-top, ul.art-vmenu li li a span.border-bottom { display: block; position: absolute; content: ' '; left: -1px; right: -1px; height: 1px; background-color: transparent; z-index: -1; } ul.art-vmenu li li a span.border-top { top: -1px; background-color: #3D6266; } ul.art-vmenu li li a span.border-bottom { bottom: -1px; background-color: #3D6266; } ul.art-vmenu li li a.active:hover span.border-top, ul.art-vmenu li li a.active:hover span.border-bottom { background-color: transparent; } ul.art-vmenu li li a.active:hover span.border-top, ul.art-vmenu li li a.active:hover span.border-bottom { background-color: #3D6266; } ul.art-vmenu li li a.active { border-color: #989886; z-index: 1; } ul.art-vmenu li li a.active span.border-top, ul.art-vmenu li li a.active span.border-bottom { background-color: #989886; z-index: 1; } ul.art-vmenu li li a:hover { border-color: #3B5F63 !important; z-index: 2; } ul.art-vmenu li li a:hover span.border-top, ul.art-vmenu li li a:hover span.border-bottom { background-color: #3B5F63 !important; z-index: 2; } /* end VMenuSubItem */ /* begin Box, Block */ .art-block { max-width:940px; margin: 14px; } .art-block-body { padding:10px; } .art-block:before, .art-block:after { content: url('../images/block_t.png'); font-size: 0; background-image: url('../images/block_b.png'); } .art-block:after{ clip:rect(auto, auto, auto, 930px); } .art-block:before,.art-block-body:before{ right:10px; } .art-block-body:after{ width: 10px; top:10px; bottom:10px; background-image:url('../images/block.png'); } .art-block-body:before{ top:10px; bottom:10px; background-image:url('../images/block.png'); } div.art-block img { /* WARNING do NOT collapse this to 'border' - inheritance! */ border-width: 0; margin: 0; } /* end Box, Block */ /* begin BlockHeader */ .art-blockheader { margin-bottom: 2px; min-height: 40px; line-height:40px; } .art-blockheader .t { min-height: 40px; line-height:40px; color: #2D3A3E; font-style: normal; font-weight: normal; font-size: 16px; text-align: center; margin:0; padding: 0 10px 0 5px; white-space: nowrap; } .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover { color: #2D3A3E; font-style: normal; font-weight: normal; font-size: 16px; text-align: center; } /* end BlockHeader */ /* begin Box, BlockContent */ .art-blockcontent { max-width:940px; } .art-blockcontent-body { padding:7px; color: #123436; font-family: Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal; font-size: 14px; } .art-blockcontent-body table, .art-blockcontent-body li, .art-blockcontent-body a, .art-blockcontent-body a:link, .art-blockcontent-body a:visited, .art-blockcontent-body a:hover { color: #123436; font-family: Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal; font-size: 14px; } .art-blockcontent-body p { margin: 7px 0 9px; } .art-blockcontent-body a, .art-blockcontent-body a:link { color: #000000; text-decoration: none; } .art-blockcontent-body a:visited, .art-blockcontent-body a.visited { color: #000000; text-decoration: none; } .art-blockcontent-body a:hover, .art-blockcontent-body a.hover { color: #000000; font-style: normal; font-weight: bold; } .art-blockcontent-body ul li { line-height: 100%; color: #152C32; margin: 7px 0 8px; padding: 0 0 0 9px; background-image: url('../images/blockcontentbullets.png'); background-repeat: no-repeat; background-position: top left; } /* end Box, BlockContent */ /* begin Button */ span.art-button-wrapper>a.art-button, span.art-button-wrapper>a.art-button:link, span.art-button-wrapper>input.art-button, span.art-button-wrapper>button.art-button { text-decoration: none; font-family: Arial, Helvetica, Sans-Serif; font-size: 14px; position:relative; top:0; display: inline-block; vertical-align: middle; white-space: nowrap; text-align: center; color: #181F21 !important; width: auto; outline: none; border: none; background: none; line-height: 19px; height: 19px; margin: 0 !important; padding: 0 6px !important; overflow: visible; cursor: pointer; text-indent: 0; } .art-button img, span.art-button-wrapper img { margin: 0; vertical-align: middle; } span.art-button-wrapper { vertical-align: middle; display: inline-block; position: relative; height: 19px; overflow: hidden; white-space: nowrap; text-indent: 0; width: auto; max-width:940px; margin: 0; padding: 0; z-index: 0; } .firefox2 span.art-button-wrapper { display: block; float: left; } input, select, textarea { vertical-align: middle; font-family: Arial, Helvetica, Sans-Serif; font-size: 14px; } div.art-block select { width:96%; } span.art-button-wrapper.hover>.art-button, span.art-button-wrapper.hover>a.art-button:link { color: #000000 !important; text-decoration: none !important; } span.art-button-wrapper.active>.art-button, span.art-button-wrapper.active>a.art-button:link { color: #0D2526 !important; } span.art-button-wrapper>span.art-button-l, span.art-button-wrapper>span.art-button-r { display: block; position: absolute; top: 0; bottom: 0; margin: 0; padding: 0; background-image: url('../images/button.png'); background-repeat: no-repeat; } span.art-button-wrapper>span.art-button-l { left: 0; right: 7px; background-position: top left; } span.art-button-wrapper>span.art-button-r { width: 7px; right: 0; background-position: top right; } span.art-button-wrapper.hover>span.art-button-l { background-position: center left; } span.art-button-wrapper.hover>span.art-button-r { background-position: center right; } span.art-button-wrapper.active>span.art-button-l { background-position: bottom left; } span.art-button-wrapper.active>span.art-button-r { background-position: bottom right; } span.art-button-wrapper input { float: none !important; } /* end Button */ /* begin Box, Post */ .art-post { max-width:940px; margin: 14px; } .art-post-body { padding:26px; } .art-post:before, .art-post:after { content: url('../images/post_t.png'); font-size: 0; background-image: url('../images/post_b.png'); } .art-post:after{ clip:rect(auto, auto, auto, 929px); } .art-post:before,.art-post-body:before{ right:11px; } .art-post-body:after{ width: 11px; top:11px; bottom:11px; background-image:url('../images/post.png'); } .art-post-body:before{ top:11px; bottom:11px; background-image:url('../images/post.png'); } a img { border: 0; } .art-article img, img.art-article, .art-block img, .art-footer img { border-color: #53C2C6; border-style: solid; border-width: 0; margin: 15px 15px 15px 15px; } .art-metadata-icons img { border: none; vertical-align: middle; margin: 2px; } .art-article table, table.art-article { border-collapse: collapse; margin: 1px; } .art-post .art-content-layout-br { height: 0; } .art-article th, .art-article td { padding: 2px; border: solid 1px #8CA5AB; vertical-align: top; text-align: left; } .art-article th { text-align: center; vertical-align: middle; padding: 7px; } pre { overflow: auto; padding: 0.1em; } .art-article { border-collapse: separate; }/* end Box, Post */ /* begin PostHeaderIcon */ .art-postheader { color: #405359; margin: 11px 0 13px; line-height: 1em; font-style: normal; font-weight: normal; } .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a.visited, .art-postheader a:hover, .art-postheader a.hovered { font-style: normal; font-weight: normal; } .art-postheader a, .art-postheader a:link { text-align: left; text-decoration: underline; color: #27515D; } .art-postheader a:visited, .art-postheader a.visited { color: #264E5A; } .art-postheader a:hover, .art-postheader a.hovered { text-decoration: none; color: #D50101; } /* end PostHeaderIcon */ /* begin PostIcons, PostHeaderIcons */ .art-postheadericons, .art-postheadericons a, .art-postheadericons a:link, .art-postheadericons a:visited, .art-postheadericons a:hover { font-family: Arial, Helvetica, Sans-Serif; font-size: 14px; color: #2D3A3E; } .art-postheadericons { padding: 1px; } .art-postheadericons a, .art-postheadericons a:link { text-decoration: none; color: #42565C; } .art-postheadericons a:visited, .art-postheadericons a.visited { font-style: normal; font-weight: normal; color: #42565C; } .art-postheadericons a:hover, .art-postheadericons a.hover { font-style: normal; font-weight: bold; text-decoration: underline; color: #0F1F24; } /* end PostIcons, PostHeaderIcons */ /* begin PostIcon, PostDateIcon */ span.art-postdateicon { display:inline-block; line-height: 1em; } span.art-postdateicon:after { content: '.'; width: 1px; visibility: hidden; display: inline-block; }/* end PostIcon, PostDateIcon */ /* begin PostIcon, PostAuthorIcon */ span.art-postauthoricon { display:inline-block; line-height: 1em; } span.art-postauthoricon:after { content: '.'; width: 1px; visibility: hidden; display: inline-block; }/* end PostIcon, PostAuthorIcon */ /* begin PostIcon, PostPdfIcon */ span.art-postpdficon { background:url('../images/postpdficon.png') no-repeat left 0.5em; padding-top:8px; margin-top:-8px; padding-left:22px; min-height:16px; display:inline-block; line-height: 1em; } span.art-postpdficon:after { content: '.'; width: 1px; visibility: hidden; display: inline-block; }/* end PostIcon, PostPdfIcon */ /* begin PostIcon, PostPrintIcon */ span.art-postprinticon { background:url('../images/postprinticon.png') no-repeat left 0.5em; padding-top:6px; margin-top:-6px; padding-left:21px; min-height:13px; display:inline-block; line-height: 1em; } span.art-postprinticon:after { content: '.'; width: 1px; visibility: hidden; display: inline-block; }/* end PostIcon, PostPrintIcon */ /* begin PostIcon, PostEmailIcon */ span.art-postemailicon { background:url('../images/postemailicon.png') no-repeat left 0.5em; padding-top:8px; margin-top:-8px; padding-left:22px; min-height:16px; display:inline-block; line-height: 1em; } span.art-postemailicon:after { content: '.'; width: 1px; visibility: hidden; display: inline-block; }/* end PostIcon, PostEmailIcon */ /* begin PostIcon, PostEditIcon */ span.art-postediticon { background:url('../images/postediticon.png') no-repeat left 0.5em; padding-top:7px; margin-top:-7px; padding-left:20px; min-height:14px; display:inline-block; line-height: 1em; } span.art-postediticon:after { content: '.'; width: 1px; visibility: hidden; display: inline-block; }/* end PostIcon, PostEditIcon */ /* begin PostBullets */ .art-postcontent ol, .art-postcontent ul { margin: 1em 0 1em 2em; padding: 0; } .art-postcontent li { color: #0F1315; padding: 0; } .art-postcontent li ol, .art-post li ul { margin: 0.5em 0 0.5em 2em; padding: 0; } /* end PostBullets */ /* begin PostQuote */ blockquote, blockquote a, .art-postcontent blockquote a, .art-blockcontent blockquote a, .art-footer blockquote a, blockquote a:link, .art-postcontent blockquote a:link, .art-blockcontent blockquote a:link, .art-footer blockquote a:link, blockquote a:visited, .art-postcontent blockquote a:visited, .art-blockcontent blockquote a:visited, .art-footer blockquote a:visited, blockquote a:hover, .art-postcontent blockquote a:hover, .art-blockcontent blockquote a:hover, .art-footer blockquote a:hover { color: #405359; font-style: italic; font-weight: normal; text-align: left; } /* Override native 'p' margins*/ blockquote p, .art-postcontent blockquote p, .art-blockcontent blockquote p, .art-footer blockquote p { margin: 0; margin: 2px 0 2px 15px; } blockquote { margin: 10px; padding: 0; background-color: #CDD8DB; margin-left: 50px; padding-left: 24px; background-image: url('../images/postquote.png'); background-position: left top; background-repeat: no-repeat; /* makes block not to align behind the image if they are in the same line */ overflow: auto; clear:both; } /* end PostQuote */ /* begin PostIcons, PostFooterIcons */ .art-postfootericons, .art-postfootericons a, .art-postfootericons a:link, .art-postfootericons a:visited, .art-postfootericons a:hover { font-family: Arial, Helvetica, Sans-Serif; color: #2D3A3E; } .art-postfootericons { padding: 1px; } .art-postfootericons a, .art-postfootericons a:link { text-decoration: none; color: #42565C; } .art-postfootericons a:visited, .art-postfootericons a.visited { color: #42565C; } .art-postfootericons a:hover, .art-postfootericons a.hover { color: #0F1F24; } /* end PostIcons, PostFooterIcons */ /* begin PostIcon, PostCategoryIcon */ span.art-postcategoryicon { display:inline-block; line-height: 1em; } span.art-postcategoryicon:after { content: '.'; width: 1px; visibility: hidden; display: inline-block; }/* end PostIcon, PostCategoryIcon */ /* begin Footer */ .art-footer { position: relative; margin-top:0; margin-bottom:0; width: 100%; } .art-footer-body { position:relative; padding: 5px; color: #C1CED2; font-size: 12px; } .art-footer-body ul li { font-size: 11px; color: #C9ECED; } .art-footer-body:before { position: absolute; content:' '; z-index:-2; left:0; right:0; top:0; bottom:50px; background-image: url('../images/footer.png'); background-position:bottom left; } .art-footer:before, .art-footer:after { position: absolute; content:' '; z-index:-2; bottom:0; height:50px; background-image: url('../images/footer_b.png'); } .art-footer:before { left:0; right:20px; background-position: bottom left; } .art-footer:after { right:0; width:20px; background-position: bottom right; } .art-footer-body .art-rss-tag-icon { position: absolute; left: 6px; bottom:6px; z-index:1; } .art-rss-tag-icon { display: block; background-image: url('../images/livemarks.png'); background-repeat: no-repeat; height: 32px; cursor: default; background-position: left; padding-left: 32px; width: auto; line-height: 32px; font-size: 12px; } .art-footer-text p { padding:0; margin:0; text-align: center; } .art-footer-body a, .art-footer-body a:link, .art-footer-body a:visited, .art-footer-body a:hover, .art-footer-body td, .art-footer-body th, .art-footer-body caption { color: #C1CED2; font-size: 12px; } .art-footer-text { min-height: 38px; padding-left: 10px; padding-right: 10px; text-align: center; } .art-footer-body a, .art-footer-body a:link { color: #C1CED2; text-decoration: underline; } .art-footer-body a:visited { color: #C1CED2; } .art-footer-body a:hover { color: #F2F2D4; font-style: normal; font-weight: bold; text-decoration: none; } div.art-footer img { /* WARNING do NOT collapse this to 'border' - inheritance! */ border-width: 0; margin: 0; } .art-rss-tag-icon span { padding-left: .5em; } /* end Footer */ /* begin PageFooter */ .art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover { font-family: Arial; font-size: 10px; letter-spacing: normal; word-spacing: normal; font-style: normal; font-weight: normal; text-decoration: underline; color: #C9ECED; } .art-page-footer { position: relative; z-index: 10; padding: 1em; text-align: center; text-decoration: none; color: #C1CED2; } /* end PageFooter */ /* begin LayoutCell, sidebar1 */ .art-content-layout .art-sidebar1 { width: 240px; } /* end LayoutCell, sidebar1 */ /* category items */ .category ul.actions, .category ul.actions li, .category ul.actions li img { display: inline; margin: 0; padding: 0; } .category ul.actions li { background: none; } /* categories list container */ .category-list .category-desc .image-left { float: left; margin: 0 5px 5px 0; } .category-list .category-desc .image-right { float: left; margin: 0 0 5px 5px; } .category-list fieldset.filters { border: none; } .category-list fieldset.filters .display-limit { text-align: right; margin-right: .5em; } .category-list table.category { width: 100%; } .category-list table.category thead th a img { border: none; padding-left: .3em; } /* categories list items */ .categories-list ul { list-style-type: none; margin: 0 0 0 20px; padding: 0; } .categories-list ul li { background-image: none; padding: 5px; clear: both; } .categories-list ul ul { margin-left: 10px; } dl.newsfeed-count dl, dl.weblink-count dl, dl.article-count dl { clear: both; } dl.newsfeed-count dt, dl.newsfeed-count dd, dl.weblink-count dt, dl.weblink-count dd, dl.article-count dt, dl.article-count dd { display: inline; } dl.newsfeed-count dd, dl.weblink-count dd, dl.article-count dd { padding: 0; margin: 0; } /* category subcategories */ .cat-children ul { list-style-type: none; margin: 0; padding: 0; } .cat-children ul li { background-image: none; padding: 5px; clear: both; } /* contact */ .contact-email div { padding: 3px 0; } .contact-email label { width: 15em; float: left; } /* articles archive items */ #archive-items { list-style-type: none; margin: 10px 0; padding: 0; } #archive-items li { list-style-type: none; background-image: none; margin: 10px 0; padding: 0; } /* article */ ul.pagenav { margin: 0; padding: 0; list-style-type: none; text-align: center; } ul.pagenav li { display: inline-block; padding: 0 5px; text-align: center; background-image: none; } /* blog layout */ .cols-2 .column-1, .cols-2 .column-2, .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3 { float: left; clear: right; } .cols-2 .column-1 { width: 50%; } .cols-2 .column-2 { width: 50%; } .cols-3 .column-1 { width: 33%; } .cols-3 .column-2 { width: 33%; } .cols-3 .column-3 { width: 34%; } .row-separator { clear: both; float: none; font-size: 1px; display: block; } /* article info */ .article-info { margin: 10px 0; } .article-info .article-info-term { display: none; } .article-info dd { background-image: none; margin: 0; padding: 0; line-height: 120%; } /* login */ .login .login-description img { float: left; margin: 0 5px 5px 0; } .login fieldset { clear: both; border: 0; } .login .login-fields label { float: left; width: 15em; display: block; } /* search form */ #searchForm .phrases-box label { display: block; line-height: 1.6em; margin-left: 2em; } #searchForm .phrases-box input { display: block; float: left; width: auto; border: none; line-height: 1.6em; margin: 0; } #searchForm .only label { display: block; line-height: 1.6em; margin-left: 2em; } #searchForm .only input { display: block; float: left; width: auto; border: none; line-height: 1.6em; margin: 0; } #searchForm .form-limit { margin-top: .5em; } /* pagination */ .pagination { margin: 0; padding: 0; text-align: center; } .pagination .counter { text-align: center; } .pagination ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } .pagination ul li { display: inline; padding: 2px 5px; text-align: left; margin: 0 2px; background-image: none; } .pagination ul li.pagination-start, .pagination ul li.pagination-start span, .pagination ul li.pagination-end, .pagination ul li.pagination-end span { padding: 0; } /* system messages */ #system-message { margin-bottom: 20px; } #system-message dd.message ul { background: #c3d2e5 url(../../system/images/notice-info.png) 4px center no-repeat; border-top: 3px solid #de7a7b; border-bottom: 3px solid #de7a7b; margin: 0; padding-left: 40px; text-indent: 0; } #system-message dd.error ul { color: #c00; background: #e6c0c0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #de7a7b; border-bottom: 3px solid #de7a7b; margin: 0; padding-left: 40px; text-indent: 0; } #system-message dd.notice ul { color: #c00; background: #efe7b8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #f0dc7e; border-bottom: 3px solid #f0dc7e; margin: 0; padding-left: 40px; text-indent: 0; } #system-message ul li { background-image: none; padding-left: 0; } /* icon tooltip */ .tip { border: solid 1px #333; background: #ffffcc; padding: 3px; text-align: left; } .tip-title { font-weight: bold; } /* login module */ #login-form fieldset { border: none; margin: 0; padding: 0; } #login-form p { margin: 0.5em 0 0 0; } #login-form #form-login-username label, #login-form #form-login-password label { display: block; } #login-form #form-login-remember input { margin: 0; padding: 0; vertical-align: bottom; position: relative; top: -1px; } #login-form #modlgn-username, #login-form #modlgn-passwd { width: 95%; margin: 0; padding: 0; } #login-form ul { list-style-type: none; margin: 0; padding: 0; } #login-form ul li { background-image: none; padding: 0; } /* pagebreak content plugin */ #article-index { float: right; margin: .5em; padding: .5em; } .pagenavcounter { margin: .5em 0; padding: .5em 0; font-weight: bold; } /* com_users forms: registration, profile, edit profile, remind, reset */ .registration fieldset, .profile-edit fieldset, .profile fieldset, #user-registration fieldset { margin: .5em 0; padding: 1em; } .registration fieldset dt, .profile-edit fieldset dt, .profile fieldset dt, #user-registration fieldset dt { float: left; width: 16em; padding: .2em 0; } .registration fieldset dd, .profile-edit fieldset dd, .profile fieldset dd, #user-registration fieldset dd { padding: .2em 0; margin-left: 16em; } .registration fieldset dt, .profile-edit fieldset dt, #user-registration fieldset dt, .registration fieldset dd, .profile-edit fieldset dd, #user-registration fieldset dd { display: block; line-height: 1.5em; min-height: 1.5em; } .registration fieldset legend, .profile-edit fieldset legend, .profile fieldset legend { font-weight: bold; } /* mod_stats */ .stats-module dt { float: left; width: 10em; padding: .2em 0; font-weight: bold; display: block; line-height: 1.5em; min-height: 1.5em; } .stats-module dd { padding: .2em 0; margin-left: 10em; display: block; line-height: 1.5em; min-height: 1.5em; }
Utolsó szerkesztés: 11 éve 9 hónapja tibor16 által.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
11 éve 9 hónapja #731 Írta: coilevi
coilevi válaszolt a következő témában: Válasz: egy sablon, több oldal - más-más háttérrel

tibor16 írta: És akkor elérkeztünk a "Húszmilliós kérdéshez" - mi az amit javasolsz?

Az általam linkelt JED-es kategóriából bármelyik olyan, 1.7/2.5-tel kompatibilis modult, amelyiknél azt írják, hogy a <head> részbe illeszti be a rajta keresztül megadott kódot.
Custom HTML Advanced: "Add custom CSS code into HTML header for pages where the module is enabled."
Custom HTML ( JS/CSS - > head): "Allows you to insert css and js in the head."
JXTC HTML (documentation): "Custom HTML or CSS or Javascript modes to embed the code in the head tag of the website."
A következő felhasználók mondtak köszönetet: tibor16

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
11 éve 9 hónapja - 11 éve 9 hónapja #732 Írta: tibor16
tibor16 válaszolt a következő témában: Válasz: egy sablon, több oldal - más-más háttérrel
Ezzel csak annyi a problémám, - kipróbáltam korábban ugyanis, hogy amit egy ilyen típusú admin felületbe beírok

Példa:
Code:
<link href="templates/02lapok/css/1-styl.css" rel="stylesheet" type="text/css" /> <link href="templates/02lapok/css/2-styl.css" rel="stylesheet" type="text/css" /> <link href="templates/02lapok/css/3-styl.css" rel="stylesheet" type="text/css" />
mind a 3 fájl a tartalmában a .art-sheet-body:after Class-t tartalmazza csak proba1.jpg, proba2.jpg, és proba3.jpg különbséggel.
Code:
Link 1: .art-sheet-body:after{ background-image:url('../images/proba1.jpg'); } Link 2: .art-sheet-body:after{ background-image:url('../images/proba2.jpg'); } Link 3: .art-sheet-body:after{ background-image:url('../images/proba3.jpg'); }
Akkor mind a 3 link szerepelni fog az összes a menükezelőben kijelölt oldalon. A tartalmuk egy class, 3 féle kép. A Class név azonos kell, hogy legyen. Akkor - mitől fogja tudni az adott oldal, melyik képet szeretném szerepeltetni?

Vagy, rosszul gondolom, és valahogy azt is el lehet intézni, hogy más-más css fájl linkje kerüljön más-más cikkekbe...
Ezt alighanem nem értem - ha pl a Custom HTML Advanced menüjébe beírok 3 féle css fájl elérési linkjét, - az minden olyan lapra beíródik - mind a 3 - ahol ezt a modult engedélyeztem. - nem?
Vagy van lehetőség, hogy irányítva kerüljön az egyik link ide, a másik pedig oda? - csak nem vágom, hogyan? Mert akkor meg van oldva a probléma...

Mivel sem a script íráshoz, sem a Joomla szerkezetéhez nem értek, azért kérlek, nézz rá légy szíves erre a lehetőségre, amit Adding JavaScript and CSS to the page találtam.
Én nem értek hozzá, de mintha a lap alján tárgyalná annak a lehetőségét, hogy valamilyen módon, a cikkben lehessen kód segítségével, külső css fájlt adni az aktuálais weboldal HEAD részéhez...

Utólag jutott eszembe: a 2 dolgot nem lehet kombinálni?
pl a Custom HTML Advanced -be, nem lehet olyan kódot felvenni, amely változókkal van megírva, és ezeket a változókat magában a cikkbe lehet beírni? Gondolok itt az adtt css fájl nevére...
Ehhez aztán én végképp nem értek... úgyhogy, ha ez a megoldás, akkor a "sorvezetőt" is mellékeld légy szíves, (pontról pontra kell leírni nekem mindent, hogy csak másolnom kelljen, mert nem fogom tudni megfejteni...)
Utolsó szerkesztés: 11 éve 9 hónapja tibor16 által.

Jelentkezz be, hogy te is részt vehess beszélgetésben!