Solved Mumblr: Footer - Conflict & Styling Issue

Discussion in 'Mumblr' started by Martin Zoufal, Dec 4, 2015.

  1. Martin Zoufal

    Martin Zoufal Member

    13
    0
    Hi!

    First of all, THANK you so much for this widget, it is a awesome chance to easily implement blogging into a muse website.

    Playing around with it for a new design I am running into the footer conflict.

    Using MUBMLR 11.2 on Adobe Muse CC 2015.0.2.4. on Windows 7

    I followed the hint that is presented in the widget-video around minute 10:00 (place an item below the widget), but the page is not scrolling, footer determines the lenght...

    Isolated (without footer) - no problem...

    Is there something I need to know?

    Here is the actual outcome for the problem...
    http://www.zoufal.at/o4d/aktuelles.html

    Would be cool to learn more about that problem solving...
     
  2. Martin Zoufal

    Martin Zoufal Member

    13
    0
    UPDATE: I kept playing around with it and after adding a textbox AND an empty frame underneath the mumblr widget it worked kind of how it should...

    BUT, now starting to have a deeper look:

    I am losing parts of the HTML-format that I made in Tumblr. So all the <br> tags are not displayed in the widget outcome on the page. This is kind of a bummer, since you lose a lot of power from that took if you cannot fully integrate it...

    how it should look (tumblr)
    tumblr-screen.png

    how it looks (mumblr)
    mumblr-screen.png

    A second thing that also came up: the "read-more"-button is ignored in the widget, so it always displays the full article on the page...

    I do not know how much this widget is worked on, but I think with a little effort those problems could probably eliminated to provide a really good option to use tumblr as blogging tool...

    I will try to find out more since I am really planning on use it for some pages...
    YS
    Martin
     
  3. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Martin, I have been trying to replicate your issue, with no success.
    Here's what I did. I took a blank page, added a footer, then placed the widget on the page. I added a rectangle (added a fill color) behind the widget so I had a nice frame. Then, between the widget area and the footer, I placed a blank 'rectangle' as described in the video.
    When I preview in browser, everything works fine.
    From your link I believe you have something that is set up differently. If you can, try what I did on a new blank site, and let me know how it works.
    Dj
     
  4. Martin Zoufal

    Martin Zoufal Member

    13
    0
    Hi DJ!

    I did now, and using a new set of masterpages I tried the following:
    1. put mumblr widget on empty page without footer - works fine (http://www.zoufal.at/o4d/test1.html)
    2. put a footer on masterpage underneath - problem as described (http://www.zoufal.at/o4d/test2.html)
    3. put an empty frame underneath the mumblr widget - works fine now (http://www.zoufal.at/o4d/test3.html)

    So, for this topic I guess it has to do with my old master page that did contain some other widgets that might have interefered... So in my opinion it is solved, since I can build up a solution with new masterpages.

    Other than that keeping the html format exactely as it is in tumblr would be very necessary, since every loss of design is very critical to the future usage of that widget (also the read-more topic would be great to have for design reasons).

    I do hope there is an answer to those questions,
    have a nice day.
    Martin
     
  5. Alex Wiley

    Alex Wiley Product Specialist / Widget Development Staff Member Advisory Group

    164
    51
    Hey Martin,

    The footer issue that you represent here is being looked into as we speak to hopefully we can find a resolution to this. In the mean time I would recommend using the work around that you are currently using. In regards to the 'Show More' button that you speak about; this has been an incredibly popular request from the community, one which we have taken note on and hope to implement in a future update for this widget.

    If you need some help with the styling of your Mumblr widget then I may be able to provide some code to help out with this. Would you like me to do this for you? If so could you link me to your original Tumblr page please.

    Thanks,
    Alex
     
  6. Martin Zoufal

    Martin Zoufal Member

    13
    0
    Hi Alex,
    thanks for the nice offer. sure, anything is welcome to help the topic.
    my test tumblr page ist http://zoff55.tumblr.com/

    it is just to play around for the moment, so we can do whatever we need in order to learn how to optimize the result on the mumblr integration.

    Thank you again and greetings from Austria!
    have a nice "KRAMPUS"
    see

    Martin
     
  7. Alex Wiley

    Alex Wiley Product Specialist / Widget Development Staff Member Advisory Group

    164
    51
    Hey,

    On the page where your mumblr widget is installed, if you go to Page > Page Properties and in the <head> section paste this code:
    Code:
    <style>
    .mt-tumblr-body p {
        margin-bottom: 20px;
        text-align: justify;
    }
    .mt-tumblr-body img{
    margin-bottom: 20px;
    }
    </style>
    This code makes a substantial amount of difference to the style of your site. Try adding it in and let me know if it helps.

    Thanks,
    Alex
     
  8. Martin Zoufal

    Martin Zoufal Member

    13
    0
    Yes, it did.
    now we havehttp://www.zoufal.at/o4d/aktuelles.html

    so the <BR> tags seem to do what they should do...
    usually I try to fully understand what I just did, so if you could, pls. try to give me a hint what the justify-alignment and bottom-margin did to help solving the issue...
     
  9. Alex Wiley

    Alex Wiley Product Specialist / Widget Development Staff Member Advisory Group

    164
    51
    Hey Martin,

    Margin-bottom:
    No problem I can explain it. Basically each of your paragraphs or pieces of text are wrapped between <p> tags. This means that by using CSS we can target every single <p> tag in the Mumblr widget. It seems that on your page there were issues with the spacing between these <p> tags, therefore the margin-bottom: 20px; adds 20 pixels onto the bottom of each <p> tag giving it an appropriate spacing.
    Screen Shot 2015-12-05 at 18.52.37.png

    Text-align:
    It's the same principle as the margin-bottom in the way that we target the text, but here I am simply setting the text to be justified rather than simply aligned to the left.

    Img:
    I also added in some CSS to add a little space between all of your images on the page. You may not notice a massive difference but it just makes the overall appearance look a little cleaner.
     
    Martin Zoufal likes this.

Share This Page