Nätimpi hakulomake

Heii

Minulla on teemassa nätti hakulomake tavallisille sivuille:
https://www.sanaristikkofoorumi.net/wordpress/ristisanatehtavat/

Mitenkähän saisin saman näköisen
https://www.sanaristikkofoorumi.net/wordpress/forums/

Heitin tavallisen hakulomakkeen yläkulmaan, koska tuo nätimpi koskee vain tavallisia sivuja. Foorumiosastolla haun on syytä kohdistua foorumiosioon.

Tein foorumiosastolla oikeaan yläkulmaan laitettavan haun siten, että toimii 800px sivunleveydestä alkaen.

12

159

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Turbo-Urpo1

      WordPressenin bbPress foorum sisältää laajennoksen tai natiivin haun, foorumin aiheista. Eihän sellaisella foorumilla ole virkaa ellei se hakua sisällä.

      Mene Asetuksiin > Foorum
      Sitten Foorm ominaisuudet osioon, ja hyväksy Foorumin laajuinen haku.

    • Foorumille on kyllä haku, mutta kyse on siitä, että olisin halunnut saman näköisen hakulomakkeen kuin mitä on muilla sivuilla.

      Nythän systeemi toimii niin, että kun ollaan muilla sivuilla kuin foorumisivuilla, yläosassa on muita sivuja koskeva haku.

      Kun mennään foorumiosioon, piilotan normaalin haun ja nostan oikean reunan palkissa olevan haun oikeaan ylänurkkaan. Toimii täysin, mutta ei näytä optimaalisen hyvältä.

      Foorumin haku ei näytä yhtä hyvältä. Mitähän vaatisi, että hakupainiketta klikkaamalla saisi hakulomakkeen esille. Hakupainikkeen voisi kopioida kuvaruutukopiota hyödyntäen tavallisesta hausta.

      Mutta miten toteuttaa saman näköisesti toimiva piilotus/paljastus. Tuskin toimisi vain CSS:llä. Vaatinisi vähän JavaScriptiä. Mikähän olisi sopiva skripti, jolle sen saisi.

      Laittain hakulomakkeen fyysisesti alapalkkiin ja nostaisin sen sitten ylös

      Käyttäisin samoja luokkia lomakkeen osilla, jotta ulkoasu olisi automaattisesti oikein.

    • tai voisihan tuota kokeilla ul:active - kai se lomake sen ajan pysyy paikallaan, että voi kirjoittaa haun?
      Ei tarvitisisi etsiä JavaScript-toteutusta.

      https://www.w3schools.com/cssref/sel_active.asp

      mukaan toimii muillekin kuin linkeille

    • Testasin tuon. Ei toimi. li:active ul pitää esillä ul-elementin vain hetkeksi.
      li:hover ul taas näyttää silloin kuin ei pitäisi.

      Täytyy tehdä JavaScriptin avulla.

      • Turbo-Urpo1

        # ul li :hover{
        background-color: green;
        }
        Tämä hover tässä määrittelee taustan vihreäksi, silloin kun hiiri viedään alueelle jolla on tuo tyylimäärittely voimassa. Eli sillä korostetaan sitä valikkokohtaa jossa hiiri sillä hetkellä seikkailee.

        -

        # ul li :active{
        background-color: blue;
        }
        Tässä halutaan viimmeisimän valinnan näkyvän sinisenä, jotta käyttäjä muistaisi mitä valikonkohtaa miimmeiseksi on klikannut hiirellä.

        Tähän on ihan mahdotonta antaa täsmä-ohjetta. Mutta minä saattaisin yrittää kopioida sen hyvänäköisen hakupalkin, sinne missä halúaisin sen olevan, mutta muuttaisin sitä niin että lomakkeen käsittely ohjautuisi sille samalle joka on siinä foorumin alkuperäisessä käytössä. Tämä on niin ympäri pyöreetä ohjetta ettet varmaan tule autetuksi. Pitänee käydä vilkaisemassa lähdekoodia, voiko sen perusteella ohjeitaa yhtään paremmin, välttämättä ei koska koodi on PHP -tulkin kautta tutettua.

        Tässä mielestäni hyvin viksun oloinen hakupalkki, vaikkakaan ei istu sinun sivustosi tyyliin ollenkaan. https://codepen.io/Memphis/full/ihjDu


      • Turbo-Urpo1
        Turbo-Urpo1 kirjoitti:

        # ul li :hover{
        background-color: green;
        }
        Tämä hover tässä määrittelee taustan vihreäksi, silloin kun hiiri viedään alueelle jolla on tuo tyylimäärittely voimassa. Eli sillä korostetaan sitä valikkokohtaa jossa hiiri sillä hetkellä seikkailee.

        -

        # ul li :active{
        background-color: blue;
        }
        Tässä halutaan viimmeisimän valinnan näkyvän sinisenä, jotta käyttäjä muistaisi mitä valikonkohtaa miimmeiseksi on klikannut hiirellä.

        Tähän on ihan mahdotonta antaa täsmä-ohjetta. Mutta minä saattaisin yrittää kopioida sen hyvänäköisen hakupalkin, sinne missä halúaisin sen olevan, mutta muuttaisin sitä niin että lomakkeen käsittely ohjautuisi sille samalle joka on siinä foorumin alkuperäisessä käytössä. Tämä on niin ympäri pyöreetä ohjetta ettet varmaan tule autetuksi. Pitänee käydä vilkaisemassa lähdekoodia, voiko sen perusteella ohjeitaa yhtään paremmin, välttämättä ei koska koodi on PHP -tulkin kautta tutettua.

        Tässä mielestäni hyvin viksun oloinen hakupalkki, vaikkakaan ei istu sinun sivustosi tyyliin ollenkaan. https://codepen.io/Memphis/full/ihjDu

        Tuossa on sellainen heikko kohta että kun päivität teemaa, omat muutokset suoraan koodiin voivat kadota, ja niin ollen tuli tehtyä turhaa työtä. Tuo tulisi tehdä WordPress laajonnoksena (plugins), mutta tuo taas vaatii paljon lisää aikaa, tietoa ja todellista tahtoa viedä asia päätökseen, vaikkei ihan heti asiat avautuisikaan.


    • No laitoin ihan pienen pätkän JavaScriptiä, jolla sain toimivuuden. Pieni kosmeettinen ongelma jäi.
      Palkin vasempaan reunaan jäi 13px marginaali, jota en saa pois. Jos siirrän elementtiä virhe tulee oikeaan reunaan.

      Laitoin alapalkkiin sen ylimääräisen elementin, jonka siirrän CSS:.ssä oikeaan paikkaan. Muualle en saa sitä laitettua koskematta lähdekoodiin. Jokin footer-osioissa saa aikaan sen 13 px:n suuruisen ongelman.

      Leveysseikat pitää vielä fiksata.

    • Tuntuu kaatuvan z-index -ongelmiin. Jos haluaa nostaa alhaalta ylös, ylävalikko lakkaa toimimasta.

      Millään ei viitisi koskea php-koodiin.

    • Siirsin toiseen paikkaan. Ainoa ongelma on leveysmäärittely, jota ei saa dynaamiseksi vaan menee aina hyppäyksittäin.

      • Turbo-Urpo1

        Tein animaation jossa olen poistanut sen foorumin hakupalkin, ja korjannut sen jota olet laittamassa. Luultavasti nuo nyt meni oikein päin. Kuinka lähelle meni sitä mitä sinä tavoittelet ?

        https://i.postimg.cc/W4dYLhq2/hakupalkki.gif


    • Tuon tapaista, mutta leveysarvojen suhteen suht. saman näköisenä kuin muilla sivuilla. Sain toimimaan suht. nätisti.

      Joissakin kohdin pieniä ongelmia tilanteessa kun vasemmalle tulee kolmas lohko.
      Hakulomakkeen vasen reuna ei aina asetu vasemman reunan sinisen rajakohtaan.

      Pikkasen ärsyttää teemassa se, että ihan liian paljon hakulomakkeen leveys vaihtelee leveyden mukaan. Kaksi arvoa riittäisi 200px kapealle ja 400px leveälle näytölle.

      WordPressin leiskoissa kikkallaan vähän liikaa leveysmuuttuvilla arvoilla. Niihin on työläs päästä kärryille. Muuttamisessa saa olla tosi huolellinen.

      foorumiosiossa leveydet eivät ole samat kuin muilla sivuilla, koska halusin, että 800px leveällä näytöllä oikeanpuoleinen palkki on mukana. Sitä piti kaventaa. Sitä piti kaventaa kautta linjan.

      Nykyajan leiskat ovat sen verran komplekseja että niiden kanssa saisi tuhrattua aikaa loputtomiin.

      Kokonaisuus on nyt varsin siisti.

    • Laitoin "paikkalapun"

      body.bbpress li#reunus-li {
      display:block;
      height:50px;
      width:240px;
      position:fixed;
      left:0px;
      top:48px;
      background-color:rgb(13,113,180);
      z-index:000000000000000
      }
      Pystyi korjaamaan vain "paikkalapulla", sillä haku piti asemoida oikeaan reunaan ja sille piti aina määritellä tarkka pikseliarvo.

      Laitoin haun foorumiosastolle kiinteäksi kaikilla sivuleveyksillä. Mitä käyttäjäystävällisyyden huomioimiseen tulee, foorumisivustoni on netin parhammistoa. Kaikki löytyy maksimaalisen helposti. Skrollausta on mahdollisimman vähän, sillä on nuolet sivun ylälaitaan ja alalaitaan väh. 800px levyisellä näytöllä. Sivuilla, joilla voi kirjoittaa, nuoli vie lomakkeen kohdalle (muilla ns. footer-osioon). Jos joku löytää käyttäjänäkökulmasta paremmin toteutun foorumin, saa tulla kertomaan.

    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Nellietä Emmaa ja Amandaa stressaa

      Ukkii minnuu Emmaa ja Amandaa stressaa ihan sikana joten voidaanko me koko kolmikko hypätä ukin kainaloon ja syleilyyn k
      Isovanhempien jutut
      6
      1218
    2. Mielessäni vieläkin T

      Harmi että siinä kävi niinkuin kävi, rakastin sinua. Toivotan sulle kaikkea hyvää. Toivottavasti löydät sopivan ja hyvän
      Ikävä
      15
      1148
    3. Nähtäiskö ylihuomenna taas siellä missä viimeksikin?

      Otetaan ruokaöljyä, banaaneita ja tuorekurkkuja sinne messiin. Tehdään taas sitä meidän salakivaa.
      Ikävä
      1
      1089
    4. Ei luottoa lakko maahan

      Patria menetti sovitun ksupan.
      Suomen Keskusta
      2
      1086
    5. Sinäkö se olit...

      Vai olitko? Jostain kumman syystä katse venyi.. Ajelin sitten miten sattuu ja sanoin ääneen siinä se nyt meni😅😅... Lis
      Ikävä
      0
      1068
    6. Hyvää yötä ja kauniita unia!

      Täytyy alkaa taas nukkumaan, että jaksaa taas tämän päivän haasteet. Aikainen tipu madon löytää, vai miten se ärsyttävä
      Tunteet
      2
      1065
    7. Pupuhuhdasta löytyi lähes sadan kilon miljoonalasti huumeita

      Pupuhuhdasta löytyi lähes sadan kilon miljoonalasti huumeita – neljä Jyväskylän Outlaws MC:n jäsentä vangittu: "Määrät p
      Jyväskylä
      41
      1064
    8. Persut petti kannattajansa, totaalisesti !

      Peraujen fundamentalisteille, vaihtkaa saittia. Muille, näin sen näimme. On helppo luvata kehareille, eikä ne ymmärrä,
      Maailman menoa
      0
      1062
    9. Housuvaippojen käyttö Suomi vs Ulkomaat

      Suomessa housuvaippoja aletaan käyttämään vauvoilla heti, kun ne alkavat ryömiä. Tuntuu, että ulkomailla housuvaippoihin
      Vaipat
      0
      1057
    10. Lepakot ja lepakkopönttö

      Ajattelin tehdä lepakkopöntön. Tietääkö joku ovatko lepakot talvella lepakkopöntössä ´vai jossain muualla nukkumassa ta
      0
      1055
    Aihe