Iris Style - Advanced Theme Roller Customization
With around 20 years on the job, Matt is one of the most experienced software developers at Pretius. He likes meeting new people, traveling to conferences, and working on different projects.
He’s also a big sports fan (regularly watches Leeds United, Formula 1, and boxing), and not just as a spectator – he often starts his days on a mountain bike, to tune his mind.
Iris is lovely. It has a Dark look
and it has a light style
But is that all it is? ... I want to customize this app it to my corporate colors. I cant do it through Theme Roller. This is all I have
The colors you see in Theme Roller are those palette colors as see in the cards.
I can change the Pillar, but that's as dramatic as it goes for Theme Roller colors.
I can't even change the color of my hot button
Do I have to go back to Vita to manage my colors and lose out on that Iris goodness?
Well not necessarily, sinceIris is still technically Vita, there is all the Vita stuff under the hood should still (and does) work.
What I've done next is to merge Vita in to Iris. i.e, keep the Iris stuff and introduce the missing stuff.
Just set your style to Iris and import this file into Theme Roller. If the pillar goes yellow, its worked!
{
"classes": [],
"vars": {
"@g_Header-BG": "#302D2A",
"@g_Header-FG": "#ffffff",
"@g_Nav-BG": "#302D2A",
"@g_Nav-FG": "#ffffff",
"@g_Nav-Active-BG": "rgba(255, 255, 255, .08)",
"@g_Nav-Active-FG": "#ffffff",
"@g_Nav-BD": "rgba(255, 255, 255, .1)",
"@g_Nav-BS": "rgba(255, 255, 255, .2)",
"@g_Nav-Accent-BG": "@g_Accent-BG",
"@g_Nav-Accent-FG": "@g_Accent-FG",
"@g_Nav-Badge-BG": "@g_Accent-BG",
"@g_Nav-Badge-FG": "@g_Accent-FG",
"@g_Region-Header-BG": "#ffffff",
"@g_Region-Header-FG": "#262626 ",
"@g_Region-BG": "#ffffff",
"@g_Region-FG": "#262626 ",
"@g_Disabled-BG": "#707070",
"@g_Disabled-FG": "#ffffff",
"@g_Primary-BG": "#9ccefd",
"@g_Primary-FG": "#010e1a ",
"@g_Success-BG": "#278701",
"@g_Success-FG": "#ffffff",
"@g_Info-BG": "#056ac8",
"@g_Info-FG": "#ffffff",
"@g_Warning-BG": "#ffc628",
"@g_Warning-FG": "#000000",
"@g_Danger-BG": "#cb1100",
"@g_Danger-FG": "#ffffff",
"@g_Color-Palette-1": "#245d63",
"@g_Color-Palette-1-FG": "#ffffff",
"@g_Color-Palette-2": "#de7f11",
"@g_Color-Palette-2-FG": "#ffffff",
"@g_Color-Palette-3": "#5fb9b5",
"@g_Color-Palette-3-FG": "#000000",
"@g_Color-Palette-4": "#4e4137",
"@g_Color-Palette-4-FG": "#ffffff",
"@g_Color-Palette-5": "#a0c98c",
"@g_Color-Palette-5-FG": "#000000",
"@g_Color-Palette-6": "#b47282",
"@g_Color-Palette-6-FG": "#ffffff",
"@g_Color-Palette-7": "#83401e",
"@g_Color-Palette-7-FG": "#ffffff",
"@g_Color-Palette-8": "#9e7fcc",
"@g_Color-Palette-8-FG": "#ffffff",
"@g_Color-Palette-9": "#fbc26a",
"@g_Color-Palette-9-FG": "#000000",
"@g_Color-Palette-10": "#58316e",
"@g_Color-Palette-10-FG": "#ffffff",
"@g_Color-Palette-11": "#5fa2ba",
"@g_Color-Palette-11-FG": "#ffffff",
"@g_Color-Palette-12": "#317a45",
"@g_Color-Palette-12-FG": "#ffffff",
"@g_Color-Palette-13": "#c46210",
"@g_Color-Palette-13-FG": "#ffffff",
"@g_Color-Palette-14": "#3c6478",
"@g_Color-Palette-14-FG": "#ffffff",
"@g_Color-Palette-15": "#789262",
"@g_Color-Palette-15-FG": "#ffffff",
"@g_Button-BorderRadius": "2px",
"@g_Button-BG": "#f8f8f8",
"@g_Button-Text": "#383838 ",
"@l_Button-Hot-BG": "#056ac8",
"@l_Button-Hot-Text": "#ffffff ",
"@l_Button-Primary-BG": "#9ccefd",
"@l_Button-Primary-Text": "#010e1a ",
"@l_Button-Danger-BG": "#cb1100",
"@l_Button-Danger-Text": "#ffffff ",
"@l_Button-Warning-BG": "#ffc628",
"@l_Button-Warning-Text": "#000000 ",
"@l_Button-Success-BG": "#278701",
"@l_Button-Success-Text": "#ffffff ",
"@l_Button-Simple-BG": "#ffffff",
"@l_Button-Simple-Text": "#404040",
"@g_Form-Label": "#262626 ",
"@g_Form-BorderRadius": "2px",
"@g_Form-Item-BG": "#f9f9f9",
"@g_Form-Item-FG": "#202020 ",
"@irrBg": "#ffffff ",
"@Head-Height": "56px",
"@Nav-Exp": "240px",
"@Actions-Exp": "200px",
"@Side-Exp": "240px",
"@g_Nav_Style": "dark",
"@g_Body-Content-Max-Width": "100%",
"@g_Accent-Pillar": "custom",
"@g_CustomAccent-BG": "#ffff00",
"@g_Header_Style": "dark",
"@g_FontFamily": "system"
},
"customCSS": "",
"useCustomLess": "N"
}
Then you can start tweaking the file some more and keep importing.
After importing, you can see the Hot Button has changed to Vita style
You can then change your Theme Style to fit your wpplication as you please (or get AI to do it for you).
Here is an example of the same app. It's pure Iris with a sprinkling of Vita.
Here is the obligatory Leeds United theme Jon
Tips
Header: Default Iris Dark
If you set the Header - you can not change between Dark/Light anymore - otherwise remove these lines
"@g_Header-BG": "#302D2A",
"@g_Header-FG": "#ffffff",
Navigation:Default Iris Dark
If you set the Navigation - you can not change between Dark/Light anymore - otherwise remove these lines.
"@g_Nav-BG": "#302D2A",
"@g_Nav-FG": "#ffffff",
"@g_Nav-Active-BG": "rgba(255, 255, 255, .08)",
"@g_Nav-Active-FG": "#ffffff",
"@g_Nav-BD": "rgba(255, 255, 255, .1)",
"@g_Nav-BS": "rgba(255, 255, 255, .2)",
"@g_Nav-Accent-BG": "@g_Accent-BG",
"@g_Nav-Accent-FG": "@g_Accent-FG",
"@g_Nav-Badge-BG": "@g_Accent-BG",
"@g_Nav-Badge-FG": "@g_Accent-FG",
Section Defaults
These colors / settings have the following defaults
Vita
Region
Button
Form
Iris
Color Palette
Head (Starting with @Head-Height)
Nav / Misc (Starting with @g_Nav_Style)
Enjoy!
What's the picture? Quality Koi for sale at Springfield Nurseries - Visit Yorkshire
