[-- Attachment #1: Type: text/plain, Size: 498 bytes --] Hey there, So I'm in the process of creating an art portfolio site, but am wondering if the following idea is possible: Is it possible to create HTML style buttons using Org Mode itself? Would I need to do this via a '#begin-src' block in order to create the button itself? I ask because I'm aware on how to force custom stylesheets for a given Org Mode doc that's converted to an HTML page, but didn't know if I could populate some buttons so that I can stylize them accordingly. Thanks, Sam [-- Attachment #2: Type: text/html, Size: 817 bytes --]
Hi Samuel: Samuel Banya writes: > Is it possible to create HTML style buttons using Org Mode itself? One possibility is to use a custom link. For example: #+begin_src emacs-lisp (org-link-set-parameters "button" :face '(:foreground "green" :underline t) :export (lambda (path desc backend) (when (eq backend 'html) (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc)))) #+end_src #+HTML_HEAD: <style> .mybutton{background-color:#4CAF50;border:none;color:white;padding:15px32px;text-align:center;text-decoration:none;display:inline-block;font-size:18px;margin:4px2px;cursor:pointer;</style> [[button:some target][This is a button]] NB: I have borrowed the style from here: https://www.w3schools.com/csS/css3_buttons.asp Best regards, Juan Manuel
[-- Attachment #1: Type: text/plain, Size: 1321 bytes --] I tried to use this idea, but I'm not sure how to set the 'target' in your example: [[button:some target][This is a button]] For example, I tried this: [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link]] But received this error: user-error: Unable to resolve link: "button:http://www.sambanya.com/artgallery.html" Thanks, Sam On Thu, Feb 17, 2022, at 5:10 PM, Juan Manuel Macías wrote: > Hi Samuel: > > Samuel Banya writes: > > > Is it possible to create HTML style buttons using Org Mode itself? > > One possibility is to use a custom link. For example: > > #+begin_src emacs-lisp > (org-link-set-parameters "button" > :face '(:foreground "green" :underline t) > :export (lambda (path desc backend) > (when (eq backend 'html) > (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc)))) > #+end_src > > #+HTML_HEAD: <style> .mybutton{background-color:#4CAF50;border:none;color:white;padding:15px32px;text-align:center;text-decoration:none;display:inline-block;font-size:18px;margin:4px2px;cursor:pointer;</style> > > [[button:some target][This is a button]] > > NB: I have borrowed the style from here: https://www.w3schools.com/csS/css3_buttons.asp > > Best regards, > > Juan Manuel > [-- Attachment #2: Type: text/html, Size: 2292 bytes --]
[-- Attachment #1: Type: text/plain, Size: 2130 bytes --] Also, how could you possible add an 'id' or 'class' attribute to an existing lOrg mode style hyperink? I ask because I like your approach to just modify the stylesheet, but am unaware of how to actually utilize HTML's concept or 'id' or 'class' in an Org doc itself when using basic Org mode style hyperlinks [[link address][link description]] Also, I ask because I found a similar video to just style the hyperlink in a similar fashion but would need to somehow assign a class or id value to the HTML element that's exported from the hyperlink itself: Styling HTML Anchor Tag (Link) To Look Like A Button | CSS Tutorial (https://www.youtube.com/watch?v=p5nogm7ul6A) Thanks, Sam On Fri, Feb 18, 2022, at 2:59 PM, Samuel Banya wrote: > I tried to use this idea, but I'm not sure how to set the 'target' in your example: > [[button:some target][This is a button]] > > For example, I tried this: > [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link]] > > But received this error: > user-error: Unable to resolve link: "button:http://www.sambanya.com/artgallery.html" > > Thanks, > > Sam > > On Thu, Feb 17, 2022, at 5:10 PM, Juan Manuel Macías wrote: >> Hi Samuel: >> >> Samuel Banya writes: >> >> > Is it possible to create HTML style buttons using Org Mode itself? >> >> One possibility is to use a custom link. For example: >> >> #+begin_src emacs-lisp >> (org-link-set-parameters "button" >> :face '(:foreground "green" :underline t) >> :export (lambda (path desc backend) >> (when (eq backend 'html) >> (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc)))) >> #+end_src >> >> #+HTML_HEAD: <style> .mybutton{background-color:#4CAF50;border:none;color:white;padding:15px32px;text-align:center;text-decoration:none;display:inline-block;font-size:18px;margin:4px2px;cursor:pointer;</style> >> >> [[button:some target][This is a button]] >> >> NB: I have borrowed the style from here: https://www.w3schools.com/csS/css3_buttons.asp >> >> Best regards, >> >> Juan Manuel >> > [-- Attachment #2: Type: text/html, Size: 3327 bytes --]
Samuel Banya writes: > I tried to use this idea, but I'm not sure how to set the 'target' in > your example: > [[button:some target][This is a button]] > > For example, I tried this: > [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page > Link]] > > But received this error: > user-error: Unable to resolve link: > "button:http://www.sambanya.com/artgallery.html" Hi Samuel, It's strange... I have tried your link, and it works fine for me. I have made this video capture: https://cloud.disroot.org/s/SaHR7jenTWxFWZt If you evaluate the `org-ling-set-parameters' expression that I gave you, you should get when exporting to html: <p> <form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link</button></form> </p> What version of org are you using? (I don't have much knowledge of html or css, in any case. Just for the basics). Best regards, Juan Manuel
Juan Manuel Macías writes:
> If you evaluate the `org-ling-set-parameters' expression that I gave
> you, you should get when exporting to html:
>
> <p>
> <form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link</button></form>
> </p>
P.S.: I forgot to tell you that if you want to visit the link also from the
Org file itself, you must add this parameter to org-link-set-parameters:
:follow (lambda (path) (browse-url path))
Best regards,
jm
[-- Attachment #1: Type: text/plain, Size: 879 bytes --] To clarify, did you evaluate that code block on the org mode docs itself? I ask because if I try to evaluate it, aka 'C-c C-c' on the '#begin_src' block, nothing happens. And after I export the Org Doc to HTML, it still gives me that same error as before. On Fri, Feb 18, 2022, at 3:51 PM, Juan Manuel Macías wrote: > Juan Manuel Macías writes: > > > If you evaluate the `org-ling-set-parameters' expression that I gave > > you, you should get when exporting to html: > > > > <p> > > <form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link</button></form> > > </p> > > P.S.: I forgot to tell you that if you want to visit the link also from the > Org file itself, you must add this parameter to org-link-set-parameters: > > :follow (lambda (path) (browse-url path)) > > Best regards, > > jm > [-- Attachment #2: Type: text/html, Size: 1481 bytes --]
Samuel Banya writes: > To clarify, did you evaluate that code block on the org mode docs > itself? The code must be evaluated *before* using that new type of link, or saved to your ~/.emacs. You can simply evaluate it in your `scratch' buffer: (org-link-set-parameters "button" :face '(:foreground "green4" :underline t) :follow (lambda (path) (browse-url path)) :export (lambda (path desc backend) (when (eq backend 'html) (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc)))) If you want to pass the class or id 'manually' to each link, and thus have more control, you can evaluate this other version, where the class or id would be added at the end of the link description, after (for example) "!style": (org-link-set-parameters "button" :face '(:foreground "green4" :underline t) :follow (lambda (path) (browse-url path)) :export (lambda (path desc backend) (when (eq backend 'html) (let* ((style (if (string-match "\\(!style .+\\)" desc) (match-string 1 desc) "")) (desc (replace-regexp-in-string style "" desc))) (format "<form><button %s formaction=\"%s\">%s</button></form>" style path desc))))) Example: [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]] == HTML ==> <p> <form><button !style class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link </button></form> </p> > I ask because if I try to evaluate it, aka 'C-c C-c' on the > '#begin_src' block, nothing happens. When you evaluate the code and add the new link type 'button', does it appear in your document with the face defined for that link: green, underlined? Have you tried testing it on a clean Emacs/Org? Best regards, Juan Manuel
Juan Manuel Macías writes: > If you want to pass the class or id 'manually' to each link, and thus > have more control, you can evaluate this other version, where the class > or id would be added at the end of the link description, after (for > example) "!style": PS: Sorry, this is the correct code: (org-link-set-parameters "button" :face '(:foreground "green4" :underline t) :follow (lambda (path) (browse-url path)) :export (lambda (path desc backend) (when (eq backend 'html) (let ((style (if (string-match "\\(!style\\)\\(.+\\)" desc) (match-string 2 desc) "")) (desc (replace-regexp-in-string "\\(!style .+\\)" "" desc))) (format "<form><button %s formaction=\"%s\">%s</button></form>" style path desc))))) Example: [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]] == HTML ==> <p> <form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link </button></form> </p>
[-- Attachment #1: Type: text/plain, Size: 1238 bytes --] Thanks for this, will try this for my Emacs config. On Sat, Feb 19, 2022, at 4:51 AM, Juan Manuel Macías wrote: > Juan Manuel Macías writes: > > > If you want to pass the class or id 'manually' to each link, and thus > > have more control, you can evaluate this other version, where the class > > or id would be added at the end of the link description, after (for > > example) "!style": > > PS: Sorry, this is the correct code: > > (org-link-set-parameters "button" > :face '(:foreground "green4" :underline t) > :follow (lambda (path) (browse-url path)) > :export (lambda (path desc backend) > (when (eq backend 'html) > (let ((style (if (string-match "\\(!style\\)\\(.+\\)" desc) > (match-string 2 desc) > "")) > (desc (replace-regexp-in-string "\\(!style .+\\)" "" desc))) > (format "<form><button %s > formaction=\"%s\">%s</button></form>" style > path desc))))) > > > Example: > > [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]] > > == HTML ==> > > <p> > <form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link </button></form> > </p> > > [-- Attachment #2: Type: text/html, Size: 2209 bytes --]
[-- Attachment #1: Type: text/plain, Size: 1745 bytes --] Hey Juan, Just wanted to let you know that this works beautifully! I wish I was as good at Elisp to make this in the first place, but this really helps since I wanted to have some minimum overhead for 2 separate websites to be able to just write in Org Mode but include ideas for buttons, with classes and ID values. This helps a ton, thanks so much as it totally worked! :) Sincerely, Sam On Sun, Feb 20, 2022, at 7:38 PM, Samuel Banya wrote: > Thanks for this, will try this for my Emacs config. > > On Sat, Feb 19, 2022, at 4:51 AM, Juan Manuel Macías wrote: >> Juan Manuel Macías writes: >> >> > If you want to pass the class or id 'manually' to each link, and thus >> > have more control, you can evaluate this other version, where the class >> > or id would be added at the end of the link description, after (for >> > example) "!style": >> >> PS: Sorry, this is the correct code: >> >> (org-link-set-parameters "button" >> :face '(:foreground "green4" :underline t) >> :follow (lambda (path) (browse-url path)) >> :export (lambda (path desc backend) >> (when (eq backend 'html) >> (let ((style (if (string-match "\\(!style\\)\\(.+\\)" desc) >> (match-string 2 desc) >> "")) >> (desc (replace-regexp-in-string "\\(!style .+\\)" "" desc))) >> (format "<form><button %s >> formaction=\"%s\">%s</button></form>" style >> path desc))))) >> >> >> Example: >> >> [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]] >> >> == HTML ==> >> >> <p> >> <form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link </button></form> >> </p> >> >> > [-- Attachment #2: Type: text/html, Size: 2915 bytes --]
Hi Samuel,
Samuel Banya writes:
> Hey Juan,
>
> Just wanted to let you know that this works beautifully!
>
> I wish I was as good at Elisp to make this in the first place, but
> this really helps since I wanted to have some minimum overhead for 2
> separate websites to be able to just write in Org Mode but include
> ideas for buttons, with classes and ID values.
>
> This helps a ton, thanks so much as it totally worked! :)
You're welcome! I'm glad it works and is useful to you. Org links
have great potential :-)
Best regards,
Juan Manuel