alank
(Andrew Lank)
October 15, 2019, 10:13am
1
Is there a way to get around Discourse reformatting an Anchor as we would like it displayed as a button and therefore would like a specific style.
the post is posted with the .raw property (I’ve tried to use ‘.cooked’ but this doesn’t seem supported despite what the API states).
posting <a aria-label=“homepage-link” href=“http://blablabla...“>View Homepage</a>
And it is displayed in the Discourse Post… or Category description as
<div class="cooked"><a>View Homepage</a></div>
I’ve also tried
[View this page][http://blablabla]
And this was converted to:
<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">http://blablabla</a></div>
However if I could simply have:
<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">View this page</a></div>
I could possibly target it via CSS from the body element to apply the CSS button style we need.
alank
(Andrew Lank)
October 15, 2019, 12:35pm
2
Resolved I think…
[view this page](http://blablabla)
Target CSS using:
body.<insert name of top category here>-* div.cooked a
However
If someone has a solution for the above it would be a little cleaner and easier to add our own classes to the <a>
link and avoid top Category.
Thanks in advance.
Johani
(Joe)
October 15, 2019, 1:17pm
3
The way to do that is to use something like
I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin.
// wrapped in div.d-wrap
[wrap=baz foo=bar]Content[/wrap]
// wrapped in div.d-wrap
[wrap=baz foo=bar]
Content
[/wrap]
// wrapped in div.d-wrap
[wrap=baz foo=bar]
[/wrap]
// this one will be rendered as a span.d-wrap instead of a div.d-wrap
a [wrap=baz]Content[/wrap] b
The name of the component w…
For example
[wrap=link-button][Link Text](http://meta.discourse.org)[/wrap]
renders as
and the markup is
<div class="d-wrap" data-wrap="link-button">
<p>
<a href="http://meta.discourse.org">Link Text</a>
</p>
</div>
and you can then style it in CSS using
[data-wrap="link-button"] {
a {
// styles for the link
}
}
You can change [wrap=link-button]
to any value you want like
[wrap=custom-button]
or
[wrap=home-link]
or
[wrap=foobar]
and then use that to target the link like the example above.
8 Likes
alank
(Andrew Lank)
October 15, 2019, 3:06pm
4
@Johani Very interesting!!! Thanks for your work on this, we will look into this option, it would be great to have in the API docs on Post raw property settings in the future. Or a central doc that groups/defines all possibilities with Post’s UPDATE:/POST: property