Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • IPS Customization.

    While building this website I have learned a lot about how to customiza different aspects of the IPS products. I see a lot of people struggling to get started with IPS and this section is my attempt to gather what I have learned so others can benefit as well.

    To me nothing is more important than to share knowledge and help others. This section contain my findings and the things I have learned, but I still have much more to learn as well. Together we can learn and evolve the ways we customize the IPS products and while doing that there are no stupid questions. In the forum you can ask any question and we will try our best to answer them.

    Go to the IPS Forum ->
  • CSS Variables & calc

    Jimi Wikman

    CSS Variables & calc

    We're now making use of CSS variables (also known as CSS custom properties). Check out this MDN article if you aren't familiar with them. This enables us to define some values in one place but use them throughout the product - and it allows you to change the value in one place if you wish to do so for your theme. Most of our CSS variables are defined at the top of global.css in the CSS framework, but you'll also see some other local variables defined in other places. Variables are simply used by wrapping the name in the var() function, e.g. var(--positive-light)

    You'll see some variables named --sp-1 and so on. This is our new 4px spacing scale. In 4.5 and going forward, when we style elements we'll generally be using one of these values for widths, heights, borders, spacing etc. to keep everything consistent. You should do the same for elements you create.

    We're also making use of calc(). This is another CSS function that allows math operations to be done. Instead of having to hardcode numbers for positions, sizes etc., we can now use calc() to do it for us based on some other values (often CSS variables).

    CSS Variables for theme settings

    We are deprecating the usage of the {theme} and {hextorgb} tags for color-type theme setting keys (but not for non-color settings or when you need to pass a specific hex code in).

    Instead, color-type theme settings will automatically have a CSS variable created for them, named --theme-setting_key, where setting_key is the key of the setting as defined in the AdminCP. The variable will be a triplet representing the color, for example 255, 255, 255. Therefore, this value can be used with both the rgb and rgba CSS color functions.

    Here's an example. If in the past you'd wanted to use the area_background theme setting in your CSS, you'd do background: {theme="area_background"}. Or if you want some opacity, you'd do background: {hextorgb="area_background" opacity="0.2"}.

    In 4.5, the correct way of using these will be: background: rgb( var(--theme-area_background) ) and background: rgba( var(--theme-area_background), 0.2 ) respectively.

    We're doing this now because it will open up some exciting functionality in future. To be clear, any existing usage of {theme} and {hextorgb} will continue to work fine in 4.5, but we encourage you to move over to the CSS variable approach.


    User Feedback

    Recommended Comments

    There are no comments to display.

    Please sign in to comment

    You will be able to leave a comment after signing in

    Sign In Now

  • Create New...