Home Forums Theone WordPress Theme How to have separate logos

This topic contains 15 replies, has 2 voices, and was last updated by  dashmista 1 year, 12 months ago.

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #6308

    dashmista
    Participant

    Hi,

    I want one logo for the small box before scrolling (used to have bowtie logo), and then one for the menu. It appears my logo width is too much for the small box, so I need to make a shortened version. Thanks.

    #6309

    BWSM
    Keymaster

    HI,

    it needs custom css, i don’t suggest use 2 logos, the animation will be not smooth.

    You can try this way:

    Please login wp-admin, go to Theone / General Settings / Custom Css, paste the style code to Custom Css(change as the logo url as yours.):

    body.page #header.menu-default-hide #logo { background: url(http://xxxx.com/logo-in-box.png) no-repeat 50% 50%; }
    body.page #header.menu-default-hide #logo .logo-image {opacity:0; }
    @-webkit-keyframes logoAnimationZip {
      0%{ left: 50%; -webkit-transform: translateX(-50%); background: url(http://xxxx.com/logo-in-box.png) no-repeat 50% 50%; }
      50%{ left: 50%; -webkit-transform: translateX(-50%); background: none;}
      100%{ left: 0; -webkit-transform: translateX(0); background:none}
    }
    @-moz-keyframes logoAnimationZip {
      0%{ left: 50%; -webkit-transform: translateX(-50%); background: url(http://xxxx.com/logo-in-box.png) no-repeat 50% 50%; }
      50%{ left: 50%; -webkit-transform: translateX(-50%); background: none;}
      100%{ left: 0; -webkit-transform: translateX(0); background:none}
    }
    @keyframes logoAnimationZip {
      0%{ left: 50%; -webkit-transform: translateX(-50%); background: url(http://xxxx.com/logo-in-box.png) no-repeat 50% 50%; }
      50%{ left: 50%; -webkit-transform: translateX(-50%); background: none;}
      100%{ left: 0; -webkit-transform: translateX(0); background:none}
    }
    @-webkit-keyframes logoImgZip {
      0%{ max-height: 60px; opacity:0; }
      50%{ max-height: 40px; opacity:1; }
      100%{ max-height: 40px;opacity:1;  }
    }
    @-moz-keyframes logoImgZip {
      0%{ max-height: 60px; opacity:0; }
      50%{ max-height: 40px; opacity:1; }
      100%{ max-height: 40px;opacity:1;  }
    }
    @keyframes logoImgZip {
      0%{ max-height: 60px; opacity:0; }
      50%{ max-height: 40px; opacity:1; }
      100%{ max-height: 40px;opacity:1;  }
    }
    • This reply was modified 2 years, 1 month ago by  BWSM.
    #6318

    dashmista
    Participant

    Thank you.

    Is that the technique used on http://www.pixelkicks.co.uk/? It seems their animation transition is smooth. How can I do one like this?

    #6328

    BWSM
    Keymaster

    Hi, I improved the custom css code. It is better now.
    Note: Don’t paste the to Custom css, there is a issue for exporting quotation marks.
    please use child theme, paste the css to ../themes/theone-child/custom.css;
    Or: paste to last line of ../themes/theone/style.css

    body.page #header.menu-default-hide #logo .logo-image { opacity:1; }
    #logo a:before { content:''; position:absolute; left: 0;top: 0; width: 150px; height: 100%; 
    background: url(http://xxx/Long-Logo-on-MenuBar.png) no-repeat 50% 50%; background-size: 120px auto;  }
    body.page #header.menu-default-hide #logo a:before { 
      opacity: 0; 
      -webkit-animation:longlogoImgZip 1s ease normal both; 
      -moz-animation:longlogoImgZip 1s ease normal both; 
      animation:longlogoImgZip 1s ease normal both; 
    }
    body.page #header.menu-default-hide.header-slide-down #logo a:before {
    opacity: 1; 
      -webkit-animation:longlogoImgUnZip 1s ease normal both; 
      -moz-animation:longlogoImgUnZip 1s ease normal both; 
     animation:longlogoImgUnZip 1s ease normal both; 
    }
    @-webkit-keyframes longlogoImgZip {
      0%{  opacity:1; }
      10%{ opacity:0; }
      100%{ opacity:0;  }
    }
    @-moz-keyframes longlogoImgZip {
      0%{  opacity:1; }
      10%{ opacity:0; }
      100%{ opacity:0;  }
    }
    @keyframes longlogoImgZip {
      0%{  opacity:1; }
      10%{ opacity:0; }
      100%{ opacity:0;  }
    }
    @-webkit-keyframes longlogoImgUnZip {
      0%{  opacity:0; }
      90%{ opacity:0; }
      100%{ opacity:1;  }
    }
    @-moz-keyframes longlogoImgUnZip {
      0%{  opacity:0; }
      90%{ opacity:0; }
      100%{ opacity:1;  }
    }
    @keyframes longlogoImgUnZip {
      0%{  opacity:0; }
      90%{ opacity:0; }
      100%{ opacity:1;  }
    }
    @-webkit-keyframes logoImgZip {
      0%{ max-height: 60px; opacity:1; }
      50%{ max-height: 40px; opacity:1; }
      100%{ max-height: 40px; opacity:0;  }
    }
    @-moz-keyframes logoImgZip {
      0%{ max-height: 60px; opacity:1; }
      50%{ max-height: 40px; opacity:1; }
      100%{ max-height: 40px; opacity:0;  }
    }
    @keyframes logoImgZip {
      0%{ max-height: 60px; opacity:1; }
      50%{ max-height: 40px; opacity:1; }
      100%{ max-height: 40px; opacity:0;  }
    }
    • This reply was modified 2 years, 1 month ago by  BWSM.
    #6331

    BWSM
    Keymaster
    • Put the logo in box by Theone / General Settings / Custom Logo
    • Put the logo in menu bar by above css code(replace as yours url) : ...background: url(http://xxx/Long-Logo-on-MenuBar.png)...
    #6337

    dashmista
    Participant

    Perfect!! Thank you. One last thing: with this custom css, how can I increase the size of the logo? I tried the code you showed before (without this separate logo) but it does not work now.

    #6341

    BWSM
    Keymaster

    Welcome, which logo? if that you mentioned is Long-Logo-on-MenuBar.png, in above custom css, there are 2 sizes, increase them:
    #logo a:before { ... width: 150px; ... background-size: 120px auto; ... }

    #6350

    dashmista
    Participant

    I want to increase the size of both the logo in the box and the menu. Strange, with the custom css file uploaded, the css editor in wp-admin does not work?

    #6351

    BWSM
    Keymaster

    For logo in box, add css code:
    body.page #header.menu-default-hide #logo .logo-image { max-height: 80px; }

    change all max-height: 60px; of above css as max-height: 80px;

    all code I have tested, plz check yours double.

    #6424

    dashmista
    Participant

    Thanks.

    So I have successfully gotten separate logos and the correct sizes. However… Now I am experiencing a problem because of this custom css: http://uxdash.com/?p=1814 do you see it creates both logos now in the header? The home page uxdash.com is working fine, but subpages are not working with the logos. How can I fix this?

    • This reply was modified 2 years ago by  dashmista.
    #6426

    BWSM
    Keymaster

    Hi, it is not custom css issue. It is origin design, the header layout works only for page (https://www.dropbox.com/s/30gq33gtqfatly2/QQ20150226-2.jpg?dl=0), there is narmal header for all posts.

    #6433

    dashmista
    Participant

    Ok thanks. So what do I do? How do I stop the overlap of both logos in the header here:http://uxdash.com/?p=1814 and for all sub-pages? I can’t have that.

    #6443

    BWSM
    Keymaster

    Please add the custom css code: body:not(.page) .logo-image {display: none;}

    #6450

    dashmista
    Participant

    Perfect. Thank you.

    #6832

    dashmista
    Participant
    This reply has been marked as private.
    #6837

    dashmista
    Participant

    Fixed it! My apologies.

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

You must be logged in to reply to this topic.