Panelek

Beküldte Prancz Ádám - 2010. augusztus 2. 12.51

Sziasztok!
Nincs olyan oldal, ahonnan le lehetne tölteni egyedi panel megjelenéseket a gyáriakon kívül?

Üdv:
Ádám

Drupal verzió:

6.x

Fórum:

Modulok használata

Layout terv

Permalink Beküldte Prancz Ádám - 2010. augusztus 2. 13.38

Ezt szeretném megcsinálni:
2/3 - 1/3
2/3 - 1/3
1/3 - 1/3 - 1/3
1/3 - 1/3 - 1/3

Szerintem ez sokkal átláthatóbbá tenné az egész oldalt, de a flexibilis panel létrehozása
eléggé nehéznek bizonyult!
A legkényelmesebb egy custom layout betöltése lenne.
Tud valaki ebben segíteni nekem?

Köszönöm!

Prancz Ádám
Ingyenes linkkatalógus | Hostessek, modellek | Webdesign

A hozzászóláshoz regisztráció és bejelentkezés szükséges

Saját panels layout készítése

Permalink Beküldte Den - 2010. augusztus 3. 07.37

Azért annyira nem bonyolult dolog egy layout-ot legyártani. Pont olyan, amilyen neked kell úgyse tölthető le!

1; a smink.info-ba:
; Panels layouts. You can place multiple layouts under the "layouts" folder.
plugins[panels][layouts] = layouts

2; A sminked gyökerébe csinálj egy layouts könyvtárat. Ebbe másold bele a panels/plugins/layouts -ból a neked tetsző, a kialakítani kívántra leginkább hasonlító layout könyvtárat, mondjuk footer néven - ez fogja a speciális footer layout-ot (igazából, az a neve, amit adsz neki, nekem ezt egyszerűbb másolni az oldalamról: http://internode.hu - a lábléc).

Ekkor van egy smink/layouts/footer könyvtárad, benne egy .css, egy .inc, egy .tpl.php egy .png.

Elnevezési szabályok nagyon egyszerűek: a layout-nevet használod. Az eredetiben van panels-threecol-25-50-25.tpl.php threecol_25_50_25.css threecol_25_50_25.inc threecol_25_50_25.png, az enyémben footer.css footer.inc panel-footer.png panels-footer.tpl.php.

3; Footer.inc-be belenézel: semmi különös, egy definiciós tömb:

// Plugin definition                                                                                                                
$plugin = array(                                                                                                                    
  'title' => t('Footer mini-panel layout'),                                                                                         
  'icon' => 'panel-footer.png',                                                                                                     
  'theme' => 'panels_footer',                                                                                                       
  'css' => 'footer.css',                                                                                                            
  'panels' => array(                                                                                                                
    'footer_left' => t('Footer left'),                                                                                              
    'footer_center_left' => t('Footer center left'),                                                                                
    'footer_center_right' => t('Footer center right'),                                                                              
    'footer_right' => t('Footer right'),                                                                                            
    'footer_mission' => t('Footer mission'),                                                                                        
  ),                                                                                                                                
);

4; Értelem szerűen kitöltögeted/átírod. Csinálsz hozzá kis előnézeti képet. A tpl.php állományba meg teszel, amit jónak látsz, sima html+smink. footer_left régiót és a többi panels szekcióban definiált régiót használod. A tpl.php-hoz tartozó css-ben beállítod a speciális dolgaidat, pl. a panelek szélességét.

5; Smink cache törlés (-azt hiszem, csak egyszer kell, a smink info beolvasása miatt, de ha nem találja meg a saját panelt, akkor érdemes ezzel kezdeni) és a panels layoutok között ott lesz a saját layout-od. UU. mini panels, panel pane layout-ot lehet definiálni.

--
Szabó Dénes - Internode.hu - Munkára fogott weblapok

A hozzászóláshoz regisztráció és bejelentkezés szükséges

Köszönöm!

Permalink Beküldte Prancz Ádám - 2010. augusztus 3. 07.59

Köszönöm a segítséget!
Még nézegettem a 3-as panelben lévő szerkesztő felületet is jobban, de túlságosan bonyolult szerintem inkább legyártom úgy ahogy mondtad!

Köszi mégegyszer!

Prancz Ádám
Ingyenes linkkatalógus | Hostessek, modellek | Webdesign

A hozzászóláshoz regisztráció és bejelentkezés szükséges

A teljesség kedvéért

Permalink Beküldte Prancz Ádám - 2010. augusztus 3. 10.58

Meg van a layouts mappa benne a fooldal konyvtárral.

Fooldal.inc

// $Id: threecol_33_34_33_stacked.inc,v 1.1.2.2 2010/06/22 15:54:25 merlinofchaos Exp $
 
// Plugin definition
$plugin = array(
  'title' => t('Fooldali layout'),
  'category' => t('Columns: 3'),
  'icon' => 'fooldal.png',
  'theme' => 'fooldal',
  'css' => 'fooldal.css',
  'panels' => array(
    'kiemeltcikk' => t('Kiemelt cikk'),
    'ercsiegyesulethirek' => t('Egyesulet Ercsiert hirek'),
	'program' => t('Program'),
    'ercsihirek' => t('Ercsi varos hirei'),
    'szavazas' => t('Szavazas'),
    'szponzorok' => t('Szponzorok'),
    'belepes' => t('Belepes'),
	'rovatok' => t('Rovatok'),
	'forum' => t('Forum'),
	'felhasznalok' => t('Felhasznalok')
  ),
);

fooldal.tpl.php

<div class="fooldal clear-block" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
 
  <div class="fooldalrow">
    <div class="fooldalkiemeltcikk"><?php print $content['kiemeltcikk']; ?></div>
	<div class="fooldalercsiegyesulethirek"><?php print $content['ercsiegyesulethirek']; ?></div>
  </div>    
 
  <div class="fooldalrow">
    <div class="fooldalprogram"><?php print $content['program']; ?></div>
	<div class="fooldalercsihirek"><?php print $content['ercsihirek']; ?></div>
  </div>    
 
  <div class="fooldalrow">
    <div class="fooldalszavazas"><?php print $content['szavazas']; ?></div>
	<div class="fooldalszponzorok"><?php print $content['szponzorok']; ?></div>
	<div class="fooldalbelepes"><?php print $content['belepes']; ?></div>
  </div>	
 
  <div class="fooldalrow">
    <div class="fooldalrovatok"><?php print $content['rovatok']; ?></div>
	<div class="fooldalforum"><?php print $content['forum']; ?></div>
	<div class="fooldalfelhasznalok"><?php print $content['felhasznalok']; ?></div>
  </div>
 
</div>

Valamint megcsináltam a css filet is a leírásod és az angol nyelvű okosságok alapján:

.fooldal {/*  overflow: hidden;  */}
.fooldal,.fooldalrow{width: 100%;clear: both;}
.fooldalkiemeltcikk {width: 70%; float: left;}
.fooldalercsiegyesulethirek  {width: 30%; float:right;}
.fooldalprogram {width: 70%; float:left;}
.fooldalercsihirek {width: 30%; float:right;}
.fooldalszavazas {width: 33,3%; float:left;}
.fooldalszponzorok {width: 33,3%; float:left;}
.fooldalbelepes {width: 33,3%; float:left;}
.fooldalrovatok {width: 33,3%; float:left;}
.fooldalforum {width: 33,3%; float:left;}
.fooldalfelhasznalok {width: 33,3%; float:left;}