Nový Marigoldí design

Že Nonameho design Marigolda byl dočasný, bylo veřejné tajemství. Veřejným tajemstvím také bylo, že dočasnost se může protáhnout na řadu let. Takže jsem na tom trochu zapracoval a za pomoci Japana a dalších CSS dobrodinců dopracoval rozpracovaný design určený pro nasazení na Marigoldovi. Čtyři měsíce po přechodu na nový systém bylo na čase.

Drobné zádrhele jsou tu stále. Budu je časem ladit, momentálně mne nejvíce vadí ten zub v logu a hlavičce stránky, který vznikl přidáním naší „hyperportálové lišty“. Kdybyste někdo věděli, co s tím, dejte vědět, metoda pokus omyl zatím nezabírá. Domníval jsem se, že se mi podaří pomocí CSS posunout ten obrázek pozadí trochu dolů, aniž bych ho musel editovat v editoru, ale asi ne. Zkouším konstrukci zhruba v tomto stylu, jenže ono to nějak nefunguje:

body {
margin: 0;
padding: 0;
background: url('https://www.marigold.cz/wp-content/themes/marigold/css/pozadi.png') repeat-x left;
background-position: 20px top;
font-family: 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
text-align: left;
font-size: small;
font-weight: normal;
}

Jen tak na okraj. Vím, že to není nejhezčí webový design. Ale udělal jsem si ho já, což při mém pracovním vytížení a praktickém povědomí o CSS hraničí se zázrakem 🙂

Jak se vám líbil článek?
1 Star2 Stars3 Stars4 Stars5 Stars (hlasováno 12×, průměr: 4,17)
Loading...

38 komentářů

  • Patricku, rozhodně si nemyslím, že je tenhle design ošklivý a věřím, že tu drobnou chybku jistě vychytáš. A už se těším, až se s Komunikátory také přesunu na nový RS a budu mít nový design .. BTW nechceš mi udělat nový design? .. d8-D

  • No moc se me to nelibi a mozna to v FF 1.5 na linuxu neni optimalni 🙂

  • Tož pěkné, akorát v IE7 jsou komentáře až pod pravým sloupcem. To pozadí bych zkusil posunout takhle:

    background-position: 0 20px;

  • Ještě tě čeká pár dnů vychytávání chybek, podívej se na Marigolda ve FF 2 (možná stačí i 1.5), pěkné rozházené 😉

  • body {background: url(‚https://www.marigold.cz/wp-content/themes/marigold/css/pozadi.png‘) 0 18px repeat-x;}

  • background: url(cesta/soubor.png) repeat-x 0 158px;
    – 158px = jakekoliv cislo coti to odsadi
    – jinak mi prijde, ze web je takovy naky cely rostelovany 😉 a trosku by to chtelo zoptimalizovat CSS 😉

  • Opera 9.20 – horní logo je posunuté dolů, komentáře ulítávají doleva.. Možná to chtělo nasadit až finální verzi 😉

  • „zub v logu a hlavičce stránky, který vznikl přidáním naší “hyperportálové lišty”“ — to je na použití position:relative (třeba) na body a na position:absolute; top:0; left:0 pro tu „hyperportálovou lištu“.. Pak už logo nebude ulítávat dolů. Prostě mírně jiné CSS 🙂

  • Chtel jsem napsat, ze je to bohuzel ve FF nejake rozsypane.
    Ale zjistil jsem, ze v IE se mi to zobrazuje jeste vice rozsypane.

    ALespon doufam, ze to nebyl zamer. 🙂
    Levy sloupec, v pravo od nej text clanku.
    Kdyz levy sloupec konci, pokracuje rozsireny blok textu clanku. A po chvili zacina v pravo pravy sloupec. A zase to orizne text zprava.

    Predpokladam, ze prostredni sloupec mel byt celistvy a pravy a levy sloupce s navigacnim menu mely but oba jiz odvrchu.

    Ted odesilaci formular prispevku je take rozhozeny. Blok pro text je napravo, zatimco ostatni pole jsou zarovnane doleva.

  • tos měl patricku říct, tohle jsou všechno drobnosti. Jestli budeš chtít, takt ti ty chybky opravím, jen ti do toho nechci sahat teď, když na tom děláš ty.

    Pár dotazů – budeš chtít abych tu nasadil zas ty threaded komentáře? Chceš opravit ten archiv, aby to byla hezká tabulka jak předtím? A potom jeden náročnější – někdy bych rád provedl update na aktuální wordpress, než se začne zneužívat těch security děr, které od doby nasazení tady nastaly.

  • Lahvoni, to není chyba, to je umění 🙂

    Víš, co dá práci přemluvit WordPress, aby pravý sloupec hodil až za prvním článkem?

    No, práci 🙂 Chce to najít v dokumentaci jednu podmínku 😀

  • ježiš marja pano patricku, jak jsi tohle mohl udělat 😉 vždyť ty voláš kvůli tomuhle dvakrát query, nejdřív jen pro první článek, pak pro prvních deset a přiom testuješ, jestli to není ten první. Proboha 😉
    Jestli nevadí, tak ti to upravím. Na tohle přeci stačí jedenk query a provést něco jen když jsi v prvním kole (tj. stačí místo while použít for n=0…) a pak testovat if (n==0)

  • Noname: Tenhle pocit znám. A dokonale jste mě rozhodili, dělal jsem si v klidu otázky z ČJ a teď tohle… Jdu programovat. :]

  • To světle šedivé písmo je v poslední době nějaká nemoc? Sorry, ale fakt se to čte blbě. Navině samozřejmě může částečně být i moje LCD, ale kvůli Marigoldu si opravdu nebudu kupovat nové.

  • re marvin – souhlas, snad mě patrick nezbije, ale o pár odstínů jsem to ztmavil (kdyby to patricku vadilo, tak je to
    p {
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1.6em;
    font-size: 100%;
    color: #555; //#707070;
    }

  • ja bych to udelal pomoci Z-indexu to by neslo?! te hyperportalove liste bych dal jen vyssi index aby byla NAD logem marigolda (z-index:1;) a to logo by bylo o potrebny pocet px zasunute pod tuto listu…

    bo logo oriznout, vysledek by byl asi stejny…

  • Sorry, ale hnus…

  • Určitě je nutné to vyladit pro Operu! Takhle to zatím moc nevypadá… Bylo by lepší pustit finální verzi.

  • Sláva staronovému vzhledu.
    To minulé růžovoučké logo bylo fakt provokativní až otřesné.
    Díky za konzervativní změnu k lepšímu.

  • Ted vecer mi to uz pripada hezci. Tak bud na tom Patrick a jeho pripadni pomocnici zapracovali. 🙂
    A nebo je to tim, ze jsem se vratil z hospudky. 🙂

  • tomu rozsypanemu caji rikas design? to jsi se trosku prechvalil. a to jsem te mel doted za rozumneho cloveka. ja CSS taky neumim a neco takovehoto bych asi taky nezvladl, ale taky bych se to neodvazil vypustit do sveta… divy tu skacou na vsecky strany

  • Div by se divy nedivily, když divy divně poskládané jest 🙂
    [Div by se dyvy nedivyly, když dyvy …]

    Čitelné to je, pěkné to je a to je hlavní. Teď už vychytat ty divé divy 🙂
    Usilovně druhým měsícem pracuji na nové verzi našeho portálu (který ma nyní ‚krásných‘ přes 300 chyb u validátorů kódu html w3c) a narazil jsem ještě na zapeklitější problém.

    Už si to nedokážeme jinak vysvětlit, než tak, že webdesign se dnes neoptimalizuje jen na různé prohlížeče, jak jsem se milně domníval doposud, ale i na regiony, resp. okresy 🙂 Všem jede nová verze (veřejně nedostupná, na veřejnost půjde cca za týden až dva) krásně, bez chybek, jen v Pardubickém kraji to hochům v jedné sekci skáče (divy). Testováno na desítkách počítačích v Opeře, FF a IE a všeok, jen pardubický kraj (opět FF, Opera a IE) – opět několik počítačů – prostě ne a ne.

    Webdesignéři to mají dnes holt těžké a já naivně sním již léta o existenci jedinného prohlížeče.. Jsem to ale naivní 🙂

  • v safari to nefacha vubec

  • Patriku moc dobra prace desogn je moc hezky. Ve FF mas posunutou hlavicku o 7px posunutou dolu a komentare odskocene do leva 🙂 To je ale jen CSS a to se da snadno doladit. Jinak je to tu konecne jak na starem marigildu a je to hezky. Prikladam ti nahledy aby lazeni bylo snazsi. http://www.pavelbuben.cz/marigold1.jpg http://www.pavelbuben.cz/marigold2.jpg

    Tak hodne stesti na novem Marigoldu. 🙂

  • Jen nevím, proč byl zveřejněn tento polotovar. Design je vydařený, ale rozsypaný. Kromě hlavičky jsou příšerné komentáře, zarovnané nalevo úplně zcestně od layoutu, první komentář dokonce zůstává v obsahové části a to ani nemluvě o formuláři, kde jedny prvky jsou nalevo a textarea uprostřed.

    Hodně štěstí 🙂

  • Koukám chybek je tu trošku víc – mám FF. Ale to se vychytá a bude to OK. Celkově je to styl střízlivý, což mi vyhovuje – takové mám rád.

  • Pro Martina: zveřejněn byl proto, že jsem neměl žádnou lepší verzi a mně to takhle nijak moc nevadí. jsem radši, když je to tu ve vzhledu, jaký jsem si vybral, než ta neutrální wordpressí šablona. Formuláře upravím, až přijdu na to, jak. nejsem css guru.

  • ono nejenom komentare jsou rozsypany..
    FF2, WXP: http://www.czspeed.net/marigold.JPG

  • no to je teda hnus

  • Mno, ja bych to sedive pismo ztmavil uplne, fakt se to cte blbe.

  • tak už jsem našel chvilku času a to nejhorší jsem tady Patrickovi vyladil. Pište co vám ještě vadí.
    P.S.: zatím na to koukám v Opeře, důležitý je ještě firefox, méně důležitá pak IE7 a IE 6 je mi zcela ukradené

  • Nastavil bych pozadí stránky na bílou.

  • Nazor laika- mne se to libi:-)

  • novy vzhled, ff a linux – vhled me „prijemne“ prekvapil, opravdu se mi to pozdava, hlavne pak zalozky titulka|ucebnice… ten zub nahore sice kazi detail, ale v krajnim pripade orez obrazku pomuze. Mozna me trochu mrzi komentare – proc jsou jenom asi na 40% sirky stranky, kdyz vetsina clanku zde hrave dospeje do rozmeru, kdy text uz neni ohranicen pravym menubarem? A NAPSAT KOMENTAR – pole pro text je nevsedne v pravo a detaily (nick, www) jsou nad nim v levo – proc neni textove pole sirsi? Jinak pekne, ale u Marigolda me zajimaji predevsim clanky, vzhled je take dulezity, ale pro me jaksi na druhem miste 🙂

  • vlevem sloupci se tu objevila kategorie

    ostatni hodinari

    asi to sem nepatri, ale spise do chronomagu

  • Zdravim.

    Mohl bych se zeptat, co je to za moda – sede pismo na bilem – a jeste lepe sedem pozadi? Vsiml jsem si toho trendu na vice webech, ale tady je mi to docela lito, protoze tenhle web asi nezacnu ignorovat, ale nejak to pretrpim ….

    Takze kdybych se mohl primluvit za normalni cerne pismo ….

  • Tohle moc nesouvisi s Marigoldim designem, ale proc kdyz kliknu na „O Marigoldovi“ dostanu se na titulku? Nevypada to na problem na mem prijimaci 🙂 Mozna bych jeste prepsal „Submit Comment“ do cestiny, ale to jsou jenom drobky…