Otagowano: 

  • Autor
    Wpisy
  • 27/03/2024 o 09:22 #113420
    Marta Alicja Liebon
    Uczestniczka

    Cześć 🙂
    Mój formularz w wp forms ma 3 okienka następujące jedno pod drugim:
    imię
    adres mail
    treść

    Pytanie:
    Czy da się zrobić w darmowej wersji, (np przez css), by 1 i 2 okienko było obok siebie?
    Czyli:
    Imię | adres mail
    treść

    I pytanie nr 2
    czy da się (pewnie tak i pewnie CSS?) zmniejszyć czcionkę dla checkboxa? Bardzo chciałabym to zrobić, ale nie wiem, gdzie i co wkleić (i żeby nie zastosowało się do całego formularza :<)

    27/03/2024 o 13:38 #113422
    Marta Alicja Liebon
    Uczestniczka

    Pytanie 1 rozwiązane, pomogły zmiany ustawień układu.

    Ale czcionka dla opisu pola wyboru to dla mnie jakiś koszmar. Chcę, by była mała i szara.
    Próbowałam napisać CSS, ale nic nie działa, nie wiem, czy robię coś źle.
    Próbowałam np.:
    #wpforms-123 .wpforms-field-label {
    font-size: 8px;
    color: gray;
    }
    *123 zastąpiłam nr mojego formularza

    nie działa.

    27/03/2024 o 14:38 #113424
    Paweł Zieliński
    Moderatorka

    Cześć, proponuję użyć css flex, choć rozwiązań jest wiele.
    Poniżej przykładowy kod:

    .container {
  display: flex;
  flex-wrap: wrap;
}

.container input.side-by-side {
  flex: 1 1 auto; /* Daje inputom możliwość rośnięcia i kurczenia się, ale z domyślną bazową szerokością auto */
  max-width: calc(50% - 10px); /* Zakładając maksymalnie 50% szerokości minus jakiś margines, np. 10px */
}

.container input:nth-child(3) {
  flex-basis: 100%; /* Sprawia, że trzeci input zajmuje całą szerokość */
}

    Tam gdzie pisze container możesz podać swje klasy lub id to samo przy .side-by-side.
    Możliwe, że twoje inputy czyli pola do wpisywania znajdują się w div’ach lub w innych kontenerach.
    Nie mam jak tego sprawdzić nie mam adresu strony.

    Gdzie dodać css => Kokpit WP > Wygląd > Dostosuj > Dodatkowy CSS
    Tam dodjaesz, działa na calej stronie. Jak chcesz żeby dodać w miejsu gdzie występuje problem to zależy od buildera, dlatego podaję ogolne miejsce i tam zawsze działa.

    Jeżeli chodzi o zmianę wielkości fonta to można dodać to w tym samym miejscu.
    Znajdujesz nazwę klasy i kożystasz z poniższego kodu

    .class{
font-size: 12px !important;
}

    Tam gdzie jest .class wpisujesz klasę lub id (wtedy z # zamiast kropki przykład => #id-pola).
    To jest ogólna instrukcja, bez zobaczenia kodu trudno napisać jednoznaczne rozwiązanie.

    30/03/2024 o 11:26 #113452
    Marta Alicja Liebon
    Uczestniczka

    Dzięki 🙂 Pierwszy kod brzmi trochę jak czarna magia 😉
    Zdecydowanie muszę się otrzaskać z CSS.

    Udało mi się zmienić czcionkę, zamieniając tekst z pola wartość na dodatkowe. I samo się wyszarzyło 😀

    02/04/2024 o 10:12 #113456
    Paweł Zieliński
    Moderatorka

    W sieci o css jest b. dużo informacji.
    O flex znajdziesz tutaj:

    A Complete Guide to Flexbox


    o nth-child
    https://www.w3schools.com/CSSref/sel_nth-child.php
    o klasach i id
    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
    Podałem różne strony ale na każdej z nich znajdziesz pozostałe informacje.

  • Autor
    Wpisy