Auto-nav styling, why making it so complicated?
Permalink
I got a suggestion. Why not make the Auto-nav work with a meny generator like, for example, one like this:
http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/...
You style it online and the you can copy and past the CSS into concrete5:s Auto-Nav somehow. Maybe in a form or just in clean CSS-file and put it as a Template.
I'm pretty new to 5.7 but I worked more with 5.6 and there was still that little problem. You got a nice working system that is logical and simple to use. Except when it comes to styling the Auto-Nav. The most important thing on a Website.
I tried to change some thing in the Elemental menu in the code. That was... oh well... lets just say I took a "few" hours to get in to, and there are still things I don't understand. I still haven't gotten a working menu on my testing website.
So why not make it simpler and easier. I think you will get more clients if that part would be a little more understanding towards the user.
And if I'm just stupid, tell me where the understandable version of the styling tutorial for the Auto-nav on 5.7 is.
Thanks!
http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/...
You style it online and the you can copy and past the CSS into concrete5:s Auto-Nav somehow. Maybe in a form or just in clean CSS-file and put it as a Template.
I'm pretty new to 5.7 but I worked more with 5.6 and there was still that little problem. You got a nice working system that is logical and simple to use. Except when it comes to styling the Auto-Nav. The most important thing on a Website.
I tried to change some thing in the Elemental menu in the code. That was... oh well... lets just say I took a "few" hours to get in to, and there are still things I don't understand. I still haven't gotten a working menu on my testing website.
So why not make it simpler and easier. I think you will get more clients if that part would be a little more understanding towards the user.
And if I'm just stupid, tell me where the understandable version of the styling tutorial for the Auto-nav on 5.7 is.
Thanks!
Hi MrDilkington
I'm having issues with the drop-down menu. The different stages. They pop up everywhere but where they are suppose to. And as this is a responsiv theme, well once the look good in one place, they look awful in another :)
Right now I am editing the Auto-Nav block itself in hopes of doing something that will be simpler. But it just takes so much time.
The CSS for the responsive menu in Elemental is... well... mental ;) But I'll figure it out eventually,
I'm having issues with the drop-down menu. The different stages. They pop up everywhere but where they are suppose to. And as this is a responsiv theme, well once the look good in one place, they look awful in another :)
Right now I am editing the Auto-Nav block itself in hopes of doing something that will be simpler. But it just takes so much time.
The CSS for the responsive menu in Elemental is... well... mental ;) But I'll figure it out eventually,
I do have one question. I can't get a new LESS variable to work in the Elemental-theme. I'm making a preset-file and trying to add some variables. I don't want them to be customizable in the theme editor. As I undersand according to the documentation you can name a variable anything.
For example:
I want to add a new variable that will contain the background color of the "a:hover" statement. So I tried a numer of different variable names but non work.
For example:
Nothing works, and the code is correct and working when I put in the color value without using av variable. I guess cocnrete5 has some different "types" that is defined. But I don't see them working as it is described in the documentation here:
Shouldn't there be a long list of working variable names if they are predetermined?
For example:
{$variable}-type-font-family {$variable}-type-font-weight {$variable}-type-text-decoration
I want to add a new variable that will contain the background color of the "a:hover" statement. So I tried a numer of different variable names but non work.
For example:
@test-background-color: #f5f5f5; @test-hover-background-color: #f5f5f5;
Nothing works, and the code is correct and working when I put in the color value without using av variable. I guess cocnrete5 has some different "types" that is defined. But I don't see them working as it is described in the documentation here:
http://documentation.concrete5.org/developers/designing-for-concrete5/enabling-style-customization/advanced-customization-with-type-spacing-and-images
Shouldn't there be a long list of working variable names if they are predetermined?
Those instructions are for theme developers who want to implement this capability in their theme
http://documentation.concrete5.org/developers/designing-for-concret...
for end users (typically a theme to be released in the marketplace).
I could be wrong, but I don't think that's what you want (in that if it's just for your own theme or a site you're developing, you just want to style it some way). Of course, having that in your theme would make it easier (which is the point, when there's lots of different end users who don't code).
http://documentation.concrete5.org/developers/designing-for-concret...
for end users (typically a theme to be released in the marketplace).
I could be wrong, but I don't think that's what you want (in that if it's just for your own theme or a site you're developing, you just want to style it some way). Of course, having that in your theme would make it easier (which is the point, when there's lots of different end users who don't code).
Nope I don't want to submit a theme, so I don't care about the customizer part. But I would like to use the preset-files as I want multiple designs on different parts of the website.
So how can you define your own @variable in a preset file? Because everything I try fail. But the original @variables work.
Am I right to assume that the style.xml just applies if you want the customizer to work?
So how can you define your own @variable in a preset file? Because everything I try fail. But the original @variables work.
Am I right to assume that the style.xml just applies if you want the customizer to work?
Hi,
if I've misunderstood - please ignore:
you'd define your variable in one of the less files according to it's usage in the site and then you would assign it to a preset in the relevant preset file.
For example if you look inside the elemental theme:
\css\build\header.less
you will see lots of variables such as
which are assigned to the various classes in the less file.
then if you look for example in
\css\presets\blue-sky.less
you see where the variables are assigned their value for that preset
e.g.
if I've misunderstood - please ignore:
you'd define your variable in one of the less files according to it's usage in the site and then you would assign it to a preset in the relevant preset file.
For example if you look inside the elemental theme:
\css\build\header.less
you will see lots of variables such as
@header-site-title-type-font-family; @header-site-title-type-font-weight; @header-site-title-type-color;
which are assigned to the various classes in the less file.
then if you look for example in
\css\presets\blue-sky.less
you see where the variables are assigned their value for that preset
e.g.
// 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';
@MrLindau
"I'm making a preset-file and trying to add some variables. I don't want them to be customizable in the theme editor."
I don't think presets work independently of customizable styles. An example is the default Elemental theme.
- If you remove styles.xml, the Design > Customize link is not available.
- Removing the customizable style definitions in styles.xml (leaving the basic XML skeleton), allows you to set presets, but they are not applied when selected.
"I'm making a preset-file and trying to add some variables. I don't want them to be customizable in the theme editor."
I don't think presets work independently of customizable styles. An example is the default Elemental theme.
- If you remove styles.xml, the Design > Customize link is not available.
- Removing the customizable style definitions in styles.xml (leaving the basic XML skeleton), allows you to set presets, but they are not applied when selected.
@MrKDilington
Hm...
So I have to define the @variables for less in the XML then.
Well I did, that broke the page. This is what I did:
style.xml (only the part I added)
preset-name.less (only the part I added)
content.less (only the part I added)
Hm...
So I have to define the @variables for less in the XML then.
Well I did, that broke the page. This is what I did:
style.xml (only the part I added)
... <style name="Radius" variable="radius" type="size" /> ...
preset-name.less (only the part I added)
... @radius-size: 10px; ...
content.less (only the part I added)
... div.content-style{ border-bottom-left-radius: @radius-size; border-bottom-right-radius: @radius-size; border-bottom-width: 0; border-top-left-radius: @radius-size; border-top-right-radius: @radius-size; } ...
@MrKDilkington
You know what... it worked.... must have been some caching issue. I've tried that sooooo many times and everything broke when I reloaded the page.
I hade to remove the theme preset and then apply it again for it to take. Is it like that every time you add a new variable?
Well thanks for the input :)
PS And thanks for the "Full background image"-block that you've made, using it on every page :) DS
You know what... it worked.... must have been some caching issue. I've tried that sooooo many times and everything broke when I reloaded the page.
I hade to remove the theme preset and then apply it again for it to take. Is it like that every time you add a new variable?
Well thanks for the input :)
PS And thanks for the "Full background image"-block that you've made, using it on every page :) DS
I found a similar site and worked well
<a href="http://seegatesite.com/bootstrap/bootstrap-navbar-online-generator.php">http://seegatesite.com/bootstrap/bootstrap-navbar-online-generator.php</a>
Can anyone give an example of how to make this generator?
thank you before
<a href="http://seegatesite.com/bootstrap/bootstrap-navbar-online-generator.php">http://seegatesite.com/bootstrap/bootstrap-navbar-online-generator.php</a>
Can anyone give an example of how to make this generator?
thank you before
Are you having issues creating the CSS and/or assigning classes to elements in the Auto-Nav view template?