Using Custom CSS in Free Road Fighter Theme

I see that both of these features are images. Earlier, another feature of the site controlled by an image file was not displaying. Now it is. Is this a cache issue?

Thanks!

Actually, here’s the code for the menu background:

.menu-wrapper{
    background:rgba(255,255,255,0.85);
    background:url(images/menu-bg.png) repeat;
    border:2px solid #e5ad01;
    border-radius:7px;
    -moz-box-shadow:    2px 3px 8px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 2px 3px 8px 0px rgba(0,0,0,0.3);
    box-shadow:         2px 3px 8px 0px rgba(0,0,0,0.3);
    margin-top:25px;
}

Can you post a link to your site?

Thank you, stephencottontail, for checking it out. Here’s a link to the site:

https://wpw3beta.info/

I maybe should add that I did experiment last night with eliminating the shadow from beneath the header image, but when I decided I didn’t like it that way, I put the CSS back EXACTLY as it was.

Even if that’s the culprit, I don’t know why the background image for the menu wrapper would not be displaying.

You’re getting a lot of 404 errors because you appear to have copied all of your theme’s CSS to your custom CSS option, resulting in the relative URLs to some of your theme’s built-in images being broken. You should delete all of your custom CSS settings and then redo them, only copying what you’re trying to change.

Thank you so much, stephencottontail.

I put the whole shebang in there because when I was doing it piecemeal, I was getting some strange results. I thought maybe the order of the CSS mattered, and so I wanted to keep it in the same order as the original. Nevertheless, I will do EXACTLY as you indicate.

I very much appreciate your help.

I’m doing as stephencottontail suggested and only putting into the Custom CSS the strings of code I want to alter. It’s working well save for the background of the main menu, which still won’t display when I put the following into the Custom CSS:

.menu-wrapper{
    background:rgba(255,255,255,0.85);
    background:url(images/menu-bg.png) repeat;
    border:2px solid #e5ad01;
    border-radius:7px;
    -moz-box-shadow:    2px 3px 8px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 2px 3px 8px 0px rgba(0,0,0,0.3);
    box-shadow:         2px 3px 8px 0px rgba(0,0,0,0.3);
    margin-top:25px;
}

When I take this out of the Custom CSS, the background displays. I don’t understand b/c I’ve only changed the size and color of the border. Ideas?

This line:

background:url(images/menu-bg.png) repeat;

won’t work correctly if you copy that line to your custom CSS, because the relative path to the menu’s background image gets lost. Instead, you should pass the absolute path:

background: url(https://wpw3beta.info/wp-content/themes/road-fighter/images/menu-bg.png) repeat;

But I’m still unclear as to why you copied that line if you didn’t intend to change the menu’s background.

Thank you again, stephencottontail.

When I want to change an element, I am copying the whole statement that controls for that element. So when I wanted to change the border color and size of the main menu, I copied and pasted the whole menu wrapper statement, just changing the ‘border’ property:

.menu-wrapper{
    background:rgba(255,255,255,0.85);
    background:url(images/menu-bg.png) repeat;
    border:2px solid #e5ad01;
    border-radius:7px;
    -moz-box-shadow:    2px 3px 8px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 2px 3px 8px 0px rgba(0,0,0,0.3);
    box-shadow:         2px 3px 8px 0px rgba(0,0,0,0.3);
    margin-top:25px;
}

I never used Custom CSS before (can you tell?). I always made my changes to a child theme. So I’m not exactly sure what needs to be copied into the Custom CSS feature. I figure unless I copy and paste the whole statement, it won’t know which border I’m changing. Is this incorrect? Maybe I need to read up on this.

Your explanation makes sense of why when I remove the background:url(images/menu-bg.png) repeat; property entirely, the menu background displays correctly.

stephencottontail: I think I just had an ‘aha’ moment resulting from the information you gave me. To change the menu border, I should have done only this:

.menu-wrapper{border:2px solid #e5ad01;}

Right?

stephencottontail: I think I just had an ‘aha’ moment resulting from the information you gave me. To change the menu border, I should have done only this:

.menu-wrapper{border:2px solid #e5ad01;}

Right?

That’s right. You only need to copy what you’re trying to change.

Thank you so much for your expert assistance, stephencottontail, without which, I would have been stumbling around in ignorance for days or even weeks. ??

Marking as resolved.