Wordpress CSS fájlok módosítása
Rendkívül jól használható és számtalan bővítmények telepíthetők a Wordpress-hez. Viszont bármennyire is jól sikerült, mégis vannak olyan helyzetek, mikor módosításokra van szükség. Ilyen helyzet, mikor egy weboldal sablon és egy bővítmény által használt színek eltérnek egymástól. Természetesen ennél is lehet rosszabb, de most kezdésnek csak egyszerűbb módosításokat mutatok be. Nemrég készítettem egy weboldalt, ahol a Sparkling sablont és a WooCommerce webáruház bővítményt telepítettem. A kettő eltérő színeket használ. Bár a weboldal sablon lehetőséget ad a színek módosítására, nekem inkább a webáruház színei nem tetszettek, így azon változtattam. Nagyon sok mindent lehet módosítani a CSS fájlban, de most csak a gombok megjelenését, ezen belül is a színek módosítását mutatom be.
A WooCommerce két eltérő gombot jelenít meg. Az egyik a termék összesítő oldalon jelenik meg, míg a másik a termék leírás oldalán.
Általában a CSS fájlok jelentős méretűek, így nehezen átláthatók. A számunkra szükséges szabályok megtalálásában jó segítőtárs a Firefox. A módosítani kívánt elemen jobb egér gombot nyomva megjelenik a helyi menü, melyben található egy elem vizsgálata opció. Ezt választva egy igazi weboldal fejlesztő eszközzé alakul a böngésző. Számunkra a fontos rész az ablak jobb alsó sarkában jelenik meg.
Kis ügyességgel és kitartással hamar rá lehet jönni, hogy mi mit jelent ebben a sarokban. A bal felső sarokban a szabály neve, a jobb felső sarokban pedig a szabályt tartalmazó fájl neve látható. Ezek alatt soronként a szabályok sorakoznak. Mivel most a gombok színe az elsődleges, így olyan szabályokat kell keresni, melyek a color szót tartalmazzák. Jelen esetben két ilyen van, a sima color és a background-color. Szerkesztő programmal (Windows alatt legnépszerűbb a Notepad++, Linux alatt elég nagy a választék, de a Mousepad és a Leafpad jól használható) megnyitva a CSS fájlt a szabály nevére kell rákeresni.
A termék összesítő oldalon lévő kosárba rakom gombra vonatkozó szabályok:
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{
background-color:#ddd;
color:#fff;
-webkit-font-smoothing:
}
.woocommerce #respond input#submit.alt:hover,.
background-color:#935386;
color:#fff
}
A termék adatlapján lévő kosárba rakom gombra vonatkozó szabályok:
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
font-size:100%;
margin:0;
line-height:1;
cursor:pointer;
position:relative;
font-family:inherit;
text-decoration:none;
overflow:visible;
padding:.618em 1em;
font-weight:700;
border-radius:3px;
left:auto;
color:#515151;
background-color:#ebe9eb;
border:0;
white-space:nowrap;
display:inline-block;
background-image:none;
box-shadow:none;
-webkit-box-shadow:none;
text-shadow:none
}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
background-color:#dad8da;
text-decoration:none;
background-image:none;
color:#515151
}
A megfelelő színkód kiválasztásához szintén jó segítséget ad a Firefox. A color felírat után megjelenő színminta körre kattintva megjelenik a színválasztó. A szín kiválasztása után megjelenik a szín kódja és a weboldalon is ezt a színt látjuk a kiválasztott elemnél.
A megfelelő kódok megadásával a végeredmény már a Sparkling sablonhoz illeszkedő megjelenést ad:
Ezen kívül, tetszés szerint lehet még változtatni a gomb alakján is. A gomb legömbölyítésének megszüntetéséhez csak a border-radius bejegyzéseket kell törölni.
Amennyiben komolyabb változásokat tervezel, kérlek olvass utána komolyabb leírásokban.