Composition setup but only to specific parts of a page
Asked by Bence L?posi:

Hi,

Does anyone know if it's possible to apply [composition setup macro](https://docs.servicerocket.com/composition/macro-reference/composition-setup) settings to only a specific part of a page?  
My example would be a cloak.toggle.type = none but I only want to apply it to specific cloak toggles not to all of those on my page. I'm not super good with CSS so I'm not sure if it were possible to apply a custom CSS to this macro.

I would prefer if I could solve this without creating separate pages and embedding them into a bigger one.

Thanks.


Answers:
author: Mervyn Toh
body: Hi Bence,

It is possible to use CSS to achieve this use case; here's the CSS to apply *cloak.toggle.type = none* on one Cloak macro:

```
#tgl_content_<the ID you've set on Toggle/Cloak macro> {display:none;}
```

Here's an example storage format:

```
<ac:structured-macro ac:name="html" ac:schema-version="1" ac:macro-id="0e87fb06-4269-42dc-bca6-fc26e726357e"><ac:plain-text-body><![CDATA[<style>#tgl_content_cloak2 {display:none;}</style>]]></ac:plain-text-body></ac:structured-macro><p>Toggle 1&nbsp;<ac:structured-macro ac:name="toggle-cloak" ac:schema-version="1" ac:macro-id="c7f130c9-07a8-4e12-8315-132378bb05c4"><ac:parameter ac:name="id">cloak1</ac:parameter></ac:structured-macro></p><ac:structured-macro ac:name="cloak" ac:schema-version="1" ac:macro-id="77fb9755-1489-4893-b63d-6cab66f99f7d"><ac:parameter ac:name="id">cloak1</ac:parameter><ac:rich-text-body><p>content 1</p></ac:rich-text-body></ac:structured-macro><p>Toggle 2&nbsp;<ac:structured-macro ac:name="toggle-cloak" ac:schema-version="1" ac:macro-id="1087ca36-c049-4ed4-96a4-404a5ed19c25"><ac:parameter ac:name="id">cloak2</ac:parameter></ac:structured-macro></p><ac:structured-macro ac:name="cloak" ac:schema-version="1" ac:macro-id="243c0677-1a05-46b1-a72f-7afb0b8681ce"><ac:parameter ac:name="id">cloak2</ac:parameter><ac:rich-text-body><p>content 2</p></ac:rich-text-body></ac:structured-macro>
```

comments: author: Bence L?posi
body: Thank you, this worked perfectly.


author: Timmy T
body: Hi Mervyn,

Can you give me an example of how this would be incorporated into mine? My goal is to replace the pointer arrows with an image (<https://docs.servicerocket.com/composition/user-guide/customizing-tabs-and-cloaks>). I can get it working, but it applies the same images to all Toggles. I'm hoping this would allow me to have a composition setup for each toggle.

My composition setup:

```
cloak.toggle.type = custom cloak.toggle.open = https://i.picsum.photos/id/360/200/300.jpg?hmac=Fl1CgUfxrFjmcS1trYDG80XpEjYixcXfc2uTtCxFkDw cloak.toggle.close = https://i.picsum.photos/id/360/200/300.jpg?hmac=Fl1CgUfxrFjmcS1trYDG80XpEjYixcXfc2uTtCxFkDw
```

Source:

```
<ac:structured-macro ac:macro-id="0ca7600d-24d6-41a0-9a6d-dbc96df33b93" ac:name="composition-setup" ac:schema-version="1">
<ac:plain-text-body><![CDATA[cloak.toggle.type = custom
cloak.toggle.open = https://i.picsum.photos/id/360/200/300.jpg?hmac=Fl1CgUfxrFjmcS1trYDG80XpEjYixcXfc2uTtCxFkDw
cloak.toggle.close = https://i.picsum.photos/id/360/200/300.jpg?hmac=Fl1CgUfxrFjmcS1trYDG80XpEjYixcXfc2uTtCxFkDw]]></ac:plain-text-body>
</ac:structured-macro>
```

Where would I add that line into?

```
(#tgl_content_<the ID you've set on Toggle/Cloak macro> {display:none;})
```


author: Timmy T
body: [@Mervyn Toh](/t5/user/viewprofilepage/user-id/373136)


author: Cristobal Maul?n
body: Hi [@Timmy T](/t5/user/viewprofilepage/user-id/4866035) ,

Nice to talk to you! my name is Cris and I'm part of the ServiceRocket support team.

Regarding to your question, we can state that what Mervyn mentioned earlier on this post is meant to hide a second Cloak, which is possible by adding the following line into an HTML macro:

*#tgl_content_\<the ID you've set on Toggle/Cloak macro\> {display:none;}*

[Here is more information](https://docs.servicerocket.com/composition/knowledge-base/how-to-customize-composition-tabs-using-html-macro) about this specific configuration.

Now regarding to your use case about "applying different images to each arrow/toggle", we can confirm that this is not possible for the time being. However, there is a feature request related to this subject in our Ideas Portal: [COM-I-10](https://ideas.atlassian.servicerocket.com/ideas/COM-I-10)

We encourage you to up-vote it and leave your thoughts in a comment, for our products team review. By doing this, your feature/improvement request goes through proper review and prioritization process. Rest assured, no feature/improvement request is taken for granted.

I hope this answer has been helpful and in case you have any further questions, remember that you can always contact us through [our portal](https://servicerocket-apps.atlassian.net/servicedesk/customer/portal/1).

Thanks \& Regards,  
Cris Maul?n  
ServiceRocket Apps Support

***We've Got Your Back!***


Tags: confluence-server

server

servicerocket