1. Tudásbázis
  2. Sminkek
  3. Egyedi block - egyedi háttér

Egyedi block - egyedi háttér

Beküldte Modessa - 2009. február 15. 14.13
Modessa képe

Napok óta nem tudok rájönni valamire.

Smink: Acquia-marina

A bal blokkoknak egy közös hátteret adtam style.css-ben:

#sidebar-first div.block div.content,
#sidebar-last div.block div.content,
#postscript-wrapper div.block div.content {
  background: transparent url('images/block-gradient2.png') no-repeat center top;
....
}

Van itt, a bal oldalsávban egy saját blokkom, aminek egyedi hátteret szeretnék.
Meg is próbáltam belőni ezt szintén a style-css-ben így:

#block-block-6 {
  background: transparent url('images/header_top_bg3.jpg') no-repeat center top;
   ....
}

Csakhogy most mind a 2 háttér látszik.
A blokkok "közös" háttere van felül, és alóla kilátszik a saját blokkomban a neki szánt háttér mert az magasabb.

Hogyan tudnám csak ennél a blokknál a "közös" hátteret felülírni?

Nagyon köszi minden jótanácsot!

Drupal verzió: 
6.x
Fórum: 
Sminkek
Pasqualle képe

Beküldte Pasqualle - 2009. február 15. 14.27 

#block-block-6 div.block div.content {
0
0
Modessa képe

Beküldte Modessa - 2009. február 15. 14.47

Kipróbáltam, de most már csak a "közös" háttér látszik, a sajátja alul kilógva sem jelenik meg.
Ezzel együtt amit próbáltam eddig:

#block-block-6 {
  ...
}
 
#block-block-6 div.content {
 ...
}

és most próbáltam a javasoltat:

#block-block-6 div.block div.content {
  ...
}

Ezek közül csak a legelső (#block-block-6) próbálkozásnál jelent meg a saját háttere, de akkor is csak a "közös" alatt.

0
0
Modessa képe

Beküldte Modessa - 2009. február 15. 14.54

Nézegetem Firebug-ban is hátha megtalálom de nem lelem:

<div class="block-wrapper odd">
     <!-- see preprocess_block() -->
  <div class="rounded-block">
    <div class="rounded-block-top-left"/>
    <div class="rounded-block-top-right"/>
    <div class="rounded-outside">
      <div class="rounded-inside">
        <p class="rounded-topspace"/>
 
        <div class="block block-block" id="block-block-6">
                    <div class="content">
            <p class="rteleft"><a href="http://budai-foantikvariumhu.web-server.hu/antikvarium"><img height="178" width="100" alt="" src="/userfiles/image/orig_logo_06.jpg"/></a></p>
          </div>
        </div>
 
          <p class="rounded-bottomspace"/>
      </div><!-- /rounded-inside -->
    </div>
    <div class="rounded-block-bottom-left"/>
    <div class="rounded-block-bottom-right"/>
  </div><!-- /rounded-block -->
 
</div>

A blokk egy logót tárol, ami most ki van rakva a sidebar first hátterének is ideiglenesen, mert blokként is ugyanúgy kell majd megjelennie, azaz háttér nélkül balra zárva.

0
0
Pasqualle képe

Beküldte Pasqualle - 2009. február 15. 15.06 

#block-block-6 div.content {
0
0
Pasqualle képe

Beküldte Pasqualle - 2009. február 15. 15.08

ha van firebug-od akkor a blokk css beallitasait is latod..

0
0
Modessa képe

Beküldte Modessa - 2009. február 15. 15.16

Látszik hogy valahol figyelembe veszi a saját CSS beállítást, de benne valamiért át van húzva a background-dal kapcsolatos rész.
Nem tudom miért???

Ezen a linken megtekinthető.

0
0
aboros képe

Beküldte aboros - 2009. február 15. 17.16

van egy olyan dolog, amit "specificity" néven megtalálhatsz, az a lényeg, hogy a pontosabban célzott szabály mindig erősebb. illetve, ennek felülírására létezik egy !important kapcsoló.

azért "húzza át" a saját cssed, mert a másik szabály pontosabban célzott, tehát ő erősebb lesz. két megoldás lehetséges..

#block-block-6 div.content {
background: transparent url(images/en-kepem.png) no-repeat scroll center top !important;
..
}

vagy

#sidebar-first div#block-block-6 div.content {
background: transparent url(images/en-kepem.png) no-repeat scroll center top;
...
}

mellékszál:
például a htmlbe égett stílus (pl style="padding-left:10") az azért nagyon ellenjavallt, mert soha semmivel azt "túlcélozni" már nem fogod tudni. akármilyen pontosan célzol is és !important is használsz, a style attribútummal beégetett stílus mindig erősebb minden másnál. ennek a hátrányait elég könnyű átlátni. :)

csak hogy teljesen precíz legyen a dolog, idepötyögöm neked a css mastery könyvből a "specificity example" táblázat:

selector -> specificity in base 10
style="" -> 1000
#wrapper #content {} -> 200
#content .datePosted {} -> 110
div#content {} -> 101
#content {} -> 100
p.comment .dateposted {} -> 21
p.commetn {} -> 11
div p {} -> 2
p{} -> 1

0
0

-
clear: both;

Modessa képe

Beküldte Modessa - 2009. február 15. 17.50

Nagyon köszi a segítséget ez a megoldás.
Az important kapcsolóval próbáltam és működik.
Ha csak egyszer is elé teszem a sidebar first tag-et, akkor rájöttem volna véletlenségből. :)
Ezt most nagyon megjegyeztem mert nagyon sokat szívtam vele.

Bár most épp kihúzta a szolgáltató alólam a szervert, de ezzel sokat léptem előre.
Már csak azt kell megtalálnom, hogy hol van fehérre állítva a block háttérszín, mert ha sima background: transparent;-re teszem, akkor fehér hátterű blockot kapok, pedig nekem úgy kéne kitegyem ezt a függőleges logót, mintha a sidebar first háttere lenne, ahogy most is kint van háttérként is.

Ki akartam kerülni ezt a problémát, ezért tettem háttérként be a logót, de tegnap szólt a megrendelő, hogy csak a címoldalon legyen logó, a többin ne.
Ezért kellett újra elővegyem a dolgot. :)
Ha el tudom tüntetni valahogy a fehér keretet és a fehér hátteret a blockból, akkor készen is leszek. :)

0
0
aboros képe

Beküldte aboros - 2009. február 15. 18.44

újabban a sminkek elég sokmindent tolnak már a bodyba osztályként. ilyen például az is, hogy éppen a címlapon vagyunk e. most nem tudom megnézni, hogy nálad van e ilyen (ha nincs majd betoljuk) vagy ha van akkor mi is az pontosan, de ilyesmi lesz, hogy:

felülírás ha címlap:

body.front #sidebar-first {
background-image: url(images/a-logo.png);
padding-top: a logo magassága meg még egy kici;
}

biztos nem pont ez, de valami hasonló. :)

0
0

-
clear: both;

Modessa képe

Beküldte Modessa - 2009. február 15. 19.41

Köszi, amint visszajön a szerver végigpróbálgatom.

0
0
Modessa képe

Beküldte Modessa - 2009. február 16. 07.08

Nos maga a sidebar first transparent.

A benne megjelenő blockok háttérszíne fehéres.

Tippem szerint valahol itt állítódik be:

/**********/
/* LAYOUT */
/**********/
 
html {
  background: #F4F7E7;                               /* background & font color */
  color: #666;
}
 
#page {
  background-color: #F4F7E7;
  margin: 0;
  width: 100%;
}

Ezt hogy tudnám a saját blokkomban felülírni?

0
0
Modessa képe

Beküldte Modessa - 2009. február 15. 15.26

CSS firebug-ból

0
0
Paal képe

Beküldte Paal - 2009. február 15. 15.22

Van ilyen modul: http://drupal.org/project/blocktheme
Videó: http://mustardseedmedia.com/podcast/episode13

Üdv, Pali

0
0

--
Palócz Paal Pál, a drupal.hu admin csoportjának tagja
Ajánlott olvasmány: Eric Steven Raymond - Hogyan kérdezzünk okosan

Modessa képe

Beküldte Modessa - 2009. február 16. 17.49

Egyébként ezt a Block Theme Module-t kipróbáltam mikor belinkelted.
Mindent szépen be lehetett állítani az oktató videó alapján.
Az eredmény viszont ugyanaz lett, tehát az !important nélkül 2 hátterem volt egyszerre.
:)

0
0