How do I style SimpleSearchForm ?

12 Posts

celticchrys Reply #1, 13 years, 5 months ago

How do I style the SimpleSearchForm? I’ve tried putting nearly everything I can think of in my style sheet, and nothing works. I can’t find instructions for this anywhere. I have a default installation of this Extra Package on Modx Revolution. What is the class for the search form? I am trying to eliminate the borders, and I’m at a loss.

And yes, I’m a very experienced user of CSS. I just need to know the name of the class to use. Please?

535 Posts

empiguet Reply #2, 13 years, 5 months ago

Are you using Firebug ?

btw you can find all the chunk and html in your ../core/components/simplesearch/elements/chunks/ folder.

CTRL+SHIFT+U - Clear Cache
CTRL+SHIFT+H - Hiding Heft Panel
CTRL+SHIFT+N - Fast Create Resource
CTRL+ALT+P - Preview Recource (in edit resorce window)
CTRL+ALT+S - Save

12 Posts

celticchrys Reply #3, 13 years, 5 months ago

Using Firebug, I see that the class of the form is "sisea-search-form". I’ve tried these in the stylesheet for my template, and neither eliminate the border:

.sisea-search-form  {
	border:none;
}

.sisea-search-form  {
	border:0px;
}

Any ideas?

☆ A M B ☆
872 Posts

lossendae Reply #4, 13 years, 5 months ago

Try to use your own markup & css by using chunk instead of the default template.

12 Posts

celticchrys Reply #5, 13 years, 5 months ago

Quote from: lossendae at Nov 17, 2010, 08:56 PM

Try to use your own markup & css by using chunk instead of the default template.

I’ve already tried this a few times, and been unable to figure out how to make it work. Are there any clear guides for beginners on how to do this?

535 Posts

empiguet Reply #6, 13 years, 5 months ago

you are lucky i’m templating a search on a website right now..

so using your own chunk is really easy.

create a new chunk : mysearchForm

Copy this inside :

<form class="sisea-search-form" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
  <fieldset>
    <label for="[[+searchIndex]]">[[%sisea.search? &namespace=`sisea` &topic=`default`]]</label>
    <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" />
    <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" /> 
    <input type="submit" value="[[%sisea.search? &namespace=`sisea` &topic=`default`]]" />
  </fieldset>
</form>

adapt to your needs.. (classes/ids etc..)

[[!SimpleSearchForm? &landing=`23` &tpl=`mysearchForm`]]

for your earlier problem, i think you should try

form.sisea-search-form input {border:0;}

CTRL+SHIFT+U - Clear Cache
CTRL+SHIFT+H - Hiding Heft Panel
CTRL+SHIFT+N - Fast Create Resource
CTRL+ALT+P - Preview Recource (in edit resorce window)
CTRL+ALT+S - Save

12 Posts

celticchrys Reply #7, 13 years, 5 months ago

Quote from: manu at Nov 17, 2010, 09:31 PM

you are lucky i’m templating a search on a website right now..

Thank you! I had just gotten it to work via adding my own chunk with an inline style just before I saw your post. I will definitely also try your other suggestion, as I think it’s ridiculous to have to write a chunk to only change a border. That’s something that should legitimately be do-able in the style sheet. I’ll try it as soon as possible.

Thanks once again.

☆ A M B ☆
872 Posts

lossendae Reply #8, 13 years, 5 months ago

It is do-able in the style sheet.

Open the default chunk provided with SimpleSearch (May be the html code pasted by manu) and just edit the ids/classes to your need.

If you want to see directly your change, use firebug to do direct css modifications.
Did you verify if the border is not added by your own CSS rules ? You may need to override some rules by using the !important clause.

SimpleSearch, no, MODx does not enforce any style to any html markup.

12 Posts

celticchrys Reply #9, 13 years, 5 months ago

Quote from: manu at Nov 17, 2010, 09:31 PM

form.sisea-search-form input {border:0;}

Alas, I tried this, and it still does not work. The custom chunk works, but this still does not. This gets rid of the edges of the actual text field, but not the black border around the entire form.

The persistent black border in question can be seen here:
http://www.teadragon.org/

I know it isn’t being caused by the style sheet with my template, because it’s an almost border-free zone, but I’ve just double-checked to be sure.

I also just tried creating a class in my style sheet like this:

.simple-search-form {
	border-width:0px;
	}

...and editing the default searchform.chunk.tpl file that comes with SimpleSearch to make the form of this class, and that doesn’t work either.

535 Posts

empiguet Reply #10, 13 years, 5 months ago

hmmm. i will definitely try this :

fieldset {border:0;}

need a tea now.. wink

CTRL+SHIFT+U - Clear Cache
CTRL+SHIFT+H - Hiding Heft Panel
CTRL+SHIFT+N - Fast Create Resource
CTRL+ALT+P - Preview Recource (in edit resorce window)
CTRL+ALT+S - Save