5.7 Color Customization...small hold up - thoughts?
Permalink
Hi All,
I'm in the process of adding in some color customizations using the new 5.7 style customizations area. The only component of it that I'm missing is the "type" component. When I try implementing my own type, when I click the icon in the customizer, it doesn't load any of the options, just a blank dropdown.
To show you what I have currently, here is my styles.xml
In that example above, I'm referencing the "Heading 1" line. I have the variable set to "h1" which is different than the "body" variable that was used in the video example released by c5.
I will be using multiple "type" customization options so I can't use the default "body".
Here is the snippet of code in my presets.less file
Do you know if:
(1) That variable can be changed?
(2) Is there a specific format for that variable that I'm missing? i.e. body-h1?
Attached is the screenshot.
Let me know your thoughts or if you've run into something similar.
Thanks in advance!
I'm in the process of adding in some color customizations using the new 5.7 style customizations area. The only component of it that I'm missing is the "type" component. When I try implementing my own type, when I click the icon in the customizer, it doesn't load any of the options, just a blank dropdown.
To show you what I have currently, here is my styles.xml
<?xml version="1.0"?> <styles version="1.0"> <set name="Navigation"> <style name="Background" variable="navigation-background" type="color" /> <style name="Link Hover Background" variable="navigation-link-backgroundhover" type="color" /> <style name="Link Typography" variable="navigation-link" type="type" /> </set> <set name="CONTENT - SUB PAGES"> <style name="Heading 1" variable="h1" type="type" /> </set> </styles>
In that example above, I'm referencing the "Heading 1" line. I have the variable set to "h1" which is different than the "body" variable that was used in the video example released by c5.
I will be using multiple "type" customization options so I can't use the default "body".
Here is the snippet of code in my presets.less file
@h1-type-font-family: 'Open Sans'; @h1-type-font-size: 14px; @h1-type-font-weight: 300; @h1-type-font-style: normal; @h1-type-color: #154600;
Do you know if:
(1) That variable can be changed?
(2) Is there a specific format for that variable that I'm missing? i.e. body-h1?
Attached is the screenshot.
Let me know your thoughts or if you've run into something similar.
Thanks in advance!
Thanks for the response!
Regarding the file name, I simply misspoke, I have a "defaults.less" and a "fresh.less" which is the name of a preset I'm working on.
Everything about my setup is working just fine. I have many styles being customized. The only issue is the TYPE functionality.
If I use the variable "body" and I go into the C5 style customizer and click that option, the popup gives me all the font related options (font type, color, etc). But, if I use any other variable name (in an effort to have multiple TYPE's), it will not show me all the options.
Any additional thoughts?
Regarding the file name, I simply misspoke, I have a "defaults.less" and a "fresh.less" which is the name of a preset I'm working on.
Everything about my setup is working just fine. I have many styles being customized. The only issue is the TYPE functionality.
If I use the variable "body" and I go into the C5 style customizer and click that option, the popup gives me all the font related options (font type, color, etc). But, if I use any other variable name (in an effort to have multiple TYPE's), it will not show me all the options.
Any additional thoughts?
@chrisb
I am afraid I don't understand what you are trying to do.
"If I use the variable "body" and I go into the C5 style customizer and click that option, the popup gives me all the font related options (font type, color, etc). But, if I use any other variable name (in an effort to have multiple TYPE's), it will not show me all the options."
Can you clarify what you mean by "multiple types"? It might be helpful if you reply with your code attached to the message.
Have you read this section of the documentation covering type customization?
http://documentation.concrete5.org/developers/designing-for-concret...
I am afraid I don't understand what you are trying to do.
"If I use the variable "body" and I go into the C5 style customizer and click that option, the popup gives me all the font related options (font type, color, etc). But, if I use any other variable name (in an effort to have multiple TYPE's), it will not show me all the options."
Can you clarify what you mean by "multiple types"? It might be helpful if you reply with your code attached to the message.
Have you read this section of the documentation covering type customization?
http://documentation.concrete5.org/developers/designing-for-concret...
One issue may be your variables file is called "presets.less" and not "defaults.less".
"Create a Variables File
We need to create the file that's going to store the default values for all the items we want to have in our customizer. Let's create that at css/presets/defaults.less. The name of this file and its location are important. The presets directory contains any preset batches of variables. You can ship multiple presets for attractive color and font combinations. Even if you don't ship presets, you'll want to place these file here and use it as your variables file."
http://documentation.concrete5.org/developers/designing-for-concret...