I'm having some difficulties beginning configuration of minima theme for Jekyll. The theme is Jekyll's default, appears to be extremely popular, and the instructions in the README appear straightforward, though I can't get them to work. I might be doing something obviously wrong that someone here can see.
Here are the (annonymised) active lines from my _config.yml:
title: IT thoughts...
author:
name: joharr
email: <myemailaddress>
description:
Self-taught geekology...
baseurl: ""
url: <me>.github.io
twitter_username: <mine>
github_username: <mine>
minima:
skin: dark # having no effect
theme: minima
- no dark skin applied. So I made assets/css/ in the root of my site and copied the theme's assets/css/style.scss there, then:
$ bundle exec jekyll serve
...
style.scss:1: Error: File to import not found or unreadable: minima/skins/classic. (SassC::SyntaxError)
on line 1:1 of style.scss
>> #import
...
- what!? I have to start copying over chains of the theme's SASS to do the slightest tweak? No idea now how to follow the theme's instructions and feel like one of the million plus happy users...
I've figured it out - the answer's here, Massively confused on how to use this theme's dark mode #599
Minima's dark skin is an unreleased feature. It is available only via this repository.
For that, you may use the ''jekyll-remote-theme'' plugin.
theme: minima -> minima, the occasionally updated gem
remote_theme: jekyll/minima -> minima, the up-to-date repository on GitHub
Related
I'm writing a theme for WordPress, which requires comments in the CSS file as follows:
/*
Theme Name: XX
Theme URI: http://wordpress.org/themes/xxtheme
Author: X team
Author URI: http://xx.org/
Description: X theme.
Version: 1.1
Text Domain: Xdomain
*/
Whenever I compile Tailwind CSS, the whole contents of style.css gets replaced. Is there an easy way to a retain part of the CSS file?
I'm using the following command to build:
npx tailwindcss -i css/tailwind.css -o style.css
Add ! after the /* as shown in https://github.com/gregsullivan/_tw/blob/master/tailwind/custom/file-header.css
So the full solution will look like this.
/*!
Theme Name: XX
Theme URI: http://wordpress.org/themes/xxtheme
Author: X team
Author URI: http://xx.org/
Description: X theme.
Version: 1.1
Text Domain: Xdomain
*/
Thanks
Here's the solution that worked for me:
I used the PostCSS method as mentioned in the Tailwind CSS documentation and then added comments at the top of the main.css (which is the CSS folder) file. So when I compile (using
npm run dev
) the CSS the comments get copied to the output file. The package.json "scripts" tag is as follows:
"scripts": {
"dev": "postcss css/main.css -o style.css" }
You could try safelisting the comments using https://purgecss.com/safelisting.html.
I presume you are using purgecss as part of the build, but you haven’t pasted the Tailwind CSS or Webpack configuration.
I'm trying to fork a Jekyll theme and upon building the Github Page, I get a different page
https://imgur.com/2qFcrAX
than the original
https://imgur.com/7uT97r5
The baseurl in _config.yml is changed accordingly to the instructions, no further changes made. Only the branch gh-pages was modified, which I used as the source for building the Github Page.
I tried forking repositories that were forked from the original repository, but I get the same result. The issue looked like it failed to include a certain stylesheet, so I moved the file _includes/css/style.css to a different location, which led to a slight improvement but the color values from _config.yml and images in assets were still missing.
My implementation:
Source: Github Link
Demo: Link
Original:
Source: Github Link
Demo: Link
Changes made to _config.yml:
- url: "http://st4ple.github.io"
+ url: "http://cerbospace.github.io"
Edit:
changed the repo name. Also removed the collaborators-only edit rights for now, just in case.
I just tried building the site locally, because there were other questions indicating it worked locally but not on Github Pages. Same result unfortunately.
Upon looking through the files in the _site directory of the local build, I found that Jekyll replaces/overwrites my stylesheet in _includes/css/style.css with a different one. I have no idea where this new style.css comes from, but I found a workaround by using a custom style.scss and including my stylesheet.
Either you can use https://ricostacruz.com/til/relative-paths-in-jekyll or add github-metadata <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
I'm trying to make a Drupal 8 theme and no matter what I do, the stylesheet I have won't render. Here's my libraries.yml file:
global-styling:
version: VERSION
css:
theme:
css/layout.css: {}
and here's my info.yml file:
name: My Test Blog
type: theme
description: 'My test theme description'
package: Custom
core: 8.x
libraries:
- MyTestBlog/global-styling
stylesheets-remove:
- '#classy/css/layout.css'
- core/assets/vendor/normalize-css/normalize.css
regions:
header: Header
content: Content
stylesheets:
all:
- css/style.css
Any ideas?
If the path of your style sheet is correct then try to clear cache from admin panel and then check.
The problem is with your libraries.yml file (if the indentation is as shown above). Indentation is important in any yml format file and the above file will not be read correctly. Below is the correct indentation:
global-styling:
version: VERSION
css:
theme:
css/layout.css: {}
The info.yml file also contains reference to stylesheets property, which should be removed. The stylesheets property has been removed as of Drupal 8.0.0-beta11, only libraries are used now.
I solved the problem. The problem was that the name of my style directory was not the same as the name of my libraries and info files. What I mean is that before, I was doing something like naming my file "mytestblog.info.yml" and then trying to link to myblogsite/global-styling. Once I changed myblogsite/global-styling to mytestblog/global-styling, my stylesheet rendered.
How do I use Wordpress together with Twitter Bootstrap? I know how to set up a Wordpress page and I've already worked with Bootstrap, but now I want to use these two together for the first time.
For my Wordpress projects I normally just installed Wordpress and started from scratch with creating a new theme. For my Bootstrap projects I always used Initializr to build a template.
Now using Google I found various "Bootstrap themes" and plugins , do I need one of those? I want to customize the bootstrap look with my own colors etc. using LESS, that's why I am asking. I am just having trouble to understand how these two will work together and I haven't found any good resource for it.
There will be a few ways to tackle this, but here's what I've been doing...
Take a copy of your favorite starting point theme
Download the full bootstrap repo (less and everything) and pop it into your theme folder.
Create a folder called 'css' inside the bootstrap folder and set this as your location to output your compiled 'bootstrap.css' file.
Then up in the theme root, open 'styles.css', change the theme name etc as you would if you were creating a new theme, delete all the styles and add just one line of code #import url("bootstrap/css/bootstrap.css");
You should now be able to select this new theme from your 'appearances' menu in 'wp-admin'.
It'll obviously look horrific, but once you add a few of your theme classes/IDs into 'layout.less'. Then run through 'variables.less' to add you base theme you'll be getting somewhere.
Other than that you'll have to go through each template file and consider all the classes/IDs, sometimes edit the theme to make better use of existing bootstrap classes, but other times you'll need to add you're own custom classes to bootstrap.
It's quite time consuming, but once its done it can obviously be re-used to speed up future projects.
Incidentally, I've also been building a theme using this same principle but based on http://stuffandnonsense.co.uk/projects/320andup/ both great projects. I'd recommend seeing which best suits you.
You could always us the Twitter Bootstrap WordPress plugin. It's completely free on WordPress.org here: http://wordpress.org/extend/plugins/wordpress-bootstrap-css/
There's also lots of shortcodes included so you can include Bootstrap elements within your pages and post - there's a demo page of it all here: http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes-demo/
Hope that helps you get started!
I answered the same question before here at stackoverflow. I feel like it's kind of late sharing but for those who are looking for such tutorial just click the hyperlinked title given: Using Twitter Bootstrap in Wordpress.
There is a quick way to do it, using composer in your theme:
composer.json
{
"config": {
"component-dir": "lib/composer",
"vendor-dir": "lib/composer",
"bin-dir" : "bin/composer",
"cache-dir" : "var/cache/composer"
},
"require": {
"twitter/bootstrap": "3"
}
}
Note: I removed the other composer's section and requirements and phing integration to reduce complexity.
Execute
composer install
And then in your theme, add /lib/composer/twitter/bootstrap/dist/css/bootstrap.css with this sentences
$bootUri = get_template_directory_uri() . '/lib/composer/twitter/bootstrap/dist/css/bootstrap.css';
wp_enqueue_style('sindy_bootstrap', $bootsUri);
et voilà! :)
How do other Wordpress theme developers incorporate Sass into their theme development while taking advantage of its compressed output style? Sass compressed removes ALL comments, so I currently have an empty style.css with my theme declaration and an #import calling the minified css from compass, but this hardly seems like the best solution.
Has anybody found a way around this? What would be the best solution if not?
http://codex.wordpress.org/Theme_Development#Theme_Stylesheet
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id40
SUPER SHORT VERSION: Use /*! loud comments */ and compile the SCSS just before packaging and distributing.
Two part answer, "old part" first:
I used Sass/SCSS when developing my "Orin" theme: https://github.com/founddrama/orin
Part One:
In my src/scss directory, I keep all of my _include.scss files and the style.scss file that has all of the #import statements.
During development, I just run the usual sass --watch (although it's an extra step to remember to save the style.scss file).
Once your SCSS source is looking good and committed to version control, you can simply build the style.scss into style.css and check that into version control for the Theme that gets distributed.
In my case, "Orin" is just for me, so I perform the build when I update it on the blog server, but the SCSS compilation can just as easily be done prior to packaging/distribution. The build script I'm using is here (in that Github repo); the gist of it being:
touch to create the style.css output file;
apply the license text;
compile the SCSS and append it to style.css.
Part Two:
More recent versions of Sass include support for /*! loud comments */; meaning that I need to get off my lazy butt and update to:
Include the license text and theme description right there in style.scss using the loud comments;
update the build/deploy script to simply compile the SCSS.
Well, i would suggest you to use Compass .
The comment should look like this:
/*! A loud SASS comment */