How to change background color or image of theme with a wide layout

This topic has 14 replies, 2 voices, and was last updated 9 years, 10 months ago ago by GetNatalie

  • Avatar: GetNatalie
    GetNatalie
    Participant
    December 29, 2014 at 13:20

    Hi there,

    Link to website: http://www.allstatesmovingstorage.com

    My client wants a light blue gradient background similar to http://www.traditionalexpress.com. She Also wants me to add a large watermark logo to the background. Please help me in achieving this look with the wide layout. Thank you.

    Please, contact administrator
    for this information.
    13 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    December 29, 2014 at 14:13

    Hello,

    The login credentials are incorrect.
    Please check them.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: GetNatalie
    GetNatalie
    Participant
    December 29, 2014 at 14:42

    Sorry wrong username.

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    December 29, 2014 at 15:01

    Hello,

    I’ve added the following code into custom.css file:

    .st-content-inner {
        background: url("http://allstatesmovingstorage.com/wp-content/uploads/2014/12/bg.jpg") repeat-x scroll 0% 0% #457395 !important;
    }

    Please check your site now.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: GetNatalie
    GetNatalie
    Participant
    December 29, 2014 at 15:39

    Thank you that worked. 2 more things:

    1) Top bar disappears after I add text in that widget area. How can I fix that? The text is there but the bar itself is gone.

    2) How can I remove the credit cards from the footer?

    Avatar: Eva
    Eva Kemp
    Support staff
    December 29, 2014 at 15:59

    Hello,

    1. I’ve added this code into custom.css for the top bar:

    .header-type-6 .top-bar {
        background-color: #000;
    }

    2. Also I’ve added this code to remove credit cards icons:

    .copyright-2 .copyright-payment, .copyright .copyright-payment {
        display: none;
    }

    Please check.

    Regards,
    Eva Kemp.

    Avatar: GetNatalie
    GetNatalie
    Participant
    January 2, 2015 at 10:20

    Hi Eva. Thank you for all your help. Truly amazing. For the top bar, is it possible to move it right above the menu?

    Also, for the background is it possible to add a large watermark logo in the background? Client needs that as well.

    Lastly, how can I change the paragraph text color in the whole site to white or black. Right now it’s grey and you can’t see it.

    Thank you.

    Avatar: GetNatalie
    GetNatalie
    Participant
    January 2, 2015 at 10:57

    If you check out the pages that aren’t the homepage, such as http”//www.allstatesmovingstorage.com/storage. The background looks strange. I would like to add the background you applied, without all those different blue line and one large watermark logo in the background.

    Avatar: Eva
    Eva Kemp
    Support staff
    January 2, 2015 at 11:42

    Hello,

    To add watermark in background you need edit this template http://allstatesmovingstorage.com/wp-content/uploads/2014/12/bg.jpg with some image editor and place your logo in there.

    To change paragraph color add this code into custom.css:
    p {color: black !important;}

    To move top bar text to the right add the following code into custom.css:

    .languages-area {
        float: right;
    }

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: GetNatalie
    GetNatalie
    Participant
    January 2, 2015 at 12:17

    Sorry I Don’t think I correctly described the top bar edit:

    I need to move it above the menu, under the logo.

    Avatar: GetNatalie
    GetNatalie
    Participant
    January 2, 2015 at 14:02

    What I did was remove the top bar and create an jpg similar to the top bar. I managed to get it directly under the navigation bar but I actually need it directly above the navigation bar.

    Last thing I will ask is how to enlarge the logo, I’ve uploaded bigger sizes but the logo stays the same on the web page.

    Thank you again for all your help. I truly appreciate it.

    Avatar: GetNatalie
    GetNatalie
    Participant
    January 2, 2015 at 14:12

    Actually one last thing: How can I make the background image responsive??

    Avatar: Eva
    Eva Kemp
    Support staff
    January 2, 2015 at 16:33

    Hello,

    Sorry, but there is no such possibility to move top bar under the logo.
    To increase logo image you need add this code into custom.css:

    .header-logo img {
        max-width: 400px !important;
    }

    As I see the background image is responsive. What problems are you experiencing?

    Regards,
    Eva Kemp.

    Avatar: GetNatalie
    GetNatalie
    Participant
    January 2, 2015 at 18:50

    If the window is shrinked, I need the background image to shrink with it or else the watermark ends up on the bottom corner of the screen. Or if I check my website on a smaller screen, the image for the background I used is very very large so that the watermark centers on a large screen. But with a smaller screen the watermark ends up on the bottom corner. If the background image was able to “shrink” together with the website or the screen it’s on, the watermark would stay centered.

    The logo sizing worked perfectly. The only problem is that it is not centered, it floats a bit to the right. Any way to fix this?

    And as far a the top bar. I simply removed it and added an jpg that looked just like the top bar, but it’s placed right below the menu. Any way we can get it right above? It’s a jpg file.

    Please advise, and again thank you for all your help.

  • Viewing 14 results - 1 through 14 (of 14 total)

The issue related to '‘How to change background color or image of theme with a wide layout’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.