Update Issue Magazine Theme broke my frontpage

I've updated the Issue Magazine (Upfront) Theme, but now the frontpage is broken. Maybe interesting, this is an older issue: I'm only able to access the Upfront frontend interface in Safari browser (not Chrome and Opera).

When I started a year ago or so with Upfront I had issues with caching on my server, but everything is disabled. So also for the frontpage it should not be an issue (where in the builder right now I've put it as it was, but it's not showing up live). This I already checked with the hosting-company.

PS: I've granted support acces.

  • Sohag Ronjon Dey

    Hi Wouter van der Toorn,

    Hope you are doing well.

    I have gone through your site and tried to open the editor and found it is not loading. Could you please run a plugin conflict test as outlined in the following flowchart?

    This will eliminate the possibility of a conflict with another plugin.

    https://premium.wpmudev.org/wp-content/uploads/2015/09/Support-Process-Support-Process.gif

    reference

    https://premium.wpmudev.org/docs/getting-started/getting-support/

    If you permit we can also do that for you. But before that please take a full backup of your site and database. This will eliminate any chance of unexpected site break and data loss.

    Please let us know.

    Cheers,
    Sohag

  • Predrag Dubajic

    Hi Wouter,

    We have noticed an issue with presets for Posts element that causes the issue with styling not loading properly outside of UF Editor, our developers are currently working on a fix for this and we are hoping to see it released soon.

    As for the Editor loading issue, did you had this issue since you started using Upfront or it started somewhere down the road?
    If it wasn't from the start do you remember when it started happening, after one of the updates or you installed some additional plugins around that time?

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Wouter van der Toorn,

    I did some tests on my installation and I think I have a solution for the frontpage issue, it's not the cleanest one but it should do the trick until update is released.

    So basically what I did is that I copied the CSS from that element preset, added selector to affect only that region, added couple of !important attributes in order to override couple of things and then added couple of additional attributes to fix up the loose ends.

    What you need to do is simply copy the below code and paste it at the end of Global CSS field, just make sure to remove it when update is released.

    .upfront-region-featured-articles .uposts-object ul {
        display: block;
    }
    .upfront-region-featured-articles .uposts-object ul:before,
    .upfront-region-featured-articles .uposts-object ul:after {
        content: "";
        display: table;
    }
    .upfront-region-featured-articles .uposts-object ul:after {
        clear: both;
    }
    .upfront-region-featured-articles .uposts-object li {
        width: 22.415%;
        float: left;
        display: inline-block;
        margin-right: 3.447%;
        padding: 0;
    }
    .upfront-region-featured-articles .uposts-object li:last-child {
        margin-right: 0;
    }
    .upfront-region-featured-articles .uposts-object li .date_posted,
    .upfront-region-featured-articles .uposts-object li .author,
    .upfront-region-featured-articles .uposts-object li .post_categories,
    .upfront-region-featured-articles .uposts-object li .gravatar,
    .upfront-region-featured-articles .uposts-object li .read_more,
    .upfront-region-featured-articles .uposts-object li .post_tags {
        display: none;
    }
    .upfront-region-featured-articles .uposts-object li .thumbnail {
        width: 100%!important;
        height: 190px!important;
        position: relative!important;
        margin-bottom: 23px!important;
        transform-style: preserve-3d!important;
        -moz-transform-style: preserve-3d!important;
        -webkit-transform-style: preserve-3d!important;
    }
    .upfront-region-featured-articles .uposts-object li .thumbnail > a,
    .upfront-region-featured-articles .uposts-object li .thumbnail > img {
        width: 175%;
        height: auto;
        display: block;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        background: #ufc0;
    }
    .upfront-region-featured-articles .uposts-object li .thumbnail a img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        top: 0!important;
        left: 0!important;
        -webkit-transform: translate(0)!important;
        -moz-transform: translate(0)!important;
        transform: translate(0)!important;
        min-width: 0!important;
    }
    .upfront-region-featured-articles .uposts-object li .thumbnail a:hover img {
        opacity:0.6;
    }
    .upfront-region-featured-articles .uposts-object li .thumbnail img {
        margin-top: 0 !important;
    }
    .upfront-region-featured-articles .uposts-object li .title {
        margin-bottom: 9px;
    }
    .upfront-region-featured-articles .uposts-object li .title a {
        color: #ufc2;
        display:block;
    }
    .upfront-region-featured-articles .uposts-object li .title a:hover {
        color: #ufc4;
    }
    .upfront-region-featured-articles .uposts-object li .content {
        margin-bottom: 0;
    }
    .upfront-region-featured-articles .uposts-object li .content,
    .upfront-region-featured-articles .uposts-object li .content * {
        font-size: 16px;
        line-height: 25px;
        margin-bottom:10px;
        font-family: "Lato", sans-serif;
        font-weight: 300;
    }
    .upfront-region-featured-articles .uposts-object li .content * {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .upfront-region-featured-articles .uposts-object li .comment_count {
        color: #ufc4;
        font: 400 14px/25px "Lato", sans-serif;
    }
    .upfront-region-featured-articles .uposts-object li.noFeature article:before {
        content: "";
        width: 100%;
        height: 190px;
        display: block;
        margin-bottom: 23px;
        background-size: cover;
    }

    Let us know if this fix worked for you.

    As for the editor loading issue, this would require some further investigation on your site as I was unable to replicate it on any of my installations.

    Could you provide us with FTP and/or cPanel login so we can dig deeper into this?
    You can send us your details using our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question and the template below:

    Subject: "Attn: Predrag Dubajic"
    - Site login url
    - WordPress admin username
    - WordPress admin password
    - FTP credentials (host/username/password)
    - cPanel credentials (host/username/password)
    - Link back to this thread for reference
    - Any other relevant urls

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Wouter,

    Looks like this issue is with CloudFlare Rocket loader.

    Can you try the following steps and see if you can fire Upfront Editor from other browsers after that:
    - Log on to Cloudflare
    - Go to Menu > Speed
    - Turn off Auto Minify and Rocket Loader
    - Clear Cloudflare cache under Menu > Cache section, select Purge Everything

    Let us know how it goes.

    Best regards,
    Predrag