PANINO THEME: u-button-circle element set on front page broke after last update

After the huge updated to both Panino and Upfront a few days ago, I noticed that the "u-button-circle" element at the top of the main page broke. The following behaviours changed:

1) Where the round mask overlay was once yellow, it is now gray.

2) This layer also became square, instead of round. (With a bit of tinkering I got this corrected, though I have no idea exactly what it was that I did that worked. Upfront still feels like a crapshoot in editing.)

3) The text displayed over the logo had been displaced. It now appears quite low, and no longer gives you the ability to move it to correct this.

I no longer have the ability to edit the 3 separate layers in Upfront, as I once did. The only one that appears to allow you to select it and offer settings is the base layer.

This is the element set I am referring to (as it appears in the page source code):

<div class='upfront-output-wrapper' id='wrapper-1429088166088-1636'><div class='upfront-output-module c8'  id='module-1429088152557-1539' ><div data-preset_map="" class="upfront-output-object u-button-circle upfront-output-button c24 upfront-button" id="button-object-1429088152556-1127" data-theme-styles='{"default":"u-button-circle"}'><a href="" target="" style="text-align: center;" class="button-style upfront_cta button-preset-button-logo">Some Text</a></div></div></div>

I'm pretty sure some of this can be corrected with some custom CSS (the button overlay changing from yellow to gray, for instance). However, Upfront is so different that I'm rather intimidated by the prospect of this.

As for two of the layers no longer seeming to be editable (the coloured overlay, and the text container) I'm not sure what to do there. I've been pretty careful about not tinkering under the hood with this theme, because it's using the Upfront scaffolding, so I haven't made any changes to templates or even CSS.

I would be very grateful for any guidance someone may be able to provide on correcting this.

Thanks so very much,
Sue Braiden.

  • Milan

    Hello @Sue,

    Sorry to hear that you are having issue with updates.

    Let's go bit by bit to sort our your issues.

    #1) Where the round mask overlay was once yellow, it is now gray.
    Please use this css snippet in element's custom css editor. If you are not sure form where you find custom css editor of specific element, please do refer attached screenshot. :slight_smile:

    #page .upfront-button .button-preset-button-logo.upfront_cta{
    	background-color: #F9D632;

    2) This layer also became square, instead of round.

    You were able to fix this with the help of border-radius property. I can see that you've setup anchor element's border radius property to fix this but it seems that this is the reason why your text is not able to move center of the circle box.

    May I login into your site and view some css rules which you've applied ? If its okay to you just grant me temporary support staff access. You can do that by WPMU DEV > Support > Support Staff > Grant Access

    Thanks & Kind Regards,
    Milan Savaliya.

  • Sue

    @Milan, I still cannot update the CSS code today. When I select the element, it does not give me the opportunity to update the CSS, as I was once able to do. This has been a problem since the update.

    Also, the WPMU Dev website dashboard keeps telling me that there is another update available for Upfront on this site, but when I try to apply it, it fails, suggesting I may have inadequate permissions. When I go back to the web site itself, there is absolutely nothing suggesting that there is even an update for Upfront available, so I'm a little stymied.

    I have to admit that I am so frustrated with the bugginess of Upfront that it's a struggle to even want to continue to use it. I had links in the "menu" section that couldn't even be updated after two weeks of trying (because of the bugs prior to the update). It has stifled my ability to develop even the simplest site so badly that I am increasingly fearful about the future. I run a number of very complex sites on legacy themes, happily so, but I know that their deprecation means days are numbered.

    I apologize for venting a little. This just becomes more and more frustrating to the point where I think I'm simply going to ditch any of the Upfront themes and stick with the legacy themes for now, until such time that Upfront is more mature, and can actually handle anything more than casual blogging.

    Thanks so very much for your assistance, Milan. I truly do value the excellent service that you and the WPMU Dev team provide.


  • Adam Czajczyk

    Hello Sue!

    I took a liberty of visiting your site and hopefully fixed the issues #1 and #3 (as #2 was already fixed by you). Below are steps taken:

    1. After entering "Settings" mode for element I noticed that the "no preset" is selected; I saved current settings as "SueButton" first. In order to enter "Settings" mode for element I clicked on little "gear" icon near the top edge of the element; next steps are referring to content of Upfront panel on the left

    2. This allowed me to further customize the element;

    3. I set background for an element to yellow

    4. I clicked on "Edit preset CSS" and in a CSS editor that popped up at the bottom of the screen I found CSS rules for following class:

    .upfront-button a.upfront_cta {

    As you can check in page's source code, that's the "Sue Braiden" link text.

    5. I've adjusted padding value there by changing it from

    padding:33% 0;


    padding:16% 0;

    I think this now looks better and hopefully it's what you wanted.

    That said, I realize that with Upfront 1 many things has changed, especially if it comes to Upfront's User Interface. This happened because of long months of testing and collection user's feedback and although it may be a bit surprising (and even frustrating) at the first glance, I'm sure that once you play with it a bit and get used to it, you'll find it much more handy than "prototype" (previous UI scheme).

    This is a final UI, meaning that although there'll be further changes they are only meant to unify entire Upfront UI with that new scheme. Of course new features will also be added.

    I think there's one more thing also worth noting. I mentioned "preset" before. Presets are there to help you a) easily customize selected element without needing to edit/add CSS code (we'll be adding more and more CSS attributes there so they could be adjusted "visually") b) be able to safely and easily experiment with different variants of design of particular element and c) to let you target selected element precisely without needing to search for its class name.

    I hope that helps an if you need any further assistance, please let me know!

    Best regards,

  • Sue

    @Adam, I don't know of a single business I've invested in as a customer that has ever made me feel as grateful for taking my money as WPMU Dev does. Your team never complains about the stuff we throw at you (including our meltdown moments and rants), and you consistently come back with stuff like this, holding our hand through each piece of what is causing us to hit the wall.

    Thank you! I appreciate that you not only corrected the parts that were snafu'd, but that you explained how and why so that I know what to do with this in the future.

    I went to the web site to take a look and found that it was not only fixed, but that the latest Upfront update yesterday had address most of the bugs that were driving me quite mad in the GUI. I spent about an hour working with content, and got more done that I have in the last 4 weeks. Huge difference, and huge relief.

    I am also grateful for the way that you put my mind at ease about Upfront's potential, instead of making me feel like an idiot. It's been hard not to throw in the towel on it, but reading your note here (and another over here from @Kasia Swiderska, who mentioned that -- now that the Upfront developers are on the other side of this major foundation overhaul -- they are getting back to making Upfront compatibility with BuddyPress, WPML, CoursePress and other plugins), makes it easier to hang in there with it.

    @James Farmer's note this morning about the formal Upfront launch, and your team's commitment to it, was another really big help. (I tucked a nod in here regarding your own patience with those of us who feel like we're walking through fire).

    Can't tell you guys enough just how grateful I am to be your customer. You're not normal ... in a good way :wink:

    Thanks so very much!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.