Hi all,

Just an idea to have in mind when designing a custom theme, one of the things that sometimes breaks the design of a theme is that the forms and their input fields are set to the default O.S or browser style, and in this case you're stuck with it and it's hard to make something of it using css without messing with the other input fields like the ones on a Special_contact page, for example.

It would be great to make use of some id's for each of these fields and style them accordingly.

What i've been doing for some customized gpEasy themes of my own is hacking the Simple_Search addon files before installing the plugin, and adding some id's to the input fields, and in some cases adding a div with a class name wrapping the form, for some more customizing.

The following is a quick explanation of what i do:

Download the latest version of Simple_Search addon, open SimpleSearchGadget.php with your favorite editor:

On line 12 add an id for the text input field, like this:

echo '<input id="searchtext" name="q" type="text" value="'.htmlspecialchars($query).'"/>';

this will allow us to style the input text of the form.

Delete line 14, the <br/> there won't let you put the input text and button side by side.(not required)

On line 15 add an id for the input submit button, like this:

$html = '<input id="searchbtn" type="submit" name="" value="Search" />';

Since we have a search results page, and the search form is on it, embedded in a <h2> tag, we can also add the same id's to the SimpleSearch.php file, like this:

On line 51:

echo '<input id="searchtext" name="q" type="text" value="'.htmlspecialchars($query).'"/>';

and on line 53:

$html = '<input id="searchbtn" type="submit" name="" value="Search" />';

Now add these two id's to your theme's style.css, install the addon do the magic!!

The disadvantages of this, for now, is that everytime you upgrade the addon you have to add these before install/upgrade.

Maybe future releases of this plugin and others will include this extra code in them, thus making it even easier to customize themes.

What do you think??

-Jimmy

That would be great! :D

Ok, here's my take... There's an ongoing issue with differentiating <input type="text" ...> from <input type="submit".. > etc in CSS and then there's the issue of identifying the search plugin elements within a theme.

To differentiate between the types of inputs, I'd like to propose adding some generic classes to each <input>.

<input type="text" class="text" .../>

<input type="submit" class="submit" ... />

Then, to identify the search plugin elements, we have two situations: gadget and search results page.

The gadget portion should be identifyable in CSS using the gpArea_Simple_Search class:

.gpArea_Simple_Search input.text{ .... your css .... }

.gpArea_Simple_Search input.submit{ .... css for input elements.... }

For the results page, I'll need to add a wrapper with a class or id. Something like:

<div class="search_results">....

Then we can customize the style for the search inputs on the results page using .search_results input.text{...}

What do you guys think?

-Josh

I totaly agree and would be very lucky about this change!

But please be so kind to remove the <br /> between input type=text and input type=submit.

Thanx! :D

Sounds good, I'll make those changes and update the plugin.

Yes, totally agree on that, and while you at it can you add these generic class names to the other input fields to, like the special_contact page and login page?

That would be much appreciated, thank you very much!!  

In the next release maybe?

Cool, I just uploaded a new package for the Search Plugin

Thanks for the help guys!

P.S. I've also added a configuration option for searching in hidden files.

Great!

Just one thing though, you could eliminate [ style="width:90%" ] from line 15 of SimpleSearchGadget.php, since inline styles overide the linked stylesheet's properties.

thanx.

-jimmy  

 What about using the !important rule?

input.text{ width:auto !important; }

I'm not a huge fan of using !important, but without the inline style="width:90%", the <input> field won't display well in some themes.

I'm not certain this is the best solution, what do you think?

At first I wan't to thank you for implementing classnames!

But I really was hoping that you remove the style=width:90% !

I can imagine that old stylesheets look better. But wasn't it ment to remove the cruel style definition inside the html file. That's why now we have the class to style it like we want in every stylesheet of every design.

Please, please, please remove it.

Now you just have to update the stylesheets of the design templates. Maybe with div.gpArea_Simple_Search input.text { width: 90% }

Thanks!

Ok, i think using the !important rule is still the simplest way around, keeping the inline style for compatibility issues.

But i have to agree with opusonline, let's keep the html clean!! Update the old themes, at least the ones that are shipped with gpEasy. If you want i'll be glad to help add the extra line to the style.css of all of them.(Including mine :P)

Just did the Job, i added the line .gpArea_Simple_Search input.text{width:90%} to the very end of all (minimized and full) stylesheets of all the default themes shipped with the latest gpEasy - Black Header, Bordered Three, One_Point_5 and Tan Header.

So, if and when you decide to go with the clean-no inline-style search addon, you can download the updated_themes.tar.gz, i've put together, let's go!!

Thumbs Up!!

-Jimmy

WOW !!! Amazing!

Thanks! :D

Thank you guys for keeping me on track!

I'm much more of a programmer than a designer so I really appreciate having you both involved!

I'm downloading your updated themes now, and I'll get that plugin fixed.

-Josh

And I thought I was understanding more and more -- will these changes help me add drop-down menus?

PolyWogg