css issue not changing background image

Hi

I’m having some issues with CSS – the css i’ve used is in “Sweetdate>Stying” and right at the bottom of the page.

Basically, I used the css provided by the theme developers and in that, it had an image of the lady on the home page behind the search box – when I change the image, the lady stays – I want the new image to show from the url I put in.

I’ve granted support access if you want to take a look.

Thanks

Farzan

  • Michael Bissett
    • Recruit

    Hey Farzan Ahmed,

    That image of the lady is being set via your child theme’s style.css, this rule is in there:

    .form-wrapper {
    background-image: url('http://seventhqueen.com/demo/sweetdatewp/wp-content/uploads/2013/09/sexy_lady_on_right.png') !important;
    background-size: cover !important;
    }

    You’ll need to modify that rule to link to the image you’re wanting to have displayed there.

    Kind Regards,

    Michael

  • Farzan Ahmed
    • The Crimson Coder

    Hi Michael

    Thanks for that – it should have changed when I changed it in the theme options assumingly, but I never thought to look there – that did sort it though.

    Any tips on what I need to do in that css to get rid of the blue/purple background around the new image?

    And also, can you see if you can work out a way to get rid the “please wait” from the Avator plugin and change the colour of the text for me? :slight_smile:

    Thanks

    Farzan

  • Michael Bissett
    • Recruit

    Hey Farzan Ahmed,

    Any tips on what I need to do in that css to get rid of the blue/purple background around the new image?

    There’s a border being set in 3 different places, what you’d be looking to do is to set the border property to “none” in each place:

    border: none;

    The tool I prefer to use when it comes to cooking up custom CSS would be the Developer Tools inside of Google Chrome, we’ve got a handy article on using those over here:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    You can inspect the loaded HTML & CSS code with those, and try out CSS changes in real time. :slight_smile:

    can you see if you can work out a way to get rid the “please wait” from the Avator plugin and change the colour of the text for me?

    As for the “please wait” text, I’ve sorted that out with this (which I’ve inserted into your child theme’s style.css):

    #svga-loader > p {
    display: none;
    }

    But as for the other text in that section, you’re going to need more than a color change, you’re most likely looking at adding a bit of background color as well. You can learn more about the background-color property over here:

    https://css-tricks.com/almanac/properties/b/background-color/

    Kind Regards,

    Michael

    P.S. As a note for the future, we’ll want to stick to the initial issue in a thread, going off into several other issues in a thread can prove to be a problem.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.