Cikkajánló
Elkészült egy újabb Photoshop formátumú fejléc :) A képek, amiket használtam a fejléc készítéséhez, fel lettek töltve a Galéria PNG képek kategóriájába is. Ezen a linken tudjátok letölteni a
Featured Video Play Icon
Éppen rendelésre készítek egy WordPress kinézetet, ahol kaptam egy linket arról, hogy nagyjából hogyan nézzen ki a téma. Azon az oldalon láttam, hogy egyes kiemelt képek helyén videó jelenik
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
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
CSS kód 2.0 vagy újabb verziókhoz

Ahhoz, hogy CSS kódot tudj alkalmazni a CN-hoz előtte a beállításokban a CN kódolása részben (Templates) át kell alakítani a kódokat. Az eredeti kódok a lap alján vannak, ha mégis azokat szeretnéd alkalmazni. Szóval visszaállítható bármikor :)

 

 

Menj bele a Templates menüben.
Azon belül az első fül az Active News
Innen töröld a kódot és ezt másold be helyette:

 

<link href="cutenews_style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<div class="cutenews_module">
<div class="title">[link]{title}[/link]</div>
<div class="date">{date}</div>
<div class="newstext">{short-story}</div>
<div class="tagline">{tagline}</div>
<div class="commentlink">[com-link]Hozzászólások[/com-link]</div>
<div class="facebook">{fb-comments} {fb-like} {gplus} {twitter}</div>
</div>

 

A következő a Full Story. Ezt is töröld és ez megy a helyére:

 

<link href="cutenews_style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<div class="cutenews_module">
<div class="title">[link]{title}[/link]</div>
<div class="date">{date}</div>
<div class="newstext">{full-story}</div>
<div class="tagline">{tagline}</div>
<div class="commentlink">[com-link]Hozzászólások[/com-link]</div>
<div class="facebook">{fb-comments} {fb-like} {gplus} {twitter}</div>
</div>

 

Aztán jöhet a Comment kinézete

 

<link href="cutenews_style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<div class="comment_module">
<div class="comment_date">{date}</div>
<div class="comment">{comment}}</div>
</div>

 

Azután a Comment űrlap kinézete

 

<link href="cutenews_style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'type='text/css'>
<div class="input_module">
<div class="username">Neved: {input_username}</div>
<div class="username">E-mail címed: {input_email}</div>
<div class="smiley">{smilies}</div>
<div class="input_commentbox">{input_commentbox}</div>
<div class="captha">[captcha] {captcha} [/captcha]</div>
<div class="submit">[submit]Hozzászólok[/submit]</div>
</div>>

 

A végén pedig magyarosítjuk az előző, következő részeket. Cseréld a kódokat itt:
News Pagination

 

<p align="center">[prev-link]Előző hírek[/prev-link] {pages} [next-link]Következő hírek [/next-link]</p>

 

Comment Pagination

 

<p align="center">[prev-link]Előző[/prev-link] ({pages}) [next-link]Következő[/next-link]</p>

 

A másik 3 fül marad ahogy van. Search, Tagline,  Print ezek maradnak. Az űrlap kódja eredetileg a CN-ban táblázatos volt, de nekem szimpatikusabb a div kódolás, így átírtam teljesen az egész kódot. Az Active News és a Full Story majnem teljesen ugyanúgy néznek ki. Egy sort kivéve, de azt fent kiemeltem a kódban. De a CSS kódolás ugyanaz rájuk.
Az Active News-nál, a Full Story-nál, a Comment-nél és a Comment űrlapnál az első két sor nagyon fontos. Ezek is ki vannak emelve. Az első sor a CSS kódod elérési útja. Ez alapján veszi fel a CN a CSS stílust. A második nálam a betűtípus elérése. Én a Google fonts-ot használom, mert ezzel 100%-ig minden böngészőben ugyanúgy az egyedi betűtípust jeleníti meg már ha szeretnél egyedi betűtípust alkalmazni. A CSS kódban alkalmazott font-face-el ellentétben, ami általában csak Chrome-ban mutatkozik meg. Ha lecserélted a kódokat és leokéztál mindent, akkor mentsd le ezt a CSS kódot

 

Letöltés

 

Letöltés után töltsd fel magadnak FTP-n keresztül a tárhelyedre. Ne tedd bele mappába. Simán a gyökér könyvtárba töltsd fel. Persze ha átírod a CSS kódot, akkor majd ne felejtsd el a tárhelyeden felülírni. Ez maga a CSS kód. Először, ha gondolod alkalmazd ezt, hogy lásd működik, aztán pedig mindent írj át benne a saját stílusoddá. Mindenhova részletesen leírtam, hogy mi micsoda benne.
Nagyon egyszerű a használata. Ha valami nem megy nyugodtan kérdezz.
Sok sikert!

 

CSS kód előtt

 

 

CSS kód után

 

 

Az eredeti kódok:
Active News

 

<div style="width: 100%; margin-bottom:30px;">
<div style="clear:both;">
<div style="word-wrap:break-word; width:300px; float:left;"><strong>[link]{title}[/link]</strong></div>
<div style="text-align:right;">[print]printable version[/print]</div>
</div>
<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">{short-story}
<div style="margin-top:10px;">[full-link target=_blank]Read more... [/full-link]</div>
</div>
<div style="margin: 0 0 8px 0;">{tagline}</div>
<div style="float: right;">[com-link]{comments-num} Comments[/com-link]</div>
<div><em>Posted on {date} by {author}</em></div>
{fb-comments} {fb-like} {gplus} {twitter}
</div>

 

Full Story

 

<div style="width: 100%; margin-bottom:15px;">
<div><strong>{title}</strong></div>
<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">{full-story}</div>
<div style="float: right;">{comments-num} Comments</div>
<div><em>Posted on {date} by {author}</em></div>
{fb-comments} {fb-like} {gplus} {twitter}
</div>

 

Comments

 

<div style="width: 100%; margin-bottom:20px;">
<div style="border-bottom:1px solid black;">[delete]%cbox[/delete] by {author} @ {date} [edited](Edited: %edited)[/edited] [edit][Edit comment][/edit]</div>
<div style="padding: 2px; background-color:#F9F9F9">{comment}</div>
</div>

 

Comment űrlap

 

<table border="0" width="370" cellspacing="0" cellpadding="0">
<tr><td width="60">Name:</td><td>{input_username} {remember_me}</td></tr>
<tr><td>E-mail:</td><td>{input_email} (optional)</td></tr>
<tr><td>Smile:</td><td>{smilies}</td></tr>
<tr><td colspan="2">{input_commentbox}</td></tr>
[captcha]
Captcha {captcha}
[/captcha]
<tr><td colspan="2" align="right">[submit]Add comment[/submit]</td></tr>
</table>

lindadesign Hozzászólások
470 megtekintés

Hozzászólások