Job posts

Na ovoj stranici možete pogledati spisak i opise aktivnih poslova i poslati ponudu direktno na stranici

Kreiranje login ikone u mobilnom meniju

  • Backend Development
  • PHP

U postojeći mobilni meni je potrebno dodati login ikonicu koja će voditi na login stranicu.
Login ikonica treba da se nalazi između logotipa (sa leve strane) i mobilnog menija – hamburger ikonice (sa desne strane). Desktop i mobilni meni kreirani su u OceanWP temi. Tačan PHP fajl u kojem je potrebno izmeniti kod kao i testno okruženje (staging) su obezbeđeni.

Na fotografiji ispod ilustrovano je rešenje.

U kontakt formi pored je moguće navesti deadline i cenu usluge da se ovo uradi. Takođe, ukoliko imate dodatnih pitanja ili ako smo mi zaboravili da nešto navedemo u opisu, slovodno napišite u delu “poruka”.
Hvala unapred na izdvojenom vremenu.

CSS tranzicija na hover preko dugmeta

  • Frontend Development
  • CSS
  • CSS-Transitions

Potrebno je implementirati CSS hover animaciju na Contact Form 7 submit dugme i na Elementor form subscribe dugme.
Ovo je animacija koju je potrebno napraviti:

Dugme

 

Na linku ispod je moguće pogledati stranicu sa elementima na koje je potrebno primeniti animaciju.

https://biocodis.com/test-page/

Na sajtu se koristi Elementor builder, ukoliko Vam je ova informacija bitna.
Prvi problem koji je bilo potrebno rešiti je da se zameni dugme submit sa < button > elementom, kako bi u njega mogao da se ubaci još jedan < span > element kako bi tekst mogao da ima veći z-index od pozadine dugmeta. Ovo je postignuto sa prostim ubacivanjem < button id=’submit’>< span>Send</span></button> umesto [submit] elementa, jer id trigeruje slanje forme. 

Kod animacije na dugmetu koje koristimo na celom sajtu i koja treba da se primeni i na ova tri dugmeta (da malo olakšamo stvari):

.oew-btn-effect-8 a {
border: 1px solid rgba(0,0,0,0.2);
position: relative;
}

.oew-btn-effect-8 a span {
position: relative;
z-index: 2;
}

.oew-btn-effect-8 a::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
z-index: 1;
opacity: 0;
background-color: rgba(0,0,0,0.2);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;

}

.oew-btn-effect-8 a:hover::before {
opacity: 1;
width: 100%;
}

Ovo je kod koji smo napisali. Ostalo nam je da rešimo problem sa z-index-om teksta koji ne ide preko animirane pozadine dugmeta, već ispod, kao i blaža ease-in tranzicija sa plave na narandžastu tokom animacije. (selektor je neophodan zbog Elementora, ne morate obraćati pažnju na njega, jer se ne prikazuje na stranici)

 

selector button {
position: relative;
font-family: “Open Sans”, Sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 18px;
color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
padding: 10px 20px 10px 20px;
border: none;
background-color: #0D9FEC;
}

selector button span {
z-index: 2;
}

selector button::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
z-index: 1;
background-color: rgba(242,157,23,1);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border-radius: 3px;
}

selector button:hover::before {
opacity: 1;
width: 100%;
}

Potrebno je popuniti kontakt formu pored kako biste nam poslali ponudu.
Hvala unapred na izdvojenom vremenu.

Izmena LearnDash Focus mode-a

  • LearnDash
  • Backend Development
  • PHP
U potrazi smo za backend developer-om koji je iskusan u menjanju koda LearnDash plugin-a. Potrebno je dodatno prilagođavanje i menjanje pozicija osnovnih (default) elemanata LearnDash Focus mode-a. Potrebne su sledeće izmene:
  • Naziv kursa potrebno je pozicionirati u gornjem levom uglu iznad navigacionog sidebar-a. Klikom na naziv vraćamo se na glavnu stranicu kursa.
  • "Previous" i "Next" dugme koje vodi na prethodnu i sledeću lekciju, potrebno je pozicionirati u deo sadržaja (koji je rađen u elementor builder-u) i to sa desne strane naziva lekcije. Trenutno je zamišljeno da se u delu sadržaja svake lekcije na vrhu nalazi video, zatim sledi naziv lekcije (sa leve strane) i next i previous dugmići (sa desne strane), a ispod toga dalji sadržaj u vidu teksta.
Sve potrebne izmene ilustrovane su fotografijom ispod.

Na sledećem linku možete videti trenutni izgled focus mode-a: https://biocodis.com/modules/module-1-defining-balance-what-balance-is-and-is-not/

U kontakt formi pored je moguće navesti deadline i cenu usluge da se ovo uradi.
Hvala unapred na izdvojenom vremenu.

Formular za ponudu