Cikkajánló
Felkerült a legújabb kinézet az oldalra. Most Madonnát választottam a design-hoz, mert nagyon szeretem őt is. Őrá már tényleg azt lehet mondani, hogy egy sztár. Le a kalappal előtte,
Hoztam egy újabb jópofa CSS kódot, amit G-Portálon, WordPress-ben vagy bárhol máshol is lehet alkalmazni :) Akár szélső sávban, akár a főmodulban is. Én most a példa kódot egy
Ahogy tegnap írtam ma meghoztam a régóta feltöltésre váró .png képeket.  :) Ezek az albumok frissültek vagy születtek meg ma:   Kelly Rowland // 25 darab Lana Parrilla //
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
2017. május. 23.
Eltérő linkelt képeffekt a Blogban

A blog modulban azt is meg lehet csinálni, hogy teljesen eltérő linkelt képet adtok meg. Vagy lehet eltérő sima link vagy a vastag, dőlt, aláhúzott stílus is lehet teljesen eltérő a blog modulban. Én most konkrétan a linkelt képekre térek ki, de a kód alatt azért hozok példát a többire is. Szóval, ha a linkelt képeket szeretnétek a blog modulban megváltoztatni, akkor ahhoz ez a CSS kód kell:

 

div[id*="post"] p a:link img, div[id*="post"] p a:visited img { /* linkelt kép a blogban */
background: #F0F0F0;
padding: 7px;
filter: alpha(opacity=70);
opacity: .7;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
div[id*="post"] p a:hover img { /* linkelt kép a blogban, ha ráviszed az egeret */
background: #E6E6E6;
padding: 7px;
filter: alpha(opacity=100);
opacity: 10;
-webkit-filter: grayscale(0);
filter: grayscale(0);
}

 

Itt ez a rész a fontos. Ezzel hivatkozik arra a CSS kód, hogy csak a blogban lévő linkelt képekre fog hatni. A többire nem. A div[id*=”post”] p kódrész az, amivel a blogra hivatkozik.

 

div[id*="post"] p a:link img, div[id*="post"] p a:visited img
div[id*="post"] p a:hover img

 

Sima képeknél így néz ki a kód:

 

div[id*="post"] p img
div[id*="post"] p img:hover

 

Vastag, dőlt, aláhúzott szavaknál így néz ki a kód:

 

div[id*="post"] p strong, div[id*="post"] p B
div[id*="post"] p EM, div[id*="post"] p I
div[id*="post"] p underline, div[id*="post"] p U

 

stb…

Kapcsolódó bejegyzések

lindadesign
55 megtekintés

Előző, következő cikk

WordPress hozzászólások importálása a Disqus rendszerbe

Ez a tartalom regisztrációhoz kötött. Ha már regisztrált tag vagy, akkor a Bejelentkezés alatt tudsz belépni, ellenkező esetben regisztrálnod kell a tartalom megtekintéséhez.Regisztrált felhasználó belépéseFelhasználónévJelszó Emlékezzen rám  RegisztrációFelhasználónév*Email cím*E-mail cím újra*Honlap**Kötelezően kitöltendő mező

CSS kód beillesztése G-Portálra

Lehet sokan nem tudják, hogy a G-portálon van arra lehetőség, hogy ne egy adott szélső modulba vagy a szerkeszthető fejléc/lábléc modulba legyen beillesztve az oldal CSS kódja, hanem a “rendes” helyére. Miután teljesen elkészültetek az oldalatok kinézetével és a

 

Hozzászólások