Change colour of post bacvkground

Archives rtPanel
#1

Hi,

I have seen the post about changing the colour of post backgrounds, but when I tried mucking around in the CSS I coked it up and mananged to create a syntax error that had me delete and reinstall the rt theme.

Could you please be kind enough to give me a step by step guide on how I could a) change the background colour of posts/header menu items and b) make the background of posts transparent, so that only the them background i picked is visible?

I read about child themes, and while I’m still not 100% sure on that I think I could manage to create one.

Please keep it simple, as I’m not a coder.

Thank you kindly,

Stefan

#2

Hello Stefan,
If you want to change only CSS related stuff you can add your CSS rules in custom CSS box which is given in Appearance -> rtPanel -> General -> Custom Styles

If you are doing major changes then child theme would be the best option. For more info please check this https://rtcamp.com/rtpanel-example-child-theme-released/

#3

Hi Sagar, thanks very much for replying on a Saturday! In some other treat i found this css advice to remove the white background:

#main-wrapper {
background: none;
}

If you want to do the same with main menu
#rtp-primary-menu {
background-color: none;
border: none;
}

Is this what I’d have to copy into the css box? If not, could you please be kind enough to show me what i have to paste in?

Thanks again,

Stefan

#4

Hello Stefan,

You can paste these codes in custom CSS box directly.

#main-wrapper {  
    background: none;  
}  

#rtp-primary-menu {  
    background-color: none;  
    border: none;  
}
#5

Hi Sagar. I have tried this but the background is still white.

The css snippet shows up in the page source but seems to have no effect, main wrapper is still white, whereas I’d like for only the scratched grey background image to show.

http://notextinct.com/

#6

Hi Stefan,
Add replace following codes with current codes.

.rtp-section-container {  
    background: transparent;  
}  

.rtp-nav-wrapper {  
    background: transparent;  
}  

.rtp-nav-wrapper:before, .rtp-nav-wrapper:after {  
    display: none;  
}

Let me if this works.

#7

Thank you very much, this worked

#8

You are Welcome :slight_smile:

#9

Hey Stefan,

a)
You can add this to your custom css:

body, input, textarea, button, select, label { font-family: Arial, sans-serif; }

As for the nav background changing, you can force it to not change by doing:

#nav-header.nav-container { background-color: #222; }
@media only screen and (min-width: 720px) {
#nav-header .nav ul { background-color: #222; }
}

b)
There are two ways to create an image with a transparent background:

  1. Starting from scratch:

Within Photoshop, click File > New > In the Background Contents field, choose Transparent.

You are free to design whatever elements you require (text, shapes, lines, etc) and they will appear with a transparent background.

When you’re done, Save for Web as a .png file.

  1. Existing Image:

Within Photoshop, select the part of the image that you want > copy and paste it into a new page in Photoshop > double click on the background to edit the name > change the opacity to 0%.
After you’ve done this, you should see a checkered box for the background. Click on Save for Web and make sure to save it as a .png file.

Finally, upload it to your Wix editor!

Please also make sure that the image has no skin. Click the image -> Change Style > Edit Style -> choose the first skin called No Skin Photo.

#10