By Artem on

Hi

I like the Drupal's default Garland theme and especially its fixed width version Minelli. However, I would like to modify it a bit and cannot find a way for it.

I would like to move the search block to the theme header - to the same row whether the primary links are or maybe a bit below it like it is on drupal.org. Does anybody know how to make such a modification?

I am ready both for neat solutions and dirty hacks and would even accept putting there not the normal Drupal search, but Google's site search. I just want to put *any* search box to the header - there's too little space in the columns and readers are always looking for the search box in the top of the page.

⋅ Categories: Drupal 5.x, Drupal 6.x

Comments

karmaxstripes’s picture

karmaxstripes commented

Have you tried to change de .css doc??there are a lot of options there that you can chage...

Artem’s picture

Artem commented

That is what expect would be needed :)
I don't mind changing it and do it successfully from time to time (e.g. widening Galrand column|). Unfortunately my CSS skills are quite low and I would appreciate some guidance and first of all expert opinion on whether it can be done at all.

I don't mind hard work on it and I don't mind sharing results if any, but I need guidance.

karmaxstripes’s picture

karmaxstripes commented

I has trying to see my garland .css but I'm with some problems no my pc, so..I don't know if this will help a lot, anyway, if you open the document there will be some parts of code with "/*" wirch means that are commented, try to see if there is a block refering what you want.

For example, for a menu link's you can have this code:

/* navigation links */

#navigation{position:absolute;left:0px;top:97px;}
#navigation li a{background:#999797 url(img/menu.gif) no-repeat 0 100%;color:#d7d6d6;display:block;font-weight:700;margin:0 3px;padding:5px 0;text-align:center;width:70px;}
#navigation li.active a,#navigation li a:hover{color:#e0a70e;padding-top:6px;text-decoration:none;}
#navigation li{float:left; list-style:none;}

(In the first line you are saying that the links positions in absolute, that the menu is at left side in the display, and is at 97px from the top. If I change this values I can put it at right side or at the bottom)

What you must try to see is there is any position option to your search box.

If you want lear more about html and css visit this sites:

http://www.htmldog.com/
http://css-discuss.incutio.com/

Artem’s picture

Artem commented

There is a default search field indeed (enableable from theme settings if Search module is installed). By default theme puts this field to the sidebar. I tried cut-pasting it to various part of the header, but that looks quite ugly.

Probably what I really need is to find out whether anybody managed to put a default search box or Google Search box to Garland/Minelli header so that it was looking nice.

greenskunk’s picture

greenskunk
Location Great Valley, NY
commented

In your page.tpl.php file for Minelli you want to add the search box template code:

<?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>

before

</div> <!-- /header -->

Then in your style.css file you would want to style it something like :

#search-theme-form {
  position:absolute;
  top:100px;
  right:0;
  width:240px;
}

#search {overflow:hidden;}
#search-theme-form .form-item {
  float:left;
  margin:0;
}
#search-theme-form label {
  position:absolute;
  display:block;
  text-indent:-99em;
} /* Per the design they don't want to see the label */

#search-theme-form .form-text {
  float:left;
  margin:4px 0 0 3px;
  padding-left:2px;
  width:140px;
}
#search-theme-form .form-submit {
  float:left;
  margin:0;
}

I have styled my form per a style that a group wanted where the search field and button look to be one:

#search-theme-form {position:absolute; top:100px; right:0; width:240px;}
#search {overflow:hidden; background:transparent url('graphics/bg_search_form.gif') 0 0 no-repeat;}
#search-theme-form .form-item {float:left; margin:0;}
#search-theme-form label {position:absolute; display:block; text-indent:-99em;}
#search-theme-form .form-text {float:left; margin:4px 0 0 3px; padding-left:2px; border-style:none !important; border-color:#00ff00/*BCCDF0*/; width:140px;}
#search-theme-form .form-submit {float:left; margin:0; border:none; width:86px; height:25px; background:transparent url('graphics/btn_search.gif') 0 0 no-repeat; color:#fff; font-weight:bold;}

Sorry I don't style my CSS for others to read as I usually do everything inline.

This is just an example and I hope it helps!

Jeremy

It is a damn poor day when you don't learn something!

"It is a damn poor day when you don't learn something!" - Mr. Jones, teacher

Artem’s picture

Artem commented

Thank you, Jeremy

I will try it this weekend (or even earlier). Did you do it for some public website? If yes, it would be very kind of you to share the link.