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 }}">
Related
I'm creating a blogdown website using agency theme and everything works fine.
I changed some stuff in the CSS, located in public/css/agency.css and I can see all changes. However, when I restarted RStudio all changes I've made switch to their default values (colors and stuff). And the same happens if I run blogdown::serve_site()
I can't see what's going wrong with my approach and any help would be appreciated.
Do not touch the public directory. It is automatically generated from your website source files (see Section 1.2 of the blogdown book for some basics). If you want to change anything on your website, always change the source. In your case, you can either change the CSS file in the theme (personally I don't recommend this way), or provide your own static/css/agency.css to override your theme's CSS. For more about the overriding mechanism, see Section 2.7.
When I run the pagespeed test of Google with my website, it tells me to optimize the CSS delivery.
I checked a lot of websites, tried to combine my CSS files into one and deregistered the wp_enqueue_styles handles. My new CSS file loaded when I tested, but the website was void of CSS . (I deregistered files like Bootstrap and FontAwesome).
It seems that it did not load the CSS of my new file, although I copied and pasted exactly what was in the old CSS files.
For information, I am using the Beaver Builder Child Theme and plugin. I created a folder includes/css in the root directory of my website in which I placed the new CSS file. This new file I loaded in header.php.
I followed exactly the steps described here.
Could someone help me with the steps to resolve this?
Did you link the CSS file you created in the page in question?
Something like this in your head:
<link rel="stylesheet" href="/mynewcss.css" />
Also, if you have a test page set up, I can tell you exactly what you need to do.
I downloaded the minified version of bootstrap and put it in the root directory of my project. Then in a HTML file in /views/ I added:
<link rel="stylesheet" href="/bootstrap.min.css">
However, the page continued to look the same because Bootstrap styles weren't added. I know I can use a CDN, I did and it worked, but for now I want to try including it locally. I tried to similarly include Semantic-UI but it didn't work too. What am I doing wrong?
I think I figured it out. Assuming that you have your stylesheet in /public then you have to add this line to your application file (usually app.js):
app.use(express.static(path.join(__dirname, 'public')));
From now on you can link to your stylesheets from anywhere in the project using this code:
<link rel="stylesheet" href="/bootstrap.min.css">
Note that we no longer have to specify the full path, which is "/public/bootstrap.min.css" - we omit the "/public" (in fact href="/public/bootstrap.min.css" would be an error).
If anybody reading this can explain why the first line is necessary please comment below. I believe I understand what it does but why the Express creators insisted on doing it that way i.e. why can't I <link> to my local files normally is what I don't get.
I've got a very weird issue with my Ember application. I have a style.css file that is (unfortunately) 4030 lines long due to circumstances I cannot change at the moment. It is included in my app/index.html file like so
<link rel="stylesheet" href="assets/style.css">
When I run ember build --prod on my ember app, I get the error: "Ember is not defined". Now here's the strange part: if I copy about 100 lines from the end of the style.css and then paste it to the beginning of the style.css file, then building to production has no problem, and the completed build runs perfectly. Of course, this practice of shuffling around the style.css cannot be continued for long, and therefore I need to find a solution - or at least the cause of this.
I'm asking if anyone has experienced this problem, and if so, what was done to fix it.
So. After researching and trial and error, I've found that the reason this was a problem was because I named my main css file 'style.css', which is a very common name for a .css file. One of my vendor packages (still don't know which one) had a .css file also called style.css, and during compilation, the vendor .css and my app's .css clashed with each other.
Changed the name to 'myCompany_style.css' and everything works fine. Also as per #kumkanillam's suggestion, moved all css compilation to app.css
Will edit answer to include issue link if I can re-find it.
I'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?