(OLD 5.7 Discussion FORUM)

Customize Elemental gives error

Permalink July 29, 2015 at 11:05 AM

I tried to customize the Elemental theme and got the following error. If I save then my website is not accessible. Is this still not deployed or is this just me.

Also not able to save tracking code.

ParseError: Unexpected input in main.less on line 1, column 254 1| @preset-fonts-file: "build/fonts/blue-sky.less";@home-feature-icon-color: rgb(26, 89, 120);@home-feature-title-color: rgb(26, 89, 120);@title-caps-type-font-family: Noticia Text;@title-caps-type-color: rgb(26, 89, 120);@title-caps-type-font-size: 1.73em;@image-caption-type-font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@image-caption-type-color: rgb(184, 196, 205);@image-caption-type-font-style: italic;@image-caption-type-font-size: 1em;@title-thin-type-font-family: Roboto Slab;@title-thin-type-color: rgb(26, 89, 120);@title-thin-type-font-size: 2.46em;@accent-header-color: rgb(107, 149, 178);@accent-background-color: rgb(223, 236, 242);@default-button-border-color: rgb(175, 228, 255);@content-section-divider-color: rgb(236, 236, 236);@footer-link-hover-color: rgb(26, 89, 120);@footer-link-color: rgb(0, 159, 239);@footer-social-icon-hover-color: rgb(0, 159, 239);@footer-social-icon-color: rgb(209, 209, 209);@footer-section-divider-color: rgb(223, 236, 242);@footer-bottom-background-color: rgb(235, 248, 255);@footer-top-background-color: rgb(255, 255, 255);@footer-site-title-type-font-family: Roboto Slab;@footer-site-title-type-color: rgb(26, 89, 120);@footer-site-title-type-text-transform: uppercase;@footer-site-title-type-font-weight: 900;@footer-site-title-type-font-size: 1.2em;@image-slider-navigation-active-color: rgb(0, 159, 239);@image-slider-navigation-color: rgb(96, 170, 204);@image-slider-paragraph-type-font-family: Noticia Text;@image-slider-paragraph-type-color: rgb(255, 255, 255);@image-slider-paragraph-type-font-weight: 400;@image-slider-paragraph-type-font-size: 1.1em;@image-slider-title-type-font-family: Roboto Slab;@image-slider-title-type-color: rgb(26, 89, 120);@image-slider-title-type-font-weight: 100;@image-slider-title-type-font-size: 3.2em;@image-slider-background-image: '/concrete/themes/elemental/images/background-slider-blue-sky.png';@blockquote-border-color: rgb(189, 207, 216);@blockquote-left-padding-size: 60px;@blockquote-type-color: rgb(91, 103, 108);@blockquote-type-font-weight: 300;@blockquote-type-font-size: 1.46em;@h6-type-font-family: Roboto Slab;@h6-type-color: rgb(187, 232, 241);@h6-type-text-transform: uppercase;@h6-type-font-weight: 400;@h6-type-font-size: 0.73em;@h5-type-font-family: Roboto Slab;@h5-type-color: rgb(159, 169, 173);@h5-type-text-transform: uppercase;@h5-type-font-weight: 700;@h5-type-font-size: 0.73em;@h4-type-font-family: Roboto Slab;@h4-type-color: rgb(79, 88, 92);@h4-type-font-weight: 700;@h4-type-font-size: 1.05em;@h3-type-font-family: Roboto Slab;@h3-type-color: rgb(26, 89, 120);@h3-type-font-weight: 700;@h3-type-font-size: 1.25em;@h2-type-font-family: Roboto Slab;@h2-type-color: rgb(26, 26, 26);@h2-type-font-weight: 700;@h2-type-font-size: 1.46em;@h1-type-font-family: Roboto Slab;@h1-type-color: rgb(26, 26, 26);@h1-type-font-weight: 700;@h1-type-font-size: 2.1em;@header-navigation-menu-text-hover-color: rgb(0, 153, 255);@header-navigation-menu-text-color: rgb(162, 162, 162);@header-navigation-menu-border-color: rgb(237, 242, 243);@header-navigation-menu-background-hover-color: rgb(214, 247, 255);@header-navigation-menu-background-color: rgb(255, 255, 255);@header-navigation-hover-color: rgb(0, 159, 239);@header-navigation-type-font-family: Roboto Slab;@header-navigation-type-color: rgb(173, 180, 185);@header-navigation-type-text-transform: none;@header-navigation-type-font-weight: 1.1;@header-navigation-type-font-size: 1em;@header-search-input-background-color: rgb(255, 255, 255);@header-search-input-border-color: rgb(203, 203, 203);@header-search-input-icon-color: rgb(203, 203, 203);@header-site-title-type-font-family: Roboto Slab;@header-site-title-type-color: rgb(26, 89, 120);@header-site-title-type-text-transform: none;@header-site-title-type-font-weight: 400;@header-site-title-type-font-size: 2.4em;@header-background-color: rgb(255, 255, 255);@page-title-type-font-family: Roboto Slab;@page-title-type-color: rgb(26, 89, 120);@page-title-type-text-transform: uppercase;@page-title-type-font-weight: 700;@page-title-type-font-size: 1.73em;@body-link-hover-color: rgb(0, 159, 239);@body-link-color: rgb(26, 89, 120);@body-type-font-family: Noticia Text;@body-type-color: rgb(110, 110, 110);@body-type-font-weight: 400;@body-type-font-size: 14px;@page-background-color: rgb(255, 255, 255);

Kurtopsy replied on Jul 29, 2015 at 12:09 pm Permalink Reply

What did you change did you make? and where?

SignallHill replied on Jul 29, 2015 at 1:17 pm Permalink Reply

On the homepage clicked page setting button -> design -> customize theme -> changed sunrise to blue sky. The page refreshed and showed the above error.

Kurtopsy replied on Jul 29, 2015 at 1:44 pm Permalink Reply

Well that's definitely odd. I don't think I'm going to be of any help to you. I've never had that happen before.

WebcentricLtd replied on Jul 29, 2015 at 1:51 pm Permalink Reply

hello - which version are you using?

You only tried to make the change through the admin panel - you haven't changed any files in the CMS - you haven't tried to manually customise the Elemental theme?

The only time I've seen this particular error is when I've manually editied main.less or one of the less files and accidentally omitted a ;(semi-colon) at the end of a line.

SignallHill replied on Jul 29, 2015 at 2:09 pm Permalink Reply

This is a new install of 5.7.4.2 (the latest stable)

Only manual change made is in footer.php removing login link at the bottom. No other changes made manually.

I have another site that installed prior 5.7 version and was upgraded to 5.7.4.2 which does not give me any errors. Both on same servers.

WebcentricLtd replied on Jul 29, 2015 at 2:15 pm Permalink Reply

any chance you could post your footer.php and your main.less and your bluesky.less?

SignallHill replied on Jul 29, 2015 at 2:21 pm Permalink Reply

Footer.php

<?php defined('C5_EXECUTE') or die("Access Denied.");
$footerSiteTitle = new GlobalArea('Footer Site Title');
$footerSocial = new GlobalArea('Footer Social');
$footerSiteTitleBlocks = $footerSiteTitle->getTotalBlocksInArea();
$footerSocialBlocks = $footerSocial->getTotalBlocksInArea();
$displayFirstSection = $footerSiteTitleBlocks > 0 || $footerSocialBlocks > 0 || $c->isEditMode();
?>
<footer id="footer-theme">
    <?php if ($displayFirstSection) { ?>
    <section>
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <?php
                $a = new GlobalArea('Footer Site Title');

Viewing 15 lines of 54 lines. View entire code block.

 
<?php defined('C5_EXECUTE') or die("Access Denied.");
 
$footerSiteTitle = new GlobalArea('Footer Site Title');
$footerSocial = new GlobalArea('Footer Social');
$footerSiteTitleBlocks = $footerSiteTitle->getTotalBlocksInArea();
$footerSocialBlocks = $footerSocial->getTotalBlocksInArea();
$displayFirstSection = $footerSiteTitleBlocks > 0 || $footerSocialBlocks > 0 || $c->isEditMode();
 
?>
 
<footer id="footer-theme">
    <?php if ($displayFirstSection) { ?>
    <section>
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <?php
                $a = new GlobalArea('Footer Site Title');
                $a->display();
                ?>
            </div>
            <div class="col-sm-3">
                <?php
                $a = new GlobalArea('Footer Social');
                $a->display();
                ?>
            </div>
        </div>
    </div>
    </section>
    <?php } ?>
    <section>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
            <?php
            $a = new GlobalArea('Footer Legal');
            $a->display();
            ?>
            </div>
            <div class="col-sm-3">
                <?php
                $a = new GlobalArea('Footer Navigation');
                $a->display();
                ?>
            </div>
            <div class="col-sm-3">
                <?php
                $a = new GlobalArea('Footer Contact');
                $a->display();
                ?>
            </div>
        </div>
    </div>
    </section>
</footer>
 
 
<?php $this->inc('elements/footer_bottom.php');?>

main.less

/* Import bootstrap 3 mixins and variables so we can use them */
@import "build/bootstrap-3.2.0/variables.less";
@import "build/bootstrap-3.2.0/mixins.less";
/* Import core mixins so we can use them */
@import "../../../css/build/core/include/mixins.less";
/* Import our theme variables. */
@import "presets/defaults.less";
/* Import our theme mixins */
@import "./build/mixins.less";
/* Import our theme fonts */
//@import "build/fonts.less";
@import ~"@{preset-fonts-file}";
/* Our style rules - namespace so as not to collide with the core app styles */
@import "build/body.less";
@import "build/content.less";

Viewing 15 lines of 54 lines. View entire code block.

 
/* Import bootstrap 3 mixins and variables so we can use them */
@import "build/bootstrap-3.2.0/variables.less";
@import "build/bootstrap-3.2.0/mixins.less";
 
/* Import core mixins so we can use them */
@import "../../../css/build/core/include/mixins.less";
 
/* Import our theme variables. */
@import "presets/defaults.less";
 
/* Import our theme mixins */
@import "./build/mixins.less";
 
/* Import our theme fonts */
//@import "build/fonts.less";
 
@import ~"@{preset-fonts-file}";
 
/* Our style rules - namespace so as not to collide with the core app styles */
@import "build/body.less";
@import "build/content.less";
div.ccm-page {
  @import "build/header.less";
  @import "build/pagination.less";
  @import "build/breadcrumb.less";
  @import "build/captcha.less";
  @import "build/search.less";
  @import "build/buttons.less";
 
  @import "build/custom-design-classes/block-sidebar-padded.less";
  @import "build/custom-design-classes/block-sidebar-wrapped.less";
  @import "build/custom-design-classes/blog-entry-list.less";
  @import "build/custom-design-classes/recent-blog-entry.less";
  @import "build/custom-design-classes/area-content-accent.less";
  @import "build/custom-design-classes/testimonial-bio.less";
 
  @import "build/blocks/faq.less";
  @import "build/blocks/feature.less";
  @import "build/blocks/feature-template-hover-description.less";
  @import "build/blocks/image-slider.less";
  @import "build/blocks/image.less";
  @import "build/blocks/next-previous.less";
  @import "build/blocks/page-list-option-buttons.less";
  @import "build/blocks/page-list-template-thumbnail-grid.less";
  @import "build/blocks/page-list.less";
  @import "build/blocks/page-attribute-display.less";
  @import "build/blocks/page-title.less";
  @import "build/blocks/page-title-option-byline.less";
  @import "build/blocks/testimonial.less";
  @import "build/blocks/tags.less";
  @import "build/blocks/topic-list.less";
  @import "build/blocks/date-navigation.less";
}
 
@import "build/miscellaneous-styles.less";
@import "build/footer.less";
@import "build/mobile/navigation.less";
 
/* CSS with background images – we need these directives to be in the root of theme
 * otherwise we can't both map the stylesheet to them AND the customizer to them
 */
.ccm-image-slider-container {
  background-image: url(@image-slider-background-image);
}

WebcentricLtd replied on Jul 29, 2015 at 2:22 pm Permalink Reply

and bluesky.less?

SignallHill replied on Jul 29, 2015 at 2:27 pm Permalink Reply

@preset-name: "Blue Sky";
@preset-icon: concrete-icon(#1a5978, #d3d7d9, #009fef);
@preset-fonts-file: "build/fonts/blue-sky.less";
/*
 * The sections in this document roughly correspond to our theme style guide.
 */
// Global body background
@page-background-color: #fff;
// Top Header - Website Title */
@header-background-color: #fff;
@header-site-title-type-color: #1a5978;
@header-site-title-type-font-weight: 400;
@header-site-title-type-font-size: 2.4em;
@header-site-title-type-text-transform: none;
@header-site-title-type-font-family: 'Roboto Slab';

Viewing 15 lines of 124 lines. View entire code block.

 
@preset-name: "Blue Sky";
@preset-icon: concrete-icon(#1a5978, #d3d7d9, #009fef);
@preset-fonts-file: "build/fonts/blue-sky.less";
 
/*
 * The sections in this document roughly correspond to our theme style guide.
 */
 
// Global body background
@page-background-color: #fff;
 
// Top Header - Website Title */
@header-background-color: #fff;
@header-site-title-type-color: #1a5978;
@header-site-title-type-font-weight: 400;
@header-site-title-type-font-size: 2.4em;
@header-site-title-type-text-transform: none;
@header-site-title-type-font-family: 'Roboto Slab';
 
// Top Header Search
@header-search-input-icon-color: #cbcbcb;
@header-search-input-border-color: #cbcbcb;
@header-search-input-background-color: #ffffff;
 
// Top Header - Main Navigation */
@header-navigation-type-color: #adb4b9;
@header-navigation-type-font-size: 1.0em;
@header-navigation-type-font-weight: 1.1em;
@header-navigation-type-font-family: 'Roboto Slab';
@header-navigation-type-text-transform: none;
 
@header-navigation-hover-color: #009fef;
@header-navigation-menu-background-color: #fff;
@header-navigation-menu-border-color: #edf2f3;
@header-navigation-menu-background-hover-color: #D6F7FF;
@header-navigation-menu-text-color: #a2a2a2;
@header-navigation-menu-text-hover-color: #0099ff;
 
// Typography
@body-type-font-family: 'Noticia Text';
@body-type-color: #6e6e6e;
@body-type-font-size: 14px;
@body-type-font-weight: 400;
 
// Links
@body-link-color: #1a5978;
@body-link-hover-color: #009fef;
 
// Headings
@h1-type-font-family: 'Roboto Slab';
@h1-type-color: #1a1a1a;
@h1-type-font-size: 2.1em;
@h1-type-font-weight: 700;
 
@h2-type-font-family: 'Roboto Slab';
@h2-type-color: #1a1a1a;
@h2-type-font-size: 1.46em;
@h2-type-font-weight: 700;
 
@h3-type-font-family: 'Roboto Slab';
@h3-type-color: #1a5978;
@h3-type-font-size: 1.25em;
@h3-type-font-weight: 700;
 
@h4-type-font-family: 'Roboto Slab';
@h4-type-color: #4f585c;
@h4-type-font-size: 1.05em;
@h4-type-font-weight: 700;
 
@h5-type-font-family: 'Roboto Slab';
@h5-type-color: #9fa9ad;
@h5-type-font-size: 0.73em;
@h5-type-font-weight: 700;
@h5-type-text-transform: uppercase;
 
@h6-type-font-family: 'Roboto Slab';
@h6-type-color: #BBE8F1;
@h6-type-font-size: 0.73em;
@h6-type-font-weight: 400;
@h6-type-text-transform: uppercase;
 
// Page title block
@page-title-type-font-family: 'Roboto Slab';
@page-title-type-color: #1a5978;
@page-title-type-font-size: 1.73em;
@page-title-type-font-weight: 700;
@page-title-type-text-transform: uppercase;
@pagination-border-color: #afe4ff;
 
// Image slider
@image-slider-navigation-color: #60aacc;
@image-slider-navigation-active-color: #009fef;
@image-slider-background-image: '../images/background-slider-blue-sky.png';
@image-slider-title-type-color: #1a5978;
@image-slider-title-type-font-family: 'Roboto Slab';
@image-slider-title-type-font-size: 3.2em;
@image-slider-title-type-font-weight: 100;
@image-slider-paragraph-type-color: #ffffff;
@image-slider-paragraph-type-font-family: 'Noticia Text';
@image-slider-paragraph-type-font-size: 1.1em;
@image-slider-paragraph-type-font-weight: 400;
 
// Blockquote
@blockquote-left-padding-size: 60px;
@blockquote-type-font-size: 1.46em;
@blockquote-type-font-weight: 300;
@blockquote-type-color: #5b676c;
@blockquote-border-color: #bdcfd8;
 
// Section Divider
@content-section-divider-color: #ececec;
 
// Footer site title
@footer-site-title-type-color: #1a5978;
@footer-site-title-type-font-weight: 900;
@footer-site-title-type-font-size: 1.2em;
@footer-site-title-type-text-transform: uppercase;
@footer-site-title-type-font-family: 'Roboto Slab';
 
@footer-top-background-color: #ffffff;
@footer-bottom-background-color: #ebf8ff;
@footer-link-color: #009fef;
@footer-link-hover-color: #1a5978;
@footer-text-color: #6e6e6e;
@footer-section-divider-color: #dfecf2;
 
// Footer social icons
@footer-social-icon-color: #d1d1d1;
@footer-social-icon-hover-color: #009fef;
 
// Miscellaneous
 
@default-button-border-color: #afe4ff;
@accent-background-color: #dfecf2;
@accent-header-color: #6b95b2;
 
@title-thin-type-font-family: 'Roboto Slab';
@title-thin-type-color: #1a5978;
@title-thin-type-font-size: 2.46em;
 
@title-caps-type-font-family: 'Noticia Text';
@title-caps-type-color: #1a5978;
@title-caps-type-font-size: 1.73em;
 
@image-caption-type-font-family: ~"'Helvetica Neue', Helvetica, Arial, sans-serif";
@image-caption-type-color: #b8c4cd;
@image-caption-type-font-size: 1em;
@image-caption-type-font-style: italic;
 
@home-feature-title-color: #1a5978;
@home-feature-icon-color: #1a5978;

WebcentricLtd replied on Jul 29, 2015 at 3:17 pm Permalink Reply

hi - what happens if you comment the following line out of blue-sky.less?

@image-caption-type-font-family: ~"'Helvetica Neue', Helvetica, Arial, sans-serif";

make sure you just comment it so you can revert back easily. If needs be take a copy of the file first.

WebcentricLtd replied on Jul 29, 2015 at 3:19 pm Permalink Reply

oh - and make sure all your caches are turned off and emptied.

SignallHill replied on Jul 29, 2015 at 3:38 pm Permalink Reply

That did it. However, once I changed from blue sky to another theme eg Night Road and back to blue sky

variable @image-caption-type-font-family is undefined

If uncomment it out then I get the same error.

SignallHill replied on Jul 29, 2015 at 3:42 pm Permalink Reply

I have decided to go with another available theme. This is too complicated for me.

Thanks for your help. I dont want to spend more of your time.

WebcentricLtd replied on Jul 29, 2015 at 3:47 pm Permalink Reply

hello again,
it wasn't a permanent fix. There seems to be some inconsistency with the less parser in that particular installation.

You might have this issue with other themes.

Could you post some of your environment variables/info?

MrKDilkington replied on Jul 30, 2015 at 12:43 am Permalink Best Answer Reply

@SignallHill and to anyone else experiencing this problem with the Blue Sky preset

This problem was recently encountered in this post.
https://www.concrete5.org/community/forums/themes/design-bug/...

"This problem appears to be caused by web hosts that don't provide enough memory. You will need to contact your host and request that they increase it.

The theme presets use Less which is a compiled CSS preprocessor. I am assuming that low memory prevents the Less from compiling resulting in the error."

The cause of the error was solved by community user ntisithoj.
http://www.concrete5.org/community/forums/5-7-discussion/elemental-...
"we discovered that this error is due to the low ram memory from the hosting provider. I had IXWebhosting, and they expected people to run their websites with 32 Mb... Get a Bluehost or Arvixe account, and you won't have this problem..."

alexarvixe replied on Aug 17, 2015 at 9:22 pm Permalink Reply

32mb does seem extremely low. For anyone interested, our resource limitations can be found here:https://support.arvixe.com/index.php?/Knowledgebase/Article/View/289...

A huge increase from the 32mb they offer :).

Thank you for the recommendation.

Forums

(OLD 5.7 Discussion FORUM)

Customize Elemental gives error

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?