emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed

From: "Samuel Banya" <sbanya@fastmail.com>
To: "Charles Berry" <emacs-orgmode@gnu.org>
Subject: Re: Question Regarding Creating HTML Style Buttons With Org Mode
Date: Fri, 18 Feb 2022 15:04:04 -0500	[thread overview]
Message-ID: <57d60fcf-6730-45da-91ea-176881cefe8e@www.fastmail.com> (raw)
In-Reply-To: <45e958d4-9c0c-4ea6-90b7-433ed9f38d44@www.fastmail.com>

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

next prev parent reply	other threads:[~2022-02-18 20:05 UTC|newest]

Thread overview: 12+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
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 [this message]
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

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

  List information: https://www.orgmode.org/

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=57d60fcf-6730-45da-91ea-176881cefe8e@www.fastmail.com \
    --to=sbanya@fastmail.com \
    --cc=emacs-orgmode@gnu.org \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link

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).