emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
* Question Regarding Creating HTML Style Buttons With Org Mode
@ 2022-02-17 14:56 Samuel Banya
  2022-02-17 22:10 ` Juan Manuel Macías
  0 siblings, 1 reply; 12+ messages in thread
From: Samuel Banya @ 2022-02-17 14:56 UTC (permalink / raw)
  To: Charles Berry

[-- 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 --]

^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-17 14:56 Question Regarding Creating HTML Style Buttons With Org Mode Samuel Banya
@ 2022-02-17 22:10 ` Juan Manuel Macías
  2022-02-18 19:59   ` Samuel Banya
  0 siblings, 1 reply; 12+ messages in thread
From: Juan Manuel Macías @ 2022-02-17 22:10 UTC (permalink / raw)
  To: Samuel Banya; +Cc: orgmode

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 


^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-17 22:10 ` Juan Manuel Macías
@ 2022-02-18 19:59   ` Samuel Banya
  2022-02-18 20:04     ` Samuel Banya
  2022-02-18 20:38     ` Juan Manuel Macías
  0 siblings, 2 replies; 12+ messages in thread
From: Samuel Banya @ 2022-02-18 19:59 UTC (permalink / raw)
  To: Juan Manuel Macías; +Cc: Charles Berry

[-- 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 --]

^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-18 19:59   ` Samuel Banya
@ 2022-02-18 20:04     ` Samuel Banya
  2022-02-18 20:38     ` Juan Manuel Macías
  1 sibling, 0 replies; 12+ messages in thread
From: Samuel Banya @ 2022-02-18 20:04 UTC (permalink / raw)
  To: Charles Berry

[-- 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 --]

^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-18 19:59   ` Samuel Banya
  2022-02-18 20:04     ` Samuel Banya
@ 2022-02-18 20:38     ` Juan Manuel Macías
  2022-02-18 20:51       ` Juan Manuel Macías
  1 sibling, 1 reply; 12+ messages in thread
From: Juan Manuel Macías @ 2022-02-18 20:38 UTC (permalink / raw)
  To: Samuel Banya; +Cc: orgmode

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 


^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-18 20:38     ` Juan Manuel Macías
@ 2022-02-18 20:51       ` Juan Manuel Macías
  2022-02-19  1:02         ` Samuel Banya
  0 siblings, 1 reply; 12+ messages in thread
From: Juan Manuel Macías @ 2022-02-18 20:51 UTC (permalink / raw)
  To: Samuel Banya; +Cc: orgmode

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


^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-18 20:51       ` Juan Manuel Macías
@ 2022-02-19  1:02         ` Samuel Banya
  2022-02-19  9:41           ` Juan Manuel Macías
  0 siblings, 1 reply; 12+ messages in thread
From: Samuel Banya @ 2022-02-19  1:02 UTC (permalink / raw)
  To: Juan Manuel Macías; +Cc: Charles Berry

[-- 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 --]

^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-19  1:02         ` Samuel Banya
@ 2022-02-19  9:41           ` Juan Manuel Macías
  2022-02-19  9:51             ` Juan Manuel Macías
  0 siblings, 1 reply; 12+ messages in thread
From: Juan Manuel Macías @ 2022-02-19  9:41 UTC (permalink / raw)
  To: Samuel Banya; +Cc: orgmode

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 


^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-19  9:41           ` Juan Manuel Macías
@ 2022-02-19  9:51             ` Juan Manuel Macías
  2022-02-21  0:38               ` Samuel Banya
  0 siblings, 1 reply; 12+ messages in thread
From: Juan Manuel Macías @ 2022-02-19  9:51 UTC (permalink / raw)
  To: Juan Manuel Macías; +Cc: orgmode

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>


^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-19  9:51             ` Juan Manuel Macías
@ 2022-02-21  0:38               ` Samuel Banya
  2022-02-23  2:25                 ` Samuel Banya
  0 siblings, 1 reply; 12+ messages in thread
From: Samuel Banya @ 2022-02-21  0:38 UTC (permalink / raw)
  To: Charles Berry

[-- 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 --]

^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-21  0:38               ` Samuel Banya
@ 2022-02-23  2:25                 ` Samuel Banya
  2022-02-23  2:33                   ` Juan Manuel Macías
  0 siblings, 1 reply; 12+ messages in thread
From: Samuel Banya @ 2022-02-23  2:25 UTC (permalink / raw)
  To: Charles Berry

[-- 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 --]

^ permalink raw reply	[flat|nested] 12+ messages in thread

* Re: Question Regarding Creating HTML Style Buttons With Org Mode
  2022-02-23  2:25                 ` Samuel Banya
@ 2022-02-23  2:33                   ` Juan Manuel Macías
  0 siblings, 0 replies; 12+ messages in thread
From: Juan Manuel Macías @ 2022-02-23  2:33 UTC (permalink / raw)
  To: Samuel Banya; +Cc: orgmode

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 


^ permalink raw reply	[flat|nested] 12+ messages in thread

end of thread, other threads:[~2022-02-23  2:34 UTC | newest]

Thread overview: 12+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2022-02-17 14:56 Question Regarding Creating HTML Style Buttons With Org Mode Samuel Banya
2022-02-17 22:10 ` Juan Manuel Macías
2022-02-18 19:59   ` Samuel Banya
2022-02-18 20:04     ` Samuel Banya
2022-02-18 20:38     ` Juan Manuel Macías
2022-02-18 20:51       ` Juan Manuel Macías
2022-02-19  1:02         ` Samuel Banya
2022-02-19  9:41           ` Juan Manuel Macías
2022-02-19  9:51             ` Juan Manuel Macías
2022-02-21  0:38               ` Samuel Banya
2022-02-23  2:25                 ` Samuel Banya
2022-02-23  2:33                   ` Juan Manuel Macías

Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).