idnes: redesign pre VIP dnes o 13.00!
Tak ako som naznačil, tak som aj urobil. Po klepnutí na EditCSS som trošku deletoval a venoval som sa najmä width
s týmto výsledkom (viď. dovnútra článku). Pre istotu aj screenshot, pre tých, čo nemajú EditCSS na náhľad. Toto CSS môžete použiť v nástrojoch na používateľské štýly priradené konkrétnemu webu.
Dávam im 5 dní, nanajvýš 10…
Tu je kompletné CSS, ja viem, že by to chcelo optimalizáciu na veľkosť, ale kto chce ten to dorobí:
/* Edited with EditCSS */
/**** Imported style sheet sph_2005_7.css ****/
body {
font-family:’Arial CE‘,’Helvetica CE‘,Arial,helvetica,sans-serif;
font-size:83%;
line-height:1.2;
color:#000;
background-color:#fff;
margin:5px 0; padding:0;
}
input, select, td { font-size:76%; }
form { padding:0; margin:0; }
a { color:#EE333E; }
a:hover { color:#F60; }
.h { display:none; }
.fl { float:none; }
.fr { float:none; }
.fc { clear:both; }
.fc0, .fc1, .fc3, .fc5, .fc9, .fc18 { width:100%; clear:both; margin:0; padding:0; }
.fc0 { margin-top:-1px; }
.fc0, .fc1 { font-size:1px; height:1px; }
.fc3 { font-size:3px; height:3px; }
.fc5 { font-size:5px; height:5px; }
.fc9 { font-size:9px; height:9px; }
.fc18 { font-size:18px; height:18px; }
.tal { text-align:left; }
.tac { text-align:center; }
.tar { text-align:right; }
.taj { text-align:justify; }
.nb { border:none; }
.full { width:100%; }
.ml-5 { margin-left:-5px; }
.mb-2 { margin-bottom:-2px; }
.imp { color:#F00; }
.i { font-style:italic; }
.b { font-weight:bold; }
#portal { width:auto; float:left; }
/* logo idnes */
#lidnes { float:left; width:1px; }
#lidnes h1 { margin:0; padding:0; }
#lidnes a {
display:block;
margin:0; padding:0;
width:128px; height:28px;
margin:0; padding:0;
background:url(“) 0 0 no-repeat;
text-decoration:none;
}
#lidnes a span { display:none; }
#lmfdnes { margin:0; padding:0; float:left; width:53px; }
#lmfdnes a {
display:block;
margin:0; padding:0;
width:53px; height:19px;
margin:0; padding:0;
background:url(“) 0 0 no-repeat;
text-decoration:none;
}
#lmfdnes a span { display:none; }
/* spoluprace */
#coop {
float:right;
width:176px;
text-align:right;
font-size:12px;
line-height:16px;
padding-top:8px;
}
#coop .coopt { float:left; text-align:right; width:110px; padding-top:3px; margin-right:3px; }
#coop .coopl { float:left; width:53px; }
/* weby */
#webs { float:none; padding-top:11px; font-size:12px; line-height:16px; color:#000; padding-left:2px; }
#webs a { color:#000; }
#webs a:hover { color:#f60; }
#webs span a { _height:1px; _margin-bottom:-3px; }
#webs span.sport { background:url(“) left bottom no-repeat; }
#webs span.sport a { padding-left:14px; }
#webs span.mobil { background:url(“) left bottom no-repeat; }
#webs span.mobil a { padding-left:13px; }
#webs span.revue { background:url(‚ikony/irevue.gif‘) left bottom no-repeat; }
#webs span.revue a { padding-left:14px; }
#webs span.zdravi { background:url(‚ikony/izdravi.gif‘) left bottom no-repeat; }
#webs span.zdravi a { padding-left:14px; }
#webs span.auto { background:url(‚ikony/iauto.gif‘) left bottom no-repeat; }
#webs span.auto a { padding-left:16px; }
/* linka */
#plink { clear:both; margin:0; padding:0; height:3px; font-size:3px; width:auto; background-color:#244383; }
/* superbleskovka */
#sflash { background-color:yellow; color:#FFF; padding:3px; display:none; }
#sflash a { color:#FFF; text-decoration:none; }
#sflash a:hover { color:#F60; }
#sflash .text { text-transform:uppercase; text-decoration:none; font-size:1.23em; }
#sflash a:hover .text { color:#FFF; }
#sflash a .more { text-decoration:underline; padding-left:0.25em; _height:1px; _margin-bottom:-3px; }
#pbar { width:auto; background-color:#EEE; padding:0; font-size:12px; line-height:1.8; }
#day { display:none; }
#psearch { float:right; width:385px; color:#1F1F1F; padding:3px 0 0; }
#psearch form { padding:0; margin:0; }
#psearch .mb-2 { margin-bottom:-2px; }
#psearch .inp { font-size:0.84em; width:135px; line-height:1.25; }
#ptip { display:none; }
#ptip a { color:#2E4F8E; }
#ptip a:hover { color:#F60; }
#upbar { display:none; }
#upbar span a { color:#000; _height:1px; _margin-bottom:-3px; }
#upbar span a:hover { color:#f60; }
#weather { display:none; }
#weather span a { padding-left:0.5em; }
#upbar span.sethp { background:url(‚f‘) left bottom no-repeat; }
#upbar span.sethp a { padding-left:17px; }
#settings { float:right; text-align:right; width:500px; }
/* LAYOUT */
#page { float:left; padding-left:6px; width:auto; }
#left { float:left; width:60%; margin-right:10px; }
#right { float:left; width:38%; }
/* BOXES */
.lbx { width:auto;; }
.rbx { width:auto; }
.dlbx { width:auto; }
.drbx { width:auto; }
.c { clear:both; width:100%; height:1px; line-height:1px; margin:-1px 0 0 0; padding:0; border:none; display:none; }
.x { position:relative; margin:2em 0 0; font-size:1em; line-height:1.3; }
/* box dot */
.x .dot {
position:absolute;
left:0px;
top:-13px;
border:0px solid #A8BFDD;
width:0;
height:0;
font-size:1px;
background:url(“) 50% 3px no-repeat;
}
/* box header */
.xt { position:absolute; top:-1em; left:0px; z-index:1; }
.xti { font-weight:normal; margin:0; padding:0; font-size:0.84em; line-height:1.3; color:#EE333E; }
.xti a { color:#EE333E; text-decoration:underline; }
.xti a:hover { color:#EE333E; }
.xta { position:absolute; top:-1.3em; right:0px; font-weight:normal; margin:0; padding:0; text-align:right; font-size:0.77em; color:#000; line-height:1.3; }
.xta a { color:#000; }
.xta a:hover { color:#F60; }
/* box body */
.xb { font-size:1em; border:1px solid #EEEEEE; }
.xbi { padding:7px 5px 7px 7px; line-height:1.3; }
.xbi p { padding:0 0 0.5em; margin:0; }
.xei { padding:6px 2px 2px; font-size:0.92em; }
/* box content */
.xb .tit { font-weight:bold; margin:0 0 0.55em; padding:0; font-size:1.07em; line-height:1.37; color:#EE333E; }
.xb .tit a { color:#EE333E; }
.xb .tit a:hover { color:#F60; }
.xb .xbi .time { color:#334487; font-size:0.77em; margin-bottom:0.2em; }
.xb .xbi .perex { }
/* box ul+li */
.xbi ul { padding:0; margin:0; clear:both; list-style:none; }
.xbi ul li {
font-size:1em;
line-height:1.3;
margin:0 !important; padding:0 0 0.6em 15px !important;
background:url(f‘) left top no-repeat !important;
list-style:none !important;
margin:0 0 0.6em 15px; padding:0;
background:transparent;
list-style:square outside url(‚http://g.idnes.cz/o/xhp/xb_li_dot_ie.gif‘);
}
/* box extra ul+li */
.xei ul { padding:0; margin:0; clear:both; list-style:none; }
.xei ul li {
font-size:1em;
line-height:1.3;
margin:0 !important; padding:0 0 0.5em 15px !important;
background:url(‚http://g.idnes.cz/o/xhp/xe_li_dot_notie.gif‘) left top no-repeat !important;
list-style:none !important;
margin:0 0 0.5em 15px; padding:0;
background:transparent;
list-style:square outside url(‚http://g.idnes.cz/o/xhp/xe_li_dot_ie.gif‘);
}
.xei a { color:#2E4F8E; }
.xei a:hover { color:#F60; }
/* box body colors */
.xc1 { background-color:#FFF; }
.xc1 .dot { background-color:#FFF; }
.xc2 { background-color:#FCFCDA; }
.xc2 .dot { background-color:#FCFCDA; }
/* box extra colors */
.xec1 { background-color:#D8E7FF; }
.xec2 { background-color:#FAEB7E; }
/* box body heights */
.xh1 { }
.xeh1 { }
.xh2 { }
.xeh2 { }
.xh2f { }
.xh3 { }
.xeh3 { }
.xh3f { }
.xh4 { }
.xeh4 { }
.xh4f { }
/* PHOTOS */
.phr, .phr-b { float:right; margin:0; margin-left:6px; padding:0; }
.phl, .phl-b { float:left; margin:0; margin-right:6px; padding:0; }
.phc, .phc-b { text-align:left; margin:0 auto 6px; padding:0; }
.phl, .phr, .phc { border:none; }
.phr-b, .phl-b, .phc-b { }
/* OPENER */
#op-tit { font-size:1.82em; line-height:1.3; margin:0.5em 0; padding:0; }
#op-text .time { color:#334487; font-size:0.77em; }
#op-text .perex { font-size:12px; line-height:1.3; }
#op-photo { text-align:center; }
/* FLASH */
#flash p { padding:0.25em 0 0.25em; margin:0; line-height:1.3; }
#flash .xbi { padding:3px 5px 2px 7px; font-size:0.92em; }
#flash .xei { padding:2px 5px 2px 7px; font-size:0.84em; }
#flash .xei a { color:#000; }
#flash .xei a:hover { color:#F60; }
/* SERVIS */
.servis .xbi { font-size:0.92em; }
.servis .xei { padding:7px 5px 7px 7px; font-size:0.92em; }
/* THEMES */
#themes .xbi { padding:9px 5px 5px 2px; }
/* REAL-ESTATE */
#real-estate .house { background:url(“) right top no-repeat; }
#real-estate .xei ul li {
line-height:1.2;
margin:0 !important; padding:0 0 0.25em 15px !important;
margin:0 0 0.25em 15px; padding:0;
}
#real-estate p { margin:0; }
#real-estate form p { font-weight:bold; font-size:0.84em; padding:0.25em 0 0.3em; }
#real-estate form p.shift { margin-left:-5px; }
#real-estate p { font-weight:normal; font-size:0.92em; padding:0.25em 0 0; }
#real-estate input, #real-estate select { font-size:0.84em; }
#real-estate .butt { margin-left:10px; }
#real-estate .xbi a { color:#000; }
#real-estate .xbi a:hover { color:#F60; }
/* OUR-SERVICES */
#our-services .xbi { line-height:1.6; }
#our-services .xbi a { color:#000; }
#our-services .xbi a:hover { color:#F60; }
#our-services .xei a { color:#000; }
#our-services .xei a:hover { color:#F60; }
#our-services .xei { padding-bottom:0; }
#our-services .xei .full { position:relative; top:0; }
#os-mobil { font-size:1em; font-weight:bold; line-height:1.45; background:url(“) 6px 100% no-repeat; width:auto; }
#os-telefon { font-size:1em; font-weight:bold; line-height:1.45; background:url(“) 6px 100% no-repeat; width:auto; }
/* INSERTION */
.it { position:relative; margin:2em 0 0; font-size:1em; }
/* insertion dot */
.it .dot {
position:absolute;
left:0px;
top:-13px;
width:13px;
height:13px;
font-size:1px;
background:url(“) right top no-repeat;
}
/* insertion caption */
.itc { position:absolute; top:-1.5em; right:5px; z-index:1; font-weight:normal; margin:0; padding:0; text-align:right; font-size:0.77em; color:#000; line-height:1.3; }
/* insertion border (banners) */
.itb { padding:0; margin:0; border:1px solid #000; line-height:0; background-color:#F4F4F4; }
/* insertion inner text normal (commercial) */
.iti { padding:9px 5px 7px 8px; margin:0; line-height:1.64; font-size:0.84em;}
/* insertion inner text – small with photo (commercial) */
.itip { padding:9px 5px 7px 8px; margin:0; line-height:1.35; font-size:0.84em;}
/* insertion links */
.it a { color:#2E4F8E; }
.it a:hover { color:#F60; }
/* insertion heights */
.ith1 { min-height:148px; height:auto !important; height:148px; }
.ith2 { min-height:70px; height:auto !important; height:70px; }
/* insertion colors */
.itc1 { background-color:#F6F6F6; }
/* MFDNES */
#mfdnes .xbi { padding:7px 4px 0; }
#mfdnes .mf-head { width:100%; position:relative; background:#000; color:#FFF; font-weight:bold; }
#mfdnes .mf-head a { color:#FFF; }
#mfdnes .mf-head a:hover { color:#F60; }
#mfdnes .mf-head .papers {
z-index:1;
width:157px;
height:73px;
position:absolute;
bottom:-64px !important; bottom:-65px;
right:-2px;
background:url(“) 0% 0% no-repeat;
}
#mfdnes .mf-head .text { padding:3px 45px 4px 7px; font-size:0.92em; line-height:1.5; }
#mfdnes .wrap { width:100%; background:url(‚http://g.idnes.cz/o/xhp/mfdnes_divider.gif‘) 50% 0% repeat-y; }
#mfdnes .lcol, #mfdnes .rcol { float:left; width:50%; text-align:center; font-size:0.92em; }
#mfdnes .rcol { padding-top:67px; }
#mfdnes .lcol .cin { padding:5px 10px 5px 5px; }
#mfdnes .rcol .cin { padding:5px 5px 5px 10px; }
#mfdnes .day { background:#E9E9E9; padding:2px 0 0; margin:0.3em 0 0.2em; font-weight:bold; font-size:0.92em; }
#mfdnes .mfdt a { color:#000; }
#mfdnes .mfdt a:hover { color:#F60; }
#mfdnes .pdf { padding:0.5em 0 0.5em; margin:0; }
#mfdnes .pdf span { background:url(‚http://g.idnes.cz/o/xhp/xxx_pdf.gif‘) 0% 100% no-repeat; min-height:24px; height:24px; padding-top:8px; }
#mfdnes .pdf span a { padding-left:27px; _height:1px; }
#mfdnes .rcol p { padding:0 0 0.75em; margin:0; }
/* RADIO BOXES */
#r-expres .xbi, #r-classic .xbi { font-size:0.92em; line-height:1.4; }
#r-expres .xei, #r-classic .xei { padding:2px 2px 0; }
#r-expres .xei ul li, #r-classic .xei ul li {
margin:0 !important; padding:0 0 0 15px !important;
margin:0 0 0 15px; padding:0;
}
/* COPYRIGHT */
#clink { height:2px; width:auto; background-color:#244383; }
#copyright { padding:3px 10px 0 6px; width:auto; font-size:11px; color:#000; line-height:1.35; }
#copyright a { color:#000; }
#copyright a:hover { color:#F60; }
/**** Inline STYLE-tag style sheet ****/
Super, jde videt, ze se v praci nudis :)
trvalo mi to asi 10 minut.
treba poznat dobre a produktivne nastroje – EditCSS je k nezaplateniu.
Pěkný, na tu optimalizaci (jen minimální) mám jeden tip http://flumpcakes.co.uk/css/optimiser/
Prečo by som to robil? To ONI čosi nezvládli (napr. zapáčiť sa mi na prvý pohľad) a konkurencia je vzdialená jeden myšoklik… Nerozumiem, prečo načo je komu dobrý užívateľský CSS (krem postihnutých). Za 10 min si mohol dostať nápad, ktorý by ti možno priniesol nobelovku ;-)
[4] to mas pravdu, lenze uz nie si zavisly na tom, co ti ponuknu, mozes „prepisat“ ich predstavu na tvoju potrebu.
Chces aby vsetko bolo v tvojej velkosti pisma? No problem.
V tom je dobra podpora pouzivatelskych stylov.
No a do tej doby snad autori designu pochopia, ze v istych pripadoch, ked ich web dodava hlavne obsah, nemozu presadzovat svoje predstavy a mozno zacnu ponukat variabilne, pruzne a instantne varianty zobrazenia.