1
0
-1

I want to alter a style to make all text of a particular type uppercase.
In CSS this can be done with "text-transform: uppercase;". Can this be done in a Stylesheet in composer? If so, how?

    CommentAdd your comment...

    2 answers

    1.  
      2
      1
      0

      Hi Scott,

      For styling like you described Composer supports CSS Snippets. Individual fields can also be configured to have a custom CSS Class applied, you can push that Custom Class into the Composer Stylesheet to apply it to all fields of a particular type.

       

      To add the Snippet navigate in the Structure pane to:

      Nuts & Bolts > CSS Stylesheets

      Then in the Palette, search for:

      CSS

      Finally, drag the CSS Snippet widget from the Palette to the CSS Stylesheets folder. As you're adding the Snippet it will ask you to enter the CSS you want it to contain. In your case the CSS will be something like this:

       

       

      Note: The Composer form will be wrapped in an element with the ID "sfc-container", it's common to prefix all your custom CSS with this ID.

       

      Once the Snippet has been created, edit any block or widget in the form, then navigate to:

      Properties > Custom Styling

      In the Custom Classes [HTML] field enter your new class:

      When you next preview the form, that field should now have the custom class applied which will in turn apply the CSS added in the Snippet.

       

      Hope this helps,

      Jye

        CommentAdd your comment...
      1.  
        1
        0
        -1

        Hi Jye,

        I'm applying this to a section header. It works to capitalise the heading, however it cascades down to all child elements, and so everything becomes capitalised. This is expected behaviour from CSS, since the class applies to all children, but I'm not sure how to neutralise this behaviour in Composer.

        Do you know how I can make this apply to only the items in quesiton? I'm trying to make all L2 section headers uppercase, without affecting their children.

        Thanks,

        Scott

        1. Jye Cusch

          Hi Scott, the section heading use H1 tags. You could try: #sfc-container .text-uppercase h1 { text-transform: uppercase; } in your CSS snippet instead.

        CommentAdd your comment...