I am in the process of integrating Netlify CMS to a Gatsby site. Right now, while editing or creating content, a preview of the content appears to the right of the screen in plain text. Is it possible to use the same styles for both the main page and the preview page so that they both look same?
I assume since the preview page gets rendered using the page template and the page template comes with its own styles, there would be no need for an extra stylesheet.
I've tried linking the stylesheets using CMS.registerPreviewStyle("link/to/my/css/file"); but nothing changes.
The developer console returns the error
Refused to apply style from 'https://my-site-name.com/admin/cms.css'
because its MIME type ('text/html')" is not a supported stylesheet
MIME type, and strict MIME checking is enabled."
However when I try to load the style sheet directly, I get a 404 error showing that it does not exist.
What you are doing is correct, just make sure that the path is right. For example, make sure that your CSS files are nested in the static folder.
Related
Trying to get a code generated by Crowdriff to display a gallery on a page and it is being blocked with css that I am not defining as display none. I'm not sure where this is coming from as I haven't set it anywhere to display none.
Screenshot of problem
Here is the page where it should be showing:
https://www.orillialakecountry.ca/test-gallery/
Script tags are never displayed. These are used to import and execute javascript files.
In the javascript a HTML element is probably targeted in which it tries to inject it's HTML.
I have this displayed in my Firebug console
"NetworkError: 404 Not Found - http://********.com/images/slider-img/ajax-loader.gif"
So it's telling me it can't find a background image. But can it pinpoint which CSS file this image has been declared as a background-image property?
I have about 4-5 CSS files being referenced in the document and the manual way of finding it out would to open each of the files and find for this image. So I was wondering if this could be avoided and have Firebug tell me which CSS file is the culprit...
Firebug currently (as of version 2.0.x) doesn't directly show you the initiator of a network request. This requires platform support, which is requested in bug 563623.
So, as a workaround you can do this:
Switch to the CSS panel.
Click into the search field at the right side of Firebug.
Ensure that the option Multiple Files is checked.
Enter ajax-loader.gif
=> The CSS panel will switch to the CSS source containing the rule containing the image value.
Notes:
There may be several properties referring to different images named ajax-loader.gif. So you should also check whether the path to the image corresponds to the one shown in the error message. (Within the search field you can hit Enter to get to the next match.)
It's not sure that the request comes from CSS. It may also come from JavaScript, e.g. through an AJAX request or by appending an <img> tag dynamically.
After uploading a PDF to the Media Archive, I am trying to link to it from a page on a site.
While editing content, I use the hyperlink tool then select the PDF I want to link to via the URL input box.
After saving and publishing the content, clicking the link downloads the PDF and I don't see any apparent way to make this view-able in the browser by using the current Media ID Composite provides. When rendered, we get this:
pdf
Is there a way that I can reference a PDF without using the Media ID and simply use the file name instead?
Here is the Request/Response header info:
After reading what Pauli Østerø said, I understand the problem but am still not able to think of a solution.
I can get the PDF to view in the browser by adding ?download=false to the href URL via Developer Tools. But when I try to add ?download=false to the href through Composite, it doesn't take affect and I get the console output: "Resource interpreted as Document but transferred with MIME type application/pdf: "http://c1.wittenauers.com/media/4afb7bc8-f703-469d-a9b2-a524d8f93dcb/ryc7iw/CompositeDocumentation.PDF"."
Here is the network trace that was asked for by Pauli. In the image, I included the bit where I add ?download=false to the URL, in source view, just in case there could be another way to add it.
Edit: URL and headers for the page.
Here is the link to the page that contains the link:
http://c1.wittenauers.com/cafe/test
Here is the headers for the page containing the link:
From what you're experiencing, it seems to me that Composite have gotten the MIME type of your uploaded file wrong, and is therefor not correctly telling the browser that this file is a pdf, and the browser doesn't know what to do with it.
Try deleting the file and uploading it again.
Try add ?download=false and the end of the href to the file. You prob. need to go into source mode of the content editor.
This is the exact line in the Source Code which is responsible for this behavior, and the logic is as follows
If there is no Querystring named download, the attachment is determined by the Mime Type. Only png, gif and jpeg will be shown inline, the rest will be shown as attachment.
If there is a Querystring named download with a value of false, it will override the Mime Type check and always force the Content-Disposition to be inline.
I made a quick test here to show that the behaviour is a expected. At least in my Chrome browser in Windows 8
Force download: https://www.dokument24.dk/media/9fdd29da-dde8-41f7-ba4c-1117059fdf06/z8srMQ/test/Prisblad%202015%20inkl%20moms.pdf
Show in browser: https://www.dokument24.dk/media/9fdd29da-dde8-41f7-ba4c-1117059fdf06/z8srMQ/test/Prisblad%202015%20inkl%20moms.pdf?download=false
Expanding on Pauli's answer, you can add the following snippet to your page template to automatically add the '?download=false' to all pdf links.
$("a").each(function () {
if (this.href.includes(".pdf")) {
this.href = this.href + "?download=false";
}
})
Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.
There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?
UPDATE
From Jost's answer was able to get my images displayed, but how do I split the image details?
My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.
Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example
tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.
Update
Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).
You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.
The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).
This post is a bit older but I want to add the following:
If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template.
You can find the setup.txt here:
typo3/sysext/css_styled_content/static/setup.txt
There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too.
But check to read the documentation and tutorials on typo3.org.
HTH
merzilla
I just signed up for captcha. It gave me php code to display the captcha box on the page and code to put on the server. It works fine but the input box is misaligned (it might be based on the rest of the styling of the page.) I want to modify it manually but I can't.
When I do an inspect code in google chrome, it shows me the styling for the input box I needed. I unchecked a particular style
position: absolute!important
and it now looks fine. Now I need to actually modify the code. But it says the location is registration.php:1. Where is this? Registration.php is the file which creates the html code for the page and it does a "require" for a captcha php file. But I don't see the css style in that file either!
See these 2 images to see where the CSS could be coming from:
1- In Chrome console under the elements tab
2- In Chrome console under the resources tab