…on my page, I want to add a button to return to the corresponding blog pages for the forums. Ideally, I’d like to style it after the “submit” button on the search form. Can I just re-use the search styles, or do I need to replicate them (creating a “return” class or something)?

Thanks.

[@chrishajer Participant 15 years, 11 months ago]

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.

[@mzimmers Member 15 years, 11 months ago]

Thanks, Chris. I’ve taken a first pass, with partial results…I get some of the formatting, but not all. I suspect the problem is that I don’t fully understand the constructs being used in the css. Can you tell me what this means, for example?

#header div.search input.submit { etc… }

And how do I “invoke” this in my php file?

Oh: the website is http://www.scopedin.com/bbpress. I’m trying to add a “return” button in the header.

Thanks.

[@chrishajer Participant 15 years, 11 months ago]

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?

[@mzimmers Member 15 years, 11 months ago]

No, I’m happy with the result; I just wish I had a better understanding of exactly what I did!

Specifically, I’m not sure what this means:

#header div.search input.submit {

style stuff here;

}

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

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.

Any enlightenment would be appreciated.

[@_ck_ Participant 15 years, 11 months ago]

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

[@mzimmers Member 15 years, 11 months ago]

OK…I’m not sure what part of that thread pertains to my questions. Maybe I’m just extra-dense today.

[@chrishajer Participant 15 years, 11 months ago]

> #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.

[@mzimmers Member 15 years, 11 months ago]

Hi, Chris –

Thank you so much for the detailed reply. I think I’m cool on the cascading property of CSS; it’s just some of the more esoteric constructs that get me at times. I’ll keep your reply for reference. But in the meantime, I guess it’s good not to mess with prosperity.

You mention Web Developer, and I have that (and I use it a lot). I’ve recently also gotten Firebug. I’m by no means an expert on it, but you might want to take a look.

http://getfirebug.com/

mz

[@chrishajer Participant 15 years, 11 months ago]

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.