I was trying to create a theme for Drupal 8.1.8. My CSS and JS files unfortunately cannot be loaded. I have checked if I used any tab characters, but I have used always 2 space characters for an indent.
I have read the documentation page at Drupal.org: https://www.drupal.org/theme-guide/8/assets. I was trying around 2 hours with all possible combination. Also I tried the google search, Drupal core code inspection.. I could not figure it out.
My theme is located at themes/englishtrainer. The css is located in themes/englishtrainer/css and the javascript files are in themes/englishtrainer/js. The theme can be enabled as a theme without problems.
The contents of my theme's files in the following.
englishtrainer.info.yml:
name: Englishtrainer
type: theme
core: 8.x
version: '1.0.0'
libraries:
- englishtrainer/base
regions:
content: Content
header: Header
englishtrainer.libraries.yml:
base:
version: VERSION
css:
theme:
css/css-test.css: {}
js:
js/js-test.js: {}
css/css-test.css:
body {
background-color: red;
}
js/js-test.js:
alert('it is loaded!');
I was checking the html markup for any occurrences. The javascript console has been also checked. It does not contain any entries. I have cleared the entire Drupal cache and disabled/enabled the theme. Nothing helped.
Do you have any idea?
Solved it. My issue was, that I had a theme "and" a module with the same name. However the module did not implement any theming components. But this broke the theme. After I have uninstalled the module with the same name, the background was red (css worked) and the javascript alert appeared (javascript worked).
Thank you for your attention.
Related
I am using bootstrap to build a mobile web page
only one page and use some of the bootstrap css and js code but I have to hold all the css and js.
since I only use some of it I want to reduce the unused css style and js code to reduce the file size
how to do it?
I mean if I only use the modal of the bootstrap how to reduce the css of col and alert and other css I do not used?
I'm not fully sure if this question really belongs here, but there is an answer to the question.
You can use Bootstrap's site to customize which elements of bootstrap you want and do not want, downloading a file with only the bits that you would like to keep.
This is available here: https://getbootstrap.com/docs/3.4/customize/
To read about it, go to their : https://www.labnol.org/internet/remove-unused-css/28635/
Remove Unused CSS from the Stylesheet
Here’s how you can easily find all the unused selectors in your CSS files in Google Chrome:
Open any page of your website inside Google Chrome and then launch the Dev Tools available under File -> Tools -> Developers Tools.
Click the Audits tab inside Dev Tools and select the “Web Page Performance” and “Reload Page and Audit on Load” options. Now click the “Run” button to begin the CSS audit process.
On the results page, expand the “Remove Unused CSS Rules” group and select the CSS file(s) that are linked from your site. You may ignore the CSS files added by social plugins and widgets since you do not have control over them.
Here you will get a sorted list of all styles that are defined in the CSS file but not used anywhere on the current page.
You can copy and save the results in a text file and repeat the steps for couple of other pages on your site. This is essential as not all selectors may be used on all pages. You can find the count of various selectors in the combined resultset, maybe using Google Sheets, and the selectors with the highest count can probably be “safely” removed.
read more this link
Chrome DevTools has coverage tool. It identifies which code is useful and which is not. I used it to reduce my css file from ~25K lines to ~2.3k lines.
Read more here: https://developers.google.com/web/tools/chrome-devtools/coverage
I'm attempting to use CKeditor on a website, and I need to be able to click to go to links within the editor itself. As this is not possible with the stock editor, I attempted to install the plugin at the following link: https://github.com/mlewand/ckeditor-plugin-openlink
Having downloaded the plugin and tried to install it, when I activate the plugin in config.js the editor on the site page now has the attribute style="visibility:hidden", and when I manually change this to visible via the browser debugger, it shows a default texture rather than the CKeditor editor. It's possible my method of installation of the plugin is to blame, as I'm finding no other instances of people having this issue. The download of the plugin contains a folder "icons" and a folder "lang", as well as plugin.js (the plugin file itself) and a readme.
To install, I simply pasted the relevant contents of the lang files into their respective counterparts in the main CKeditor fileset, and for the time being I ignored the icons folder, as it simply contains the image file for the tool icon; I also commented out the code which calls for this image so as not to have conflict. I then moved plugin.js into the plugins folder within the CKeditor fileset, within its own subfolder plugin as with the stock plugins already present. I then added the lines in the config called for by the readme. I finally added to the config
config.extraPlugins = 'plugin'; to enable the plugin. Once I updated all files on the server, it became clear that activating the plugin caused the editor to disappear as I mentioned. If anyone knows why this might be or what I may have done to interfere with the files incorrectly, I'd greatly appreciate it. Currently I'm unsure as to what I could have done better during installation. I can elaborate further if I've been at all unclear. Thank you.
I'll add that here(plugin activation in ckeditor) appears to be a similar issue, although the answer given and the specific issue don't quite seem to apply. If they do, feel free to mark this as a duplicate and I apologize for the redundancy.
EDIT: It appears that the reference added in config.js and the plugin folder name needed to correspond to the name in plugin.js, as I've now discovered.
Important to note that plugin name in plugin.js, name of plugin folder, and reference in config.js must all correspond.
When I download a jquery ui theme via themeroller I get a jquery-ui-1.10.4.custom.js file instead of the standard jquery-ui-1.10.4.js file that comes with a regular jquery ui download.
I am trying to understand what is changing in jqueryui.js file from theme download to download. I was under the impression that nothing should change the .js file and that themes were just .css. Is this not the case?
I did not apply any customizations to the theme I downloaded (starter theme) and then added just the .css to a page with the regular jqueryui linked up and the page didn't work. When I tried with other themes though such as the hot-sneaks I did not have this problem.
I am asking this question because I would like to link to the jqueryui on a cdn and I just want to use the vanilla version. Is this possible?
Thank you for your help.
I don't think there is anything different other than the name. You could try running them though a compare tool to see if there are any differences.
Here is an online Comparer http://www.diffnow.com/
I can't get Zurb Foundation to work correctly in Padrino. The stylesheets are compiled and loaded, but the Foundation modules don't work.
http://intense-falls-2845.herokuapp.com/
is a haml version of
http://foundation.zurb.com/templates/marketing.html
, but neither the dropdown menu nor the orbit slider are working. the project was generated using:
$ padrino g project PadrinoFoundation -e haml -c compass -s jquery -b
$ padrino g plugin camorra
$ bundle install
with some editing to app/app.rb (create a route), app/stylesheets/application.scss (remove compass references to blueprint) and app/views/application.haml (layout, read below).
these can be viewed below:
(route) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/app.rb
(stylesheet) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/stylesheets/application.scss
(layout) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/views/application.haml
(whole repository) https://github.com/bcsantos/PadrinoZurbFoundation
concerning the layout, i used https://github.com/CIRCUITLLC/foundation_templates_haml/blob/master/haml/marketing.html.haml but being new to haml i may have made mistakes. hopefully if someone points me in the right direction i can figure things out.
any ideas about what's wrong?
thanks for reading.
Several things I noticed while inspecting your page:
A 404 error when loading Modernizr: Your page is trying to load Modernizr from /javascripts/modernizr.js but the file is actually in /javascripts/vendor/modernizr.js (in the vendor folder).
Missing Foundation JavaScript plugins: Your page is loading /javascripts/foundation/foundation.js but it only contains the Foundation core and none of the plugins (the top bar dropdown menus and Orbit slider are implemented as plugins). The file you want to load appears to be /javascripts/foundation.js (one level up).
Missing data- attributes to trigger plugins: The top bar and Orbit slider plugins are activated by data- attributes in the HTML (you can find these attributes in the source for http://foundation.zurb.com/templates/marketing.html). You'll need to add these attributes to your view.
I'm not sure if these changes are sufficient to get your page working, but they appear to be necessary for any further debugging.
Update: Now there is a ReferenceError: jQuery is not defined JavaScript error, triggered from the Foundation library. According to Foundation's JavaScript setup instructions, jQuery and FastClick need to be loaded before the Foundation script(s). (I'd also follow that documentation and load jQuery first, followed by FastClick, then Foundation.)
As an aside, all the major browsers now have developer tools built-in. I suggest exploring the developer tools for your browser of choice; they will save you a lot of time and effort :-)
I have a code generated by "highslide" software and what it does is to create an image gallery.
This code consists of .css html and javascript.
If I place the htmal code in the Joomla's "index.php" file and then the rest of the file in the root directory then the image gallery is working and is placed in every page in Joomla.
I do not want this. Is there a way of assigning that image gallery to only pages I choose?
Or is there a way to find out what is the index.php main file for that specific page I need to have the gallery and paste the code in there?
I have tried to insert the code in a custom module via the Joomla's editor but when I click on save then it compiles the code and remove certain parts of it and cannot work.
It removes the link to javascript and to css file.
Is there a way without any other third party extension to have that code into the custom module without then Joomla eliminate the half of the code?
Thank you,
Best Regards,
Andreas Achilleos
I would not add things like this to your index.php file. This is Joomla, not a static html website ;)
You have 3 options:
Option 1 would be to develop your own module and install it on your Joomla site. This option would take the longest amount of time and would require you to get your handy in a bit of coding.
Option 2 would be to firstly download, install and enable a plugin called Sourcerer. Once done, in the Joomla backend, create a new "Custom Module" and manually add your html code. After, below the big textbox, you will see a button below saying "Insert code". O modal will popup allowing you to add your custom code. Simply add your CSS and JS using the <style> and <script> tags.
Option 3 would be to use a pre-built Image Gallery extensions from the Joomla Extensions Directory. There are loads to choose from.
Hope this helps