Support » Lisäosat ja muokkaukset » Miten mobiilisivun menu-valukon värit muutetaan?

  • Moi!

    Kertokaas nyt, että miten (ja mistä) saan muutettu ko sivuston mobiiliversiossa menu-valikon tekstin ja taustan väreja? esim mobiiliversion alavalikon väri on aivan liian tummansininen…

    The page I need help with: [log in to see the link]

Esillä 15 vastausta, 1 - 15 (kaikkiaan 17)
  • Tarkoitatko alavalikolla sitä kohtaa valikosta, jossa lukee ”Etusivu”? Sen taustaväri tulee CSS:stä tällaisella valitsemella:

    .top-nav-list li.current-menu-item > a

    ja tuo on kohdistettu mobiiliin tällaisella:

    @media only screen and (max-width: 767px)

    Siispä jotenkin näin:

    @media only screen and (max-width: 767px) {
    .top-nav-list li.current-menu-item > a {
        background-color: uusi taustaväri.
    }
    }
    Thread Starter jhh78

    (@jhh78)

    Kiitos Mikko vastauksesta. Tarkoitan tätä tummansinistä puhelimella katsottuna.

    WordPress ongelmat

    <script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

    https://imgur.com/a/NoQlN

    1. Voitko kertoa, että millä ohjelmalla etsit aina nuo ko kohdat?

    2. Ja seuraavaksi tarvisin tiedot, että kun menee sivustolla tietyn kohdan päälle, niin mistä valikosta näen nuo kertomasi koodit?

    3. Mistä näen, että minne tiedostoon nuo ko muutokset/lisäykset tehdään?

    Neuvoj kaivataan/tarvitaan, että pääsisi itsekin kärryille hommassa. =)

    Thread Starter jhh78

    (@jhh78)

    En osaa etsiä mainitsemisia kohtia? Miten löydän ne? Eli mihin kohtaan laitan kursorin ja mistä valikosta katson? Rautalankaohjeita tarvitaan…

    https://imgur.com/F4tOvhQ

    Thread Starter jhh78

    (@jhh78)

    Pitääkö joku resources olla aktivoituna?

    Ihan oikea tarkistustyökalu sulla on käytössä. Kun klikkaan hiiren oikealla napilla tuossa alavalikon ”Päättyneet operaatiot”-kohdassa ja valitsen ”Tarkista elementti”, Chrome valitsee sen nimenomaisen elementin koodista.

    Sitten vain oikean reunan ”Styles”-listasta etsimään, missä kohden taustaväri on määritetty. Taustavärin määritelmää ei kuitenkaan löydy, mistä voidaan päätellä, että sitä ei olekaan määritelty linkille eli A-elementille, vaan kenties vähän ylempänä.

    ohje1

    Valitaan siis rakenteesta ylempi elementti eli LI, jonka sisällä A on, ja katsotaan sen tilannetta – ja sieltähän se taustaväri sitten löytyy.

    ohje2

    Sieltä saadaan taustavärille tällainen määrittely, eli kyseinen taustaväri on määrätty käyttöön silloin kun ruudun leveys on korkeintaan 1024px:

    @media screen and (max-width: 1024px)
    #top-nav-list .haschild.open ul li {
        background-color: rgba(67,94,114,1) !important;
    }
    Thread Starter jhh78

    (@jhh78)

    Kiitos vastauksista. Nyt yritin mobiiliversiossa mennä muuttamaan etusivun otsikkotekstiä pienemmäksi.

    1. Mistä löydän sen ko mobiiliversion fonttikohdan Chromn tarkista-ominaisuudella?

    2. ja kun löydän sen tietyn oikean muutettavan kohda, niin miten löydän sen esim. style.cs tiedostosta?

    Kuvat olisi taas niin havainnollistavia =)

    Thread Starter jhh78

    (@jhh78)

    Tuota fonttia yritin pienentää/muuttaa, mutta eipä fontin koko muutu…

    @media only screen and (max-width: 767px)
    (index):536
    #content h1 {
    font-size: 30px;
    }

    Thread Starter jhh78

    (@jhh78)

    Siis H2 tekstit pitäisi saada pienemmiksi kaikissa mobiiliversioissa….

    Moderator Mikko Saari

    (@msaari)

    No toi #content h1 muuttaa h1-elementtejä. h2-elementtien kokoa mobiiliversiossa ei ole määritelty ollenkaan, eli laita tuohon CSS-tiedostoon sopivien @media-kohtien sisälle vaikka tällainen:

    #content h2 {
    font-size: 24px;
    }
    Thread Starter jhh78

    (@jhh78)

    Kiitos Mikko taas. =) Näyttääkö otsikot nyt paremmilta eri kokoisilla näytöillä?

    Moderator Mikko Saari

    (@msaari)

    Lisäisin tuohon jonkun välimallin vielä, yli 767px leveillä näytöillä otsikot ovat turhan isoja.

    Esim.

    @media only screen and (min-width: 768px) and (max-width: 1200px)

    ja tuohon vähän pienemmät otsikot.

    Toinen vaihtoehto on ylipäätään pienentää noita otsikoita, toi 50px näyttää minusta tietokoneen näytölläkin turhan isolta. Joku 38px tms. olis vähän hillitymmän kokoinen, eikä tarvitsisi mitään lisäpienennyksiä pienemmillä näytöillä.

    Sulla on muuten kaikilla sivuilla h1-otsikko, joka on piilotettu ja pääotsikkona h2, joka näkyy. Pystyisikö tekemään niin, että tuon h2-otsikon ottaisi pois ja tuon h1-otsikon muotoilisi samannäköiseksi kuin tuo nykyinen h2?

    Thread Starter jhh78

    (@jhh78)

    Menu-valikkoa ei pysty muuttamaan sellaiseksi kutenminä se haluaisin. Minkä nimisen menu-valikon pystyy asentamaan tuohon sivulle ko orggiksen tilalle? Eli menu-valikko pitäisi olla sellainen, missä olisi esimerkiksi sellaien toiminto, että kun on joku valittun, niin se ”otsikkopalkki” muuttaisi väriä (jäisi väri aktiiviseksi). Niin ja hover-väri olisi tietenkin erikseen…

    Thread Starter jhh78

    (@jhh78)

    Mikko, voitko neuvoa että miten saan muutettu sivun nykyistä menu-valikkoa siten, että menu ei rullaakaan itsestään hiirtä liikuttamalla, vaan menu-valikko avautuisi tai menisi kiinni ainoastaan hiiren napia klikkaamalla… Tuo menu-valikko olisi pakko saada toimimaan siten… Eli ekalla klikkauksella ko päävalikko auki ja toisella klikkauksella itse haluttu sivu auki.

    Neuvoja ja opastusta tarvitaan…

    Ymmärrän tarpeen, tuo nykyinen valikko on aika hermojaraastava. Ei nyt kyllä ole valmista vastausta, sen verran paljon rakentelua tuon muuttaminen luultavasti vaatisi, että voi olla helpompaa tehdä halutulla tavalla toimiva valikko suoraan itse. Sinänsä ei ole hirveän mutkikasta tehdä Javascriptillä toimiva nappi, joka avaa tai sulkee valikkoa.

    Thread Starter jhh78

    (@jhh78)

    Mikko, oisko sulla jotain ohjetta ko valikon tekemiseen? Vai onko olemasa jotain valmiita Wordpres menu-valikoita, mitä voisi suoraan laittaa ko alkuperäisen menu-valikon tilalle?

Esillä 15 vastausta, 1 - 15 (kaikkiaan 17)
  • The topic ‘Miten mobiilisivun menu-valukon värit muutetaan?’ is closed to new replies.