Elemental navigation menu background color not working?

Permalink
I would like to change Elemental navigation menu background color to blue by using Setting > Page Settings > Design > Customize Theme > Navigation Menu Background to select the blue color, then it corrupts “ParseError: Unexpected input in main. less….”. I checked Forums that confused me how to change navigation menu background color. Please advise me and thank you.

View Replies:
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi jss,

What was the full error?

Do you receive an error when modifying other customizable settings?

Do you receive an error when switching presets?
jss replied on at Permalink Reply
Hi,

What was the full error?
The full error shows at the bottom.

Do you receive an error when modifying other customizable settings?
Navigation Menu Background
Navigation Menu Background Hover
Page Background
It looks like that any “xxxx” Background will get an error.
I have not try to save Text after selecting color picker because it will crash the website. I had to reinstall concrete5 three times.

Do you receive an error when switching presets?
I am not sure about this and use only Elemental template that meets my need for thewww.www.caidconference.org/2016/....

Thank you.

ParseError: Unexpected input in main.less on line 1, column 254 1| @preset-fonts-file: "build/fonts/defaults.less";@home-feature-icon-color: rgb(26, 26, 26);@home-feature-title-color: rgb(26, 26, 26);@title-caps-type-font-family: Titillium Web;@title-caps-type-color: rgb(117, 202, 42);@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: Titillium Web;@title-thin-type-color: rgb(117, 202, 42);@title-thin-type-font-size: 2.46em;@accent-header-color: rgb(152, 142, 71);@accent-background-color: rgb(248, 250, 241);@default-button-border-color: rgb(183, 227, 144);@content-section-divider-color: rgb(236, 236, 236);@footer-link-hover-color: rgb(84, 134, 39);@footer-link-color: rgb(117, 202, 42);@footer-social-icon-hover-color: rgb(117, 202, 42);@footer-social-icon-color: rgb(209, 209, 209);@footer-section-divider-color: rgb(217, 217, 217);@footer-top-background-color: rgb(255, 255, 255);@footer-site-title-type-font-family: Titillium Web;@footer-site-title-type-color: rgb(117, 202, 42);@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(117, 202, 42);@image-slider-navigation-color: rgb(204, 204, 201);@image-slider-paragraph-type-font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@image-slider-paragraph-type-color: rgb(110, 110, 110);@image-slider-paragraph-type-font-weight: 400;@image-slider-paragraph-type-font-size: 1.1em;@image-slider-title-type-font-family: Titillium Web;@image-slider-title-type-color: rgb(117, 202, 42);@image-slider-title-type-font-weight: 200;@image-slider-title-type-font-size: 3.2em;@image-slider-background-image: '/2016/concrete/themes/elemental/images/background-slider-default.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: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@h6-type-color: rgb(163, 219, 117);@h6-type-text-transform: uppercase;@h6-type-font-weight: 400;@h6-type-font-size: 0.73em;@h5-type-font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@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: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@h4-type-color: rgb(79, 88, 92);@h4-type-font-weight: 700;@h4-type-font-size: 1.05em;@h3-type-font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@h3-type-color: rgb(117, 202, 42);@h3-type-font-weight: 700;@h3-type-font-size: 1.25em;@h2-type-font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@h2-type-color: rgb(26, 26, 26);@h2-type-font-weight: 700;@h2-type-font-size: 1.46em;@h1-type-font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@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(143, 28, 28);@header-navigation-hover-color: rgb(171, 221, 255);@header-navigation-type-font-family: Titillium Web;@header-navigation-type-color: rgb(0, 153, 255);@header-navigation-type-text-transform: none;@header-navigation-type-font-weight: 700;@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: Titillium Web;@header-site-title-type-color: rgb(117, 202, 42);@header-site-title-type-text-transform: none;@header-site-title-type-font-weight: 400;@header-site-title-type-font-size: 2.3em;@header-background-color: rgb(255, 255, 255);@page-title-type-font-family: Titillium Web;@page-title-type-color: rgb(117, 202, 42);@page-title-type-text-transform: uppercase;@page-title-type-font-weight: 700;@page-title-type-font-size: 1.73em;@body-link-hover-color: rgb(171, 221, 255);@body-link-color: rgb(32, 189, 232);@body-type-font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;@body-type-color: rgb(110, 110, 110);@body-type-font-weight: 400;@body-type-font-size: 15px;@page-background-color: rgb(255, 255, 255);
MrKDilkington replied on at Permalink Reply
MrKDilkington
@jss

I have seen this error before with an issue related to customizable settings.

The cause of that issue was the web host was not providing enough memory to the concrete5 installation. When changes were made to the customizable settings, they would need to be compiled. The compilation required additional memory and when it was exhausted, the error was thrown.

As an alternative, I can give you the CSS to make the change using Custom CSS.
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button

Navigation Menu Background changes the background color of the drop-down menu items. Your navigation does not have drop-down menu items, so I am wondering if you want to make something else blue.

Can you take a screenshot of your site and outline what you want to change?
jss replied on at Permalink Reply 1 Attachment
Thank you for the problem from the web host.

I am not familiar with Custom CSS yet and would like to learn and try it out.

The screenshot of my site and outline for navigation menu that I would like to change is attached. I just added one drop-down menu item under Program Schedule.
MrKDilkington replied on at Permalink Reply 2 Attachments
MrKDilkington
@jss

You can try adding this to your site Custom CSS.
div.ccm-page header nav ul {
    background: #0070c0;
}
div.ccm-page header nav>ul>li {
    padding-bottom: 10px;
    padding-top: 10px;
}
div.ccm-page header nav>ul>li:first-child {
    padding-left: 40px;
}
div.ccm-page header nav ul li a {
    color: white;
}
div.ccm-page header nav ul li a:hover {
    color: lightblue;

I have attached screenshots of what it should look like.
jss replied on at Permalink Reply 1 Attachment
Good morning,

At first, your attached screenshots is that what I am looking for. Thank you.

I just entered the first code, “div.ccm-page header nav ul” into my site Custom CSS and saved Entire Pages then the whole website crashes. The error message is attached.

Now I cannot go back to the website at all. I also clicked the gear icon to get a previous version and could not enter it at all. I checked sitemap that is still there then logged it off then now cannot log in due to same error message with NO log in.

Is there a way to get the website back before I reinstall concrete5? Is it possible that I replace which css file that caused crash through WinSCP to recover the website?

I think it is best to enter hard code in css somewhere in concrete5 rather than using Design and Customize Modes due to the web host’s problem. Or any advice?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@jss

Saving Custom CSS may also trigger the customizable styles to be compiled (which is likely to be causing the error).

An alternative is adding the CSS to your theme directly. Since you are using the default Elemental theme, any changes you make to it will be overwritten when the version of concrete5 is updated. To prevent the loss of changes, you can use a packaged clone of the default Elemental theme called Cloneamental.
https://www.concrete5.org/marketplace/themes/cloneamental...

Once you are using Cloneamental, you can add new CSS to the bottom of main.less.
packages\cloneamental\themes\cloneamental\css\main.less

Have you tried logging into the dashboard page directly?

An example of this is going to this pagehttp://www.caidconference.org/2016/index.php/dashboard... and logging in.

If you are going to reinstall anyway and there is no risk of breaking anything, you could try this:
- go tohttp://www.caidconference.org/2016/index.php/dashboard/pages/themes...
- click on the green "Get More Themes" button
- download Cloneamental
- activate Cloneamental
Don't leave the dashboard until you have activated the new theme.

In case this doesn't work, someone else may have another way to recover the site.
jss replied on at Permalink Reply
Whew, I got my website back by using your great instruction and modified the website a bit. Thank you!

I will learn how to write hard code for the navigation header menu with your previous code through Inspect element, WinSCP, and W3Schools tomorrow.

Thank you again.