Create reusable classes

[quasikristall]

Hi! I am new to Pro / Cornerstone and learning all the perks of the builder. One thing I haven’t gotten behind is the use of classes. I would like to declare a class with all the styling setting that I put in the builder / inspector area and then globally reuse this class to style other elements of the same type (i.e. special format for text that’s reused throughout the site). For these cases there is no value to create a component, since the content will be static. But I also don’t want to style 20+ elements of the same type.

How do I create classes out of the styling settings from the inspector panel?

Thank you for your support.

[mircotripoczky]

You can actually use components for that and add the ability to edit the content of that component at each occurrence by adding parameters to your component… see here: Text area parameters.

The benefit is, that if you decide to change the style of the element through out the whole site, you just change it at the component while keeping the content that was made editable using the parameters.

[tristup]

Hi @mircotripoczky,

Glad that you have correctly pointed out and guided this.

Thanks

[quasikristall]

Thank you very much for your support. Good to know this is the way to go!

I’m working with components now and following the tutorials online. Everything worked fine when creating the buttons, but now that I want to create a component for different headings, I can’t figure out how to do it. Everything works fine (creating + mapping params + export) until I place the component on a page. When implemented on a page, the component loses all it’s styling.

How it looks in the component builder:

How it looks on a page:

I do not have the same problem with buttons. These work just fine.

Thank you again for your help!

[mircotripoczky]

I just tried it and it works. Headline element with subhead as base.

Json of the element:

{
  "headline" : {
               "type" : "text-editor",
               "label" : "Headline",
               "initial" : "The headline"
  },
  "subhead" : {
               "type" : "text-editor",
               "label" : "Subhead",
               "initial" : "The subheadline"
      }
}

which shows like that once the component is placed at the page builder.

and at both (component editor + page editor) they look the same.

Do you have some custom page or global CSS that may override the element styles?

[quasikristall]

Thanks again for your support! While the component works better with your JSON-code now, the heading is still not showed in the font-size I chose. There is no other css or theme on the site since I only just installed Pro / Cornerstone.

It does not matter where I put the font size (under setup or format), when I put my component on the page, it always deletes the styling. Is there a way to set global stylings for headings? I can’t find it and maybe there’s the problem. There is only one font in the font manager that I use for all text, but in different sizes and stylings.

Edit: I just found out, that it takes the size of the heading only when I put the size (2 em) in both under setup and format. But then it multiplies the size in the component builder. How can that be?

[mircotripoczky]

Glad the json worked out.

About the font size issue I’m not sure. In my test I’ve let it at 1em (which has no impact if you use px for the headline format and subheadline) and just changed it to 36px at the format for the headline and e.g . 24px for the subheadline while in the component builder.

How did you set up your “Root Font Size” at the global options? I left mine at standard: Stepped, Unit: px and all at 14px. “Body and Content” font size I’ve set to 1rem at the same options.

The globals you can find here:

[marc_a]

Hey @mircotripoczky,

Thanks for sharing your ideas about Components, we really appreciate your time and effort.

Cheers!