bbPress.org

I think you’d be better off just copying all the styles, and creating a new style called .return or whatever you want. Right now, it’s #header div.search which applied only to div.search in the header. I think I would just copy the styles you like, paste them at the end of your stylesheet, then rename them to whatever class you want to use for your button.

Looks like you have it. The buttons look the same to me( in Firefox 3.0.5 on Windows XP ). Are you unhappy with it at this point?

https://bbpress.org/plugins/topic/wp-search/

> #header div.search input.submit {

> style stuff here;

> }

Well, the cascading part of Cascading Style Sheets means that higher level stuff pertains to lower level stuff, and so on, and so on.

So from the right, an input element, with a class of submit, but only if it’s in a div with a class of search and then only if it’s in an element with an id of header.

So, based on that, the markup in the php file should look something like this:

<div id="header">

<div class="search">

<input class="submit" foo="bar" blah="blarg">

Does that make sense?

> I’ve never seen the “div” used like this, and I’m not sure what the “input.submit” is.

The div.search just ties the search class to the div element (man I hope I’m not mixing up my terminology here…) So, if you had another element on the page, maybe a <p> with a class of search, like so

<p class="search">

This div.search would not apply to this element, because the .search was tied to the div element. Same exact thing applies to the input.submit: only an input element with a class of submit will be affected by that specific CSS.

> Also, it’s not clear to me how the “return” button code comes last in the

> php file, but the button displays above/before the login stuff.

I’m afraid I don’t know enough about it to figure that one out. Sometimes, when it works, it’s best not to question why

One thing that helps immensely with the CSS, for me anyway, is to use Firefox with the Web Developer add-on from Chris Pederick. You can hover over an element on the page and display the CSS classes and ids that apply to it, then click and see the actual CSS. You can also make changes to the CSS in the browser and see them immediately, then once you’ve sorted them out, just paste those local changes into the CSS for your template.

http://www.mozilla.com/en-US/firefox/

https://addons.mozilla.org/en-US/firefox/addon/60

Also, be sure to validate the XHTML and CSS both, to ensure the things you’ve done are in order:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Those two tools are linked from the Web Developer Toolbar.

You will find with CSS there are a lot of invalid things in the stylesheet that don’t hurt anything: they make things look better in some browsers, but don’t do anything and don’t harm anything in other browsers. When adding things to your templates, I would at least validate the XHTML.

HTH.

You know how sometimes you get along with software and other software you just never click with? I hit it off with Web Developer, but never got into Firebug. I know they do different things, and maybe Firebug is better for development/programming, but for CSS and XHTML/HTML Web Developer toolbar does just fine for me. I think I learned more from using that than reading about CSS.