Posted by angus_muir on January 24, 2012 at 2:49pm
I am relatively new to Drupal and am having a hard time trying to figure out how to place elements within a block.
I understand that the elements can be ordered in the administrative page, but one of my elements is still hidden.
Is there something in CSS that links to the block name in Drupal?
Comments
I don't think this will be
I don't think this will be much help, but maybe it will get the discussion started.
In my Drupal 6 site, each block does come with a CSS tag that seems to uniquely identify it. I guess that one of your elements might be hidden in CSS, but unless you explicitly set this it seems unlikely. Firebug (or its equivalent in other browsers) could show this, though.
Are you talking about having multiple elements in a block, or do you have multiple blocks that you are trying to arrange? Would a screenshot help illustrate the problem?
Hey angus_muir I'm not sure
Hey angus_muir I'm not sure if I understand your question, but as pnijjar said provide us with some more info and definitely we can help you.
Figured it out
I should preface these comments by saying I inherited a Drupal site which needs some work done to it, so I am working with existing code.
I was trying to figure out how to place a Google translate block within the header block and it kept getting placed in the wrong location. I was unable to figure out how in the CSS to reference that particular element.
I now see that you each element has a specific node number that can be used to reference that block.
/* @group Header */
header { padding-top: 0px; height: 88px;}
/* @group Logo */
name-and-slogan { position: absolute; overflow: hidden; text-indent: -999em; float: left; margin-top: 15px; margin-bottom: 20px; }
site-name a { display: block; width: 400px; height: 81px; background: url(../logo.jpg) no-repeat; }
/* @end */
block-jump-menu-menu-secondary-menu .form-item,
search-block-form .form-item { margin: 0; }
/* @group Search form */
search-block-form { float: right; margin: 20px 10px 0 0; position: relative; }
edit-search-block-form--2 { width: 160px; height: 20px; background: #e7e7e5; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; padding: 2px 28px 2px 10px; font-size: 1em; color: #001948; border: none; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); margin: 0; }
edit-search-block-form--2:focus { background: #efefef; /outline: none;/ }
/* placeholder text styling */
edit-search-block-form--2::-webkit-input-placeholder { color: #001948; }
edit-search-block-form--2:-moz-placeholder { color: #001948; }
edit-search-block-form--2.placeholder { color: #001948; }
search-block-form .form-submit { position: absolute; right: 8px; top: 5px; text-indent: -999em; background: transparent url(../img/icon-search.png) no-repeat -13px 0; border: none; width: 13px; height: 13px; cursor: pointer; overflow: hidden; text-transform: capitalize; padding: 0; }
search-block-form .form-submit:hover { background-position: 0 0; }
search-block-form .form-submit:active { outline: 0; }
/* @end /
/ @group Popular links jump menu */
block-jump-menu-menu-popular-links { float: right; margin: 20px 10px 0 0; padding-top: 2px;}
block-jump-menu-menu-popular-links #edit-jump-goto { margin: 0; }
block-jump-menu-menu-popular-links .form-item { margin: 0; }
/* @end /
/ @group Staff Log-In button */
block-block-3 { float: right; margin: 19px 10px 0; }
block-block-3 .content p { margin: 0; }
block-block-3 .content a { background: url(../img/btn-orange.png) no-repeat; width: 97px; height: 23px; float: left; color: #2554FF; text-decoration: none; text-align: center; padding-top: 3px; }
block-block-3 .content a:hover { background-position: 0 -27px; color: #FF0000; }
/* @end /
/ @group Google translate code */
block-block-6 { position: relative; left: 450px; top: 55px; }
block-block-6 .content p { margin: 0; }
/* @end */
One question I do have is why would some blocks be referenced by number (e.g.,block-block-3), and others by name (e.g., search-block-form)? How does one switch the block to be by name?
Thanks.
Ok I see what's going on
Ok I see what's going on there. Blocks they go inside regions which in your case it's inside a region called header, there are three blocks there staff login, popular links and search. If they are not using context module to organize their blocks you'll find them here yoursite.com/admin/build/block, you can move those block order and it will change which one is display first. You can see who built this site is floating those blocks so they are inline. You can get your new block that you added gtranslate code and added it to the header region and move the order of those blocks.
Regarding why some blocks those blocks id are different, it's because the blocks that you create so called "custom blocks" they get ids like this block-block-# the # is the number of how many blocks have been created in the site by order. The blocks like seach-block-form are blocks that is created by a module. You can't change custom blocks id, unless you create a module that will create a block then you can use a anything as the id.
I hope it helps...