I have included the style.css in libraries.yml. I have placed my custom.css in css/custom.css file. In view source can't find the css line in html. I have added my info.yml file. I have added the global-styling in info file.
global-styling:
version: VERSION
css:
css/style.css: {}
css/custom.css: {}
framework:
css:
theme:
css/style.css: {}
js:
bootstrap/assets/javascripts/bootstrap/affix.js: {}
bootstrap/assets/javascripts/bootstrap/alert.js: {}
bootstrap/assets/javascripts/bootstrap/button.js: {}
bootstrap/assets/javascripts/bootstrap/carousel.js: {}
bootstrap/assets/javascripts/bootstrap/collapse.js: {}
bootstrap/assets/javascripts/bootstrap/dropdown.js: {}
bootstrap/assets/javascripts/bootstrap/modal.js: {}
bootstrap/assets/javascripts/bootstrap/tooltip.js: {}
bootstrap/assets/javascripts/bootstrap/popover.js: {}
bootstrap/assets/javascripts/bootstrap/scrollspy.js: {}
bootstrap/assets/javascripts/bootstrap/tab.js: {}
bootstrap/assets/javascripts/bootstrap/transition.js: {}
info.yml
core: 8.x
type: theme
base theme: bootstrap
name: 'horizon'
description: 'Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
package: 'Bootstrap'
libraries:
- 'horizon/global-styling'
regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Header'
left_sidebar: Left Sidebar
highlighted: 'Highlighted'
help: 'Help'
main_content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
libraries-extend:
bootstrap/framework:
- horizon/framework
I see two options.
When you create a library, you only create a reference. You need to specify somewhere to use this reference. If this is in your theme, I suggest you add it inside your theme.info.yml.
Did you clear your cache? If you didn't, the reference won't be updated. I think this is more likely to be your problem.
I am not sure why i uncheck the checkboxes but after unchecking it is showing my custom.css style. I know that it is for imporving site performances compressing the css and js.
Configuration >> development >> performances >> unchecked Aggregate CSS files Aggregate JavaScript files
I think you has checked css/js aggregation ON at config>development>performance page.
But if aggregation was ON then all custom CSS/JS and Drupal core CSS/JS should wrap into minimum files and you can't see CSS/JS file with name directly even style.css or any js file also.
Related
My github pages site is not applying the boostrap jekyll theme, instead it looks like basic html.
the site is published here: https://toneman1984.github.io/HeatherBlogV2/
the repository is here: https://github.com/toneman1984/HeatherBlogV2
I feel like it has to do with my _config.yml file, specifically the url and base url settings and/or the settings in GitHub.
these are my config.yml settings:
title: Clean Blog
email: your-email#example.com
description: A Blog Theme by Start Bootstrap
author: Start Bootstrap
baseurl: "HeathersBlogV2"
url: "https://toneman1984.github.io/HeatherBlogV2/"
# Social Profiles
twitter_username: SBootstrap
github_username: StartBootstrap
facebook_username: StartBootstrap
instagram_username:
linkedin_username:
# Add your google-analytics ID here to activate google analytics
google_analytics: UA-XXXXXXXXX-X # out your google-analytics code
# Build settings
markdown: kramdown
paginate: 5
paginate_path: "/posts/page:num/"
plugins:
- jekyll-feed
- jekyll-paginate
- jekyll-sitemap ## Uncomment this line to silently generate a sitemaps.org compliant sitemap for your Jekyll site
theme: jekyll-theme-clean-blog
I am currently exploring the R Markdown configurations and the possibilities for the HTML output. My goal is to have a local html template as well as a local css theme file which behaves exactly the same as if I would select theme/highlight options in in the yaml configurations.
I used the following configuration:
output:
html_document:
theme: united
highlight: tango
toc: true
toc_depth: 3
toc_float: # set to false if you do no want a floating toc
collapsed: true
smooth_scroll: true
I now want to be able to customize the HTML structure and the CSS by my own. I started with the HTML template as follows:
Downloaded the standard pandoc HTML5 template and copied it into a local template.html file. I changed my configuration to
output:
html_document:
template: template.html
theme: united
highlight: tango
toc: true
toc_depth: 3
toc_float: # set to false if you do no want a floating toc
collapsed: true
smooth_scroll: true
There are several problems arizing:
the TOC is not shown anymore
the rendered HTML design of the output changed, i.e. I have no margin at all - all javascript functionality is gone, so no DT support, no tabs, no scrolling etc.
My question is: How can I achive the exactly same design and functionality I had before with my configuration but having the template/theme/highlight files stored locally? (So a template.html and a styles.css and all the needed JS files)
Let me know if I need to give further details. Thanks!
The Pandoc default you linked to is not the default used in rmarkdown. That one is stored in system.file("rmd/h/default.html", pkg = "rmarkdown"), and a current version is online here: https://github.com/rstudio/rmarkdown/blob/master/inst/rmd/h/default.html.
You should also study the source to rmarkdown::html_document if you decide to modify the default template. You'll also have to make some other changes if template != "default".
I have been playing with Drupal 8. At the moment I want to have an image as the header background in Bartik. For this I created a subtheme called "freex" in the following way:
Create folder freex in /themes/custom/
Create freex.info.yml in /themes/custom/freex/ containing:
name: Freex
description: Basis thema voor verenigingen
type: theme
core: 8.x
base theme: bartik
libraries:
- freex/global-styling
Create file freex.libraries.yml in /themes/custom/freex/ containing:
global-styling:
version: 1.0
css:
theme:
css/style.css: {}
Create file in /themes/custom/freex/css/ called style.css containing:
#header {
background-color: yellow;
}
Just to see of it works... It doesn't, the header does not change background color. Any ideas as to what I am missing?
Turn off the page cache: Configuration Menu -> Development -> Performance
Uncheck the checkboxes : Aggregate Css files, aggregate javascript files.
If you do this, when you see page source, you see your file name style.css - not the generated css file name, as you write. At the top of the performance page, click to clear all cache. And after that, see your page.
The Bartik theme includes colors.css last (I think it's auto-generated from the theme settings) so the subtheme colours are overriden by the later color module colours.
Add "!important" to your CSS color settings, so they won't be overridden. For example:
#header {
background-color: #CDBE79 !important;
background-image: linear-gradient(to bottom, #CDBE79 0%, #CDBE79 100%) !important;
}
When using grunt is it possible to alter the references within a html file.
For example as part of my build process I am altering the filename from style.css to style.min.css.
What I would like to do is within my index.html file alter the reference to the stylesheet to use the minified version.
Yes, have a look at grunt-usemin. The README is pretty exhaustive. :)
https://github.com/yeoman/grunt-usemin
Another possible solution, which avoids defining block comments in your html markup, is to install the plugin named: grunt-text-replace
installing the plugin via npm:
$ npm install grunt-text-replace --save-dev
and then and add the following to your Gruntfile:
Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/* UPDATES CSS SRC REFERENCED IN YOUR THE HTML FILE */
replace: {
cssLink: {
src: ['./src/index.html'], //<--- The path to your html file
overwrite: true,
replacements: [{
// Subsitute src="css/ below with the path to your CSS file.
from: 'src="css/style.css',
// Subsitute src="css/ above with the path to your minified CSS file.
to: 'src="css/style.min.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-text-replace');
grunt.registerTask('default', [
'replace:cssLink'
]);
};
It seems wrong to add
<script src="..."></script>
to the render() of the widget. Especially if I have 2 of them on the same page. Is there a way to add a single script include on the admin form pages, in a way where I don't edit core files?
Widgets have a Media inner class that allows you to specify scripts and styles that need to be loaded. See the documentation.
You can set external javascript libraries in the Media class:
class ArticleAdmin(admin.ModelAdmin):
class Media:
css = {
"all": ("my_styles.css",)
}
js = ("my_code.js",)