Topic Closed
syndicatefx
42 Posts
56.2K Downloads
6 Themes

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

Edited: 12 years ago#41

opusonline.at
11 Posts
20.9K Downloads
4 Plugins

That would be great! :D

12 years ago#42

Josh S.
2K Posts
306K Downloads
16 Themes
18 Plugins

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

12 years ago#43

opusonline.at
11 Posts
20.9K Downloads
4 Plugins

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

Edited: 12 years ago#45

Josh S.
2K Posts
306K Downloads
16 Themes
18 Plugins

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

12 years ago#46

syndicatefx
42 Posts
56.2K Downloads
6 Themes

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!!  

12 years ago#47

syndicatefx
42 Posts
56.2K Downloads
6 Themes

In the next release maybe?

Edited: 12 years ago#48

Josh S.
2K Posts
306K Downloads
16 Themes
18 Plugins

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.

Edited: 12 years ago#49

syndicatefx
42 Posts
56.2K Downloads
6 Themes

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  

12 years ago#52

Josh S.
2K Posts
306K Downloads
16 Themes
18 Plugins

 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?

12 years ago#53

opusonline.at
11 Posts
20.9K Downloads
4 Plugins

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!

12 years ago#57

syndicatefx
42 Posts
56.2K Downloads
6 Themes

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

Edited: 12 years ago#58

opusonline.at
11 Posts
20.9K Downloads
4 Plugins

WOW !!! Amazing!

Thanks! :D

12 years ago#59

Josh S.
2K Posts
306K Downloads
16 Themes
18 Plugins

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

12 years ago#60

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

PolyWogg

12 years ago#268

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Ennetb├╝rgen (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Websi...

Find out more about our Provider Spotlight

Log In

  Register