Forum - Change color of button?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #34729
    Anonymous
    Inactive

    How do you change the color of a Button?

    aek-css-module(‘button’,defaults) => this is imported in the aek-css-config.styl

    I want to add the following characteristics to my button:
    .btn {
    background-color: purple;
    color: white;
    padding: 10px;
    border-top: 20px;
    border-radius: 5px;
    }

    How do I set up this in the aek-css-config.styl ?

    Do I have to include it as:

    aek-css-module(‘button’,btn,{background-color: purple;color: white;padding: 10px;border-top: 20px;border-radius: 5px;})
    and declare it as a var?

    Please help, thanks

    #36516
    Anonymous
    Inactive

    If you are wanting to have a theme which will allow you to use this colour in most areas across the CSS you can either modify one of the existing AEK Themes (Prime or Alt). If you would like to keep these you can then create an additional theme.

    For example in aek-css-config.styl

    // define main colours – for most users this may be sufficient
    primeColor = #001158
    altColor = #6f8ea4

    // set themes for primary and secondary
    aek-css-theme(‘prime’,primeColor)
    aek-css-theme(‘alt’,altColor)

    You can add your own theme in here

    // define main colours – for most users this may be sufficient
    primeColor = #001158
    altColor = #6f8ea4
    purpleColor = purple

    // set themes for primary and secondary
    aek-css-theme(‘prime’,primeColor)
    aek-css-theme(‘alt’,altColor)
    aek-css-theme(‘purple’, purpleColor)

    Then on your button element within your jsx file change the variation to “purple” like this

    <Button variation=”purple”>Hello World</Button>

    Hope this helps!

    #36517
    Anonymous
    Inactive

    If you are wanting to have a theme which will allow you to use this colour in most areas across the CSS you can either modify one of the existing AEK Themes (Prime or Alt). If you would like to keep these you can then create an additional theme.

    For example in aek-css-config.styl

    // define main colours – for most users this may be sufficient
    primeColor = #001158
    altColor = #6f8ea4

    // set themes for primary and secondary
    aek-css-theme(‘prime’,primeColor)
    aek-css-theme(‘alt’,altColor)

    You can add your own theme in here

    // define main colours – for most users this may be sufficient
    primeColor = #001158
    altColor = #6f8ea4
    purpleColor = purple

    // set themes for primary and secondary
    aek-css-theme(‘prime’,primeColor)
    aek-css-theme(‘alt’,altColor)
    aek-css-theme(‘purple’, purpleColor)

    Then on your button element within your jsx file change the variation to “purple” like this

    <Button variation=”purple”>Hello World</Button>

    Hope this helps!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.