Cikkajánló
Sikerült megint egy prémium témát készítenem WordPress-hez. Valami kéket szerettem volna és azt hiszem sikerült is egy szép kék színt választanom hozzá. Nagyon szeretem Gigi-nek ezt a fotósorozatát, így
Kérésre hoztam egy újabb szövegdobozt, ahol ha a képre viszed az egeret, akkor jelenik meg az üdvözlő szöveg. De szöveg helyett más is lehet a doboz tartalma. Pl.:  
Sosugary galériához készítettem egy sablont, ami szabadon felhasználható :) Beyoncé díszeleg rajta, de a fejlécet módosíthatjátok nyugodtan. A teljes témát monicandesign készítette. Én csak módosítottam a CSS kódját. A
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ó Apró tippek weboldal szerkesztőknek

Most egy olyan leírást hoztam el nektek, amivel a Coppermine galériában megtudjátok változtatni a dátum teljes tartalmának kinézetét és ugyanígy az X megtekintés tartalmát is a képek alatt. Plusz az ehhez tartozó CSS kódokat is bemásoltam ide alulra, hogy akkor már kinézetileg is készítsük el rendesen :) A lejjebb látható képen látjátok, hogy miről is beszélek.

 

EREDETI

 

DÁTUM MÓDOSÍTÁSA

 

X MEGTEKINTÉS MÓDOSÍTÁSA

 

A VÉGLEGES KINÉZET

 

Először az X megtekintést módosítjuk. Ehhez a galéria mappán belül a lang mappában található hungarian.php fájlra lesz szükségünk. A tárhelyről ezt a fájlt másoljátok át a gépetekre és készítsetek belőle biztonsági mentést is! Ha lementettétek a tárhelyre, akkor ajánlatos pl. a NotePad programmal megnyitni vagy ahhoz hasonlóval. Így sokkal átláthatóbb a teljes fájl. A kódban keressétek meg ezt a sort:

 

$lang_get_pic_data['n_comments'] = '%s hozzászólás';

 

Ha NotePad-ot használtok vagy hasonlót, akkor csak be kell írni a keresőbe és azonnal oda is ugrunk. Az ez alatt lévő sorban lehet megváltoztatni a megtekintések tartalmát. Mást is oda lehet írni, de akár a megtekintés szót ki is lehet törölni, ahogy azt nálam is látjátok a képen. A fantáziátokra van bízva, hogy mit kezdtek ezzel az információval ;) Ebből lett ez:

 

$lang_get_pic_data['n_views'] = '%s megtekintés';

 

EREDETI

 

$lang_get_pic_data['n_views'] = '%s';

 

MÓDOSÍTOTT

 

Ugyanebben a fájlban módosítjuk a dátumot is a következő sorban (lejjebb látható). Az is látható a kódban, hogy a Coppermine még információt is ad arra, hogy hol találjuk meg a dátum formátumokat, ha éppen módosítani szeretnénk azt. Tehát látogassuk meg ezt a weboldalt és válasszunk másik dátumkinézetet, mert mondjuk rövidebbet szeretnénk, vagy nem akarjuk, hogy ki legyen írva szöveggel a hónap, stb. Az oldalon a táblázatban a bal szélső tartalom az, amit be kell másolnunk a kódunkba, a jobb szélső pedig az, ahogyan kinéz majd a dátum. Igaz, itt angolul van, de a galériába magyarul fog megjelenni minden, mert a fontosabb dolgok le vannak alapból magyarosítva. Végül is éppen abban a fájlban dolgozunk most is ;) hungarian.php

 

MAJDNEM EREDETI

A legalsó sorban látható a nagy B így: %B – ettől lesz teljesen kiírva a hónap, és nálatok alapértelmezetten mindenhol az van. Az összes sorban. Én már átírogattam a többi sorban a kis %m-re azokat. Így számokkal jelenik meg a hónap.

 


Itt már átírtam mindenhol

 


Itt pedig már eltüntettem a perc/másodperc részeket

 

// The various date formats
// See http://www.php.net/manual/en/function.strftime.php to define the variable below
$lang_date['album'] = '%Y %m %e.';
$lang_date['lastcom'] = '%Y. %m %e.';
$lang_date['lastup'] = '%Y. %m %e.';
$lang_date['register'] = '%Y. %m %e.';
$lang_date['lasthit'] = '%Y. %m %e.';
$lang_date['comment'] = '%Y. %m %e.';
$lang_date['log'] = '%Y. %m %e.';
$lang_date['scientific'] = '%Y. %m %e. %H:%M:%S';

 

Sőt én kitöröltem egyes sorokból ezt a részt is, hogy a dátum mellett ne legyen ott az óra és a perc. Felesleges információ szerintem.

 

%H:%M-kor

 

És akkor a CSS kód, amivel ezután egyedivé lehet tenni a képek alatt az adatokat. A képméret kinézeténél nálam úgy van a CSS kód, hogy szélességet a margin értékkel adtam meg. Itt a 25px jelöli a szélességet. A 3px pedig, hogy mennyi üres hely legyen a sorok között. Ezek az én képeimhez vannak most méretezve, tehát értelemszerűen kell a szélességen és magasságon változtatni a ti képeitekhez képest.

 

.image_view { /* képméret kinézete a képek alatt */
font-size: 10px;
font-weight: normal;
background: transparent;
text-transform: none;
font-style: normal;
color: #000000;
border-bottom: 1px solid #dddddd;
padding: 5px 0;
margin: 3px 25px;
display: block;
}

 

.thumb_title_views { /* X megtekintés kinézete a kép alatt */
font-size: 10px;
font-weight: normal;
background: #2A2A2A;
text-transform: none;
font-style: normal;
color: #ffffff;
width: 35px;
height: 10px;
margin: 3px 0 3px 25px;
display: block;
float: left;
}

 

A napokban még hozok leírásokat, amik szintén kisebb trükkök

 

  • Főoldalon a Kategória fejléc címének megváltoztatása
  • Főoldalon a kategóriák alatti összegző információ megváltoztatása
  • Powered by felirat áthelyezése máshová és kinézetének megváltoztatása
  • Minden változtatásom ebben a galériában megtekinthető
lindadesign Hozzászólások
149 megtekintés

Már egy jó ideje, ha kinézetet készítek, akkor úgy csinálom meg, hogy a CSS kódok külön vannak szedve és egy külön CSS mappában találhatóak a témán belül. Igaz a saját oldalamon ezt még nem alkalmazom, (majd az új kinézetnél) de egyébként a témáimat már így szerkesztem. Lehet, hogy kicsit lassabban tölt be tőle az oldal (bár én ezt még nem tapasztaltam), viszont több az előnye, mint a hátránya. Például az adott oldalon csak azokat a CSS fájlokat fogja betölteni, amiket éppen használnia kell a WordPress-nek. Mondjuk egy OLDAL modulnál (page.php) nem fogja a home.php (főoldal) CSS kódját is betölteni. Ezen kívül sokkal átláthatóbbak a CSS fájlok és nem kell egy örökkévalóságig görgetni lefelé, mire megtaláljuk az adott részt, amit éppen szerkeszteni akarunk. Jó, igen, ha valaki mint én is például NotePad-ot használunk, akkor abban van kereső, ezáltal hamar meglelem az adott részt. De így csoportosítva sokkal könnyebb minden szerintem. És most leírom, hogy mi minden szükséges ahhoz, hogy csoportosítani lehessen a CSS fájlokat.

 

Először is ez nem bővítmény. Egyetlen kód kell a functions.php fájlba, ahol meg kell adni a CSS fájlokat külön így:

 

 

Mondjuk azért nem árt szétszedni a CSS fájlt sem.:)  Én így csoportosítottam őket a CSS mappán belül:

 

     

 

A header.php fájlból pedig ki kell törölni a CSS sorát, ezt:

 

<link rel="stylesheet" href="wp-content/themes/téma-neve/style.css" type="text/css" media="screen" />

 

Annyiban módosul csak még az egész, hogy a CSS fájlban, ha képek is vannak megadva például háttérképnek, akkor ezentúl pontosan így kell az URL részét megírni. KELL az images elé a perjel és elé a kettő darab pont!

 

background: URL(../images/header.png);

 

A kód, amit a functions.php fájlba kell illeszteni a <?php alá:
Annyi sort kell csinálni és átnevezni, amennyi CSS fájlotok van.

 

// Betölti a stíluslapokat
function additional_custom_styles() {
wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
wp_enqueue_style( 'affiliates', get_template_directory_uri() . '/css/affiliates.css' );
wp_enqueue_style( 'comments', get_template_directory_uri() . '/css/comments.css' );
wp_enqueue_style( 'content', get_template_directory_uri() . '/css/content.css' );
wp_enqueue_style( 'footer', get_template_directory_uri() . '/css/footer.css' );
wp_enqueue_style( 'gallery', get_template_directory_uri() . '/css/gallery.css' );
wp_enqueue_style( 'lapozo', get_template_directory_uri() . '/css/lapozo.css' );
wp_enqueue_style( 'sidebar', get_template_directory_uri() . '/css/sidebar.css' );
wp_enqueue_style( 'tooltip', get_template_directory_uri() . '/css/tooltip.css' );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );

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

Sziasztok :) Csak, hogy teljes legyen a prémium design listám, ezért készítettem egy Coppermine galériát is, ami szintén nem ingyenes, de előnyére váljon, hogy egyedi és még majdnem teljesen, de mobilbarát is. Élőben meg tudjátok nézni, hogy milyen is a design, és ha szeretnétek, akkor vegyétek fel velem a kapcsolatot ;) Ez megint annyira jól sikerült (ízlések és pofonok), hogy nem szerettem volna ingyenesnek feltenni. Ezután is fogok készíteni ingyenes kinézeteket, de azokhoz kevesebb extra lesz.

 

A csomag tartalma
– reszponzív design
– oldalsáv
– kerek kisképek
– .psd file
– FontAwesome ikonok
– egyedi betűtípus
– flaunt.nu hirdetés beágyazva
– beüzemelési segítség
– segítek bármiben, ha kell

 

Prémium | Emilia Clarke Coppermine Gallery theme
Előnézet 1 | Előnézet 2 | Kapcsolat | Vásárlás
lindadesign Hozzászólások
204 megtekintés

Sikerült megint egy prémium témát készítenem, habár ez most a változatosság kedvéért nem G-Portálos, hanem WordPress kinézet :) Valami nagyon régen készítettem utoljára WordPress-hez kinézetet, szóval leültem és úgy döntöttem, hogy készítek egy szuper jót. Nem éppen csak a kinézetre gondolom, hogy szuper jó, hanem úgy mindenre, amiket tartalmaz is. Ezek után pedig most már elkészítem a két emberke rendelését is, mert már eléggé régóta várnak sajnos. Szóval türelem, készülnek a kinézetek :)

 

A csomag tartalma:
– Kiemelt kép
– CSS stílusok csoportosítva külön mappában
– Project doboz az oldalsávban
– Font Awesome ikonok
– .psd fájlok
– flaunt.nu hirdetés beágyazva
– egyedi elit csere kinézet
– számos lapozó a bejegyzések alatt
– segítek bármiben, ha kell

 

Prémium | Jennifer Lawrence WordPress Theme
Előnézet | Kapcsolat | Vásárlás
lindadesign Hozzászólások
203 megtekintés

Megérkezett az első Prémium téma, ami már nem ingyenes. A sok ingyenes mellett, ha egy téma számomra túl jól sikerül, az ezentúl nem lesz ingyen elérhető. A témákat itt sem kell az általam elkészített sztárral felhasználni. Át lehet a fejlécet alakítani vagy én is átalakítom, ha megkértek rá. Mivel ez fizetős téma, ezért ha akad még valami egyedi kérés, azt is szívesen megcsinálom hozzá. A téma fontosabb adatai lejjebb olvashatóak el.

 

A csomag tartalma:
– egyedi fejléces menü
– minden képnek a .psd fájlja
– használati útmutató
– friss képek megjelenítése Sosugary galériából
– egyedi aloldal kinézet
– számos lapozó a blog alján (Forrás: framework)
– kiemelt kép a blog bejegyzéseinél (a legegyszerűbb használatú) ;)
– kérésre átszerkesztem a fejlécet, ha kell
– fel is teszem az oldalra, ha arra kértek

 

Prémium | Ellie Goulding G-Portálos téma
Előnézet | Kapcsolat | Vásárlás
lindadesign Hozzászólások
241 megtekintés

Ez a leírás azért jutott eszembe, mert nekem is szükségem volt valamire, amivel ezt meg tudom oldani, ugyanis próbálom majdnem minden leírásomat áttenni bejegyzésbe és az oldalakat meg törlöm. Szóval ez a minimális kis bővítmény arra jó, ha írtok egy bejegyzést, de azt nem akarjátok, hogy a főoldalon is megjelenjen, mert mondjuk egy modult hoznátok létre például. Viszont a kategóriák vagy a címkék oldalon ott lesz a cikk. Persze úgy is be lehet a bővítményt állítani, hogy ott se jelenjenek meg, de szerintem ott maradhat, mert úgy is több látogatót tudunk bevonzani pl. címkék alapján. Azért is jobb talán mindent bejegyzésben írni, mert ugye az oldalakhoz nem adható hozzá sem kategória, sem címke, viszont a bejegyzésekhez hozzáadható, plusz van saját URL címük, így linkelhetőek ugyanúgy, mint az oldalak.

 

A bővítmény neve WP Hide Post és innen lehet letölteni vagy simán a vezérlőpulton belül is fel lehet telepíteni. Én a vezérlőpultos megoldást ajánlom inkább.

 

Letöltés és értelemszerűen a plugin bekapcsolása után a bejegyzések oldalon megjelenik egy újabb ablakocska a szerkesztő modul alatt, mint nálam a képen:

 

 

Itt pedig kiírtam, hogy melyik beállítás mire való pontosan.

 

 

Szerintem hasznos kis bővítmény, ha valaki úgy akar bejegyzést írni, hogy az ne jelenjen meg a főoldalon, csak mellék oldalon, ahova belinkelitek.

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

2017. szeptember. 13.

Sziasztok! Mára már nem terveztem semmit hozni, de mivel a napokban volt egy kérés, hogy készítsek egy Gal Gadot-os fejlécet, így arra jutottam, hogy inkább egy teljes kinézetet készítek. Ha tetszik valakinek csak a fejléc, azt is fel lehet használni. Én csak fejléceket már nem igazán csinálok. Ahhoz már általában mindig hozzáképzelem a kinézetet is és akkor már meg is csinálom. Rendelésre persze készítek, de az ugye nem ingyenes. A téma innen letölthető: G-Portál – G-Portálos teljes kinézetek

 

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

2017. szeptember. 12.

Sikeresen összedobtam még egy G-Portálos témát, mert most egy pár napig nem nagyon leszek elérhető sajnos. Gondolkodtam, hogy fizetős legyen-e, de aztán a francokat :D Használjátok egészséggel! Azt eddig elfelejtettem írni, hogy az újabb témák, amiket készítek, azt simán lehet bannermentesített oldalra is használni. Annyi lehet akkor a bibi, hogy a fejlécen lévő tartalmat be kell állítani a CSS kódban, mert el lesz csúszva, de talán ez nem okoz gondot. Ha meg igen, akkor kérdezzetek bátran és segítek ;) A téma a szokásos helyen tölthető le: G-Portál – G-Portálos teljes kinézetek

 

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

2017. szeptember. 11.

A változatosság kedvéért ma is hoztam egy egyszerű kinézetű G-Portálos témát. A színvilág nem sokban tér el az Emma Roberts-es kinézettől. Teljesen véletlen, hogy mind a kettő alapszíne a baige lett, de a képek alapján ez illik a Cole-os kinézethez is. Egy teljesen egyszerű témáról van szó. A kódokat be kell illeszteni a helyükre és kész is a kinézet az oldalatokon. A fejlécen a képek értelemszerűen cserélhetőek. Nem ragaszkodom, hogy csak Cole-os oldalt lehet belőle kihozni ;) A témát itt tudjátok letölteni: G- Portál – G-Portálos teljes kinézetek. Mindig a legutolsó a legújabb kinézet!

 

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

Régebben már hoztam arról leírást, hogy például egy Coppermine Galériából hogyan lehet csoportosan képeket letölteni. Jó az a leírás még most is, de most hoztam egy annál egyszerűbbet. Sőt, ezzel a programmal, (mert ez egy picike program) olyan képeket is le lehet szedni, amit a másikkal nem. Sőt, nem csak a Coppermine galériából lehet ezzel a programmal lementeni a képeket, hanem más albumokból is. Ami még fontos lehet, hogy a képeken kívül videókat is le lehet menteni vele. Viszont azt azért fontosnak tartom megjegyezni, hogy sajnos van olyan még ezzel a programmal is, hogy nem mindegyik Coppermine galériából lehet lementeni a képeket. Van, hogy ERROR-t ír, de még így is lényegesen egyszerűbb a képek lementése és mint írtam olyat is le lehet menteni, amit az előző leírásommal nem lehet.

 

 

Ha érdekel titeket a dolog, akkor ezt a picike programot töltsétek le: letöltöm
Kicsomagolás után lesz benne kettő fájl. A setup fájllal fel kell telepíteni a programot a gépre, ez kb 1 percig tart, vagy annyi sem. A másik egy .zip fájl, amit ki kell csomagolni, mert ebben van a patch fájl, amivel regisztráljuk a programunkat, hogy teljes verzió lehessen. A program feltelepítése után magát a programot el kell indítani, aztán a patch fált kell elindítani aminek a neve: SNDBID491 – elindítása után a  Register gombra kell egyet kattintani és kész is van. Ez után le lehet a képeket tölteni a lenti leírás alapján.

 

Maga a program így néz ki, ha meg van nyitva. Annyi, hogy elsőre minden rubrika üres még.

 

 

Tehát akkor most keressük meg a galériában azt az albumot, ahonnan képeket akarunk lementeni magunknak, és az album URL címét másoljuk be a program megfelelő helyére.

 

 

Ha bemásoltuk a linket, akkor a Download to folder mappa sorában a végén van egy mappa ikon. Arra rá kell kattintani és ki kell a gépről választani, hogy hova mentse le a képeket. Ha ez meg van, akkor a mappa kiválasztása után meg kell keresni a frissítés ikont. Zöld körkörös nyilacska. Arra kell kattintani és ekkor megkeresi a program a képeket a galériában, amit aztán lejjebb ki is tesz.

 

 

Ez után a Generate filenames-nél én a helyetekben a felsőt bepipálnám, úgy ahogy a lenti képen is látjátok. Ez arra jó, hogy már úgy menti le a képeket, hogy automatikusan át is nevezi őket. Jelen esetben 001-től számol. Ha mégsem pipáltátok be, mert kimaradt, akkor ezzel a programmal lehet csoportosan fájlokat átnevezni.

 

 

Ha minden beállítás készen van, akkor kattintsunk a letöltés ikonra és várjuk meg, amíg letöltődnek a képek. Látni is lehet, ahogy lementi a képeket a program. A letöltés ikon egy kék nyilacska, ami lefelé mutat.

 

 

És tádám :) A képek le lettek mentve.

 

 

Itt most azért nagy vonalakban leírom, hogy melyik beállítás mire való. A képen beszámoztam a lényeget.

 

 

  1. Ide jön az album URL címe
  2. Itt látható a kiválasztott mappa, ahova lementődnek a képek
  3. Itt kell kiválasztani a mappát, ahova le legyenek mentve a képek
  4. Ezzel kell frissíteni a programot, hogy megtalálja a képeket az albumban
  5. Ha itt van pipa, akkor a kiválasztott mappán belül még egy mappát létre fog hozni, ahol lesznek a képek. Szerintem ide nem kell pipát tenni
  6. Ide viszont kell a pipa, hogy a képek át legyenek nevezve és ne maradjon meg az eredeti neve
  7. Erre az ikonra kell kattintani, ha mehet a letöltés
lindadesign Hozzászólások
175 megtekintés

2017. szeptember. 08.

A bejegyzés címe lehetett volna, hogy négy darab új képes project szövegdoboz, mert most négy újat hoztam, de mivel egy bejegyzésbe csak egyet teszek, így a legutolsó címet kapta a modul. A másik három dobozt a lenti linkeken találjátok és azt, hogy hogyan néz ki a másik három azt a kiemelt képen látjátok ;) Tehát itt most a 26. doboz kódjai és a demó található.

 

 

Képes project szövegdoboz 26.

 

Trónok harca
daenerys targaryen — (2017)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Bővebben erről a projektről!

 

DIV kód
Itt a kép jelenleg 280 pixel széles

 

<div id="projects">
<div class="img"><span class="title">Trónok harca</span>
<span class="info">daenerys targaryen -- (2017)</span></div>
<div id="sinopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. <a href="/">Bővebben erről a projektről!</a></div>
</div>

 

CSS kód

 

<style type="text/css">
#projects {
margin: 0px auto;
width: 280px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
}
#projects .img {
background: url(IDE JÖN A KÉP URL CÍME);
}
#projects .title {
text-transform: uppercase;
color: #6b5740;
background: #ffffff;
letter-spacing: 0.3em;
font-size: 11px;
font-style: normal;
font-weight: bold;
padding: 3px;
position: relative;
bottom: -45px;
left: -10px;
}
#projects .info {
text-transform: lowercase;
font-style: italic;
letter-spacing: 0.2em;
font-size: 10px;
font-weight: normal;
position: relative;
bottom: -50px;
left: -16px;
}
#projects .img {
background-size: cover;
height: 80px;
color:#ffffff;
line-height: 110%;
padding: 60px 20px 0 20px;
margin: 0 0 10px 0;
text-align: left;
}
#sinopsis {
background: #f6f6f6;
border-left: 1px solid #dddddd;
text-align: justify;
padding: 8px;
}
#sinopsis a {
background: #98AFA5;
color: #ffffff;
text-decoration: none;
}</style>

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