[pfeufer]

Hi,
I am using a WordPress child theme, Flatsome. I simply want to adjust minor things like button text sizes, different colored bars, text, etc.

In Google Chrome, I am able to inspect a element and change it’s style in the inspector window, but where do I paste the modified css code? The modified code does not work in the child theme’s Appearance/Edit window when it is pasted there.

I also tried to copy (not move) the bbpress.css file into the Parent theme’s css folder, but the code still does not work. I also tried to place the bbpress.css in the Child theme.

My questions are:

1. Where do I place the bbpress.css file? In the Parent theme or Child Theme? What folder?
2. Where do I paste the modified css code within the BBpress.css file? Anywhere?

Below is code that I adjusted to suit my needs. It is code for a “submit” button on the Forum page of BBpress in my theme:

.userwall_delete_post >button:hover, input[type=”submit”], input[type=”button”], input[type=”reset”] {
-webkit-border-radius: 0px 0px 0px 7px;
-moz-border-radius: 0px 0px 0px 7px;
border-radius: 3px 3px 3px 3px !important;
font-family: Arial;
font-size: 12px !important;
padding: 10px !important;
text-decoration: none;
}

Thanks for any help!

Best,
John

[Robin W]

just put it into the style.css of your child theme at the end

[Robin W]

sorry, and that’s just anything you need to change (ie your code above), not the whole bbpress.css file !

so put the stuff above in your child theme style.css and ignore bbpress.css !

[pfeufer]

Thank you Robin!

Last question, do I have access to the child theme’s style.css via Appearance/Editor, or do I paste the code into the child theme’s style.css file via TextWrangler (or some other editing program).

Thanks!
John

[Robin W]

yes, you should see that you are using a child theme in the editor (it will say ‘This child theme inherits templates from a parent theme xxx’ under templates at the top right, and after the templates you should see style.css.

if you’re going to get into css in a big way, then you would do better to use FTP and an editor such as notepad++ – see

Functions files and child themes – explained !

[pfeufer]

Thanks again Robin. So I did put the following code into the Editor at first, but it did not work:

input {
border-radius: 2px 2px 2px 2px !important;
font-size: 10px !important;
}

But according to the bbPress Styling crib (https://codex.bbpress.org/bbpress-styling-crib/), the code should look like this:

#bbpress-forums .submit {
background-color: #a0668d;
color: #FFFFFF;
float: center;
vertical-align: middle;
border-radius: 10px;
height: 35px;
width: 80px;
font-size: 18px;
}

I guess what I am asking is, when I inspect a element in my browser (Chrome) it seems like I cannot just simply cut and paste the css code from the side inspector column, but rather, start the code with #bbpress-forums

Hope this makes sense. Thanks!

[Robin W]

long and complicated to explain css, divs and all that, and I’m a newcomer to css, so I won’t try.

but in essence any css element can be nexted.

so

input would apply to any input field anywhere on the site
input[type=”submit”] would just apply to submit input
submit would apply to any submit
#bbpress-forums .submit would apply to submits within bbpress only.

any/all of these might work for a particular case, it would depend on how your theme author has set out his theme.

so can’t say why it didn’t work without me spending lots of time looking at it.

There is no single right/wrong with this, just right for your site with its theme and plugins !

[pfeufer]

Hi Robin,
I pasted the code below into my Editor (Appearance/Editor) and it has no effect on the Search button on the main BBpress Forums page:

#bbpress-forums .submit {
background-color: #a0668d;
color: #FFFFFF;
float: center;
vertical-align: middle;
border-radius: 10px;
height: 35px;
width: 80px;
font-size: 18px;
}

I even tried putting a space then !important after each style, but no dice. Any idea what I may be doing wrong?

Thanks!
John

[pfeufer]

If this helps: Below is the code that shows up when I Inspect Element for the Search button. And the same code I change in the Style window of the element inspector to make the Search button appear the way I want it to:

media=”all”
.userwall_delete_post >button:hover, input[type=”submit”], input[type=”button”], input[type=”reset”] {
-webkit-border-radius: 0px 0px 0px 7px;
-moz-border-radius: 0px 0px 0px 7px;
border-radius: 5px 5px 5px 5px;
font-family: Arial;
font-size: 20px;
padding: 5px;
text-decoration: none;
}

[Robkk]

@pfeufer

link to your site so i can give you the CSS you need

[pfeufer]

http://www.theangryton.com/forums/

You will see the SEARCH button on the upper right of the screen.

Thanks!
John

[Robkk]

try this CSS code for a test to see if it works , if the background turns black it works.

input#bbp_search_submit.button {
	background: black;
}

[pfeufer]

Hi Rob,
No, that didn’t work. If this helps, I know that other CSS pasted into the editor DOES work to style, for instance, the header bar color which you saw was pink (just a arbitrary color).

Thanks,
John

[Robkk]

make sure you are NOT just placing the new CSS at the bottom of the file , because the media queries will make it show for certain browser widths.

place any custom CSS before this note in the bbpress.css file

/*--------------------------------------------------------------
 Media Queries
--------------------------------------------------------------*/

/* =Standard Mobile Landscape
-------------------------------------------------------------- */

and any media querie specific size you want to have custom CSS please put custom CSS to the ones in the file.

^^i know it has to be that for sure.