-
Hi there,
this is my first attempt to integrate Global Styles. I defined Global Styles for container, button and headlines.
When applying Global Styles to a page, everything works fine. When using them inside a Page hero, however, I’m struggling with an extra margin.
This is how the relevant Global Styles are set up.
Please let me know how you would track the relevant setting down.
Thanks,
Jan -
Hi Jan,
The version of the global style you are using is the legacy global style, I would not recommend using it at this point anymore, you should be updating the plugins and use the newly implanted global style instead.
Let me know 🙂
-
Hi Ying,
thanks for your heads up regarding the new version.
Too bad there is no migration option for Global styles created in the legacy version ;-(
Anyway I re-created most of then in the meantime.
Questions: how do you apply…
(1) full-width to a container inside a global style?
(2) the icon size inside a global style for a headline-block?What I do like about the new version though is the integration of Effects. Those come in really handy 😉
Best,
Jan -
(1) full-width to a container inside a global style?
Containers are full width to its parent element by default, so you do not need to set that.
(2) the icon size inside a global style for a headline-block?
1. In the global style, click the more button:
https://app.screencast.com/udwe79jU7SlpZ2. Then click the Icon to create a sub global style for the icon in the headline, now you will see the global style selector changes to
.your-global-style-name .gb-icon svg3. Now you can set
widthandheightfor the icon. -
This answers both questions very well, Ying. Thanks.
A follow-on regarding #2: Which setting inside Global Styles removes the text from the headline block (icon only)?
Also, I noticed that compared to the legacy version Global Styles for the Grid-block disappeared. Instead there is a layout option called “grid” for container blocks. Please share some guidance on how to setup a (10-45-35-10 grid) inside global styles.
Any advice is much appreciated.
Best,
Jan -
A follow-on regarding #2: Which setting inside Global Styles removes the text from the headline block (icon only)?
That’s not something controlled by CSS, so no, global style does not control that.
Please share some guidance on how to setup a (10-45-35-10 grid) inside global styles.
GB’s Grid block is using flexbox, not Grid.
However if you want to create grid, you can. You can set the container to display:grid, then choose 4 columns layout.
For the grid children, you need to create 4 sub global styles and set the
columnand/orrowfor each sub-global style. I hope that’s clear. -
Hi Ying,
thanks for sharing these valuable insights. I also came across this Video from Jonathan, which nicely illustrates what you suggested re grids in Global Styles.
My lessons learned from the video: Don’t create a single Global style for an element. But rather think in terms of single layout options which you can apply to multiple elements in a flexible manner.
Just in case others coming from the Legacy Version need to make that mind shift also 😉
Best regards,
Jan -
You are welcome 🙂
The new global style is very powerful, enjoy!
- You must be logged in to reply to this topic.