Logo, menu and text colours - by simplypage1

This topic has 8 replies, 3 voices, and was last updated 9 years, 2 months ago ago by Jack Richardson

  • Avatar: simplypage1
    simplypage1
    Participant
    September 10, 2015 at 12:46

    Hi, love the theme and have used it on a few projects, woks great and the clients love it.

    I have a few issues on my current project, not the themes fault, I guess my coding skills.

    1) I want to make the homepage logo bigger

    2) I want to replace the social icons box in the header with a static image

    3) I want to make the menu bar slimmer

    4) On a single project page, the text is red on black, I want to make it white on black

    5) In the header the cart text cannot be read, I want to make this white

    Thanks for your help

    Simon

    Please, contact administrator
    for this information.
    7 Answers
    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 10, 2015 at 13:13

    Hello,

    Please use this code in Global Custom CSS (Theme Options->Custom CSS).
    1)

    .header-logo img {
        max-width: 380px;
    }

    2)

    .header-type-7 .header .tbs{
        background: url(http://www.maruyama.co.uk/wp-content/uploads/2015/09/maruyama-black.jpg);
        background-size: 100%;
    }
    .menu-social-icons,
    .header-type-7 .header .tbs span {
    display:none;
    }

    You need replace this string for your image link.
    url(http://www.maruyama.co.uk/wp-content/uploads/2015/09/maruyama-black.jpg);
    3)

    .header-type-7 .menu-wrapper .menu-main-container > ul > li > a{
        padding: 10px 17px;
    }

    4)

    .single-product .cart .button {
    color:#fff;
    }

    5)

    .shop-text{
    color:#fff;
    }

    Regards,
    Robert Hall.

    Avatar: simplypage1
    simplypage1
    Participant
    September 10, 2015 at 14:36

    Hi Rob

    fantstic service, thanks a lot, much appreciated.

    Just one final, the search magnifying glass is in orange, what is the css to turn this into white?

    Thanks

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 10, 2015 at 15:56

    Hello,

    Please add this code in Global Custom CSS:

    .fa-search:before {
       color: white;
    }

    Best regards,
    Jack Richardson.

    Avatar: simplypage1
    simplypage1
    Participant
    September 11, 2015 at 11:11

    Thanks guys, everything works fine.

    Just having a problem with p0int 3, I have added the code, which removes the social icons from the header and replaces it ‘partially’ with my image http://www.maruyama.co.uk/wp-content/uploads/2015/09/IRON-5YR-Warranty-white-text-sm31.png

    however what I want to do is have this image as a thumbnail in the top left hand corner, I have tried every way I can think to constrain the size, without success.

    This is the last bit of help I need.

    Thanks again, just recommended you to my 12k followers, great service!

    Cheers
    Simon

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 11, 2015 at 11:59

    Hello,

    Thank you for your feedback.

    I’ve edited the code to this one:

    .header-type-7 .header .tbs {
        background: url(http://www.maruyama.co.uk/wp-content/uploads/2015/09/IRON-5YR-Warranty-white-text-sm31.png) no-repeat;
        background-size: contain;
        background-position: center center;
    }

    Please check header now.

    Best regards,
    Jack Richardson.

    Avatar: simplypage1
    simplypage1
    Participant
    September 11, 2015 at 12:48

    No problem.

    Ok so I have moved the image to the left, so it’s now in the perfect position. The size is obviously constrained by top and bottom padding. Is there anyway of increasing the size of the pic, so that it sits closer to the red menu bar and closer to the top of the header, I’m think about 30% bigger in vertical px as long as this still sits within the header.

    Thanks again

    Simon

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 11, 2015 at 14:32

    Hello,

    We can decrease padding of the header to make the image closer to the top and menu. Use this code in Global Custom CSS:

    .navbar {
       padding: 20px 0 !important;
    }

    Best regards,
    Jack Richardson.

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

You must be logged in to reply to this topic.Log in/Sign up

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.