Re: Question Regarding Creating HTML Style Buttons With Org Mode
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
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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 ">formaction=\"%s\">%s" style >>path desc) >> >> >> Example: >> >> [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link >> !style class="mybutton"]] >> >> == HTML ==> >> >> >> > formaction="http://www.sambanya.com/artgallery.html;>Art Gallery Page Link >> >> >> >> >
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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 "formaction=\"%s\">%s" style >path desc) > > > Example: > > [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link > !style class="mybutton"]] > > == HTML ==> > > > formaction="http://www.sambanya.com/artgallery.html;>Art Gallery Page Link > > > >
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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 "%s" style path desc) Example: [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]] == HTML ==> http://www.sambanya.com/artgallery.html;>Art Gallery Page Link
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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 "%s" 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 "%s" style path desc) Example: [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]] == HTML ==> http://www.sambanya.com/artgallery.html;>Art Gallery Page Link > 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
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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: > > > > > > > formaction="http://www.sambanya.com/artgallery.html;>Art Gallery Page > > Link > > > > 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 >
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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: > > > formaction="http://www.sambanya.com/artgallery.html;>Art Gallery Page > Link > 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
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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: http://www.sambanya.com/artgallery.html;>Art Gallery Page Link 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
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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 "> formaction=\"%s\">%s" path desc
>> #+end_src
>>
>> #+HTML_HEAD:
>> .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;
>>
>> [[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
>>
>
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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 " formaction=\"%s\">%s" path desc
> #+end_src
>
> #+HTML_HEAD:
> .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;
>
> [[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
>
Re: Question Regarding Creating HTML Style Buttons With Org Mode
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 "%s" path desc
#+end_src
#+HTML_HEAD:
.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;
[[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
Question Regarding Creating HTML Style Buttons With Org Mode
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
