https://developers.google.com/recaptcha/docs/display
I would like to know how to apply styling to the image selector.
grecaptcha.render(
container,
parameters
)
According to the document: container is the HTML element to render the reCAPTCHA widget. Specify either the ID of the container (string) or the DOM element itself.
Then, I try to apply css to the container and pass it to the render method. However, it only applies to the grecaptcha-badge div.
I have no idea how to adjust the image-selector position.
visibility: visible; position: absolute; width: 1303px; top: 146px;
It seems the style is controlled by the google js: https://www.google.com/recaptcha/api.js
What could I do to edit the image-selector's style?
This question is quite old, but for those who want to customize the reCAPTCHA here is a solution: https://custom-captcha.com/
It has no image captchas but instead uses the new reCAPTCHA v3 in the background. You can customize the logo, the text, and the brand name as well. Also you can apply any CSS you want to it.
Related
I am currently using gatsby for a project and when i put gatsby Img component inside Link component so that it's clickable, the image gets shrinked to its parent component(the link component). i know gatsby fluid Img stretches or shrinks to its parent's width but i want it to show as full image. i tried using fixed instead of fluid but it didn't work and it's even tried specifying width while querying.
code
frontend part
It seems clearly a CSS issue since your <Link> is shrinking to the text (sssssssssss) length.
Debug your .thumbnail class and the component to see what's happening inside. For example, a CSS rules like the following will work but maybe don't fit your design specs:
.thumbnail{
position: relative;
width: 100%;
}
.thumbnail a,
.thumbnail img {
width: 100%;
}
Take a look at the resultant HTML output the adjust your selectors, since gatsby-image wraps the <Img> inside a nested structure, what may affect your CSS rules.
It seems that you are using Bootstrap (hence the w-100) so try adding it to the wrapper (<Link> component),
I am using CKEditor 5 in my application for users to input documents with images, media, tables and styled text. Once the user stores the document and I pull it out again for display. In the past when I only had the most generic styling I displayed the content like this:
<div [innerHTML]="doc.text"></div>
This is an Angular application which explains the syntax used above. The problem is that the text renders but the CSS that is effective makes it looks different. For example CKEditor has a feature for the user to automatically resize an image to 50% and flow text around it. It looks really nice in the editor but when displayed as above the image reverts to full size.
My workaround for now is to invoke a ckeditor in disabled mode like this:
<ckeditor [editor]="Editor" [config]="{ toolbar: [ ] }"
[disabled]="true" [data]="doc.text"></ckeditor>
That works but I would prefer to have a solution where I don't have to import the ckeditor into components that don't need to let the user edit the document. Does anyone know how to do this?
I'd say it is not passible to have all the ckeditor features working in Angular only by using a div with innerHTML as a viewer... I was using same approach but some of the "figures" weren't shown, concretely embedded videos...
In order to have a disabled and pure read-only viewer I created a dedicated wrapper component and I used some global CSS styles to get rid of that unwanted UI behavior in this scenario.
Here is my rich text viewer component HTML, it is a ckeditor with an empty toolbar, same as in the question indeed:
<ckeditor class="ckeditor-viewer" *ngIf="isBrowser" [editor]="editor" [ngModel]="data" [config]="{ toolbar: []}" [disabled]="true"></ckeditor>
Here are some global styles that hide borders on figure hover and table handlers:
// These styles hide weird "things" in CKeditor Viewer (read only mode)
.ckeditor-viewer .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover{
outline-width: 0;
}
.ckeditor-viewer .ck .ck-editor__nested-editable {
border: 1px solid transparent;
height: 0;
margin: 0;
}
.ckeditor-viewer .ck-content .image>figcaption{
background-color: transparent !important;
}
.ckeditor-viewer .ck .ck-widget__selection-handle{
width: 0;
height: 0;
display: none;
}
// These styles hide weird "things" in CKeditor Viewer (read only mode)
I hope it helps.
I know there is buttonClass but that doesn't allow images to be displayed? Basically I want to use an image as the button instead of what is generated using the buttonText. I know in uploadity there is a buttonImg attribute. I was wondering if there is anything that can do the same thing in uploadifive?
In the uploadifive.css file you need to edit the uploadify-button class with the following attributes:
background-color: transparent;
background-image: url('path/to/your/image');
or you could define your own buttonClass and reference that.
I'm using pd4ml to render a URL produced by the Orbeon XForms engine and convert it to PDF.
pd4ml.render( urlstring, fileOutputStram);
The HTML produced by Orbeon from my XForms shows OK in the browser.
But when trying to render the XForms with pd4ml, the PDF show a warning message at the top of the page saying Your browser does not appear to support JavaScript. You may want to try one of the following… because PD4ML not support javascript.
Is there a way to disable the warning message?
If you're creating your form with Form Builder, then Form Runner will be able to generate a PDF automatically for you. For this, Form Runner uses Flying Saucer for this, which looks similar to pd4ml.
If you're authoring XForms "by hand", and want to use pd4ml, then you need to do some post-processing of the HTML before you feed it to pd4ml. You can see what Form Runner does in print-pdf-notemplate.xpl; in particular, look for the XSLT stylesheet embedded in that pipeline, and you'll most likely want to do something similar for pd4ml.
Well I figured it out that the pageflow.xml of all my forms makes reference to the property epilogue url="oxf:/config/epilogue.xpl
Then I enter to the config/property.xml and see that it was linked to /config/theme-plain.xsl
And I add a stylesheet there on theme-plain.xsl
(see the theme-examples.xsl to get an idea on how to)
xhtml:link rel="stylesheet" href="/mystyle.css" type="text/css" media="all"/>
where my style contains this:
.xforms-noscript-panel {
border: 4px solid #FF6600;
margin: 1em;
padding: 0.5em;
width: auto;
display: none !important;
}
Then pd4ml will print the html with the warning message hide.
How can I resize reCaptcha? I can't get it.
Select the 'custom' theme, and then you can make it any shape you want!
A simple trick I just learned to resize reCAPTCHA 2.0 is to use the following in CSS:
#recaptchaID {
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:scale(0.68); /* scale recaptcha image to fit */
transform:scale(0.68);
}
Then just apply it whenever you insert a reCAPTCHA into a page or form.
Best way to resize google recaptcha
Option 1: You can resize google ReCaptcha by using inline style.
A very first way for resizing google recapture by using inline style. Inline styles are CSS styles that are applied to one element, directly in the page's HTML, using the style attribute. Here is the example that shows you how you to style Google reCAPTCHA by using inline style.
<div class="g-recaptcha" style="transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0;" data-theme="light" data-sitekey="XXXXXXXXXXXXX"></div>
Option 2: By putting the following style in your page (Internal Style Sheet).
Secondly, you can put style for ReCaptcha into the page between and . An internal style sheet is a section on an HTML page that contains style definitions. Internal style sheets are defined by using the tag within the area of the document. Here is the example that shows you how you to style Google reCAPTCHA by using an external style sheet.
<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>
Option 3: Resize google ReCaptcha by using an external stylesheet.
Create a separate file and give a name like style.css and add this file link in between your an element in your page. For ex. .
<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>