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.
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);
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);
@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?
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?
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.
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.
@jss
You can try adding this to your site Custom CSS.
I have attached screenshots of what it should look like.
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;
Viewing 15 lines of 26 lines. View entire code block.
I have attached screenshots of what it should look like.
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?
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?
@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.
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.
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.
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.
What was the full error?
Do you receive an error when modifying other customizable settings?
Do you receive an error when switching presets?