Home / Web Design / 10. Kuanza Style Header ndani ya WordPress Theme

10. Kuanza Style Header ndani ya WordPress Theme

Kitu cha kwanza kuona mtu anapotembelea website yako ni header, na hilo ndio tutaanza nalo hapa. Header kwenye WordPress website inabeba site title, site description, home link na pia main menu.

Kwenye hii theme kuna maamuzi nimefanya, sijataka header iwe iwe na urefu mkubwa sana nah ii ingechukuwa nafasi kuwa na hasa kwenye mobile devices. Na hivyo basi kwenye website hii utaona header yote ukiwa kwenye home page tuu, ukiwa kwenye page nyingine utaona reduced header, ikionyesha home button kwenye kona upande wa kushoto na pia menu button hapa chini kwenye mobile devices au menu hapa juu kwenye wide screen.

Kitu tunachotakiwa fanya hapa ni kuhakikisha header inaonekana sawa kama inavyoonekana hapa kwenye design. Kwa sasa header yetu inaonekana kama content nyingine hapa na hili tunatakiwa libadili. Na tutaanza hili hapa kwenye browser, kwa kutumia developer tool nitainspect element zinazounda website yetu, kujua ni element gani ninatakiwa istyle. Hapa unaona header element ninaona imepewa id ya masthead na class ya site-header. Hapa ndani ya header kuna div yenye class site-branding, na hivyo basi nikitaka weka background ya blue kama kwenye design basi nitakakiwa kufanya kazi na site-header na site-branding.

Ukiangalia table of contents hakuna section ya header, hivyo nitaongeza hapa chini ya Clearings kisha nitashuka hapa chini na kuimport file la kustyle header lije hapa. Nimekumbuka kitu hapa kwa kuwa niliset sass na grunt hivyo nitarudi kwenye command prompt na kurun grunt ili iangalie mabadiliko kwenye folder la sass ka kucompile css style. Sasa nilikuwa bado sijatengeza file la header.scss, sijalitengeneza nitafanya hivyo sasa nitaright click kwenye folder la site lililo ndani ya folder la sass na kutengeneza file jipya.

Hapa kwenye file la header.scss nitaanza kwa kuweka background kwenye header yetu na nitatumia class ya site-header. Nitaenda kwenye browser na nitarefresh na nitaona mabadiliko yaliotokea hapa, ngoja niweke maneno katikati haya ya site-title na site-description. Hapa nitafanya kazi na class ya site-branding na nitasema text-align kuwa center nitasevu. Na ngoja nikuonyeshe kitu hapa nikija kwenye command prompt naona grunt iko busy inaprocess sass files kuwa css na watch task iko makini kuangalia file lipi limefanyiwa marekebisho. Narudi kwenye browser na kurefresh hapa na maneno yamekuja katika vizuri kabisa.

Sasa tuko tayari fanya kazi na actual contents, na hapa ni title na site description, na tukiangalia kwenye markup, underscores wamepangalia vyema kwa kuanza na site-header, kisha site-branding, ndani ya site-branding div kuna h1 tag na class ya site-title na kisha paragraph yenye class ya site-description. Lakini kuna jambo la muhimu kutizama hapa, kwa sasa tuko kwenye front-paga na ndio maana site-title imewekewa h1 tag. H1 tag ndio inaleta haya maandishi kuwa makubwa na bold, lakini nikienda ndani ya post moja wapo title itakuwa ndogo na nikienda kwenye markup zake nitaona sasa imepewa tag ya paragraph. Na hii ni sababu h1 ya kwanza kwenye page hii sasa imepewa kwenye post title. Hii inamaanisha tunapostyle site-title hakupaswi kutegemea h1 tag.

Sasa nikirudi kwenye sublime ngoja tuweke rule ya site-title, nitaweka margin kuipa nafasi title, 1.7em juu, 1em kushoto na kulia na sufuri chini ya title. Kisha nitaset font-family ‘Fira Sans’, sans-serif, font-size nitaweka 2.4em ambayo ni sawa na size ya h1 tag. Nitaongeza font-weight kuwa bold, line-height nitaweka 1.3em, rangi nitaweka nyeupe na mwisho nitaweka maandishi kuwa ya herufi kubwa nitasevu nakuridi kwenye browser na kufresh. Maneno yamekuwa vizuri na makubwa kote kwenye front-page na kwenye single page. Lakini kuna shida hapa naona maneno hayako kwa herufu kubwa ngoja nirudi kwenye sublime, ooh naaam hapa kwenye text-transform uppercase kuna p mbili. Nitaonge na mstari mmoja hapa wa kufanya maneno yaweze break kwenye newline kama nafasi haitoshi, kwa kuandika word-break break-word. Nitarudi kwenye browser na nitarefresh kwa mara nyingine tena na mambo yameenda vizuri kabisa.

Sasa kwa mobile devices ninataka tupunguze ukubwa wa maneno ya site-title, hapa kwenye sublime nitaanza andika @media screen and (max-width ni sawa na 30em) basi site-title font-size iwe 2em. Nitareload page na unaweza ona kuna mabadiliko yametokea hapa, title imepungua ukubwa na kufanya ionekane vizuri kwenye mobile devices, lakini pia nikiongeza upana wa page yangu utaona maneno yanakuwa makubwa.

Bado kuna kazi ya kufanya hapa, link ya title ina rangi ya zambarau, imepigiwa mstari na nikiweka mouse juu au hover state sioni mabadiliko. Sasa tunaenda weka hilo sasa, nitaandika class ya site-title a kwa maana ya anchor tag nitafungua mabano. Nitaweka text-decoration kuwa none kuondoa underline, na rangi nitaandika inherit maana itarithi kutoka kwenye rangi ya class site-title, nitarudi kwenye browser na nitarefresh. Utaona rangi imekuwa nyeupe na hatuna underline, sasa tuandike hover state hapa.

Nitaandika class site-title na kumbuka hii nukta ndio inarefer class na ukiandika alama ya reli utakuwa unarefer id. Tuteendelea hapa nitaweka hover state kwenye anchor tag, lakini hapa nitaongeza focus state ili hata kama unatumia keyboard au touch devices basi umezepata feedback ukiwa hapa kwenye site-title. Kwenye touch devices hatuna hover state, hivyo kila nitatopoweka hover state nitajumuisha na focus state.  Nitaandika class site-title a focus nitafungua mabano, ndani hapa nitaandika text-decoration kuwa underline.

Hapa kwenye browser nitatumia keyboard na nitabonyeza tab key na ikifika kwenye title utaona focus effect inafanya kazi. Tumemaliza site-title tuende kwenye site-description, hapa kwenye sublime nitaita class site-description nitaipa margin kutoka juu 2em kushoto na kulia 2em na chini nitaipa 3em. Nitaweka font-size kuwa 110% na hii ni mara 110 ya 16 pixel ambayo ndio default font-size, rangi nitaweka nyeupe. Nitarudi kwenye browser na nitarefresh na utaona mabadiliko tulio yafanya.

Sasa header inaonekana imekamilika kwa kiasi fulani, lakini tukienda kwenye design kuna kitu bado hatuja malizia, kuna huu mstari mfupi katikati ya site-title na site-description. Sasa hapa nitafanya hivi, nitaita class site-title na nitasema baada ya site-title nataka kuweka yafuatayo, hapa ndani nitaandika display kuwa block yaani iwe display kwenye mstari wake content nitaweka hakuna. Nitaweka margin kutoka juu 0.7em, auto kutoka kushoto na kulia hii itaweka mstari wetu katikati na pia kutoka chini nitaweka 0. Kisha nitaweka upana kuwa 3em, nitaweka border-bottom kuwa solid kwa ukubwa wa 1px na rangi kuwa nyeupe, na mwisho nitaweka opacity kuwa 0.5. Nitasevu na nitarudi kwenye browser na nitareload page na sasa mstari umetokea baada ya site-title ambao tunaweza ucontrol na width property.

Nikimaliza hili nitahakikisha page yetu inaonekana vizuri kwenye ukubwa mbalimbali ni inaonekana vizuri kabisa na hii inatupa nafasi kwenda kwenye hatua nyingine. Usiache kushare kulike na kutoa maoni na kutembelea website ya Yesaya Software.

About Yesaya R. Athuman

Colleagues know me as a highly Creative Software Developer who can always be trusted to come up with the new approach. But I know that client's business come first, and I never try to impose my ideas on others. Instead, I spend a lot of time understanding business and the audience before suggesting ideas. I can (and often do) work well alone, but I'm at my best collaborating with others.

Check Also

Take Your CSS Experience to the Next Level with SASS

Take Your CSS Experience to the Next Level with SASS

Beginners or those who have taken a break from web design for a few years …