Change inline style

[abheeshekj]

Hi
I am using a text editor in the integrity stack
I wanted to ask, how can I change the inline styling of each button and each Icon that i am using, without defining a global CSS.
like changing the button colour/icon colour/text colour
for each individual element using the style attribute

Please Answer:slight_smile:
Thanks and regards
AJ

[Prasant]

Hello @abheeshekj,

Thanks for asking.

In Cornerstone button element, you get all the options to change styling. In most of the cases there is no need to add custom CSS. Here’s a screencast that you can take a look.

That being said, looking at the question it seems that you are not seeing all the advanced options that are available. Under X > Settings > Permissions > User Preference > Advanced Mode select Always On and now when you reload or open the page in Cornerstone, you should see all the advanced option that are available.

Thanks.

[abheeshekj]

Hi im sorry to inform but i have been using the text editor all this while
And i am afraid to lose the customization by using cornerstone
pls pls pls help with the text editor code?

Regards

[nabeel]

Hi again,

So you’re using shortcodes in a text editor. You can use the style attribute for the inline styling of the element. It’s the same as to use in HTML elements for example:

[button type="transparent" shape="pill" size="mini" href="#example" title="Example" style="color: blue; background: red;"]Pill Button[/button]

See I’ve given the inline style to the button element by adding style="color: blue; background: red;" in the shortcode. You can do the similar for all the elements.

To see all the options in the shortcodes you can refer to the following link http://demo.theme.co/integrity-1/shortcodes/

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!