Floating a logo or badge over three regions and once.

Hello All,
I hope I can make what I am trying to accomplish a little clearer than mud.
Ok I am using UpFront Builder for the first time and so far so good.
I have three regions each a different color and each about 20 px tall. Thin lines. They divide the regions on a page. I would like to "float" a logo over them, not within them, that is taller than the three regions together and have it stay to the left hand side of the container so that it remains responsive. I would like also to have that logo remain centered over them no matter how the page collapses on resize. I will be ok if it goes away altogether on a phone.

Did that make sense? I am attaching a screenshot of the page lines so you can see what i mean.

Regards,
Bradley

  • Bradley
    • The Incredible Code Injector

    Well. I don't see what I am looking for in that. On that page you linked me to, your superhero character's arm is over hanging the box element. That is the effect but it would overhand top and bottom. I'll go make a mockup of what I am thinking of.

  • Dimitris
    • Support Star

    Hey there Bradley,

    hope you're doing good and don't mind chiming in! :slight_smile:

    I was able to replicate this case in a test environment by using an image element inside the following region (after these three narrow ones) and some CSS to re-position.

    Keep in mind to create a new image preset to insert the custom CSS (you may have to experiment with the "top" value to better fit your logo)

    .upfront-image-wrapper {
        position: relative;
        top: -75px;
    }

    I will be ok if it goes away altogether on a phone.

    You can do so if you enable Upfront Responsive, select the mobile device, hover over a region to disaply the "edit" actions and then hide it with the little "eye" button.
    Here's a screencast http://www.screencast.com/t/IKcUyvua

    Warm regards,
    Dimitris

  • Bradley
    • The Incredible Code Injector

    Hello Dimitris,
    Please chime in all you like. I seem to go through this alot and just never get my arms around it. It is different in every theme. The code you sent me seems to not have an effect but the parameter settings on the left pane seem to provide some interesting changes. Namely it now hides under the region listed above it. Line number one is region one two is two and so on and the image is in region four.
    I would think there would be a way to have "one region to rule them all" and always be on top of say, for a lack of a better description, a "region group". I could then add the image into any container and have it float on top of all others within a grouping. Like an element grouping. I don't know enough about upfront yet but I will.

    Or even thinking in photoshop language, add a layer on top of everything a define an exact location relative to the left hand corner of the image, and give it a percentage value from top and left and it will collapse with the responsive reaction to resizing.... I am over complicating it in trying to make it simple I am sure...
    In the settings in the left hand pane I am allowed to give it a y axis over the edge of the contained area of the page when the region is set to 100% but not outside of the top of the region. Simple as that.
    Any ways here is a screen shot of how far I have gotten with this.....
    Brad

  • Dimitris
    • Support Star

    Hey there Bradley,

    I can see that in the "fourth" region you used the image as a region background, is that right?
    I rather used a image draggable element instead. I used drag-n-drop to set its dimensions and then I created a custom image preset and insert the custom CSS rules. :wink:

    If you could grant us with support access to your website, I could try to replicate this in your end to have a better look at it. You can grant us access via WPMUDEV Dashboard plugin as described here https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Warm regards,
    Dimitris

  • Bradley
    • The Incredible Code Injector

    Hey That got it on top! Fantastic. It does create a huge gap to the next region though so I enabled support access for you so you could have a look. I would like to know what you did to fix that last little thing so I can document it......

    Go ahead and have a look...

  • Dimitris
    • Support Star

    Hello Bradley,

    I just went ahead and changed a bit the image CSS to

    .upfront-image-wrapper {
        position: relative;
        top: -115px;
    }

    and then I edited the "fourth" region custom CSS by adding the following (now the "fourth" region is hidden as I set the height equal to zero)
    #region-container-stripe1 { height: 0 !important; }

    I also inspected this whole stripped area under smaller viewports and seems to work just fine. :slight_smile:

    Take care,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.