WWW-sivujen kännyversiolle käyttöliittymä

Viestiketju alueella 'Ohjelmointi, pelikehitys ja muu sovelluskehitys' , aloittaja Tapio X, 21.05.2019.

  1. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Korjasin sen kirjautuneeseen ja ei-kirjautuneeseen käyttäjään liittyvän ongelman.
    Koodi:
    #right-own-sidebar-top{border-width:0;margin-top:-30px;}body.logged-in #right-own-sidebar-top{margin-top:0}
    Vastaavia ongelmia tulee WordPressin kanssa eikä tämä tapaus suinkaan ole ainutlaatuinen. Kyse on siitä, että se lykkää JavaScriptiä ja CSS:ää sivulle, jotta saa työnnettyä sivun varsinaista sisältöä alemmaksi, jotta sivun yläosaan mahtuisi hallintapaneeli. Tämä tuottaa aina silloin tällöin ongelmia.

    Kiitos LISÄVALIKOT liittyvistä CSS-ongelmista huomauttamisesta. Korjasin ne sekä live- että testisivustolla. No sain usein risuja, kun en huomannut testata sitä sun tätä CSS:ään liittyvää ongelmaa.
     
    Viimeksi muokattu: 23.09.2019
  2. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Jos saan aikaiseksi toimivat asetukset, yksi optio on se, että annan käyttäjälle mahdollisuuden poistaa ylös/alasnuolet käytöstä. Muutin niiden näyttämisen ns. shortcode-koodiksi.

    Shortcoden määrittelyyn voi laittaa tähän tapaan:
    Koodi:
    if($settings[x]){ return '';}else{ return '<div....>';}
    Jos ei tarvita, ei generoida lainkaan. CSS:ssä ei tarvitse miettiä piilottamista.

    Ainoa, minkä aion jättää pysyvästi esille on se oikean yläkulman yksi painike. Ratkaisu on taatusti vähemän häiritsevä, kuin sivut pakollisten ylös/alalinkkien kanssa.

    Kun joku valitti, että Twitter-tyylin sivuvalikkoon osuu peukalolla, tätä sivustoa kännykällä selatessa on sata kertaa suurempi vaara vahingossa osua ylös/alas-nappeihin kuin sivustollani yläosan linkkiin. Siihen ei osu vahingossa, sillä se ei ole peukaloetäisyydellä.

    Toki yhtenä säätönä voisi olla se, että käyttäjä saisi halutessaan se peukaloetäisyydelle. Mahdollisuuksia voisi olla vaikka kahdeksan.
     
    Viimeksi muokattu: 23.09.2019
  3. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Ihan tiedoksi, että tietokoneella pudotusvalikot ovat sellaisia kuin ovat siksi, että ne eivät muuten mahdu avautumaan 783x764px ikkunassa. Linkin SIVUKARTTA muutin avautumaan normaalisti. Se oli aiemmin oikeassa reunassa ja avautui toiseen suuntaan. Vain LISÄVALIKOT avautuu toiseen suuntaan.
     
    Viimeksi muokattu: 24.09.2019
  4. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Tein asetussivun:

    Asetukset | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

    Manuaalisella arvojen muutolla kaikki toimivat odotetusti, myös valikkopainikkeen paikka, joita on kiinteinä kahdeksan erilaista + rullautuva painike. Alla koodissa on ylempänä oletusarvot, joilla testasin ja voin testata toimivuutta ilman, että kirjaudun. Alemmalla rivillä luodaan array-muuttuja, jonka avulla sitten testataan, mitä näytetään ja mitä ei.

    Koodi:
    $userLayoutSettings='1,1,3,2,1,1'; // ei-kirjautuneen manuaalisesti annetut arvot
    
    $userLayoutSettings_ar = explode(',', $userLayoutSettings);
    Kun nyt tässä valitettiin sitä, että näytöllä on liikaa tavaraa kun rullaa, näytön saa sitten halutessaa puhtaaksi niin päävalikkopainikkeesta kuin nuolistakin.

    Mutta jos kiinnostaa avata valikot näppärästi keskeltä, sekin onnistuu.

    Ajattelin, että keskelle voisi vielä rakentaa tapauskohtaisen valikon, jossa on vain ja ainostaan juuri siinä hetkessä ollennaisia painikkeita Twitter-tyyliin. Senkin käyttöön otto olisi vapaaehtoista. Voisin ainakin itselleni laittaa.

    Jos haluaa huomioida erilaiset käyttäjät, kyllä se mahdollista on, mutta vaatii näpertelyä. Täytyy huomenna kirjautua ja katsoa, toimivatko tallennukset tietokantaan.

    Kirjautunut käyttäjä saa intro-sivun, jossa kerrotaan:
    Testasin tietokannan muuttamista ja siten arvoje vaihtamista. Ei toimi.
     
    Viimeksi muokattu: 24.09.2019
  5. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Koodi:
    $currentUrl='https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    if(($currentUrl=='https://www.sanaristikkofoorumi.net/test/asetukset/')    && is_user_logged_in() && isset($GET)){
    $updateValue=$GET['intro'].','.$GET['sivupalkki'].','.$GET['paavalikon_sijainti'].','.$GET['nuolet'].',1,1';
    $current_user = wp_get_current_user();
    $userID=$current_user->ID;
    $username="käyttäjänimi";
    $password="salasana";
    $database="tietokanta";
    mysql_connect('xx.xx.x.xx',$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");
    $query='UPDATE `wp_forum_users` SET `user_layout_settings`=`'.$updateValue.'` where `ID`='.$userID;
    mysql_query($query);
    mysql_close();    
    Mikähän tuossa voisi mättää?
     
  6. Xiyng

    Xiyng

    Viestejä:
    1 106
    Rekisteröitynyt:
    19.10.2016
    Sen varmaan näkee helpoiten PHP:n virhelokista. Tosin näyttää sille, että tuosta pätkästä lisäksi puuttuu if-lohkon päättävä sulku. Tosin paha sanoa varmaksi, kun muotoilu haittaa luettavuutta. Sisällön puolesta taas totean, että näyttää nopeasti katsottuna SQL-injektiolle.
     
    hmb tykkää tästä.
  7. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Ei PHP:stä sulkuja voi puuttua. Sen Code Snippet tarkistaa luotettavasti. Esimerkistä taisi tosin päätös } jäädä pois.

    Tosin WordPressistä saattaa löytyä funktio käyttäjätietojen muuttamiseen, jolla suorilla tietokantakäsittelyiltä vältytään.

    Tuo MySQL-tietokannan käsittely löytyy melkein identtisenä eräältä nettisivulta. Hain sen Googlella. En enää nimittäin muista kuin osan siitä, miten noita SQL-funktioita ja SQL-lauseita tehtiin. Kun jotain ei käytä 15 vuoteen, ei homma ole heti ihan haskassa.

    Tuohon tapaan siinä oli neuvottu, mutta SQL-komento oli eri ja mysql_query($query); otettiin muuttujaksi muuhun tarkoitukseen. Koska minulla ei ole muuta tarkoitusta, otin pois muuttujan edestä.
     
  8. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Sain muualta hieman opastusta. WordPressille on funktio

    update_user_meta()

    Se ei päivitä users-taulua vaan sen aputaulua. Minulta puuttuu siihen liittyvästä tietokanttaulusa yksi rivi. Niitä lisäillään yleensä lisäohjelmilla. Koska en tee lisäohjelmaa, sisäsin rivin suoraan.

    Ehkä väliaikaisen koodin olisi voinut luoda, mutta uuden rivin luominen on kertatoimenpide, ja on ihan sama miten se tehdään.

    get_user_meta() haetaan arvot.

    Yritän siis tehdä homman uusiksi noita kahta funktiota käyttäen.
     
    Viimeksi muokattu: 25.09.2019
  9. Paapaa

    Paapaa

    Viestejä:
    2 981
    Rekisteröitynyt:
    17.10.2016
    Joo, ei missään nimessä käyttäjän syötettä sellaisenaan tietokantakyselyyn. Siinä kerjää verta nenästään hyvin tehokkaasti.
     
    Xiyng tykkää tästä.
  10. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Seuraava funktio toimi - sain oletusasetukset:
    Koodi:
    function getLayoutSettings($userLayoutSettings_ar){
    if(is_user_logged_in()){
    $current_user = wp_get_current_user();
    $userLayoutSettings=get_user_meta( $current_user->ID, 'user_layout_settings',true);
    if(!$userLayoutSettings){
        update_user_meta($current_user->ID,'user_layout_settings', '2,1,3,2,1,1');}
        }
    else{
        $userLayoutSettings='1,1,3,2,1,1';
        }
    $userLayoutSettings_ar = explode(',', $userLayoutSettings);
    return $userLayoutSettings_ar;
    }
    Mutta tuon muuttaminen uudestaan ei onnistunut. Tämä tarkoittaa sitä, että jos joku tällä foorumilla haluaisi testata systeemiäni, hän saa oletusasetukset, joita ei pysty muuttamaan. Muutoskoodissa on vikaa, jota täytyy muuttaa.

    Mitä optioon "POISTA KÄYTÖSTÄ/OTA KÄYTTÖÖN INTROTEKSTI:" tulee, se on väliaikainen. Laitan sen lopullisessa versiossa hidden-kentäksi eli automaattisesti poistuu, kun painaa asetussivulla TEE MUUTOKSET -painiketta.
     
    Viimeksi muokattu: 25.09.2019
  11. FinnMa

    FinnMa

    Viestejä:
    6
    Rekisteröitynyt:
    18.09.2019
    Koodistasi pisti silmään että else roikkuu irrallisena, koska toisen if:in jälkeen on kaksi peräkkäistä sulkua. Päätä kumpaan if-ehtoon haluat sen liittyvän niin saat funktiostasi ihan eri tuloksen ulos.
     
  12. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Jouduin tekemään homman uusiksi.
    Ongelma taitaa olla get-muuttujan käsittelyssä.

    print_r($GET);
    ei mitään.

    Homma kaatui siihen, etten muistanut, että get-parametria ei käsitellä $GET vaan $_GET avulla. Kun laitoin oikean muuttujanimen, homma pelittää.

    Puolustukseksi voin sanoa, että viimeksi kuin loin get-parametreilla toiminnallisuutta, aikaa on n. 15 vuotta. En kertakaikkiaan muistanut tuota asiaa.

    Pidän toistaiseksi intro-tekstin valinnan käytössä. Kun testit on ohi, sen voi poistaa.

    WordPress aiheutti taas kerran visuaalisen ongelman kirjautuneille käyttäjille. Hiivatti kanssa.

    Jos jotain kiinnostaa, hän voi kirjautua ja kokeilla, missä paikassa valikkonappi tuntuu kivimmalta.
     
    Viimeksi muokattu: 25.09.2019
  13. Paapaa

    Paapaa

    Viestejä:
    2 981
    Rekisteröitynyt:
    17.10.2016
    Yhä edelleen kannattaa opetella koodin muotoilu, se vähentää bugeja ja koodista näkee paljon helpommin esim. ehtolauseiden logiikan. Tässä sama muotoiltuna:

    Koodi:
    function getLayoutSettings($userLayoutSettings_ar)
    {
       if (is_user_logged_in()) {
           $current_user = wp_get_current_user();
           $userLayoutSettings = get_user_meta($current_user->ID, 'user_layout_settings', true);
           if (!$userLayoutSettings) {
               update_user_meta($current_user->ID, 'user_layout_settings', '2,1,3,2,1,1');
           }
       } else {
           $userLayoutSettings = '1,1,3,2,1,1';
       }
       $userLayoutSettings_ar = explode(',', $userLayoutSettings);
       return $userLayoutSettings_ar;
    }
    
    PS. Ihan sama, mihin tykkää aaltosulkeita laittaa, oleellisinta on oikea sisentäminen.
     
    Xiyng tykkää tästä.
  14. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Yritän laittaa ainakin toisten luettavaksi siistimpää koodia.

    Se hallintapaneelin takia johtuvat CSS-ongelma näkyy tässä kuvassa.

    Oletuksena tuossa tyhjässä tilassa on hallintapaneeli. Mutta kun en sitä näytä, pitäisi saada oikealla tavalla siirrettyä sisältö ylös. Bodylle -48px ei tehnyt siirtoa oikein.

    Tuon ikävän näköisen CSS-ongelman lisäksi on pieniä marginaaliongelmia vielä, mutta ihan testattavissa - mutta testi edellyttää kyllä kirjautumista, mitä tuskin kukaan haluaa tehdä.

    Ainakin kokeilu eri vaihtoehdoilla voi olla hauskaa.
     
    Viimeksi muokattu: 25.09.2019
  15. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Ja on se ihan hauskaa. Haluasin www-sivujen muistuttavan sovellutusten käyttöliittymää ennen kaikkea kännykkä pystysuunnassa.

    Ihan vaan kokeiluna versio, jossa joka reunassa on jotain. Ylhäällä päävalikko, josta pääsee muihin. Keskellä toimintovalikko ja -aihevalikko, joista pääsee muihin. Alhaalla muutama kommenttien ja aiheiden luomiseen liittyvä pikavalinta (ei aloitteleville, koska toimintojen merkitys tulee opetella).

    IMG_20190925_221717.jpg

    Jos nyt joku haluaa rullata sivua päästä päähän, sekin sallitaan, sillä kaikki nuo saa pois ja yläosan keskellä oleva painike jää sivun alkuun. Mutta jos haluaa minimoida rullauksen, sekin on mahdollista.

    Tämä nyt on vain prototyyppi, jossa on puutteita. Mutta toivon, että tähän protyyppiin voitaisiin suhtautua kunnioituksella. Sen tarkoitus on herättää kysymään, miten käyttäjiä voitaisiin tulevaisuudessa paremmin huomioida.

    Eivät kaikki halua rullata sivuja päästä päähän kokon ajan!
     
    Viimeksi muokattu: 25.09.2019
  16. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Vaakasuuntaan laitetta ei kannata kääntää - ulkoasu on vielä rikki.

    Oli joo hyvä pystyttää erillinen kehittelysivusto. Siinä rikkinäisyys ei haittaa.

    Muutan toistaiseksi live-sivustoa vain, jos siinä ilmenee suoranaisia bugeja. Ylös/alanuolet voisi laittaa huomaamattomammin melko vaalealla harmaalla (rgba(0,0,0,0.05)).

    Ihan aidosti haluan huomioida kaikki käyttäjät. Asetuksilla voin ainakin itselleni laittaa Twitter-henkisen valikon (nyt vaihtoehtoja sille on kaksi, mutta voihan niitä olla niin paljon kuin haluaa luoda). Jos ei muut tykkää siitä, ei ole pakko tykätä.

    Ilman perusteellisia testejä kehittelyversion ratkaisuja ei kannata live-versioon laittaa.

    Oli vähän harmi, että ei järkevällä tavalla saanut evästeillä vastaavaa ja vaikka saisikin, se ei olisi kovin järkevää. Tosin ilman intro-tekstiä sen voisi antaa evästeilläkin - pitäkööt sitten evästeensä tai ei. Mutta evästeet eivät oikein tahtoneet lähteä toimimaan välittömästi kuten tietokantaan rakentamani systeemi.

    Minulle voi kirjoittaa s-postiin ja voin pyynnöstä luoda käyttäjätunnukset. Tosin ongelmana on se, etää s-postiosoitteen pitää olla todellinen - muuten ei voi lähettää tietoa salasanasta. Parempi siis luoda itse. S-postiosoitteen ei tarvitse olla oikea. Avattaren saa vaihtaa.
     
    Viimeksi muokattu: 26.09.2019
  17. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Laitoin nyt sitten neljä eri vaihtoehtoa pikavalikollekin. Kun laitoin yläosan harmaan samaksi kuin avaajien, yläosa ei näytä pahalta. Jos kirjautuu, tietää jo mistä löytyy päävalikko, joten valikoiden avaaja ei tarvitse enää eteen tekstiä "VALIKOT >". Sitä olisi pitänyt säätämään, mutta helpoimmalla pääsin kun poistin sen.

    Asetussivulla on kuvakaappauksia ja niihin liittyviä kuvayhdistelmiä.

    Yksi muistuttaa alkuperäistä esitystä, mutta siinä on vain usein tarvittavia toimintoja.
     
    Viimeksi muokattu: 26.09.2019
  18. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    HD/iPad vaakasuuntainen näyttö on melkein kunnossa. Jos sivuvalikot ovat päällä, en jostakin syystä saa määriteltyä valikoita saman levyisiksi enkä yhtä etäällä vasemmasta ja oikeasta reunasta.

    Jotta sain toimimaan siististi, piti laittaa leveälle näytölle täysi leveys. Olen jonnekin sopimattomaan kohtaan lykännyt numeron 1, mikä rikkoo ulkoasua. En löydä kohtaa. Ylimääräistä tulee yleensä unohtuneesta debug-datasta tai <script> tai <style> eteen tulee vahingossa ylimääräistä.
     
    Viimeksi muokattu: 27.09.2019
  19. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Laitoin evästeilläkin.

    Itse asiassa evästeet epäonnistuivat siksi, että en muistanut käytää alaviivaa tiettyjen muuttujien kanssa. Kun laitoin oikein, evästeetkin toimivat. Testasin print_r:llä.

    Muuten samat määritykset, mutta intro-tekstiä en laittanut evästeiden varassa oleville, koska ne voi poistaa vaikka kesken istunnon.

    Voi siis testata, vaikka ei kirjaudu. Pieniä CSS-virheitä varmasti löytyy, mutta mitään dramaattista ei pitäisi löytyä - paitsi sillon kun olen kaatanut jollakin tyhmällä mokalla ulkoasun tai koko sivuston.

    _____________________

    Se "1" arvoitus ratkesi. Erään muuttujan arvo on 1, jos sitä ei if-ehdolla muuta. Piti määrittää arvoksi '';
     
    Viimeksi muokattu: 27.09.2019
  20. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Tein testisivustolle sittenkin intro-tekstin. Mutta muutin sen lähinnä evästetiedotteeksi, jossa mainitsen mobiiliasetukset.

    Mobiiliasetukset on linkki. "Sulje ikkuna" vain sulkee ikkunan.
    _____________

    Sivussa olevista valikon avaajista voi valita nyt vain toisen. Koska jokaisesta kolmesta mahdollisesta valikosta voi valikkoja kokonaan sulkematta vaihtaa toiseen, yhdelläkin pärjää. Eri avaajia käytettäessä oletuksena on esillä eri valikko.

    Olisin kiitollinen testauksesta ja kommenteista. Ainakaan valinnanmahdollisuuksista ei ole pulaa. Jos laitan tämän testauksen jälkeen live-sivustolle, voin laittaa itselleni juuri sellaiset asetukset kuin haluan. Niistä kenenkään muun kuin minun ei tarvitse pitää. Jokainen saa valita itselleen sopivat valikoiden avaajat. Teoreettisia vaihtoehtoja on kymmeniä.

    Oletusasetukset:
    Koodi:
    $userLayoutSettings='2,1,3,2,1';
    Ks. arvot asetussivulta, jossa on lopussa väliaikaisesti esillä esim. "(1)".

    Ehdotuksia oletusasetuksista saa esittää. Asetussivu on nyt dynaaminen eli se muistaa annetut asetukset ja esillä on ne asetukset, jotka on viimeksi määritelty. Lisäsin myös oletusasetusten palautuspainikkeen.
     
    Viimeksi muokattu: 29.09.2019
  21. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Evästeiden ongelma näyttää olevan se, että ne eivät tule heti voimaan. Vasta jos lataa sivun uudestaan tai siirtyy toiselle sivulle, niiden vaikutus näkyy.
    Laitoin näin:
    ÄLÄ NÄYTÄ UUDESTAAN -tekstin yhteydessä kun klikkaa linkkiä muulla kuin asetussivulla ja sen jälkeen sulkee ikkunan ja siirtyy toiselle sivulle, teksti häviää. Siinä kaiketi ihan OK.

    HD-tablet-laitteella sekä kirjautuneena että ei-kirjautuneena ulkoasu on melko OK siinä mielessä, että marginaalit yms. ei ainakaan mitään merkittävää ongelmaa. Tosin huomasin asemointivirheitä ja taustavärivirheitä, joita pitää korjata ennen käyttöä live-sivustolla. Kyse ei ole suurista CSS-korjauksista.

    Nyt kun on esittää suhteellisen valmis vaihtoehto, jossa käyttäjä aidosti voi vaikuttaa ulkoasuun, kiinnostus lopahti.
     
    Viimeksi muokattu: 29.09.2019
  22. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Jotta evästeissä ja tietokannassa olisi sama tieto, jos evästeet eivät ole oletusarvoissa, funktiosta täytyi tehdä mutkikkaampi. Jos on kirjautumatta tehnyt muutoksia ja kirjautuu, seuraavan funktion pitäisi päivittää data:

    Koodi:
    function getLayoutSettings($userLayoutSettings_ar){
    if(is_user_logged_in()){
        if(intval($_COOKIE['sivupalkki']) ===2 || !(intval($_COOKIE['paavalikonsijainti'])===3) || intval($_COOKIE['nuolet']) ===1 || !(intval($_COOKIE['lisavalikko'])===1))
        { // oletusasetuksia on muutettu ja ne ovat evästeissä
    $userLayoutSettings=$_COOKIE['intro'].','.$_COOKIE['sivupalkki'].','.$_COOKIE['paavalikonsijainti'].','.$_COOKIE['nuolet'].','.$_COOKIE['lisavalikko']; // käytetään evästeitä
        $userLayoutSettings_ar = explode(',', $userLayoutSettings);
        $current_user = wp_get_current_user();
        $userLayouts = explode(',', $current_user->user_layout_settings);
            if(!($_COOKIE['intro']==$userLayouts[0] && $_COOKIE['sivupalkki']==$userLayouts[1] && $_COOKIE['paavalikonsijainti']==$userLayouts[2] && $_COOKIE['nuolet'] ==$userLayouts[3] && $_COOKIE['lisavalikko']==$userLayouts[4]))
            { // jos tietokannassa on eri tieto kuin evästeissä, päivitetään tietokanta
             $updateValue = $_COOKIE['intro'].','.$_COOKIE['sivupalkki'].','.$_COOKIE['paavalikonsijainti'].','.$_COOKIE['nuolet'].','.$_COOKIE['lisavalikko'];
            update_user_meta($current_user->ID,'user_layout_settings', $updateValue);
            }
        }else{ // ei ole ennestään tietokannassa tietoa tai se on sama kuin evästeissä
        $current_user = wp_get_current_user();
        $userLayoutSettings=$current_user->user_layout_settings;
            if(!$userLayoutSettings){$userLayoutSettings='2,1,3,2,1';} // asetetaan oletustiedot
        $userLayoutSettings_ar = explode(',', $userLayoutSettings);
        }
    }
    elseif($_COOKIE['sivupalkki']){// löytyy evästeet
    $userLayoutSettings=$_COOKIE['intro'].','.$_COOKIE['sivupalkki'].','.$_COOKIE['paavalikonsijainti'].','.$_COOKIE['nuolet'].','.$_COOKIE['lisavalikko'];
    }else{ // evästeitä ei ole koska käyttäjä on poistanut ne
        $userLayoutSettings='2,1,3,2,1';}
        $userLayoutSettings_ar = explode(',', $userLayoutSettings);
    return $userLayoutSettings_ar;
    }
    
    Tuon pitäisi taata se, että jos muutat tietoa kirjautumatta, muutos on voimassa kun kirjaudut. Samoin jos kirjaudut, muutos on voimassa jos kirjaudut ulos. Vain jos poistat evästeet etkä kirjaudu, menetät asetukset. Testasin, että toimii.
     
    Viimeksi muokattu: 30.09.2019
  23. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    En ymmärrä, mikä väriskaalassa olisi pielessä. Kahta korostusväriä lukuun ottamatta on käytetty vain sinisen, mustan ja harmaan eri sävyjä.
    _____________

    Testasin ulkoasun myös halvahkolla älykännykällä (Samsung Galaxy J5) pystysuunnassa (laite ei vaihtanut orientaatiota enkä löytänyt säätöä, mistä orientaation saa automaattisesti vaihdettua). Korjasin pieniä ulkoasuvirheitä.

    Koska ne laitteet, joilla pystyin testaamaan, toimivat odotetusti, otin käyttöön live-sivustollakin.
     
    Viimeksi muokattu: 30.09.2019
  24. Nightuser

    Nightuser

    Viestejä:
    1 592
    Rekisteröitynyt:
    30.10.2016
    Liian vaalea. Eikö tummaksi saa mistään.
     
  25. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Ei ainakaan sinistä käyttäen - isoina aloina tumma sininen on hänestä ruma. Vaihdoin siksi valikoihin WordPressin sinisen paletin vaalean siniseen kaikkialla. Itse asiassa vaaleampi sininen oli mobiilivalikoissa, mutta yhtenäistin tietokoneversion kanssa. Nyt yhtenäistin toisin päin eli tietokoneversion alivalikoissa on vaaleami sininen. Muuta muutosta en osannut tehdä.

    Koska sivusto sinisen ohella pelaa valkoinen - harmaa - musta -skaalalla, tätä skaalaa voi muuttaa. bbPressin perusharmaat ovat bbPressin oletussävyjä. Määritelty kai mahdollisimman yleispäteviksi.

    En kyllä osaa muuttaa minnekään suuntaan olemassa olevaa skaalaa. Tarvitsisin jostakin siihen välipalettiehdotuksen ja ehdotuksia missä mitäkin väriä käyttäisi.

    Kun nyt tekniikka pelaa, ulkoasuun voisi yrittää panostaa. Sitä voi testailla testisivustolla.

    Toki puuttuvia ominaisuuksia voisi tekniikkapuolella yrittää saada luotua.

    Minkä todennäköisesti pystyisin lisäämään, on "uusi" -merkkaus yksittäisen kommentin kohdalla. Sen ei pitäisi olla kovin vaikea toteuttaa. Se on Todo-listalla.

    Tällä sivustolla on erittäin kehittynyt tekstieditori, mutta näin kehittynyttä en tarvitse. Perusmuotoilut riittävät, joten yksinkertaisuus on sivustollani pikemminkin etu kuin haitta.

    Editorin suhteen lähinnä harmittaa bbPressin varsin alkeellinen lainaus-toiminto. Siinä asiassa tämä sivusto on todella paljon kehittyneempi. Tässä asiassa koen kuitenkin, että olen saatavilla olevien lisäosien varassa.
     
    Viimeksi muokattu: 30.09.2019
  26. Xiyng

    Xiyng

    Viestejä:
    1 106
    Rekisteröitynyt:
    19.10.2016
    On makuasia, tykkääkö vaaleasta vai tummasta, mutta vaaleatkin sivut toimivat ihan hyvin ja ovat nykyään itse asiassa hyvinkin yleisiä. Itse en osaa ainakaan tähän hätään eritellä, mikä värimaailmassa mättää, mutta "liian vaalea" ei ainakaan ole vikana ellei tavoitteena ole tumma teema (eikä näyttäisi olevan).
     
  27. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Ei ole tavoitteena tumma teema. Vain ns. header-osa on melko tumma.

    Oli muuten iso työ saada valokuva sävytettyä suht. toimivan väriseksi kun ei ole siihen mitään muuta apuja kuin Adobe Photoshop Expressin suotimet ja säätimet, joilla vain kokeilin, mikä toimisi. Sävytetty kuva kaipaisi jonkin algoritmit, joka automaattisesti sävyttää kuvan halutun värin perusteella. Ehkä Photoshopissa se olisi.

    Tyttären kommentit eivät juuri auta kun hän ei eritellyt muuta kuin kolme asiaa, jotka jo muutin.
     
  28. Nightuser

    Nightuser

    Viestejä:
    1 592
    Rekisteröitynyt:
    30.10.2016
    Tumma teema oli se mitä itse ajattelin. Käyttäjällä voisi olla mahdollisuus valita kumpaa käyttää.
     
  29. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Periaatteessa tuo on mahdollista, sillä käyttäjäasetuksia voi lisätä. Edellyttäisi kyllä CSS-tiedostojeni uudelleen rakentelua, jotta väri ja muut ominaisuudet eroteltaisiin toisistaan. Joskus väriteema oli erillinen, mutta ei enää. Ajatuksena oli joskus helppo väriteeman vaihto, mutta vähän hukkasin idean kun ajattelin, ettei se taida olla tarpeen. Aika iso lohko värimäärittelyjä on kuitenkin vieläkin yhdessä paketissa, joten saisin ison osan irrotettua tätä varten nykyisestä CSS:stä. Rippeitä pitäisi koota sieltä sun täältä.

    Hieman myös nyt rakennetut valinnat monimutkaistavat asioita.

    Väriteemoille sinänsä voi luoda oman Code Snippet -tietueen tai vaikka useita, jos koko koodin laittaa yhden käyttäjäasetuksen alle yhtä ehtoa käyttäen.

    Header-kuva pitäisi kuitenkin pitää samana, sillä sen luomisessa oli tosi iso työ.

    Melko monimutkaisen toteutuksen takia on kuitenkin aika hankala pitää kahta väriteemaa. Ainakin yksi pitäisi olla ensin täysin tiptop.

    Harkitsen asiaa. Olisihan siitä se hyöty, että väriteemoja voisi kokeilla useita luomalla väriä koskevaan käyttäjäasetukseen useita vaihtoehtoja. Niistä sitten valitisisi toimivimmat live-versioon.

    No ikuisuusprojektihan minulla on - vähän niinkuin vanhojen autojen kunnostus.
     
    Viimeksi muokattu: 30.09.2019
  30. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Rehellisesti nyt kuitenkin täytyy todeta, että minulla ei ole osaamista tumman version tekemiseen. Jos jotakuta kiinnostaa jakaa harrastukseni, voin yrittää koota kaikki väriominaisuude yhteen Code Snippet -tietueeseen, mistä voi etsiä ja korvata värimäärityksiä.

    Nykyisen rinnalla voin luoda testitarkoitukseen käyttäjäasetuksia. joissa voi kokeilla korjauksia ja vertailla helposti alkuperäisen kanssa - Vivaldilla helposti vaikka rinnakkain. Toisessa ikkunassa uudempi ja toisessa vanhempi. Niin kauan kuin molempia ikkunoita ei päivitä, vertailu onnistuu.
     
  31. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Niille, jotka vihaavat ylimääräisiä painikkeita, oikean reunan AIHEVALIKKO-valikon avaaja on näppärä.

    Tällä sivustolla vastaava on se, että jos kännykkä on pystysuunnassa oikealta avautuisi IO-TECH.FI UUTISET, UUTISET LYHYESTI ja UUDET VIESTIT. Ne saisi esille milloin vain, ilman rullaamista, ilman nuolien käyttöä, varmasti taaten sen, että ei siirry minnekään, jos ei varta vasten klikkaa jotain linkkiä.

    Hirveän kaukana ne eivät ole - sivut eivät ole samalla lailla järkyttävän pitkiä kuin MTV 3:n uutissivut, joissa hirvittävän suuri osa sivua on sellaista, jota ihmiset tuskin jaksavat selata läpi.

    Toki ajattelen vain mututuntumalla. Minä en jaksa rullata sivuja kovinkaan pitkälle tablet-laitteellani. Kun sivuja suunnitellaan, on mietittävä myös sitä, kuinka paljon ihmiset jaksavat rullata samaa sivua. Minulla kärsivällisyys loppuu lyhyeen, jollakin on pitempi pinna (yli)pitkien sivujen kanssa.

    Minulle siis meneminen siitä mistä aita on matalin - kaikki yhteen pötköön - ei toimi. Vain omat sivuni toimivat netissä suht. sillä tavalla kuin toivoisin yleisesti sivujen toimivan. Minunlaisiani www-suunnittelu ei tunnu ottavan juuri koskaan huomioon.

    Minulla ei ole harmaata ajatustakaan, mikä on keskiarvo.

    Mutta koska kaikki eivät siitä pitäisi, olisi luotava käyttäjäasetukset. En tunne XenForon koodausta, miten iso työ siinä olisi. Minunkin täytyy kaivaa tietoa ja pohtia aika lailla, että sain systeemin toimimaan halutusti.

    Periaatteessa tällä sivustolla luominen olisi yksinkertaisempaa, sillä riittäisi vain tietokantapäivitys eikä evästeitä tarvitsisi luoda. Eihän täällä ilman kirjautumista voi kirjoittaa ja satunnainen kävijä tuskin kaipaisi evästeisiin perustuvia käyttäjäasetuksia.

    AIHEVALIKKO-valikon rakentelu tälle sivustolle olisi sitäpaitsi yksinkertaisempaa kuin itselläni, sillä sivutyyppejä on vähemmän. Minulla niitä on viisi erilaista (foorumit, blogi, ristikkoavut, artikkelit ja muut sivut). Että toimivat halutusti, oli näpertelemistä.

    Halusin yleisesti herätellä ajattelemaan www-suunnittelua uusista näkökulmista, mutta onhan tässä olo kuin Don Quitella. Jään syrjään.

    No kehittely on sinänsä hauska harrastus. Kun nyt noita käyttäjäasetuksia on, voisihan sivun alkuun laittaa niille, jotka pitävät rullailusta kiinteän haun ja piilottaa haut tai haku valikoista. Kun nyt sain toimivan systeemin, sitä voi erittäin helposti täydentää. Saa nähdä yleistyykö ajatus käyttäjäasetuksista. Ei niiden laatiminen kuitenkaan mitään rakettitiedettä ole. Aikaa se tosin vie rutkasti.
     
    Viimeksi muokattu: 01.10.2019
  32. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    En ole vieläkään päässyt ulkoasun kehittämiseen kun lisäilin joitakin elementtejä säätöihin ja testasin niitä.

    Kokeilin yhdellä kapealla (viewport-arvoissa mitattuna 20px) sivupalkilla. Lisäsin toiminto- ja aihevalikoihin ylösalasnuolet, jos niitä ei ole suoraan esillä. Toimii homma niinkin. Yhden painikkeen takaa löytyy:

    1. haut
    2. toimintovalikko
    3. päävalikko
    4. aihevalikko
    5. ylös/alas - nuolet

    Käyttöliittymä on laitettu lähes absoluuttiseen minimiinsä.
    Absoluuttinen mini olisi sitä, että mukana olisi:
    1. sivuston pääryhmät
    2. murupolut

    Kyllä sekin on mahdollista, mutta ei minustakaan enää järkevää. Mutta käyttöliittymä on kyllä teoriassa minimoitavissa ja se on vielä varsin helposti toteutettavissa.

    Ainakin sivuston sivujen pääryhmät on oletuksena hyvä olla suoraan esillä, jotta tulija tietää suoraan, mitä sivulta löytyy. Mutta jos käyttää sivuja enemmän, nekin voisi piilottaa. Mitään hyötyä piilotuksesta tosin ei ole. Niiden poisto ei tuo lisää ruutupinta-alaa. Ns. leivänmurujen poisto suoraa näkymästä sitä hieman toisi.

    Toisaalta valinnaisesti voisi laittaa esille myös haun kiinteäksi, mitä se oli pitkään, vaikka näin:

    https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20191001_220136.jpg

    Testisivustolla saa nuo joko pysymään kiinteästi sivun ylälaidassa tai rullautumaan sivun mukana. Miten vaan itse kukin parhaaksi katsoo.

    Voisihan sen valikkopainikkeen oletussijaintikin olla vasemmalla, mutta sinne ei aputeksti oikein visuaalisesti sovi, koska siellä on sivuston nimi.
     
    Viimeksi muokattu: 01.10.2019
  33. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Vähän harmittaa, että tuli laitettua asetukset jo live-sivustolle. living_death tai Nightuser ehdotti valikkon avaimen vasemmalle. Se ehkä olisi ihan hyvä oletusasetus. Paras asetus olisi ehkä:
    • Vasen ylä: navigaation avaus
    • Vasen oikea: haku
    • Oikea alareuna: ylös/alas-nuolet.
    Itse asia tuo asetelma on se, mikä on tällä sivustolla. Laitoin tuon nyt oletukseksi. Se näyttää mm. tältä:
    https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20191002_172905.jpg

    Mutta jos koodaan noin, tulee muutos nykyisiin oletuksiin ja sivun nimeä pitää ehkä laskea hieman alemmaksi.

    Jos poistaa haun suoraan näkymästä, se näkyy muualla. Jos poistaa ylös/alas-nuolet ne tulee esille muissa valikoissa.

    Sitten vaikka AP voisi poistaa mitä haluaa poistaa tai siirtelee minne siirtelee. Joku toinen voi lisätä, mitä haluaa lisätä ja voi siirrellä apuelementit minne haluaa. Vain haun paikkaa ei voisi vaihtaa. Sen voisi vain pitää kiinnitetty, pitää rullautuvana tai poistaa suoraan näkymästä.

    LinkedInin porukasta en ole saanut keskustelukumppania. No AP ym. kriittiset palautteet ovat olleet sikäli tarpeen, että en olisi saanut aikaiseksi käyttäjäasetusten laatimista muuten. Ilman käyttäjäasetuksia en millään saa sivujani toimimaan niin, että erityyppiset käyttäjät olisivat kovinkaan tyytyväisiä. Ilman käyttäjäasetuksia vaan joutuisi tekemään liian paljon kompromisseja.

    Jonkun kritiikki siitä, että teen sivut vain itselleni, on osittain oikeutettua. Haluan, että sivusto on sellainen, josta itse voin pitää. Haluan sivuni olevan juuri sellainen, josta itse pidän. Mutta haluan kyllä aidosti huomioida toisenlaiset käyttäjät, jotka arvostavat eri asioita. Jotta nämä molemmat voivat toteutua, muuta vaihtoehtoa ei tosiaan ollut kuin käyttäjäasetukset.

    Oletusasetukset pitäisi vain olla sellaiset, että ne olisivat kaikille suht. siedettävät. Kyseessä on kaikille käyttäjille kompromissiratkaisu.

    Näytöllä voi olla 0-6 toimintoa (painike tai painikeryhmä). Yhdelläkin pärjää varsin hyvin. O:llakin voi kohtalaisesti selata (jäljellä on leivänmurut + viisi päälinkkiä). Sen yhden takana on sitten sama kuin tällä sivustolla on näissä yhteensä:
    1. Päävalikko
    2. Haku
    3. Kirjautumis- ja rekisteröintilinkit
    4. Pikanavigoinnit
    5. Footer-ostan menu
    6. Ylös/alas-nuolet.
    7. Sivun oikean reunan/lopun luettelot kuten IO-Tech uutiset ja viimeisimmät viestit
    Jos nyt pistää yhden painikkeen jonnekin, noita asioita ei tarvitse etsiä muualta! Vain hälytystoiminto puuttuu ja sitä ei voi mihinkään pikavalikkoon laittaa.

    katso liitettä 284678
     
    Viimeksi muokattu: 02.10.2019
  34. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Uudelleenlatausongelma ratkaisu. Eräs henkilö Suomi24 ystävällisesti auttoi:
    Koodi:
    setcookie("testi", "on", time()+86400, "/", "sanaristikkofoorumi.net", 1);
    if(isset($_COOKIE["testi"])){
    
    ... muutokset
    jos tullut muutoksia ladataan uudelleen ILMAN parametreja:
    
    if (!($_GET["intro"]==$_COOKIE["intro"] && $_GET["sivupalkki"]==$_COOKIE["sivupalkki"] && $_GET["paavalikonsijainti"]==$_COOKIE["paavalikonsijainti"]
    && $_GET["lisavalikko"]==$_COOKIE["lisavalikko"] && $_GET["nuolet"]==$_COOKIE["nuolet"] && $_GET["haku"]==$_COOKIE["haku"]))
        {
        $myUrl = "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
        $myUrlPos= stripos($myUrl,'?');
        $myUrl=substr($myUrl,0,$myUrlPos);
        header("Location: ".$myUrl);
       }
    }
    Tuon testi tarkoituksena on vain testata, hyväksyykö käyttäjä ylipäätänsä evästeet. Jos sitä ei hyväksytä, on turha varsinaisia evästeitä laittaakaan.

    IMG_20191002_172905.jpg
     
    Viimeksi muokattu: 02.10.2019
  35. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Yritän nyt kasata värit yhteen Code Snippettiin - jos vaikka joku tutkisi sitä ja ehdottaisi muutoksia.
     
  36. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Kasasin väreihin liittyvät ominaisuuden yhteen (color,background,border,outline,text-shadow,box-shadow,opacity).

    Tuli aika monimutkainen PHP-tiedosto. Koska on monentyyppisiä sivuja, huomioitu monenlaisia laitteita ja on runsaasti asetuksia, CSS on osissa. Alla pääjaottelut:
    1. Kaikille yhteinen CSS
    2. Joko foorumiosion CSS tai muiden sivujen CSS
    3. Joko tietokoneen CSS tai mobiliilaitteiden CSS
    Kun noista otti kaikista pois värit ja taustakuvat, nuo kaikki piti ottaa huomioon yhdessä tiedostossa. Samoja ominaisuuksia voisi vielä kasailla, mutta etsi ja korvaa -periaateella voi helpohkosti vaihtaa värejä.

    Varasin testisivustolle väriteemaa varten yhden kohdan. Alla koodi, johon voi tehdä uuden väriteeman:

    perusvari.php.txt

    Kannattanee ensin vähän purkaa CSS:ää.
     
    Viimeksi muokattu: 05.10.2019
  37. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Jos luo uuden värimaailman, ehkä haluaisi muuttaa myös border-radius-arvoja. Pitäisikö värien lisäksi olla mukana border-radius-ominaisuus?

    Laitoin tuon koodin haettavaksi, jotta siitä löytää käytetyt värit. Värikoodien perusteella helppo esittää korjausehdotuksia. Koska minulta puuttuu täysin osaaminen tumman teeman luomiseen, en sitä itse edes yritä, mutta ehdotukset voin ottaa vastaan ja laittaa esille vaikka useampia.

    Laitoin yleisasetukseksi box-sizing:border-box (poikkeuksena jossakin box-sizing:content-box). Näin reunaviivojen paksuunnus tai ohennus ei pitäisi vaikuttaa elementtien kokonaisleveyksiin tai korkeuksiin.
     
    Viimeksi muokattu: 05.10.2019
  38. Tup3x

    Tup3x

    Viestejä:
    1 244
    Rekisteröitynyt:
    18.10.2016
    Olisi paljonkin sanottavaa tuosta ratkaisusta ja itse CSS:tä, mutta suosittelen tutustumaan tähän:
    Sass: Sass Basics
    sass/dart-sass
    Helpottaa huomattavasti CSS:än tekoa.

    Tuo on helppo ottaa itselle käyttöön oikeastaan mihin vain projektiin. Laittaa vain automaattisesti kääntämään .scss:t (sass --watch .:.).

    CSS pois PHP filuista ja ei inlinenä internalina. Tarpeen mukaan annat bodylle sopivan luokan, jota sitten käytetään apuna tyylittelyssä.
     
    Viimeksi muokattu: 06.10.2019
  39. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Inlinellä tarkoitetaan yleensä style="..". Jos tarkoitat style-tägiä, sitä käytän varta vasten. Käyttämäni ratkaisu tuo joustavuutta. Style-tägiä käyttäen saa tehtyä muutokset tietokantaan. Link-tägin käyttö veisi CSS:n pois tietokannasta, mitä en halua.

    On etu, että omat PHP, JavaScript ja CSS-koodaukset ovat kaikki Code Snippet tietueina. Ei tarvita FTP-siirtoja. Tietueita on helpompi versioida kuin tiedostoja.

    Erillistiedostot eivät myöskään jousta. Niitä ei voi koodata joustavasti kuten JavaScriptiä tai PHP:tä.

    Jos yrittää muuten, täytyisi olla tosi paljon luokkia, jotta voisi näyttää tai piilottaa halutut elementit. Iso luokkamäärää on vaikea hallita ja tulee turhaa CSS:ää, kun kaikki vaihtoehdot pitäisi sisällyttää CSS-tiedostoihin.

    Asetussivulla minulla on tämäntapaisia määrityksiä:

    Koodi:
    }elseif($CSS===3){
    $CSS='@media screen and (max-width:782px){
    #top-buttons-container{position:fixed;top:0;right:0;width:48px;height:32px}
    #sidebar-top a,#sidebar-top a::before{position:fixed;top:0;right:0;border-radius:0 0 0 5px;}}';
    }elseif($CSS===4){
    $CSS='@media screen and (max-width:782px){
    #top-buttons-container{position:fixed;top:47%;left:0;width:48px;height:32px}
    #sidebar-top a,#sidebar-top a::before{position:fixed;top:47%;left:0;border-radius:0 5px 5px 0;}}';
    }
    Ei tarvitse laittaa ylimääräisiä luokkia. Kun CSS on vaihtoehtoista, homma pysyy hallinnassa, kun ei tarvitse miettiä, mikä luokka liittyisi mihinkin vaihtoehtoon. Kaikkia vaihtoehtoja ei tarvitse laittaa samaan CSS-tietueeseen ja siten kasvattaa tarpeettomasti CSS-tietueen kokoa.

    Asetuksiin liittyvä CSS hoituu hallitummin PHP + CSS -koodauksella kuin luokilla ja pelkällä CSS:llä. Erillistiedostoina link-tägeillä homma ei pysyisi hallinnassa - ei ainakaan minulla. Menisin vain umpisolmuun käytettyjen luokkien kanssa. Homma karkaisi täysin lapasista.

    Ongelma on lähinnä se, että border-radius-ominaisuus liittyy elementtien sijoitteluun. Siihen liittyvien border-radius-arvojen ainoa vaihtoehto on se, että kaikki kulmat on pyöristetty samalla lailla.

    Ajattelen CSS:ää apuohjelmointikielenä, miksi haluan pitää sen joissakin tilanteissa lähellä varsinaista ohjelmointia. Jos tarvitse PHP-funktion, teen sen. Jos on siihen liittyy CSS:ää, joissakin tilanteissa on järkevää käsitellä CSS samassa yhteydessä CSS eikä laittaa sitä jonnekin muualle.

    Samoin teen joissakin Code Snippet -tietueissa JavaScriptille. Enin JS on erillistiedostossa, mutta osa on juuri siinä tiedostossa, jossa sitä tarvitaan.

    En tee ohjelmointiani minkään kaavan mukaan, vaan yritän olla mahdollisimman joustava. Ei aina kannata viedä meren taakse koodia ihan vaan periaatteen vuoksi.

    En voi lisätä bodylle luokkia. Käytettävissä olevat luokat eivät aina riitä. Tällöin ainoa toimiva ratkaisu on PHP + CSS yhdessä. Seuraavaa koodi on tilanteille, joita ei Bodyn luokilla voi hallita:

    Koodi:
    if(function_exists('pageLists')){
    $address = pageLists($list);
    $y=0;
    foreach ($address as $value) {
        if($y==0){$blogi=$value;}
        elseif($y==1){$articles=$value;}
        elseif($y==3){$muut=$value;}
        elseif($y==4){$articles3=$value;}
        elseif($y==5){$ristikot=$value;}
        elseif($y==6){$videot=$value;}
        elseif($y==7){$tag=$value;}
        $y++;
        }
    $howAlt=$blogi || $ristikot || $videot || $tag || $articles3;
    }
    Vilasin esittämäsi Sass ideaa, jossa sanotaan mm:
    Itse asiassa tekemäni PHP & CSS -yhdistelmä hoitaa vähän samaa asiaa.

    Voisihan värit omassa ratkaisussanikin laittaa muuttujina, jolloin eri väriteema edellyttäisi vain sitä, että esim. laitetaan etsi ja korvaa ja "color:#fff" tilalle vaikka '.$linkki_tummalle_pohjalle.'.

    Tuo väriteeman CSS ei ole ihan järkevä siinä mielessä, että ei ole koottu samoja ominaisuuksia sisältäviä ominaisuuksia. Yritin kyllä sitä, mutta se yritys meni ihan pieleen. Piti heittää roskakoriin. Samaa asiaa pitäisi vähän virkeämpänä kyllä yrittää uudestaan. Jos saan järkevämmin kootun CSS:n, muuttujien käyttöä voisi ajatella.

    Ajattelin joskus sisäkkäistä CSS:ää. Useimmat validaattorit pitävät sitä virheellisenä, joten tarkistus on ongelmallista muulla kuin sassilla.

    Joutuisin irrottamaan PHP ja CSS -koodauksen erilleen, mistä en pidä. Varmasti sopii toisille. Ratkaisuni ikävin puoli on se, että Code Snippet toimii bugisesti. Kaikkiin sen tarkistuksiin ei voi luottaa.

    Ehdotuksia saa esittää, mutta eiköhän jokainen meistä halua toimia sillä tavalla kuin itselle parhaaksi sopii. Olennaista on se, että homma on hallinnassa.
     
    Viimeksi muokattu: 05.10.2019
  40. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Yritän käyttötarkoituksettain ryhmitellä CSS-ominaisuuksia, jolloin on helpompi miettiä, mitä tekisi. Nykyisellään se on liian sekava, että sen pohjalta voisi ajatella värimuutosten miettimistä.
     
    Viimeksi muokattu: 05.10.2019
  41. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    CSS olisi lähes pakattua, mutta lisäisi kommentteja tähän tapaan
    Koodi:
    // funktion alussa värimuuttujat seuraavaan tapaan:
    /* header */
    $header_color='#fff';
    $header_text_shadow='3px 3px 3px #000'; // jos ei halua varjostusta, pitää laittaa väriksi "transparent"
    /* valkoisen tekstin käyttö tummalle pohjalle */
    
    /* widget */
    $widget_color[1]='#fff'; // jos samalla alueella eri värejä, käytetään taulukkomuuttujaa
    /* footer */
    $footer_color='#fff';
    
    
    //CSS:ssä:
    
    /* valkoisen tekstin ja sille mahdollisen varjostuksen käyttö */
    /* header */
    ...
    /* valkoinen teksti tummalle pohjalle */
    ...
    /* widget */
    ...{color:'.$widget_color[1].';}
    /*footer */.site-footer,.site-info,.site-info a{color:'.$footer_color.';}
    ...

    Jos muuttaisin ominaisuudet muuttujiksi, väriehdotukseksi riittäisi joukko muuttujia. Tuskin palvelinta suuresti rasittaa värien määritys muuttujina.

    Uutta väreihin liittyvää Code Snippet -tiedostoa tarvittaisiin vain vähän hahmottamiseen, mutta jos joku haluaisi luoda väriehdotuksen, hänen ei tarvitsisi muuttaa värejä suoraan CSS:ään.

    Yhteen värejä käsittelevään Code Snippettiin voisi laittaa useita väriehdotelmia ilman, että tietueesta muodostuisi kohtuuttoman pitkä.

    Link-tägiä käyttävä CSS on vain iso puolidynaaminen tiedosto. Ongelmana tuossa ratkaisussa on validointi. Pitää ohittaa suuri osa virheilmoituksia. Tai sitten pitää kopioida lähdekoodia tarkistimeen.
     
    Viimeksi muokattu: 06.10.2019
  42. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Muuttujien sijaan noi voisi olla vakioita, jolloin voisi laittaa eri tiedostoon ilman globaali-ilmoitusta. Mutta on todella iso työ, koska arvoja on paljon. Niille pitäisi keksiä myös mielekkäät nimet, jotka helpottaisivat koodin ymmärtämistä.

    Tämän verran sain aikaan, mutta väsähdin värkkäämiseen:
    Koodi:
    // yleiset
    $outline='dotted thin';
    $generic_color='#333';
    $generic_link_color='#044774';
    //$light_color='';
    $white_color='#fff';// valkoinen väri tummalle taustalle
    $highlight_color='#ffd700'; // 'gold' aihealueissa väri ja välilehdissä taustaväri
    // varjostukset
    $dark_box_shadow='2px 2px 2px #000';
    $dark_text_shadow=$dark_box_shadow;
    $semidark_box_shadow='2px 2px 2px #333';
    $semidark_text_shadow=$semidark_box_shadow;
    $medium_darker_box_shadow='2ps 2px 2px darkgray';//valkoista tekstiä vasten
    $medium_box_shadow='2px 2px 2px #808080';// gray; valkoista tekstiä vasten
    $medium_text_shadow=$medium_box_shadow;
    $medium_text_shadow_thicker='3px 3px 3px #808080';
    $light_box_shadow='2px 2px 2px #a9a9a9'; // lightgray; valkoista tekstiä vasten
    $light_box_shadow_thick='5px 5px 5px #a9a9a9';
    $light_text_shadow=$light_box_shadow;//valkoista tekstiä vasten
    //taustavärit
    $dark_blue='#044774';//rgb(4,71,116)
    $semidark_blue='#0E81C1';//rgb(14,120,193)
    $extra_window_bg='#efefef';
    // erityiselementit
    $dark_bg=$generic_link_color;
    $dark_buttong_bg=$generic_link_color;
    // header
    $header_color=$white_color;
    $header_text_shadow='3px 3px 3px #000'; // jos ei halua varjostusta, pitää laittaa väriksi 'transparent'
    // pienet opastetekstit
    $help_color=$white_color;
    $help_background_color=$generic_color;
    //leivänmurut
    $breadcrumb_top_color=$generic_color;
    $breadcrumb_top_color_before=$white_color;// eteen laitettavat ikonit
    $breadcrumb_top_text_shadow_before=$dark_text_shadow;
    /* välilehdet */
    $tabs_dark_box_shadow=$tabs_dark_text_shadow=$dark_box_shadow;
    $tabs_light_box_shadow=$light_box_shadow;
    $tabs_white_color=$white_color;
    $tabs_light_background='rgba(4,71,116,.3)';
    $tabs_border_color='1px solid #044774';
    $active_tab_text_shadow='0 0 1px #333';
    $info_text_tab_color=$generic_link_color;
    $tabs_border='1px solid #333';
    // oletuksena valkoisen tekstin käyttö muissa erityiselementeissä
    // widget
    $widget_color[1]=$white_color;
    // footer
    $footer_color=$white_color;
    $footer_bg=$semidark_blue;
        
    Teemassa + bbPressissä on ihan hirveästi kaikenmoista väreihin liittyviä määrittelyjä. Tekee miten tahansa, teeman värien radikaali muuttaminen on työlästä. Väreihin liittyvää CSS:ää on yksinkertaisesti liikaa! Tämän Foorumin CSS:n muuttaminen olisi varmasti helpompaa, kun ei ole sorruttu liialliseen CSS:n käyttöön.

    Osa on varsin vähäisiä, esim.:
    Koodi:
    border-color:rgba(255,255,255,.2)
    Pitäisikö tuon kaltaiset huomioida vai ei?
     
    Viimeksi muokattu: 06.10.2019
  43. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Tuo taitaa olla niin huono idea, että se pitää kuopata. Sinänsä CSS-tiedostoja olisi järkevää laittaa loogisemmin.

    Värejä voi vaihtaa kyllä myös vain etsi- ja korvaa-toiminnolla. Mutta värit pitäisi koota ainakin jollakin tavalla. Asia pitää miettiä uusiksi.

    Ehkä SASSilla saisi tuon hallintaan. Mutta olisi silläkin tosi iso työ. Järkevissä puitteissa on melko vaikeaa luoda vaihtoehtoinen väriteema.

    Keskustelin toisaalla CSS:tä. Siltä kannalta ratkaisuni on huono, että style-tägien sisällä CSS:ää ei voi samalla lailla laittaa cacheen.

    Sivujen otsakekuviin ja eräisiin korosteväreihin liittyvä CSS on pakko olla PHP + CSS koodauksena, sillä muuten haluttua ulkoasumääritystä on mahdoton toteuttaa.

    Asetuksiin liittyvät lyhyet CSS-pätkät pystyy hallitsemaan huomattavasti helpommin PHP + CSS -koodauksella kuin käyttämällä suurta määrää luokkia ja pelkkää CSS:ää.

    Mutta isot staattiset ja valmiit CSS-tiedostot olisi järkevä laittaa link-tägeillä. Se taas ei live-sivustolla onnistunut. Tiedostoa ei lueta.

    Kun lähdekoodia tutkiessani klikkasin absoluuttista osoitetta

    https://www.sanaristikkofoorumi.net/wordpress/wp-content/themes/forum_css.css

    tulee:
    Yleensä kun klikkaa jonkin sivuston linkitettyä CSS-tiedostoa "Näytä lähdekoodi" -tilassa, CSS-tiedoston saa luettavakseen. Sivustollani se ei onnistu.

    hakemistossa /wordpress on .htaccess ja themes-hakemistossa on index.php.

    Muutin hakemiston lukuoikeuksia niin, että kuka tahansa voi kirjoittaa, mutta se ei auttanut.

    Sijoittaisin isot staattiset CSS-tiedostot /themes-hakemistoon.
     
    Viimeksi muokattu: 07.10.2019
  44. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Kyse lukuoikeuksista. Oletus on 0751. Kun laitoin 7755 linkitetty CSS toimi. On varmaan järkevää siirtää isot tiedostoihin, mutta pienehköt voi olla style-tägeillä.

    Siirsin live-sivustolla isot CSS-tiedostot erillistiedostoiksi. Kaikki tiedostot joko 99% tai 100% minimoituja.

    Tulipa taas sähläiltyä. Mutta käytäntönä jatkossa kannattaa se, että testisivustolla käytän tietokantaa. Kun saan riittävään kuntoon, pakkaan CSS:n ja siirrän live-sivustolle.

    Tulipa vähän muutettua käytäntöjäni.

    Mikähän on järkevä raja, että käyttää link-tägiä style-tägin sijasta?Nyt siirsin 5K ja 11K tiedostotkin. Ehkä ne turhaan.
    Isoin style-tägin sisällä ollut CSS-data oli muuten 84kb.
     
    Viimeksi muokattu: 07.10.2019
  45. living_death

    living_death ★ Still alive ™

    Viestejä:
    2 648
    Rekisteröitynyt:
    15.11.2016
    Tämä oli varmaan ennestään tuttua / kerrottu?

    Nettisivu auki Firefox selaimessa -> klikkaus hiiren kakkospainikkeella halutun elementin päällä -> valitaan "Inspect Element".

    Kaikista näppärin tapa päästä katsomaan css-määrityksiä.

    css.PNG
     
  46. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Käytän vastaavaa Chromium-selaimessa. En tosin käytä sitä juurikaan tuossa tarkoituksessa vaan lähinnä CSS:n kohdentamisen suunnittelussa.

    Mutta siitä vaihtoehtoisesta väriteemasta.

    Laskin, että jos haluaa dynaamisesti (muuttujia tai vakioita käyttävän) kootun style-tägin, lopullista CSS-koodia tulee tietokoneelle lähes 60kB. Laskin sen tallentamalla paloja ja laskemalla mitä tulee kokonaismääräksi tietokoneella kun mukana on perusosa, foorumiosa ja tietokonemäärittelyt.

    Palvelin saa käsittelyyn biteissä enemmän mutta käsittelyssä vähemmän, sillä sille CSS on vain tekstiä, jota ei tarvitse prosessoida.

    60 kB style-tägidataa ei oikein tunnu järkevältä (sen määrän selain muuten tällä hetkellä käsittelee testisivustolla eräässä style-tägissä). Ehkä SASS avulla saisi dynaamisen koodin, mutta silti moneen CSS-tiedostoon laitetun CSS:n?

    Jos se tarjoaa vain osista kasaamisen, siitä ei minulle juuri ole enää hyötyä, koska CSS on jo olemassa.

    Osa CSS:stä on silti ongelmallista, sillä se vaatii PHP:llä if-lausekkeita toimiakseen halutusti, koska BODY-elementin luokat eivät riitä CSS:n hallintaan. Osa värimäärityksestä jäisi SASS:lla pakosti ulkopuolle. Tosin aika pieni määrä. Kyseessä on lähinnä korosteväri ja taustakuvien käyttö. Ne pitäisi paikata jossakin erillisessä Code Snippetissä.
     
    Viimeksi muokattu: 07.10.2019
  47. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Mitään hyvää ratkaisua mahdolliselle vaihtoehtoiselle väriteemalle en siis löytänyt. Laitoin alihakemistoon värejä koskevat CSS-tiedostot. Helpoimmalla pääsee kun etsii ja korvaa tietyssä alihakemistossa olevien tiedostojen ominaisuuksia. Sinne kopioin myös kasaamistiedoston, jossa on PHP + CSS -koodausta, jota ei voinut värejä koskeviin CSS-tiedostoihin laittaa.

    Otan testisivustolla tarpeen mukaan käyttöön style-tägit. Niiden kanssa versiointi on vain monin verroin helpompaa kuin erillistiedostojen kanssa. Versioita joistakin tiedostoista on tullut tehtyä yli 60 kpl, mutta olen vanhoja poistellut tarpeettomina.

    Oli tosiaan tyhmää cachen takia käyttää massiivisia style-tägejä livesivustolla. Siitä huomautus oli ihan oikein.

    Siirsin JS:ääkin erillistiedostoihin niin paljon kuin mahdollista. Kaiketi niissäkin on hyötyä, että tallennetaan cacheen.
     
    Viimeksi muokattu: 09.10.2019 klo 10:00
  48. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    Code Snippetin kanssa CSS:ää oli helppo tehdä versioita. Mutta erittäin huono kirjoittamiseen. Mikähän olisi paras ilmainen CSS-editori. Olisi kiva, jos se osaisi automaattisesti minimoida ja purkaa minimoinnin.

    SASS olisi järkevä, jos tekisi muille sivuja, mutta yhden sivuston kanssa en koe mielekkääksi.

    Entä CSS:n pilkkominen entistä pienempiin paloihin media-attribuuteilla, esim.
    media="screen and (max-width: 782px)"
     
    Viimeksi muokattu: 09.10.2019 klo 10:28
  49. Tapio X

    Tapio X

    Viestejä:
    405
    Rekisteröitynyt:
    27.03.2018
    peruttu
     
    Viimeksi muokattu: 09.10.2019 klo 16:45
  50. Tup3x

    Tup3x

    Viestejä:
    1 244
    Rekisteröitynyt:
    18.10.2016
    Versiointi hoidetaan Git:illä tai jollain muulla versionhallinnalla. SASS sopii mihin vain ja helpottaa asioita. Se voi olla vaikka aivan puhdasta CSS:ää eli todella helppo ottaa käyttöön. Minifoinnit ym. voi tehdä erikseen vaikka Node.js:ää käyttäen Gulpilla siten kun haluaa siirtää kamat tuotantoon. G-zipattuna ja minimoituna tyylitiedosto tuskin vie paljon mitään.

    Itselle ei ole tullut vastaan kerta kaikkiaan yhtään tilannetta, missä CSS olisi pakko pilkkoa eri sivuilla miten sattuu. Toistosta pääsee SASSilla eroon.

    Lisäksi tämä on mahdollista:
    Koodi:
    // Vaikka bodyssa
    .joku {
    // CSS:ät tänne, jotka mätchytyvät vain tuon luokan lapsissa.
    }
     
    Viimeksi muokattu: 09.10.2019 klo 19:13