[Resolved] insert logo and social icons into metaslider in header

Home Forums Support [Resolved] insert logo and social icons into metaslider in header

Home Forums Support insert logo and social icons into metaslider in header

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #684277
    casimiro

    Hi
    I don’t understand why but when I update to 1.7.2 the logo and the two lightweight social icons themselves out of meta slider not in metaslider.
    I put in GP HOOKS
    Before Header Content

    [metaslider id=”50″]

    before update
    and—>
    .fixed-slider-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    }

    .site-branding,
    .site-logo,
    .header-widget {
    z-index: 2;
    position: relative;
    }

    .site-header {
    overflow: hidden;
    }

    .metaslider .theme-default .nivoSlider,
    .metaslider .theme-default .nivoSlider img {
    height: 100%;
    }

    .sidebar .widget {
    text-align: center;

    }
    .sidebar .widget {
    image-orientation: auto;
    }
    —>in CSS aditional
    but now i must write in elements–>
    <?php echo do_shortcode(‘[metaslider id=”57″]’); ?>
    in Hook–> Before_header_content –> Execute Shortcodes Yes and –>Execute php Yes too –> Display Rules –>Entire site and–> the same CSS aditional
    —>post before
    What’s it’s wrong now?

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #684468
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #684489
    casimiro

    No, because it’s a local site at moment.
    The first code, Tom gave it to me in forum wordpress.
    I have a slider in header and I want insert logo in the left and two social icons at right but in the same slider.

    #684511
    casimiro

    Now the site look that this:

    and before:

    #684688
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    So it’s working in the old hooks, but not inside the new Elements module?

    Is there any way you can build the section in a live test site so we can see? It’s super hard to debug stuff like this without seeing it.

    #684796
    casimiro

    Well, it seems that I have achieved it changing things.
    But the social icons and the logo I can’t centre them.
    It’s possible that?

    It don’t work with the padding header

    #685225
    Tom
    Lead Developer
    Lead Developer

    How are you currently adding them? Can you share your complete code?

    #685245
    casimiro

    Hi
    For Header MetaSlider
    Elements–> Settings–>Hook–>Before_Header_Content–>Execute Shortcodes–> Marked
    Elements–> Display Rules–>Location–>Entire Site
    Elements–> Internal Notes–>

    [metaslider id=”57″]

    In CSS Aditional:
    .fixed-slider-background {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;
    }

    .site-branding,

    .site-logo,

    .header-widget {

    z-index: 2;

    position: relative;

    }

    .site-header {

    overflow: hidden;

    }

    .metaslider .theme-default
    .nivoSlider,

    .metaslider .theme-default
    .nivoSlider img {

    height: 100%;

    }

    .sidebar .widget {

    text-align: center;

    }

    .sidebar .widget {

    image-orientation: auto;

    }

    The logo in header are to left with header padding
    10 – 40 – 150 – 25

    And in Header widget
    Lightweight Social Icons
    [widget id=”lsi_widget-2″]
    –>It gives the same thing where it puts it the alignment in the center to the left side or to the right always it’s just like it.

    #685485
    Tom
    Lead Developer
    Lead Developer

    And there’s no way we can get a mockup like this on a live test site? I can guess with the CSS, but it will likely take a handful of iterations. If we can get a live mockup, it will only take one.

    #685488
    casimiro

    Ufff
    I’m working in local for now.
    I don’t now how can send to see in live. At least for now.
    Sorry for the incovenience
    But I only want a metaslider in header and a logo centered at left and social icons centered too at right.
    Thats all.

    #685577
    Tom
    Lead Developer
    Lead Developer

    Maybe try this?:

    .site-branding,
    .site-logo,
    .header-widget {
        margin-top: calc(50% - 100px);
    }

    You can change the 100px to make it more vertically centered.

    #685668
    casimiro

    Not working or I don’t now how put the code, I was change the .header-widget like this:
    .fixed-slider-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    }

    .site-branding,
    .site-logo,.header-widget { margin-top: calc(50% – 100px);}

    .site-header {
    overflow: hidden;
    }

    .metaslider .theme-default .nivoSlider,
    .metaslider .theme-default .nivoSlider img {
    height: 100%;
    }

    .sidebar .widget {
    text-align: center;

    }
    .sidebar .widget {
    image-orientation: auto;
    }

    Once changed the code if I ajust the padding to the top the logo and social icons disappear under the slider.
    The same thing happens if I change the percentage of 100px

    Thanks

    #686033
    Tom
    Lead Developer
    Lead Developer

    Try this instead:

    .site-branding,
    .site-logo,
    .header-widget {
        position: relative;
        top: calc(50% – 100px);
    }
    #686084
    casimiro

    It doesn’t work, already I have proved it before answering.

    #686299
    Tom
    Lead Developer
    Lead Developer

    That didn’t make those elements move at all? Perhaps try validating your CSS to make sure there are no syntax errors: https://jigsaw.w3.org/css-validator/#validate_by_input

    Unfortunately, without seeing the site, we’re just guessing. Do you have a live server somewhere? If so, it shouldn’t take long to recreate this slider area only. That would allow me to give you a concrete solution.

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.