1. Tudásbázis
  2. Sminkek
  3. Zen alsmink

Zen alsmink

Beküldte makgab - 2014. május 26. 07.58
makgab képe

Üdv!

Egy Zen alsminket készítek A STARTERKIT-je segítségével.
A regiókat elhelyeztem, csak a formázást kellene finomítani. (page.tpl és a css)
Csatoltam is a régiók helyét. A három MyBlock-ot szeretném betenni középre hasábosan (pirossal berajzoltam a tervezett helyét).

  1. // page.tpl. részlet
  2.  
  3. <! -- My regions -->
  4.     <center>
  5.     <?php if ($page['tophead']): ?>
  6.        <div class="tophead">
  7.        <?php print render($page['tophead']); ?>
  8.        </div>
  9.     <?php endif; ?>
  10.     </center>
  11. <!-- -->
  12.  
  13.  
  14.     <?php if ($secondary_menu): ?>
  15.       <nav class="header__secondary-menu" id="secondary-menu" role="navigation">
  16.         <?php print theme('links__system_secondary_menu', array(
  17.           'links' => $secondary_menu,
  18.           'attributes' => array(
  19.             'class' => array('links', 'inline', 'clearfix'),
  20.           ),
  21.           'heading' => array(
  22.             'text' => $secondary_menu_heading,
  23.             'level' => 'h2',
  24.             'class' => array('element-invisible'),
  25.           ),
  26.         )); ?>
  27.       </nav>
  28.     <?php endif; ?>
  29.  
  30.     <center>
  31.     <?php print render($page['header']); ?>
  32.     </center>
  33.  
  34.  
  35.  
  36. <!-- My regions ********** -->
  37. <br>
  38.     <?php if ($page['myblock3']): ?>
  39.        <div class="myblock">
  40.        <?php print render($page['myblock3']); ?>
  41.        </div>
  42.     <?php endif; ?>
  43.  
  44.     <?php if ($page['myblock2']): ?>
  45.        <div class="myblock">
  46.        <?php print render($page['myblock2']); ?>
  47.        </div>
  48.     <?php endif; ?>
  49.  
  50.  
  51.     <?php if ($page['myblock']): ?>
  52.        <div class="myblock">
  53.        <?php print render($page['myblock']); ?>
  54.        </div>
  55.     <?php endif; ?>
  56. <br>
  57. <br>
  58.  
  59.     <?php if ($page['header2']): ?>
  60.        <div class="header2">
  61.        <?php print render($page['header2']); ?>
  62.        </div>
  63.     <?php endif; ?>
  64.  
  65. <br>
  66.  
  67. <!-- END of My regions ******* -->
  68.  
  69.  
  70.   </header>

A styles.css-be egyelőre ezt tettem:

/* HTML element (SMACSS base) rules */
@import "normalize.css";
 
/* Layout rules */
@import "layouts/responsive.css";
 
/* Component (SMACSS module) rules */
@import "components/misc.css";
/* Optionally, add your own components here. */
@import "print.css";
 
/* SMACSS theme rules */
/* @import "theme-A.css"; */
/* @import "theme-B.css"; */
 
/* ****************** */
/* MyTheme CSS styles */
/* ****************** */
 
body {
  /*background: #330000;*/
  font-family: Arial,Helvetica,sans-senif,SimSunArial,"宋体";
  font: 700 28px/17px 'PT Sans Narrow';
  font-size: 12px;
  color: #001122; /* font color */
  text-transform:capitalize;
  background-color: #EEEEEE;
}
 
 
.myblock {
  display: inline;
  float: right;
  width: 30%;
}
 
 
a:link {
  color: #001100;
}
 
 
 
img.header__logo-image {
  margin: 8px;;
}
 
 
 
.header2 {
  clear: both;
}
 
 
 
.tophead {
    left: 150px;
    position: relative;
    top: 3px;
    width: 50%;
}

Tehát a blokkok pozícionálása a kérdés csak.

Drupal verzió: 
7.x
Fórum: 
Sminkek
CsatolmányMéret
Kép ikon zen_subtheme.png28.86 KB
makgab képe

Beküldte makgab - 2014. május 26. 08.00

Elnézést! Kétszer ment fel a téma, de ez utóbbi a jó, itt csatoltam a smink regionézetét.

0
0
makgab képe

Beküldte makgab - 2014. május 27. 21.56

A regiókat mivel célszerű pozícionálni a tpl-ben? Pl. css position, top, left... stb?

div.myregion {
  /* position: relative; */
  position: absolute;
  top: 20px;
  left: 200px;
}
0
0
szantog képe

Beküldte szantog - 2014. május 27. 19.05

Javaslom nagyon komoly áttanulmányozásra:
http://www.tutorial.hu/html5-es-css3/

1
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.

eager képe

Beküldte eager - 2014. május 29. 16.44

http://zengrids.com/help/#examples

^^

A Zen Grids a Zen sminkben is benne van alapból. A STARTERKIT-nek is szokott lenni olyan file-ja, amiben láthatsz példát a használatára, és ahova beírhatod a saját ráadás szabályaidat, pl.:

STARTERKITből_indított_yourtheme/sass/layouts/_responsive.scss

UI.: aközött, hogy ismerem a CSS syntaxot, és aközött hogy helyesen használom a CSS-t, kb. Grand Canyon-nyi széles a távolság.

Szóval ha holnap estére még nem lesz tökéletes, attól nem érdemes kikészülni :) A kérdésedből kiindulva lehet hogy te most jobban járnál egy sminkessel?

1
0
makgab képe

Beküldte makgab - 2014. május 29. 20.40

Köszönöm válaszod.
Tudom, sokat kell még tanulnom smink témában. Eddig inkább drupalos sminkekből csináltam alsminket. De most megpróbáltam "alapból" a zen sminket használva.

Sok tapszatalatot szereztem az utóbbi napokban. :) Lépésekben megyek, apránként.
De a tanulásnak soha nincs vége. :)

A kérdésem egyelőre csak arra vonatkozott, hogy a régiókat hogyan érdemes pozíciónálni (pl. három hasábos esetén).

0
0