Upfront / Builder Lost CSS and Layouts

Hello,
I have been working on a theme for this site on a development server mostly without issue, but now have an issue with custom CSS Builder layouts. Today, I was editing global css via Builder, saved, and was then prompted to "activate theme". I clicked yes and now many things are very different. This theme was already activated and I have edited and saved without issue in both Upfront and Builder. After this occurred, the site was set to show latest posts on the home page and the home page was moved to /home/. I have corrected this via Settings > Reading, but now my region and element custom CSS is not showing through. When edit a page via Upfront, I can see the CSS working, but it is not on the public side. I have tried clearing the Upfront cache, but it did not help. Also, the "layouts" in Builder have changed. It looks like the home page over wrote the default template, archive, and another. Public versions of missing layouts look, mostly similar, and seem to just be missing some of the Global and Region CSS. I am not sure what to do now and do not want to loose my custom CSS. Please advise as well as if you have any questions. Thanks.

Regards,
Michael

  • Adam Czajczyk

    Hello Michael,

    I hope you're well today and thank you for your question!

    I understand that something wrong has happened here but I must admit that I don't fully understand yet what it was. Would you mind helping me a bit more to get a better picture please?

    Let me explain my concerns then.

    1. You are referring to both Upfront Builder and Upfront (as in Upfront theme's editor). That is the difference and while the Upfront Builder let you build the theme this theme can be further customized "per site" in Upfront. Making changes to the theme in Upfront Builder shouldn't "break" that theme while it's active on site though unless e.g. there's been some layouts removed.

    I understand that you already mentioned layouts being "messed up/removed" but can you tell me please if you can actually see in Builder that they are missing or they just "got messed" in Upfront editor (front end Upfront editor on site).

    2. You have mentioned that you made changes to the global CSS via Upfront Builder; were these the only changes that you made or did you also created/removed layouts and/or e.g. updated "Theme Information" as well? I just want to make sure

    3. You mentioned that after activating the theme the site got switched to showing "latest posts" on homepage and you corrected that. The "built in" Upfront homepage is a "virtual" page and if you change there "reading settings" of WordPress to a "static" page as a front page - by default the default "page" layout would be applied to it. Therefore it would need to be adjusted in Upfront editor and saved using "only for this page" option when prompted. Setting back to the default "reading settings" (latest posts) and clearing Upfront cache should, I think, bring back the default homepage though, unless some data has been "messed up".

    Could you please refer to my concerns above? That would help me grasp a better picture of the issue and I'd then check your site and test it to see what we could do about it to help you get it back to shape, hopefully.

    Best regards,
    Adam

    • Mtwo

      Adam,
      Thanks for the quick reply. I think the easiest way to understand this issue is to view the sites few main pages and then see them in the Upfront theme editor. The Region CSS listed in the Region Element's CSS area is no longer included on the live page. The CSS for text presets are also not showing on the live pages.

      I am building this site on a development server, I will be transferring the finished theme, along with a few new pages, to the main site. i.e. About, Member Information, Contact Us. Since there is customization done to those specific pages, I am assuming that I will need to save them into Builder Layouts, via the save as Template under Page Options > Templates in the Upfront theme editor. When I create the new page on the live site, I am assuming that I simply select the template as named and customize it with the Upfront editor as needed..

      I think what I am confused about, as well as part of this problem, is which layout in Builder is the default. I think that layout was the basis for the site and foundation for the global CSS, as it contained all the global regions shared across all pages except the home page. Since what ever happened caused the default Builder layout to be different, in this case to the 'Home' page, the shared regions' global CSS are not being included as those regions are not part of the default layout and therefore not displaying correctly.

      I made CSS changes in builder, but did not delete any layouts. Yesterday, I was having an issue with the first two <hr>'s on the home page, the CSS for their class was no longer present in Chromes Developer Inspector, and defaulted to a height of 0. This is what prompted me to look at the Global CSS via Builder. I made some CSS changes saved, things appeared to work fine. I loaded the page again later and the same issue with <hr>'s.

      As to the reading settings, we would like the home page as configured in Upfront for the page Home, and we would like the posts to be on the News page, with individual posts following in similar style. The home page has regions unique to only it, and does not have most of the regions that are on every other page. Currently, every-other page share the same header and footer, with their body content styled with presets and CSS. What should I set the reading settings to be so that there are not any conflicts or issues.

      Please let me know if you have any other questions and what is needed to fix... Thanks for your help, I do appreciate it.

      Michael

  • Mtwo

    Hello,
    I have tried adding global regions to pages with missing CSS, but still it is not showing through. I opened Builder and simply clicked save theme and was prompted with Cleaning Region CSS... and Region CSS Cleaned. I checked the page, and still not seeing CSS. I cut all CSS out of global CSS. Saved, pasted it back in and saved again. Still, not showing through. I tried another save and was prompted to activate theme. I did not as it is already active. Any ideas why my custom and preset CSS is not showing through? What can I do to fix this.

    Thanks,
    Michael

  • Predrag Dubajic

    Hi Michael,

    I was doing some tests on your site but I'm afraid that I was unable to find any information about what's causing this.

    I would like to restore your site on my local installation to perform some additional tests, in order to do this can you please go to Snapshot > Managed Backups and finish up the setup there to configure managed backups, this will allow me to create full backup of your site and restore it on my end and hopefully help with identifying the cause of this issue.

    Let me know once it's configured and I'll get on it :slight_smile:

    Best regards,
    Predrag

  • Mtwo

    Predrag, I hope you are doing well and thank you for your help with this site. I am having some trouble completing a backup. The managed backups and some of the individual snapshots are failing with a Error 404. Backing up the DB is not an issue, but both the individual Theme and Plugins Snapshot fail. The run until they are to the Files part of the backup and never get past 0%. The managed backups are configured and I have entered the snapshot key. I have tried to complete the managed backup 3 or 4 times without success. The error I receive is:

    Aw shucks, something went wrong :slight_frown: Instead of the beautiful response we expected, we got this: Error 404

    Please advise.
    Thanks,
    Michael

  • Mtwo

    I receive the "Failed to load resource: the server responded with a status of 404 (Not Found)" error in Snapshot on /wp-admin/admin-ajax.php. I did not see any 404's in the Console with Builder or Upfront Theme editor open.

    When in builder I can again trigger the activate theme prompt by loading Builder from the dashboard (Edit in Builder), then immediately save theme, where I then see 'Cleaning Region CSS...', which shakes side to side, then the 'Region CSS Cleaned' prompt. Then, if I follow the link to the home page on the logo in the footer, builder will then load with the correct home page, as the one that loads first in builder is not the correct home page, and when I save that, I am prompted to activate the theme, for which I did not.
    I also noticed that when I load Builder and then follow a link to the home page, it loads with the Welcome to Builder! quick tour, as like when you first create a theme. This screen also experiences the overlay block from clicking anything, including the Next button of the Welcome tour. If I delete the following in the inspector, I can then click the Next button and use Builder.
    <div id="upfront-popup-background" style="" class="transparent"></div>

    Here is what is in the Console when Builder is loaded. There are not any 404's.

    M

  • Mtwo

    Hello, With wanting to move forward quickly, I am thinking I will create a new theme, pasting my CSS and related. First, I wanted to confirm the correct or optimal way of structuring this theme when using a unique home page layout with Posts on the secondary page News. Is it OK to set Reading Settings to a static page, setting the Posts page to another static page, in this case News? Or is it better to set the Front Page Display to latest posts and create the virtual page within Builder?
    Essentially, there are only two layouts, the Home page and all other pages use the same layout. I did create a layout for the Archive in order to add the page title News to the top, but all other pages have the same wrapper, header and footer. What settings do I use as to not have issues with Builder and the Upfront editor? What layouts should I be using?
    I simply wanted to confirm these things as I think this is what led to this issue. ...
    Thanks

  • Predrag Dubajic

    Hi Michael,

    Huh, I don't remember seeing that Snapshot issue before, could you start a separate thread for that issue and we will try a different way here.

    Regarding the console screenshot, those are just warnings and they shouldn't be causing any issues with site functionality.

    The transparent div issue is something our developers are already working on fixing, in the meantime you can remove the div from inspector tool or use CSS solution that's provided in thread that Georgi linked above.

    Is it OK to set Reading Settings to a static page, setting the Posts page to another static page, in this case News? Or is it better to set the Front Page Display to latest posts and create the virtual page within Builder?

    Upfront Child themes available on WPMU DEV all are created with custom home page but that is mostly because of default WP setting in Reading panel, you can still use Static page as your front page.

    Essentially, there are only two layouts, the Home page and all other pages use the same layout. I did create a layout for the Archive in order to add the page title News to the top, but all other pages have the same wrapper, header and footer. What settings do I use as to not have issues with Builder and the Upfront editor? What layouts should I be using?

    You will need to have separate layout for pages and for archive, it would be best having separate global regions for your site header and page title, that way you can have different text on archives and on standard pages.

    I would still like to further investigate the issue you're having on your site, is it possible for you to provide us with FTP or cPanel access for some additional investigation?
    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

  • Mtwo

    Hello, I did submit the requested info via contact form as requested.

    Since then, I have been creating a new theme with builder, pasting in my CSS when appropriate. In doing so I have noticed a few things.
    There is certainly a problem with saving. The theme I am working on, 006, is not activated, so I am only in Builder. I have much of my CSS in a document, but have referenced their respective locations within Builder and the Upfront Theme Editor to find that there a few CSS errors. It is like the CSS was partially cleaned or corrupted during a save. I did correct the CSS in the active theme and assured correct CSS in the new theme.
    When saving the new theme, it does not always work. Example, I created a Single Generic layout, saved, switch back to the Home layout, and could not switch back to the Single Generic, and only create a new. Also, I have created presets and edited defaults that did not save. Some times it works, but just changing the theme defaults does not work correctly. I have changed the H1 through H6 and A link/hover many times without sticking. This is just an update....Please advise.
    Thanks,
    Michael

  • Mtwo

    Hello,
    Is there anything I can do to immediately address this issue and begin seeing our custom CSS and styled presets? Is there a way to use the Upfront Theme Editor to save over the appropriate builder layout so that we can get back to seeing the site display correctly? Or can something be done directly with the theme files via FTP? We are approaching 1 week with this error and we really need to move forward.

    I am also wondering if there could be a problem directly within one or more pages, that somehow causes a conflict with Builder. Is there a way to export an individual page's body into the default WP page and then clear the Upfront related customization for that page? I am just thinking that it might be necessary to clear any customization done directly with the Upfront Theme Editor, and I simply am attempting to not loose the new content along with the related layout and CSS. I have attempted rebuilding the theme with a new, but with also having issues saving with the new theme, I am wondering if the problem is withing an individual page and am unsure how to troubleshoot that.

    In regards to Snapshot, I was able to complete individual Snapshots for Themes, Plugins, and the DB. A snapshot of only Media fails and a managed backup has yet to complete. I am not sure what the issue is, but was able to complete all Snapshots on the main www site yesterday.

    Any ideas to help move this forward is appreciated.
    Thanks,
    Michael

  • Dimitris

    Hello Michael,

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

    First of all, I'd like to inform you that I've already pinged our dev on this as my colleague Predrag has already forwarded him your server details.
    We'll let you know as soon as you've got any valuable feedback on this!

    I have much of my CSS in a document, but have referenced their respective locations within Builder and the Upfront Theme Editor to find that there a few CSS errors. It is like the CSS was partially cleaned or corrupted during a save. I did correct the CSS in the active theme and assured correct CSS in the new theme.

    Could you please ensure the source from where you're copying? To be absolutely sure, use a plain text editor with no special formatting so you don't copy any weird characters.

    When saving the new theme, it does not always work. Example, I created a Single Generic layout, saved, switch back to the Home layout, and could not switch back to the Single Generic, and only create a new. Also, I have created presets and edited defaults that did not save. Some times it works, but just changing the theme defaults does not work correctly. I have changed the H1 through H6 and A link/hover many times without sticking.

    Definitely something that doesn't happen in my test environment. And this "not always" kind of issue is that troubles me. :thinking:
    I inspected your system info via WPMUDEV -> Support -> System Info [button] but all seems good to me. High memory and max execution time limits, the only thing that I would try (if possible) would be a PHP update from v.5.4 to v.7.0, but can be sure that this will confront all these UF glitches.

    Is there a way to export an individual page's body into the default WP page and then clear the Upfront related customization for that page? I am just thinking that it might be necessary to clear any customization done directly with the Upfront Theme Editor, and I simply am attempting to not loose the new content along with the related layout and CSS.

    I'm afraid there isn't such export capability at the moment. What you can do though, is to reset specific layouts made in UF Editor. You can do so in Upfront -> General under the "Debug Options" box.

    In regards to Snapshot, I was able to complete individual Snapshots for Themes, Plugins, and the DB. A snapshot of only Media fails and a managed backup has yet to complete. I am not sure what the issue is, but was able to complete all Snapshots on the main www site yesterday.

    So you also backed up Media and performed a cloud backup too? If you still struggle with that, please create a new thread about it and we will dig into it!
    https://premium.wpmudev.org/forums/#question

    Warm regards,
    Dimitris

  • Mtwo

    Hello, Thank you for your reply. I have reset all layouts and theme, plus I have created a new theme. I pasted the CSS from Dreamweaver so there should not be an issue. I updated PHP to 5.6.27, and PHP 7 is not available for this domain. Even with these things done, Builder is still not working correctly. I created new regions, all regions are global. I created new presets, but they are not saving. I can change between layouts in Builder and presets plus CSS displays correctly in Builder. When I save the theme, things appear to work correctly, but if I close Builder and reopen none of the presets are saved.

    The one thing I did notice is that on the WPMU System Info page within support, it has Collate listed as utf8mb4_unicode_520_ci where the DB default and wp-config have it listed as utf8mb4_unicode_ci. Is that an issue?

    I have included a link to a CSS document that has the CSS for regions and presets in the support access quick message area.

    What do we need to do to get Builder to work correctly? What do we need to do to get Builder to save Presets and include region CSS on public side. Is there a way to manually enter presets into a php/css file to force presets to save? I need to get this development area working again as soon as possible. Please advise.

  • Dimitris

    Hey there Mtwo,

    hope you're doing good and please forgive our late reply here, it's been unusually busy in our forums lately.

    As your issue isn't reproducible from us, we should use some further insights from our UF dev team so I already pinged them again on your issue.
    I really appreciate your patience here! :slight_smile:

    About the database encoding difference, I really don't think that this is the source here. More info about those can be found here though http://stackoverflow.com/a/37308117/3139513

    Warm regards,
    Dimitris

  • Mtwo

    Hello, I hope you are doing well. I have installed a local virtual server and built a new theme using PHP 7. There have been far fewer issues using this setup to build the theme.

    One thing I noticed that entering and CSS with brackets, i.e. [ and ] like [class^="icon-"], [class*=" icon-"] will cause issues with builder saving. I entered some icon styles into global CSS and crashed builder. Locally, I noticed that settings.php errors out and sometimes will not write the complete file. I have since chosen a different way of styling my icons with CSS, so this is just FYI.

    I have uploaded this theme to the dev site a few times and have some questions / concerns. I have made some minor changes to the theme via builder on the dev site and have received error 500's immediately following. This doesn't always happen, so I am not sure what is causing this, but need to figure it out. I cannot put this theme on the live site if I cannot make changes to it. The server for this site is a shared host and does not have PHP 7 available. I can configure PHP and enable modules, so I am wondering if there are any that should be enabled/disabled to address these issues. Here is a list of available PHP modules, do you have any recommendations on which to enable or disable?

    apcu			http				mysql		posix		sysvshm
    apm			igbinary			mysqli		propro		tidy
    ares			imagick			mysqlnd		pspell		timezonedb
    bcmath		imap				ncurses		quickhash		trader
    big_int		inotify			nd_mysql		radius		translit
    bitset		interbase			nd_mysqli		raphf			uploadprogress
    bz2_filter		intl				nd_pdo_mysql	rar			uri_template
    dba			ioncube_loader		oauth		recode		uuid
    dbx			ioncube_loader_4	oci8			redis			wddx
    dom			jsmin			odbc			rsync		weakref
    doublemetaphone json			opcache		snmp		xcache_3
    eio			ldap				pdf			soap			xdebug
    enchant		libevent			pdo			sockets		xmlreader
    ffmpeg		lzf				pdo_dblib		spl_types		xmlrpc
    fileinfo		mailparse			pdo_firebird	ssh2			xmlwriter
    gd			mbstring			pdo_mysql	stats			xrange
    gender		mcrypt			pdo_odbc		stem			xsl
    geoip		memcache		pdo_pgsql		stomp		yaml
    gmagick		memcached		pdo_sqlite		suhosin		yaz
    gnupg		mongo			pgsql		sybase_ct		zend_guard_loader
    haru			msgpack			phalcon		sysvmsg		zip
    htscanner		mssql			phar			sysvse

    One area I have been continually having issues with on the dev site is with Responsive. I have made a change, clicked save, and then seen the shaking 'Published' toast notification. So I have had to make the same change multiple times for it to stick. I have also tried to reorder the "Contact Information" region on mobile and tablet, moving the logo to the top with the two addresses stacked beneath it, but have had issues. For example, I'll move an address block and it will get stuck outside of any region and becomes unmovable, and I'll loose my ability to save, exit or otherwise, as an overlay becomes the top most layer.

    How to reset Upfroint Builder Responsive settings.
    I was tweaking the theme for this site and am finding that the mobile version is continually giving me issues. Is there a way to reset the responsive related settings so that I can try again?

    Upfront Builder Responsive CSS
    Where can I enter @media queries or CSS for only mobile/tablet/desktop?
    Example, I would like to have the top region of the home page to be on top of the region following it with parallax background for @media only screen and (min-width:1100px), If I enter position: absolute; for the region's .upfront-region-container-bg, the CSS will work and properly display the region for desktop, but this does not work properly on tablet and mobile. Plus, when I do this, I can no longer edit the region with builder. I have to go to the CSS file directly and delete, or comment out the CSS.
    .upfront-region-container-bg { position: absolute; margin: 0 auto; width: 100%; }

    Another example of this is the third region on the home page, About. I have a background color, border radius, box-shadow, and margin set to this regions center. When on mobile or tablet, this will either be too skinny with only a few words per line or overflow outside the users viewport. So on mobile/tablet, I would rather have different CSS that does not have the margin, border radius and box-shadow, and simply extent full width. Where do I enter the CSS for each of these breakpoints?

    Please let me know as well as if you have any questions.

  • Dimitris

    Hey there Mtwo,

    hope you're having a beautiful day!

    One thing I noticed that entering and CSS with brackets, i.e. [ and ] like [class^="icon-"], [class*=" icon-"] will cause issues with builder saving. I entered some icon styles into global CSS and crashed builder. Locally, I noticed that settings.php errors out and sometimes will not write the complete file. I have since chosen a different way of styling my icons with CSS, so this is just FYI.

    I appreciate the feedback here! I already passed that piece of info to our dev team and hopefully we'll have some more insights. :slight_smile:

    I have uploaded this theme to the dev site a few times and have some questions / concerns. I have made some minor changes to the theme via builder on the dev site and have received error 500's immediately following. This doesn't always happen, so I am not sure what is causing this, but need to figure it out.

    Did you enable WP_DEBUG to see if there's any error in your logs? You can do so if you access for server via (S)FTP, edit wp-config.php file in the root WP folder, find a line like
    define('WP_DEBUG', false);
    and replace it with the following (if the above line doesn’t exist, simply insert next snippet just above the /* That's all, stop editing! Happy blogging. */ comment)

    // Enable WP_DEBUG mode
    define('WP_DEBUG', true);
    // Enable Debug logging to the /wp-content/debug.log file
    define('WP_DEBUG_LOG', true);
    // Disable display of errors and warnings
    define('WP_DEBUG_DISPLAY', false);
    @ini_set('display_errors', 0);

    Then go ahead and try to replicate the error. By doing so, a /wp-content/debug.log file should be created.

    Prior to that, you can try to increase the memory limit allocated to PHP by editing wp-config.php file and adding the following line right before the /* That's all, stop editing! Happy blogging. */ comment line.
    define('WP_MEMORY_LIMIT', '256M’);
    Reference: http://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP

    Is there a way to reset the responsive related settings so that I can try again?

    At the moment there isn't any way to reset only a specific breakpoint like mobile or/and tablet. You can only delete a whole layout from admin area Upfront -> General -> Debug options [box]

    Where can I enter @media queries or CSS for only mobile/tablet/desktop?

    You can use the Global Theme CSS area for your styles. In there you can either use @media queries or use the built-in UF helper classes:
    #page.desktop-breakpoint {
      // your desktop styles
    }
     #page.tablet-breakpoint {
      // your tablet styles
    }
     #page.mobile-breakpoint {
      // your mobile styles
    }

    Warm regards,
    Dimitris

  • Dimitris

    Hello Mtwo

    One thing I noticed that entering and CSS with brackets, i.e. [ and ] like [class^="icon-"], [class*=" icon-"] will cause issues with builder saving. I entered some icon styles into global CSS and crashed builder. Locally, I noticed that settings.php errors out and sometimes will not write the complete file. I have since chosen a different way of styling my icons with CSS, so this is just FYI.

    I had some feedback from our dev team. They tried to replicate this issue but wasn't able to, could you please share with us the exact CSS rules that break UF Builder in your end, if that's possible? Please advise! :slight_smile:

    Warm regards,
    Dimitris