I have added this css in the mpdfstyletables.css at line 1:
#page {
background: url("abc.jpg") repeat;
}
What should I do so that my footer should not be behind the background image?
Use following CSS code to apply a background image to PDF
body {background: url("swril.jpg"); background-image-resize:6;}
This code doesn't hide you header & footer code.
Related
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'd like to use the theme styles to generate different CI for sub companies of our main company. I would like to insert every sub-companies logo into the top naviagtion bar. The plan was to have a seperate theme style for each sub company and within each style have a custom css code which sets the background image to a referenced static file (or theme file). Unfortunately the custom css code does not seem to evaluate the substitution strings so the images can not be rendered. e.g.
div.t-Header-logo {
background-image: url(#APP_IMAGES#COMPANY1_LOGO.png);
background-repeat: no-repeat;
width: 250px; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
Is there any way to achive different logos per theme style?
Thanks for your support
replace the #WORKSPACE_IMAGES# reference with it's resolved name in the CSS file.
e.g. #WORKSPACE_IMAGES#add.gif becomes-
http://apex.oracle.com/pls/otn/wwv_flow_file_mgr.get_file?p_security_group_id=441224701954687600&p_fname=add.gif
Get the resolved name for your workspace by viewing page source, copy and replace #WORKSPACE_IMAGES# with the same. It will work.
Note: make sure that the image file you have uploaded is not specific to an application.
I am using Laravel-Snappy for generating pdfs with wkhtmltpdf. I want to add a border in all pages that are created in the pdf file. At the moment, I have added this to the css:
body.pdf {
border: 1px solid #000;
}
My pdf html is like this:
<html>
<head>
<title>{{ $title }}</title>
</head>
<body class="pdf">
.....
</body>
</html>
With the above css, the border shows fine if it is a single page pdf. However, when it has multiple pages, the border breaks at the bottom of the first page and no more border shows from page 2 onwards after the page-break. I also read the documentation and I dont think there is an feature to add borders using setOption().
Is there a way to resolve it so the border appears in all pages when pdf is generated?
Please take look at here, you can find all available options available including border.
You didn't mentioned how you used page break.
I am using this way
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
Working fine for me
I'm moving from FCK editor to CK editor 3.6.3 and the site has a background image, which is appearing in the CK editor. I need to remove this while using the same CSS file for both the general site and the CK editor (to pick up on CSS for the styles dropdown).
I tried setting config.BodyClass to a style with no image - this works on FCK2.x but not the CK3. I also found via google a config.extraCss setting but I don't see it in the docs, and it does not appear to do anything anyway.
Fullpage is off (i.e. editor is not producing <body><head> etc tags))
I've got a workaround by having two CSS files, one for the site and one for CK with a different body style, but there must be a better way?
Thanks,
Kevin
Config section:
config.stylesSet = 'my_styles:/admin/ckeditor/styles_dropdown.js';
config.contentsCss = '/newdesign/style.css';
//config.extraCss = 'body {background: none;background-image: none;}';
config.BodyClass = 'fckbody' ;
CSS section (of the 'main' css file)
body{
margin:0px; padding:0px; background-image:url(/newdesign/site_bg19.jpg); repeat; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#393939;
}
.fckbody {
background-color: white;
background: none;
background-image: none;
text-align:left;
}
The correct name in CKEditor is bodyClass with an initial lower case.
Thought I should post my insight here for my findings. I came across this page while looking for a reason why my CKEditor was showing a background image of my site.
If you CKEditor is showing a background image on the Make a Comment section of a node :
1 - Head to "admin/config/content/wysiwyg"
2 - click edit to the text format for which text format is showing the background image
3 - click the CSS tab drop down
4 - change the Editor CSS to "Editor Default CSS".
Hope this helps someone!
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>