Efnisyfirlit
Í þessari grein muntu sjá hvernig á að beita skilyrtu sniði á ramma töflunnar í Outlook. Ég skal sýna þér hvernig á að breyta lit þeirra, breidd og stíl. Þá mun ég kenna þér hvernig á að gera nokkrar breytingar í einu og lita Outlook töfluna þína á marga mismunandi vegu.
Fyrst og fremst langar mig að gera smá athugasemd fyrir nýliða þessa bloggs. Eins og í dag munum við tala um skilyrt snið í sniðmátum, ég mun sýna þér hvernig á að setja þau upp rétt með því að nota Shared Email Templates viðbótina okkar fyrir Outlook. Þetta tól getur hjálpað þér að líma fyrirfram vistuð, fullkomlega sniðin sniðmát í tölvupóstinn þinn og minnka bréfaskiptarútínuna þína í nokkra smelli.
Ef þú hefur þegar lesið námskeiðið mitt Skilyrt snið í Outlook töflum, þá veistu það. hvernig á að breyta innihaldi frumanna og bakgrunnslit. Hins vegar er það ekki allt sem þú getur gert til að bjartari Outlook borðið þitt. Í dag mun ég sýna þér leiðirnar til að skilyrt lita ramma borðsins þíns og breyta breidd þeirra og stíl.
Að auki bíður þín smá bónus í síðasta kafla þar sem ég mun sýna þér hvernig á að beita nokkrum breytingum á sama tíma og gerðu borðið þitt jafn litríkt og bjart og flugeldarnir þann 4. júlí ;)
Breyttu litnum á hólfum
Til að sýna þér hvernig málverk rammans virkar, Ég mun nota sömu sýnishorn úr kennslu síðustu viku. Málið er eftirfarandi: Ég lími aMicrosoft teymi, ekki hika við að kíkja á svar þeirra í þessu GitHub samtali :)
Loka athugasemd
Ég vona svo sannarlega að mér hafi tekist að sannfæra þig um að tafla í Outlook sé ekki bara svartir rammar með látlausum texti. Það er nóg pláss fyrir umbætur og sköpunargáfu :)
Þegar þú ákveður að taka nokkrar málningartilraunir sjálfur skaltu bara setja upp Shared Email Templates frá Microsoft Store og njóta!
Ef það eru til einhverjar spurningar sem eftir eru af þér þurfa aðstoð við skilyrt snið í Outlook töflum, skildu bara eftir nokkur orð í athugasemdahlutanum og við finnum það út ;)
sniðmát og veldu afsláttarhlutfall til að fylla út töfluna. Það fer eftir vali mínu, rammar reitsins verða litaðir í tilteknum lit.Taflan sem ég mun lita í dag væri sú hér að neðan:
| Dæmi fyrir haus 1 | Dæmi fyrir haus 2 | Dæmi fyrir haus 3 |
| ~%WhatToEnter[ {dataset:'Dataset with discounts', column:' Afsláttur', title:'Veldu afslátt'} ] afsláttur |
Þar sem skilyrt snið er meðhöndlað í HTML sniðmáta, skulum við opnaðu HTML kóða þessarar töflu fyrst:
- Opnaðu áhugaverða sniðmátið og smelltu á Breyta :
- Finndu Skoða HTML tákn ( ) á tækjastiku sniðmátsins:
- Sjáðu upprunalega HTML sem verður breytt mörgum sinnum:
Ef þú veltir fyrir þér litunum og tengingu þeirra við afslætti, þá skal ég gefa þér vísbendingu :) Gagnasett! Hefurðu ekki hugmynd um hvað það er? Taktu síðan smá pásu og lestu kennsluna mína fyrir Fyllanleg Outlook sniðmát fyrst.
Hér er upprunalega gagnasafnið sem ég mun nota í upphafi og bæta aðeins í nokkrum köflum:
| Afsláttur | Litakóði |
| 10% | #00B0F0 |
| 15 % | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
Þegar ég þarf að sækja nauðsynlegan litakóða úr þessari töflu mun ég nota eftirfarandi fjölvi:
~%WhatToEnter[{gagnasett:'Gagnasett með afslætti',dálkur:'Litakóði'}]Þar sem við erum komin með öll grunnatriðin skulum við byrja að skipta um lit :)
Uppfæra rammalit einnar klefi
Til að lita ramma stakrar reits í töflu skulum við fyrst finna línuna í HTML sniðmátsins og skoða hluti þess nánar:
- “ style= ” táknar mengi grunnbreytu reits.
- “breidd: 32%; rammi: 1px solid #aeabab “ eru breidd, litur og stíll hólfsins og rammans.
- “~%WhatToEnter[] afsláttur“ er innihald hólfsins.
Þessi kóðalína þýðir að ég mun sjá reit með 1px gráum ramma af traustum stíl. Ef ég skipti um einhverja af þessum breytum gæti það spillt útliti töflunnar í sniðmátinu mínu, þ.e.a.s. rammar verða ósýnilegir (þó allt líti fullkomlega út eftir að hafa verið límt).
Mig þætti vænt um að hafa staðal. töflu í sniðmáti og láttu breyta henni þegar þú límdir. Svo ég bæti við einni nýrri eigind með færibreytunum sem koma í stað upprunalegu eigindanna þegar ég límdi:
Við skulum skoða HTML línuna hér að ofan:
- “ style="border : 1px solid #aeabab;" er fyrsti eiginleiki. Þetta eru frumefni frumunnareinkenni.
- “ data-set-style= ” er sérstök færibreyta sem mun hjálpa mér að skipta út eigindinni hér að ofan með nauðsynlegum eiginleikum við límingu.
- “ border:1px solid; border-color: “ er sá hluti seinni eiginleikans þar sem við tökum hlé. Sjáðu, upphafið er eins og upprunalega, sama rammabreidd og stíll. Hins vegar, þegar það kemur að litnum (breytu sem ég vil breyta), skipta ég því út fyrir border-color: og líma WhatToEnter fjölva. Þess vegna, allt eftir vali á fellilistanum, verður fjölva skipt út fyrir litakóðann og ramminn verður málaður aftur.
- “~%WhatToEnter[] afsláttur” er enn innihald reitsins sem krefst ekki neina breytinga.
Þess vegna mun allt HTML-númerið með hólfinu í framtíðinni líta svona út:
Þegar þú límir þetta sniðmát , rammar uppfærða reitsins verða strax litaðir í valinn lit:
Málaðu ramma allrar línunnar
Nú skulum við mála rammana á heila röð sýnishornstöflunnar okkar og sjáðu hvernig það virkar. Rökfræðin er algjörlega sú sama og ímálsgrein hér að ofan nema að þú þarft að uppfæra allar frumur annarrar línu. Þegar sömu breytingarnar og ég fjallaði um hér að ofan hafa verið settar á alla röðina, verður hún máluð með blikk þegar sniðmátið er límt.
Ef þú vilt skoða tilbúinn HTML með annarri línu litun, hér kemur það:
Breyta breidd ramma
Nú skulum við reyna að uppfæra ekki aðeins lit á ramma heldur einnig breidd hans. Skoðaðu enn eina HTML eigindina sem kemur í stað upprunalegu eigindarinnar þegar þú límir:
data-set-style="border: 1px solid; border-color:~%WhatToEnter[{dataset:' Gagnasett með afslætti',column:'Color code'}]">~%WhatToEnter[{dataset:'Gagnasett með afslætti',column:'Afsláttur',title:'Veldu afslátt'}] afsláttSjáðu <0 1>1px færibreyta? Þetta er breidd landamæranna sem á að lita. Þú getur breytt því handvirkt í, segjum, 2 og töflurammar verða breiðari þegar þú hefur límt það.
Hins vegar mun ég gera það á annan hátt. Ég mun uppfæra gagnasafnið mitt og bæta við nýjum dálki með landamærabreidd. Í þessu tilfelli, þegar ég hef valið núverandi hlutfall til að líma, verður bæði litur og breidduppfært.
| Afsláttur | Litakóði | Brúðabreidd |
| 10% | #00B0F0 | 2 |
| 15% | #00B050 | 2.5 |
| 20% | #FFC000 | 3 |
| 25% | #4630A0 | 3.5 |
Nú skulum við breyta öðrum eiginleikum hverrar línu og skipta út 1px fyrir eftirfarandi texta:
border-width:~%WhatToEnter [{dataset:'Dataset with discounts',column:'Border width'}]Þá endurtek ég það fyrir allar þrjár hólfin í annarri röð og fæ eftirfarandi HTML í niðurstöðuna:
Þegar þetta sniðmát hefur verið vistað og límt birtast víkkuðu bláu rammar í tölvupósti:
Breyta ramma stíl í töflu
Í þessu frv eftir mig langar að vekja athygli þína á annarri breytu - stíll. Þessi mun sjá um útlit landamæranna. Áður en ég sýni þér hvernig á að nota það rétt, þarf ég að fara aftur í gagnasafnið mitt og breyta því í samræmi við núverandi tilvik.
| Afsláttur | Borderstíll |
| 10% | Brintur |
| 15% | Tvöfaldur |
| 20% | Dotted |
| 25% | Ridge |
Ég hef tengt hverja ávöxtunarkröfu við landamærastíl og vistað þetta gagnasafn til framtíðar. Fjölvi til að sækja stílinn fyrir HTML minn væri sá hér að neðan:
~%WhatToEnter[{dataset:"Dataset with discounts",column:"Border style"}]Nú þarf ég að uppfæra eiginleika annarrar röðar með því að skipta um solid (sjálfgefinn stíll sem ég hef notað allan tímann) fyrir makróið hér að ofan til að fá eftirfarandi kóða:
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border style'}]Hér kemur endanleg HTML:
Ef þú afritar þennan HTML og límti í sniðmátunum þínum mun niðurstaðan ekki láta þig bíða:
Settu upp skilyrt snið til að breyta auðkenningu, textalit og breidd ramma á sama tíma
Við höfum náð flestum áhugamálum hluti þar sem ég ætla að sýna þér hvernig á að beita mörgum breytingum í einu. Í fyrsta lagi mun ég uppfæra gagnasafnið sem ég mun sækja gögnin úr.Þar sem ég ákvað að breyta auðkenningu frumanna, textalit og breidd ramma, þarf að tilgreina allar þessar breytur. Þess vegna myndi nýja gagnasafnið mitt líta svona út:
| Afsláttur | Litakóði | Bakgrunnskóði | Brúðabreidd |
| 10% | #00B0F0 | #DEEBF6 | 2 |
| 15 % | #00B050 | #E2EFD9 | 2,5 |
| 20% | #FFC000 | #FFF2CC | 3 |
| 25% | #4630A0 | #FBE5D5 | 3.5 |
Svo, ef ég vel 10%, verður nauðsynlegur texti málaður í bláu (# 00B0F0 ), bakgrunnur valinna hólfa verður skyggður í ljósblár tónn (# DEEBF6 ) og landamæri þeirra verða víkkuð tvisvar.
En hvernig er hægt að tengja þetta gagnasafn við Outlook töflu þannig að það verði sniðið? Ég hef verið að undirbúa þig fyrir þetta verkefni í 2 greinum :) Hér kemur HTML sem mun sjá um allar nauðsynlegar breytingar:
Nú skulum við skoða allar breytingarnar sem beitt er:
- Dæmi fyrir haus 1 - þetta stykki mun mála haustextann í lit úr „Litakóði“ dálknum. Ef þér finnsteins og þú þarft að hressa upp á minnið á textamálverkinu, skoðaðu kaflann Breyta leturliti texta í töflu í fyrri kennsluefninu mínu.
- data-set-style="background-color:~%WhatToEnter[ {gagnasett:'Gagnasett með afslætti',dálkur:'Bakgrunnskóði',titill:'Veldu afslátt'}] - þessi hluti uppfærir bakgrunnslitinn og tekur kóðann hans úr Bakgrunnskóði dálkinum gagnasafnsins. Ekki hika við að kíkja á Highlight cells kennsluna ef þér finnst þú þurfa ítarlegri lýsingu á þessu máli.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}] – með þessari HTML línu verður breidd landamæra breytt í þá sem tilgreind er í Border width Ég hef fjallað um það áðan, þú gætir kíkt ef þú misstir af einhverju.
Þegar ég lími sniðmát með þessum eiginleikum bætt við mun niðurstaðan ekki láta mig bíða:
Það er smá athugasemd sem mig langar að gera áður en ég lýk þessu efni. Á meðan ég var að prófa landamæralitun í töflum stóð ég frammi fyrir nokkuð óljósri hegðun landamæra í bæði net- og skrifborðsútgáfum af Outlook. Þar sem ég var svolítið ruglaður náði ég til hönnuða okkar til að fá skýringar. Þeir komust að því að mismunandi Outlook-biðlarar birta töflur á mismunandi hátt og ástæðan fyrir slíkri hegðun er villa í Outlook.
Teymið okkar tilkynnti þetta vandamál til
