2017. 11. 20.Képes project szövegdoboz 32.
2017. 11. 18.Videó beágyazása Coppermine galériába 2.0
2017. 11. 16.Coppermine themes
2017. 11. 16.WordPress themes
2017. 11. 15.Új design a LindaDesign-on
png-keszites.flv

PNG kép készítése

demi-lovato.png

Sosugary Gallery themes

lindadesign-fantasy.png

Coppermine Gallery themes

vanessa-marano.png

G-Portál themes

Kép vagy videó végigér a modulban
273 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