2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
112 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 néző

Kép vagy videó végigér a modulban
389 megtekintés

Régebben többen kérdeztétek, hogyan lehet megoldani azt, hogy a szöveg nem, de a képek vagy videók viszont végigérnek a modulban. Kicsit összetett a megvalósítása, de ha értitek a CSS és némi HTML kódolást, akkor simán megoldható a dolog. Nekem tetszik, mikor így néz ki egy-egy weboldal. Kicsit egyedi tőle és jól mutat. Most G-Portálos kódokkal mutatom be a trükköt, de eme leírás alapján bármilyen másik oldalon is meglehet ezt csinálni. A lényegi része mindenhol ugyanaz. Először a CSS kód részét magyarázom el a blog modulban lévő képek és videók beállításáról.

 

 

Először is a blog .post részére lesz szükségünk. Ez felel a blogban a bejegyzések kinézetéért. A padding sor a fontos nekünk most. Azt meg kell jegyeznem, hogy én nem úgy használom a padding és margin értékeket a CSS kódban, hogy mindig külön kiírom, hogy: padding-left, padding-right, stb…, hanem egy sorban van minden érték. Így szerintem kicsit könnyebben átlátható a CSS kód és kevesebb sorból is áll. A sorrend, ha egy sorban vannak az értékek (padding: 0 0 8px 0): első érték a TOP, második a RIGHT, harmadik a BOTTOM, negyedik a LEFT. Tehát a mostani kódban úgy néz ki a padding, hogy a TOP, RIGHT és LEFT nullán áll, a BOTTOM pedig 8px-en. Na, de a CSS oktatásról ennyit mára :D ;)
 

div[id*="post"] { /* az egész blog modul egyben */
font-size: 14px;
font-family: 'Merriweather', serif;
font-weight: lighter;
background: #ffffff;
margin: -16px 0 28px 0 !important;
padding: 0 0 8px 0 !important;
color: #383636;
text-align: justify;
}

 

A következő CSS kódsor pedig, ami szintén  NAGYON fontos, mert ez, és a felső kód együtt adja meg azt, hogy a szöveg nem megy ki a modul szélére, de a képek igen. A padding értékek itt úgy néznek ki, hogy TOP és BOTTOM nulla, RIGHT és LEFT pedig 15px-en van. Azért van a TOP és BOTTOM nulla értéken és a .post részben van ott beállítva, hogy BOTTOM: 8px, mert így két bekezdés között nem lesz nagy üres rész.

 

div[id*="post"] p {
padding: 0 15px 0 15px !important;
line-height: 21px;
}

 

A CSS rész után kicsit a szövegszerkesztő forráskód nézetében is dolgoznunk kell. Ami itt fontos, az az, hogy a szöveg MINDIG <p>és</p> tag között kell, hogy legyen, mert mint látható a második CSS kódrészben a P-re hivatkozunk. Először a kép beállítását nézzük meg. A forráskódban a szöveg MINDIG a <p>és</p> tag között kell, hogy legyen, ahogy egy másodperccel ezelőtt ezt már olvashattátok, de biztos, ami biztos. :) A kép kódja elől és mögül viszont a P tagot ki kell törölni, plusz arra is ügyelni kell, hogy a kép MINDIG pont olyan szélességű legyen pixelben, mint a modul teljes szélessége, amit a CSS-ben adunk meg általában itt:

 

.column_main {
width: 790px!important;
padding: 0px!important;
margin: 600px 0px 0px 10px !important;
}

 


kattintsatok a képekre a nagyobb méretért

 

A videóra is ugyanez érvényes. A szövegrész marad a P tag között, de a videó iframe kódja elől és mögül ki kell venni a P tagot.

 

 


kattintsatok a képekre a nagyobb méretért

 

Sima egyszerű modulban ezek a CSS kódok kellenek.
1. értelemszerűen a modul tartalmi része
2. ugyanaz, csak a P taggal

 

.column_main_td .module .modbody {
font-size: 14px;
background: #ffffff;
font-family: 'Merriweather', serif;
color: #383636;
line-height: 21px;
text-align: justify;
padding: 15px 0 15px 0;
}

 

.column_main_td .module .modbody p {
padding: 0 15px 0 15px;
}

 

Ugyanígy kell például a WordPress-ben is, csak a hozzá tartozó CSS kóddal vagy Blogspot-on vagy máshol.




Előző, következő cikk



A mai napra egy affiliates csere effektet készítettem, ami eléggé egyedi lett. A neten találtam egy képeffekt demót és azt átvariáltam, hogy elit csere effekt lehessen belőle. Nekem ez a verzió nagyon tetszik. Egy kis button kúszik le a

Ez örök kérdés már évek óta sok mindenkitől, így azt hiszem itt az ideje, hogy külön bejegyzésben is leírjam, hol lehet a Coppermine galériában beállítani azt, hogy a főoldalon csak a fő kategóriák jelenjenek meg és az alkategóriák ne.

 



Hozzászólások