Home Forums Theone WordPress Theme Initial load logo – need it larger and without white background square

This topic contains 4 replies, has 2 voices, and was last updated by  stephaniec0331 3 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #5872

    stephaniec0331
    Participant

    Hello,

    Your theme template has many great features.

    I am using an image logo (not text). I would like to increase the size of the logo that appears in the center, when the page first loads. Simply loading a larger image does not seem to make a difference.

    Also, a white square background appears beneath this center logo (see screenshot), and I would like to remove this. I tried using some css you provided in another forum post (see below), but when I use this, it removes the background color from my header navigation completely. I need the header navigation to remain opaque with a background color.

    Can you please advise me on these two items?

    Thank you,
    Stephanie
    ————-
    css I tried:
    ————-
    #logo-loading {background: transparent;}
    .header-bg {opacity: 0;}

    #5874

    BWSM
    Keymaster

    Hi,

    1. the logo size of loading is limited height 60px, please change as yours by the css:

    .site-loading-logo img {
      max-height: 60px;
    }

    2. try to use the css:

    #logo-loading {background: transparent;}

    If it doesn’t work, please leave your url.

    Best, Bwsm

    #5877

    stephaniec0331
    Participant
    This reply has been marked as private.
    #5878

    BWSM
    Keymaster

    I have added the css to your Csutom CSS.

    1. the logo size of loading:

    .site-loading-logo img,
    #logo-loading .logo-image {max-height: 100px;
    }

    2. remove the background colour for square of logo only:

    @-webkit-keyframes headerBGanimationZip {
      0%{ height: 150px; width: 150px; background: none; }
      50%{ height: 80px; width: 150px; background: none;}
      100%{ height: 80px; width: 100%; background-color:#fff;}
    }
    @-moz-keyframes headerBGanimationZip {
      0%{ height: 150px; width: 150px; background: none;}
      50%{ height: 80px; width: 150px; background: none;}
      100%{ height: 80px; width: 100%;  background-color:#fff;}
    }
    @keyframes headerBGanimationZip {
      0%{ height: 150px; width: 150px; background: none;}
      50%{ height: 80px; width: 150px; background: none;}
      100%{ height: 80px; width: 100%;  background-color:#fff;}
    }
    @-webkit-keyframes headerBGanimationUnzip {
      0%{ height: 80px; width: 100%;  background-color:#fff;}
      50%{ height: 80px; width: 150px;background: none; }
      100%{ height: 150px; width: 150px; background: none;}
    }
    @-moz-keyframes headerBGanimationUnzip {
      0%{ height: 80px; width: 100%;  background-color:#fff;}
      50%{ height: 80px; width: 150px; background: none;}
      100%{ height: 150px; width: 150px; background: none;}
    }
    @keyframes headerBGanimationUnzip {
      0%{ height: 80px; width: 100%;  background-color:#fff;}
      50%{ height: 80px; width: 150px; }
      100%{ height: 150px; width: 150px; }
    }
    #5945

    stephaniec0331
    Participant

    By the way, this was just what I needed. Thank you for your help.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.