kobak pont org

Tag: css

  • WordPress Twenty Ninteen + Disqus tweak

    WordPress Twenty Ninteen + Disqus tweak

    Just switched to the newly released Twenty Nineteen theme by WordPress. It’s a very pure theme, with nothing extra. But it works fine with the new editor released with WordPress version 5.

    I’ve been using Disqus as my comment engine for a while, but Twenty Nineteen didn’t handle the comment section as it supposed to do. So I’ve found a great CSS tweak to make Disqus visually aligned to the theme.

    div#disqus_thread {
    
padding: 3% 10%;
    
background-color: white;
    
margin: 3% 0;
    
box-shadow: 0 0 1px rgba(0,0,0,0.15);
    
}
    
@media screen and (min-width: 38.75em) {
    
div#disqus_thread {
    
margin: 3% 7.6923%;
    
}
    
}
    
@media screen and (min-width: 59.6875em) {
    
div#disqus_thread {
    
margin: 3% 8.3333%;
    
}
    
}
    Go to Customize your theme. Copy and paste it to the Additional CSS section.

    Found at Alex Dresko.  He posted it as a tweak for the Twenty Fifteen theme, but works for the Twenty Nineteen, too.

  • px, pt, em, százalék

    Frissítés: Itt az ultimate eszköz: pxtoem. Mindent tud, számol, kalkulál, generál.

    Ha weboldalt kell gyártani, alapvetően nekem a px a default mértékegység. Sajnos másoknak nem, így akad néha némi kavarodás. Valamiért itt a távolság mérés nem az SI mértékekkel működik. Viszont, hogy senki ne zavarodjon össze, a Roy Reed a REEDdesign alapítója csinált egy egyszerű kis táblázatot, amit most saját magamnak, s azok számára, akik esetleg néha még elvesznek a mértékegységek kusza világában, itt is közlök.

    pt px Em %
    6pt 8px 0.5em 50%
    7pt 9px 0.55em 55%
    7.5pt 10px 0.625em 62.5%
    8pt 11px 0.7em 70%
    9pt 12px 0.75em 75%
    10pt 13px 0.8em 80%
    10.5pt 14px 0.875em 87.5%
    11pt 15px 0.95em 95%
    12pt 16px 1em 100%
    13pt 17px 1.05em 105%
    13.5pt 18px 1.125em 112.5%
    14pt 19px 1.2em 120%
    14.5pt 20px 1.25em 125%
    15pt 21px 1.3em 130%
    16pt 22px 1.4em 140%
    17pt 23px 1.45em 145%
    18pt 24px 1.5em 150%
    20pt 26px 1.6em 160%
    22pt 29px 1.8em 180%
    24pt 32px 2em 200%
    26pt 35px 2.2em 220%
    27pt 36px 2.25em 225%
    28pt 37px 2.3em 230%
    29pt 38px 2.35em 235%
    30pt 40px 2.45em 245%
    32pt 42px 2.55em 255%
    34pt 45px 2.75em 275%
    36pt 48px 3em 300%

  • css naked day 2009

    Már úgy megszoktam, hogy ebben részt veszek, hogy idén (Április 9) majdnem elfelejtettem. Köszönhető talán az elmúlt két napnak. Lényeg, hogy a poszt beküldésével kikapcsolom a CSS-t. Így mindenki látni fogja, hogy milyen az oldal meztelenül.

    Mi értelme?

    Semmi, s mégis. Ha végignézel nagyobb oldalakat, akik pucérkodnak, akkor láthatod, hogy milyen struktúrában vannak felépítve. Ebből lehet tanulni.

    A dologban való részvétel legegyszerűbben a <link rel="stylesheet" ... kezdetű sorok törlésével érhető el, ha nem akartok törölni, akkor Dustin az alábbi kód használatát javasolja:


    <?php
    function is_naked_day($d) {
    $start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
    $end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
    $z = date('Z') * -1;
    $now = time() + $z;
    if ( $now >= $start && $now <= $end ) {
    return true;
    }
    return false;
    }
    ?>

    A fenti php-t pedig a következőképpen kell elhelyezni az oldal fejlécében:


    <head>
    ...
    <?php
    if ( is_naked_day(9) ) {
    echo '<!-- naked day has no styles -->';
    } else {
    echo '<link rel="stylesheet" type="text/css" href="styles.css" />';
    }
    ?>
    ...
    </head>

    Ez tök jó!

    Te is részt vennél? Akkor gyorsan jelentkezz az oldalon, s távolíts el minden css-t az oldaladról!

    Nyugi, holnaptól újra normális lesz az oldal. Addig bírjátok ki! 🙂

  • jajj

    Fejlesztés közben mindig használjunk
    div.akarmi {overflow: auto;}
    direktívát a css-ben, mert egyébként olyan dolgokat is el tudunk rejteni, amit nem akarunk. Majd egy napja kerestem egy gombját az egyik menünek, s nem értettem hova tűnt. Most meglett.

    Ma is tanultam valami fontosat. 🙂

  • új bőr

    Nos, amíg itthon feküdtem ma, sok év után belevágtam, hogy kreáljak magamnak egy saját skint a blogra. A dolog még messze áll a tökéletestől, s talán egy picit távolabb attól, amilyennek szeretném, de legalább megvan a kiindulás. Lehet most köveket dobálni, s elmondani, hogy randa, de jobban örülnék az építő javaslatoknak.

    Az egész alapja egyébként Randy Walker simpler nevű habari skinje. Aztán lett sidebar beletéve, meg bedobáltam egy csomó dolgot a footerbe, meg a kommentformot átlakítottam… Játszogatok, minimalista marad, de jó lesz.

  • CSS naked day

    Április 9-én, azaz holnap újra CSS naked day lesz. Infók a 2006-os, első és a tavalyi 2007-es alkalomról. Idén a szervezők még több résztvevővel számolnak.

    Hova tűnt a design?

    Április 9-én mindenki megmutatja hogyan néz ki az oldala valójában. Ezzel is szemléltetve az xhtml+css erejét.

    Hogyan vehetek részt ebben?

    Jelentkezz a CSS Naked day oldalon, s bekerül az oldalad linkje is a résztvevők közé. Ezután semmi más dolgod nincs, mint minden CSS-t eltávolítani az oldaladról.

    Opcionálisan a rémült olvasóidnak leírhatod, hogy nem az Ő böngészőjükkel van baj, hanem ez a mai egy ilyen nap:

    [source:html]

    Hova lett a design?

    Ha meg akarod tudni mi történt, látogass el a

    Annual CSS Naked Day     weboldalra további információért!

    [/source]

    Mikor lesz ilyen legközelebb?

    Jövőre. Az időpont választásban több dolgot is figyelembe kell venni, ezért lett idén április 9-e a css naked day:

    • A Naked Day kedd, szerda, vagy csütörtök kell, hogy legyen (ezek a legforgalmasabb napok)
    • Közel kell essen április első hetéhez
    • Nem lehet április elseje (bolondok napja)
    • Legalább 5 nappal előbb meg kell hirdetni, mint esedékes

    Ne gondolkozz, csak csináld!

    Alábbi php kód megkönnyíti a naked dayre való felkészülést:

    [source:php]
    = $start && $now <= $end ) { return true; } return false; } ?>
    [/source]

    Egy példa a használatra:

    [source:php]

    …
    ‘;
    } else {
    echo ‘‘;
    }
    ?>
    …

    [/source]

    Ha wordpresst használsz, akkor ajánlom Aja pluginjét, de rengeteg más platformhoz is találsz segítséget a CSS naked day oldalon.

  • css csoportok

    CSS tanulmányainkat folytatandó, egy újabb felfedezésemet osztom meg Veletek. Mint már említettem, css szerkesztésre a csseditet használom.
    Nem tudom, hogy az alábbi mutatvány más css buherátorban is működik (biztosan), de csseditben biztosan szebbé, s áttekinthetőbbé tehető egy oldal hosszú css kódja.

    Eddig minden különböző kódrészletet kommentekkel választottam el egymástól, pl. /* header */. Ha ehelyett a /* @group header */ kóddal indítunk, s a /* @end */ fejezi be az adott szakaszt, akkor azok a csseditben kis legördíthető egységeket alkotnak számunkra. Pl.:
    [source:css]
    /* @group header */
    #header {
    width: 700px;
    height: 100px;
    margin: 0 auto;
    }
    /* @end */
    [/source]

    Ha nem lettem volna fentebb érthető, itt egy screencast a folyamatról.

    Az eredmény pedig itt látható:
    cssedit eredmeny

  • css reset

    Ha valaki dolgozott már css-el, akkor tudja, hogy néha gondot okozhatnak a default beállítások. Az oldalaknak van előre megadott margója, felsorolások eleve beljebb kezdődnek stb.

    Valószínűleg hasonló gondolatok indították Eriket arra, hogy megcsinálta a css nullázó kódját. Íme:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }
    body {
    line-height: 1;
    color: black;
    background: white;
    }
    ol, ul {
    list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: separate;
    border-spacing: 0;
    }
    caption, th, td {
    text-align: left;
    font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: "";
    }
    blockquote, q {
    quotes: "" "";
    }

    Amióta ezt megtaláltam, elmentettem reset.css néven, s a css fájljaim első sora általában a következő:
    @import url('reset.css');

  • hicks 3d css box model

    John Hicks az egyik kedvenc webdesignerem. Azt hiszem mindannyian ismeritek kezemunkáit, max nem tudtok róla. 🙂 A két legismertebb a mozilla firefox és thunderbird logok. A blogját érdemes olvasni, Ő nevéhez fűződik a pimpmycamino és a pimpmysafari oldalak létrehozása is.

    Amiért most megemlékezem Róla, az az alábbi kis ábra. Pár napja véletlenül leltem rá.

    hicks 3d css box model
    eredeti

    Ez az ábra, ami talán legjobban szemlélteti a dolgokat. Hol a margin, padding, mi mi alatt, felett található, stb. Azt hiszem nem is kell hozzá sokat magyarázni. Nekem sokat segített a dolgok megértésében és használatában.

    És ha szeretitek a brit angol nyelvet hallgatni, meg két “bolond” beszélgetését, akkor hangoljatok a rafrissington podcastra! Hicks és Messrs Oxton css html és egyéb témákban beküldött kérdésekre adnak válaszokat sajátságos stílusukban. A piloton jól mulattam tegnap. 🙂