Drupal felépítése: html, css

Drufan képe

Jó napot!

Elkezdtem ismerkedni a Drupal megjelenésének rendszerével (.tpl.php ami a html kódot generálja, és különálló css file-ok, amik a html-ben lévő osztályokra, id-kre hivatkoznak.

Az a kérdésem, hogy miért nem ugyanaz az ID elnevezés a téma .info file-jában és a php-ben, miért jó, hogy át van nevezve? Mert gondolom van oka:

  1. <?php if ($page['sidebar_first']): ?>
  2. <div id="sidebar-first" class="column sidebar"><div class="section">
  3. <?php print render($page['sidebar_first']); ?>
  4. </div></div> <!-- /.section, /#sidebar-first -->
  5. <?php endif; ?>

A példa itt a régióról szól, az info file-ban sidebar_first, később már mindenhol sidebar-first, azaz az .info file elnevezésében „_” karakter van, az ID-ben már „-” karakter.

Azért is szeretném tudni, hogy én is a megkövetelt eljárást alkalmazzam később saját megjelenés készítésekor, ha ennek nyomos van oka.

Melyik modulhoz, modulokhoz kapcsolódik a téma?: 
Drupal verzió: 
Fórum: 
szantog képe

Ez nem drupal kérdés, hanem inkább már történelem, a 2000-es évekből. :)
Egyszerű kényelmi szempont kérdés volt, meg kompatibilitás. 2018-ban nem hiszem, hogy ilyenen gondolkodni kell, de mondjátok, ha nincs igazam. :)

0
0

----
Rájöttem, miért kérdezek olyan ritkán a drupal.hu-n. Amíg szedem össze az infokat a kérdéshez, mindig rájövök a megoldásra.

lazar képe

Az info-fájl "_"-karatkert (vagyis alulvonást) követel meg, a css pedig kényelmesebb "-", vagyis kötőjellel. Utóbbit használod ahogy akarod, csak légy következetes benne.
Ne keverd össze az info-fájl megkövetelte "sidebar_first" megnevezést a templateban levő ID-val vagy class-al, ami itt "sidebar-first". Utóbbi lettőnek bármi más lehet a neve, de így követhetőbb.

0
0
Drufan képe

Kösz a válaszokat!

0
0
Drufan képe

Jól látom, hogy annak ellenére, hogy van egy alap Theme mappa, amiben pl. a Bartik téma is van és ha azt választom ki alapértelmezettnek (akár az admin felületnek is Seven helyett), az nem kezel le mindent?

Például a node/add részen megjelenő felületre nincs teljesen hatással, hanem ha jól tévedek, akkor minden alaprendszerbéli modulnak van még külön CSS file-ja.

Tehát ha eddig abban a tudatban kezdtem neki a sminkelésnek, hogy tanulmányozom a Bartik modult, csinálok hozzá alsminket és átalakítom, és akkor mindent meg tudok változtatni, az téves volt? Még ezer helyről kell kikeresgélni, hogy melyik egyéb elemet hol formázza a Drupal?

Biztos van profi megoldás erre. Merre induljak el?

Mert a Bartik feltérképezése, annak minden file-ja sem túl rövid művelet, de ha még nyomozni is kell az egész Drupal fában, az biztos nem a szakszerű megoldás.

Tudna valaki lehetőleg magyar nyelvű leíráshoz linket küldeni, vagy előadásról, ami ezt a tárgyat taglalja? Meg szeretném tanulni, profin.

0
0
HF leon képe

:D No átszerkesztettem, hogy a Drupal 7-hez passzoljon. Este volt, már XD.

- Az adott téma fájljai, amiket a téma átír az a themes mappában van az aktuálisan beállított téma mappájának teplates mappájában.
- A rendszer saját belső témái a system modulban vannak ömlesztve.
- A moduloknak is lehetnek saját témái az adott modul mappájában szintén ömlesztve.

Érdemes láthatóvá tenni, hol melyik téma a használatos.

sites/default/default.settings.php

  1. $conf['theme_debug'] = TRUE;

Saját téma készítésekor minden olyan tpl.php fájlt másolj át a saját témád templates mappájába, amiket átszerkesztesz.
Mindig a beállított téma mappájából tölti be a drupal az adott tpl fájlt, ha van ott olyan, ha nincs, akkor az adott modul, vagy a system modul tpl fájlja kerül betöltésre.

0
0
SecMan képe

D7 ;)

0
0
Drufan képe

Megnézem ezt a True beállítást, kösz. De hol fog ez megjelenni?

Egyelőre nem akartam a tpl file-okba nyúlni, hanem az azokban lévő ID-kre és Class-okra hivatkozva CSS-sel formázni (mivel ugye más lehetőségem nincs, csak ha a tpl-ben átírnám ezeket az elnevezéseket), tehát akkor nem kell összemásolnom ezeket egyelőre, csak tudni szerettem volna mit honnan vesz a rendszer, ezért ez a lista jó lenne, amit a settings file-ban lehet láthatóvá tenni.

A Drupal 8-ban sincs olyan hely, ahol az összes modul, összes tpl-jét és stílusát összehordja a rendszer, hogy egy helyen lehessen kezelni?

0
0
Drufan képe

Saját téma készítésekor minden olyan tpl.php fájlt másolj át a saját témád templates mappájába, amiket átszerkesztesz.
Mindig a beállított téma mappájából tölti be a drupal az adott tpl fájlt, ha van ott olyan, ha nincs, akkor az adott modul, vagy a system modul tpl fájlja kerül betöltésre.

Megcsináltam, hogy bemásoltam pl. a page.tpl.php-t a saját Theme mappámba a Bartik-ból. Változtattam benne valamit, de nem változott semmi. Arra gondoltam, lehet, hogy mégis a System mappában lévőt használja. És igen, ha ott változtattam, az látszott. Persze visszaállítottam, csak próbából csináltam.

Na most akkor ha mégsem elég, hogy beleteszem a saját Theme mappámba azokat a tpl-eket, amiket használni akarok, ha mégsem először itt keresi a Drupal, akkor hogyan lehet rávenni, hogy ezt használja?

0
0
SecMan képe

Egyrészt ajánlott ez a remek könyv, bár a sminkek részt pont nem tudom mennyire részletezi:
http://nagygusztav.hu/drupal-7-alapismeretek

D7 saját véleményem:
célszerű külön sminket használni az admin felületre és a tartalom felületre.
(pl. az alap Seven is jó, ha modernebbet akarsz akkor nekem az Adminimal vált be)

A tartalom sminkjénél pedig azt kell eldöntened, hogy mennyire felel meg egy kész smink a céljaidnak. Ha pl. csak a színein akarsz változtatni, akkor alsmink, célzás és átírás. Erre nem gyári drupal sminket ajánlanék, hanem keresnék valami mást.

Ha szinte nulláról akarod a megjelenést, egyedi layouttal, méretekkel, stb. akkor vannak olyan sminkek amik egy alap keretet, rendszert biztosítanak.
Pl. Zen, Bootstrap, stb...

Vagy persze teljesen nulláról is lehet saját sminket készíteni.

(Nehézségi szintekben kb. ezek a lépcsőfokok)

0
0
Drufan képe

Sajnos sem ez a könyv, sem egyéb könyv amit meg tudtam vásárolni nem érinti olyan mélyen a Drupal rendszert, ami ha valóban komolyabb dolgot szeretnék megoldani, akkor segítséget nyújtana. Csak angol nyelvű könyvek bővebbek, de...

Szeretem, ha egy könyv olyan vastag, hogy alig lehet elbírni, mert akkor tudom, hogy részletesen, mélyen benne lesz minden. De ezek a 200 oldalas könyvek igazából semmire sem jók, csak arra, hogy eladják. Most ez nem szól a Nagy Gusztáv könyvről, mivel azt ingyenesen is terjesztette, megvásárolni 2 ezerért lehetett, tehát nem drága, de akármit akartam belőle megtudni, csak a felszínt nyaldosta.
A Drupal 24 óra alatt könyv meg közel 7 ezer volt, igaz kétszer olyan vastag, mint az előbb említett, de félig még a 6-os verziót tárgyalja és az is felületes. Mást meg nem találok. Pedig biz' Isten tanulnék, de a régi szép idők elmúltak úgy látszik, amikor részletes könyveket lehetett kapni számítástechnika témában.

Nem akarok az admin felületre más stílust, megfelel a Seven, csakhogy a tartalombeviteli rész például nem admin rész, mégsem kezeli a Bartik, ez a bánatom.

Nem akarok mások által készített sminket letölteni, próbáltam már, de vagy nem pont olyan, vagy hibás lett tőle a rendszer, hanem nulláról csináltam CSS kinézetet, csak most ugye ki kell bogarásznom a Drupal ID-ket, Class-okat, hogy úgy nevezzem el az enyémet, különben nem fog működni, ráadásul ki kell kutatnom, hogy milyen régiók vannak pl. a Bartik-ban, és ahhoz kell alkalmazkodjak, mert PHP-ben még nem vagyok otthon, bár azt láttam, hogy ezek a tpl-ek nem igényelnek nagy PHP tudást, ha jól látom nem csinálnak mást, mint html-t állítanak elő PHP-vel, tehát nem olyan nehéz, mint egy modult megírni.
És persze köt az is, hogy hogyan vannak a DIV-ek egymásba ágyazva, ugyanez miatt nyomozni kell az öröklődéseket is, mert eléggé sok mindent nem egyedi osztállyal, hanem öröklődéssel oldanak meg a Drupal sminkek. Ezt tapasztalom is, meg valahol hallottam is erről, hogy a Drupalban ez a módi.

Szóval a Bartik csak azért kell, hogy lássam a rendszer felépítését, nem akarom használni. De egyébként, ha alsminkelés elég lenne, mindenképpen egy core stílusból indulnék ki, mert abban megbízom, hogy nem bogaras (bug).

Néztem a Zen-t, hallottam róla, hogy ez a profik kedvence, de mivel sokkal összetettebb és sokkal több file-t tartalmaz, amit át kéne néznem, mint a Bartik, ezért indultam ki az utóbbiból.

0
0
HF leon képe

A page, node és a comment teplate-eken kívül nincs benne átszabva semmi.

Az alapértelmezett page ott van a system modulban. A node a node modulban a comment pedig a comment modulban.

A maintance-page pedig kevésbé lényeges, de azt is megtalálod a system modulban.

A régiókat a téma .infó fájljában tudod kialakítani. Annyit és olyan nevűt amennyit csak akarsz. Az alapértelmezett css-eket is itt lehet definiálni.

Ezeket a page.tpl-ben kell elhelyezned ahogyan csak akarod. Ez minimum logikát kíván. Semmi nehéz nincs benne.

Az érdekesebb részeket a téma template.php fájlja tartalmazza. Erről viszont hosszasan lehet írni. Ide, már szükséges némi php tudás és a drupal 7 struktúrális felépítésének ismerete.

Lehetőség van például egy témafájl változóit manipulálni, vagy hozzáadni új elemeket.
Az alábbi függvény a bartik téma html.tpl fájljának tartalmát tudja manipulálni, ami egyébként szintén a system modulban van. A saját témádba másolva a fájlt a kialakítását is átírhatod. Például átírhatod a régi !Doctype elemet a html5-en megfelelőre.

  1. function bartik_preprocess_html(&$variables) {
  2.  
  3. }

A bartik-ban látsz olyat ezen a függvényen belül, hogy:

  1. if (!empty($variables['page']['featured'])) {
  2. $variables['classes_array'][] = 'featured';
  3. }

Itt, ha a $variables['page']['featured'] eleme nem üres, akkor végrehajtja a következő műveletet: $variables['classes_array'][] = 'featured';
Ez pedig a classes_array tömbhöz hozzáad egy új featured elemet. Ezt pedig a drupal rendszere a html.tpl fájlba a többi a rendszer által alkotott osztállyal együtt, ha van kigenerálja a $classes változóba.

Ha megnézed a html.tpl fájlt, akkor látod is, hogy abban szépen ki van printelve a body tagban.

Gondolom az ie css-ek hozzáadása egyértelmű.

Felteheted a kérdést, hogy vannak preprocess és process változatú függvények.

Mi a különbség?

Leginkább az, hogy a preprocess akkor manipulálja a dolgokat, mielőtt a drupal lefuttatja a különféle folyamatait.

A process esetén pedig a drupal folyamatainak végrehajtása után tudsz belenyúlni a dolgokba.

Erről itt olvashatsz bővebben:
https://www.drupal.org/node/223430

Ahhoz, hogy bármit meg tudj tenni ismerned kell a drupal 7 rendszerét.

Például, ha nem tudod, hogy a szájt neve a $variables['site_name'], akkor variálni sem tudod.

Ehhez át kell tanulmányoznod a drupal moduljait és a drupal.org-on lévő leírásokat. A modulok témafájljaiban is találsz segítséget.

Igen-igen sajnos mind angolul van, de ahhoz, hogy ezeket valaki mind elmagyarázza neked rengeteg idő kell. Valamint a php-t is meg kell tanulnod használni, ha érdekesebb dolgokat szeretnél, mert ezek megvalósításában a template.php segíthet.

Így vagy fizetsz egy tanfolyamért valamelyik oktatással foglalkozó szervezetnél, vagy önszorgalommal megtanulod. Én önszorgalommal tanultam a webfejlesztést, de az sokáig tart. Ma már sok mindenhez értek (pl: html, css, javascript, jquery, bootstrap, php, twig, sql...), de a megtanulása sok évbe tellett és folyamatosan követni kell a változásokat. Ráadásul manapság a legtöbb információ, főleg a frissek csak angolul érhetők el. Ha gyors eredményt akarsz, akkor keress tanfolyamot. A komolyabb tanfolyamok viszont fizetősek, sokszor igen drágák is lehetnek.

Neked kell eldöntened, hogy mi éri meg neked jobban. Kifizetni egy komolyabb összeget egy normálisabb tanfolyamra -ez gyors megoldás lehet, vagy magadtól rájönni a dolgokra, -ami sok-sok tanulással, keresgéléssel és gyakorlással jár.

0
0
Drufan képe

Kösz a részletezést.

Internet Explorer-re külön ma már nem kell css-t írni remélem, nem is szeretnék.

Tanfolyam: néztem ilyeneket, egyikre jelentkeztem is, de már lassan egy éve nem írták meg mikor indul új tanfolyam, aztán néztem másokat, amikről negatív véleményeket találtam, van ez az állami, ami végül is mégsem állami, és persze ott is kell az angol és sokba kerül (milliós nagyságrend), ha valami nem jön úgy össze.

Sejtem hogy az angolt nem úszom meg, de ha még azt is meg akarok tanulni, akkor az tényleg nagyon hosszú lesz (valamennyire értem a leírásokat angolul, de...), ráadásul nem szeretek nyelvet tanulni, főleg egy a magyarnál sokkal primitívebb nyelvet, ami ha nagyon belemerülök még a magyaromat is elronthatja (sok angolul tudónál tapasztalom), ha rászokom annak a magyartól teljesen idegen és egyébként messze nem olyan logikusan felépített szabályaira.

Durva, hogy annyi mindent köszönhet a számítástechnika magyar találmányoknak, mégsem lehet magyar nyelven elérni komolyabb tananyagot.

Szóval marad a magánszorgalom, csak így sajnos nem lesz könnyen egy átfogó kép, hanem sok kis darabból kell összeilleszteni a tudást.

Bajon az egyetemeinken is angolul kell tanulni az informatikát? Mert ha nem, azaz vannak komoly jegyzetek, előadások, akkor azt csak meg lehet valahogy szerezni/venni?!

0
0
HF leon képe

Tudom rossz hír -én is örülnék, ha friss több műszaki könyv jelenne meg magyarul, de meglehet nem fizetik meg eléggé a műszaki könyvek fordítását -ezért igen gyér a választék. Ráadásul előfordul, hogy mire egy kellően lektorált könyv elkészül és kiadásra kerülhetne, már elavult lesz, illetve túlhaladott.

Az egyetemeken aki nem beszéli jól az angolt ne is akarjon informatikát tanulni! Nem vicc egyes tárgyak előadói nem is magyarok. Ebből következően az előadás nyelve sem magyar!

Bár sokat köszönhet a magyar feltalálóknak a számítástechnika, mégsem tudták magyar nyelven kamatoztatni ötleteiket sajnos!

A komolyabb tanfolyamok azért drágák, mert nagy az igény rájuk. Többnyire azok válasszák, akik ezen a területen akarnak dolgozni, ahol 600-800 ezres fizuk sem ritkák.

A legtöbb komoly vállalat nemzetközi csapatokkal dolgozik. Előfordul olyan eset is, hogy egyikük anyanyelve sem angol.

Az angol nyelv olyan a mai világban, mint a középkorban a latin.

Próbáld a google fordítóját használni, ha másként nem megy. A semminél az is több és szerencsére folyamatosan fejlesztik.

Én is szeretem az anyanyelvem, de a műszaki, gazdasági nyelv az angol.
A múltba pedig nem lehet visszamenni, hogy a Magyarok hódítsák meg a fél világot ;):D.

0
0
Drufan képe

OFF:

A múltba pedig nem lehet visszamenni, hogy a Magyarok hódítsák meg a fél világot ;):D.

A remény hal meg utoljára. :-)

Ja, és vesszen Trianon!

ON:

Most fogtam föl másodszori olvasásra: tehát ha nem a Bartikot alsminkelem, hanem egy tök üres saját Megjelenést kezdek el az all/Theme mappában, amibe csak egy .info file-t teszek a régiók miatt, és egy saját css-t (ezt tettem, hogy tiszta lappal induljak és lássam mi nullázódott le), akkor valójában a rendszermappában lévő alap tpl-ek hatnak most az oldalamra, tehát azért nem találok egy-egy szükséges ID-t, Class-t, mert közben meg én okos a Bartik-nak a tpl-jeit nézem.

Tehát akkor másoljam be a Bartik tpl-jeit, ha abból akarok kiindulni, jól értem?

0
0
HF leon képe

Persze ne felejtsd, hogy a system page.tpl-je csak az alábbi régiókat jeleníti meg:

* - $page['help']: Dynamic help text, mostly for admin pages.
* - $page['highlighted']: Items for the highlighted content region.
* - $page['content']: The main content of the current page.
* - $page['sidebar_first']: Items for the first sidebar.
* - $page['sidebar_second']: Items for the second sidebar.
* - $page['header']: Items for the header region.
* - $page['footer']: Items for the footer region.

A template.php ad lehetőséget az igazi érdekességek kivitelezéséhez. Persze üresen is hagyható.

A page.tpl definiálja a body elemen belüli oldalkialakítást. ebben rendeződnek el a régiók.

Hogyan? Így:
 print render($page['header']);

Itt például a header régió kerül megjelenítésre. Ezzel a php kóddal jelenítheted meg az info fájlban definiált régiókat a page.tpl fájlban.

Ha szükséged van a bartik-ra, akkor csinálj úgy egy saját sminket -ahogy a drupal fordításában használják -úgy, hogy másold le az egész mappát és nevezd át például mytheme névre. Utána a benne lévő fájlokat nyisd meg és minden bartik szöveget cseréld le mytheme szövegre.

Kész is a saját mytheme témád, ami dettó úgy működik, mint a bartik. Ezután nekiláthatsz a teljes átalakításának.

0
0
Drufan képe

Kösz, akkor tovább mélyülök ezekben.

0
0
Drufan képe

A böngésző Webfejlesztő eszközével is nyomozom, hogy mi hol van, mi mire utal.

Megtaláltam az összes régiót #block-block- ID-vel (a #Help azonosítóra nincs találat, a #Content pedig belefoglal több részt, régiót is, a #block-block-5 viszont csak azt, nekem meg épp az kell) csak azt nem értem, miért utal mindenre két ID, pl:

#sidebar-first = #block-block-1
#highlighted = #block-block-2

Rákerestem az egész Drupal mappában, tehát minden file-ban, de sehol sem volt találat a #block-block- ID-kre. Akkor honnan jön? Mi generálja? És mire való?

Ráadásul a
#header nem = #block-block-3 (hanem benne van a Logó, a Honlapnév és a Jelmondat is).

Melyiket érdemes egyébként használni a kódban ráhivatkozásként?

0
0
HF leon képe

Hogy jönnek a régiókhoz ezek a block-block id-k?

Nézzük mondjuk a Bartik page.tpl.php fájlt. Ebben a Header régiót a következő parancs írja ki:

  1. <?php print render($page['header']); ?>

A régiók mindíg a page.tpl.php fájlban vannak. Ez a fájl definiálja az oldal alapszerkezetét. Amiket írtál "Logó, a Honlapnév és a Jelmondat" az a page.tpl.php fájl id="header" div-ében vannak. Ebbe generálódik a ['header'] régió is.

Alább ez a div van:

  1. <div id="header" class="<?php print $secondary_menu ? 'with-secondary-menu': 'without-secondary-menu'; ?>"><div class="section clearfix">
  2.  
  3. <?php if ($logo): ?>
  4. <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
  5. <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
  6. </a>
  7. <?php endif; ?>
  8.  
  9. <?php if ($site_name || $site_slogan): ?>
  10. <div id="name-and-slogan"<?php if ($hide_site_name && $hide_site_slogan) { print ' class="element-invisible"'; } ?>>
  11.  
  12. <?php if ($site_name): ?>
  13. <?php if ($title): ?>
  14. <div id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
  15. <strong>
  16. <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
  17. </strong>
  18. </div>
  19. <?php else: /* Use h1 when the content title is empty */ ?>
  20. <h1 id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
  21. <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
  22. </h1>
  23. <?php endif; ?>
  24. <?php endif; ?>
  25.  
  26. <?php if ($site_slogan): ?>
  27. <div id="site-slogan"<?php if ($hide_site_slogan) { print ' class="element-invisible"'; } ?>>
  28. <?php print $site_slogan; ?>
  29. </div>
  30. <?php endif; ?>
  31.  
  32. </div> <!-- /#name-and-slogan -->
  33. <?php endif; ?>
  34.  
  35. <?php print render($page['header']); ?>
  36.  
  37. <?php if ($main_menu): ?>
  38. <div id="main-menu" class="navigation">
  39. <?php print theme('links__system_main_menu', array(
  40. 'links' => $main_menu,
  41. 'attributes' => array(
  42. 'id' => 'main-menu-links',
  43. 'class' => array('links', 'clearfix'),
  44. ),
  45. 'heading' => array(
  46. 'text' => t('Main menu'),
  47. 'level' => 'h2',
  48. 'class' => array('element-invisible'),
  49. ),
  50. )); ?>
  51. </div> <!-- /#main-menu -->
  52. <?php endif; ?>
  53.  
  54. <?php if ($secondary_menu): ?>
  55. <div id="secondary-menu" class="navigation">
  56. <?php print theme('links__system_secondary_menu', array(
  57. 'links' => $secondary_menu,
  58. 'attributes' => array(
  59. 'id' => 'secondary-menu-links',
  60. 'class' => array('links', 'inline', 'clearfix'),
  61. ),
  62. 'heading' => array(
  63. 'text' => t('Secondary menu'),
  64. 'level' => 'h2',
  65. 'class' => array('element-invisible'),
  66. ),
  67. )); ?>
  68. </div> <!-- /#secondary-menu -->
  69. <?php endif; ?>
  70.  
  71. </div>
0
0