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?
Related
Icons not showing , So I've this problem.
I'm using some weather icons provided by erikflowers on github.
They are working and showing up fine when I've opened my app through the live server extension in Visual Studio Code. However, when I open my index.html manually from the folder, they are showing up as blank squares.
Anyone have any clue why this might be?
Thanks in advance
EDIT:
Directory:
<link rel="stylesheet" href="./weather-icons-wind.css">
<link rel="stylesheet" href="./weather-icons.css">
I did try changing to ./ no help
It says it can't find the files but they are there
Your pathing is wrong. As u wrote by urself in a comment -
"To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type ""<i class="wi wi-night-sleet""> "
You dont have a CSS directory.
Also look at your console error.
The route is wrong.. your Project Name is missing.
"../JavaScript/Projects/fonts/weather..", where is your Folder "Weather API"?
I would suggest to create a CSS folder (your styles.css stays in the project root), with your icon stylesheet files in it. That should fix your problems.
How are you accessing those icons? CDN? Or do you have them stored locally in some separate folder? Also, share your index.html and folder structure.
For example, you have them in a folder called icons, say a file called cloud.png. Then there are 2 ways to access them in your HTML file:
Using icons/cloud.png
Using ./icons/cloud.png
Both of these approaches work in Live Server, but sometimes we have to use the 2nd one when opening index.html directly or when hosting on Github Pages.
So try both of them and see which one works for you.
I am working on an ASP.NET MVC project. I designed my webpages in visual studio. At first, I just copied my HTML code into the .cshtml documents, and I moved the .css files to the appropriate locations (in wwwroot).
When I did so, at the end of the .css files, there was the following link:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/styles.min.css?h=a9f290cd0cc57883e137369b4ae648cc">
I did not worry about the characters after the .css file extention at the time. The stylesheets worked with no issues.
After exporting again, I got new numbers at the end:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/styles.min.css?h=cd91b4591da6e3a842e0881e1a97d069">
I assumed this would be no problem, and that I could just replace the file. I replaced the file, and I replaced, the link. As result, all html pages associated with those stylesheets stopped working with the stylesheet. I checked the network, and it did seem that my browser was legitimately linking the stylesheet.
I reverted back to the original link, and the only styles missing were the new styles I added. It seems as though it is referencing an older stylesheet (which I cannot see).
Update:
As I expected, the numbers at the end were version numbers.
Workaround: when you export from Bootstrap Studio, there is a check box that determines whether or not to version the assets exported. It was previously checked. I simply unchecked it, and replaced the files and the corresponding links (to links that did not contain version numbers). Everything worked great.
I believe that the issue began in the bootstrap.css file with this line of code:
sourceMappingURL=bootstrap.css.map
I also believe that the solution to this problem would be to replace the bootstrap.css.map file (which I apparently forgot to do) so that the version mapping will be updated.
If versioning is not desired, then one can do as I did, or they can comment out the line of code like this.
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 need to add jstree (version 3.3.4) as a bower dependency to a jhipster project (jhipster version 2.20.0 - not the current version!).
Using the dev profile or when starting the application from my IDE, everything works fine.
But when I deploy using the production profile, the .css files of the project get merged into one big file called assets/styles/something.vendor.css when packing the .war file, while images seem to get copied to assets/images/.
The web browser ends up asking for assets/styles/32px.png, which results in 404.
Instead when using dev profile, styles and images are both loaded from bower_components/jstree/dist/themes/default/
But jstree seems to expects it's icons next to it's css file by referncing them directly (e.g. background: url(32px.png)).
What I tried:
I managed to overwrite some of the rules by adding for example
.jstree-default .jstree-file {
background: url(../images/32px.png) -100px -68px no-repeat !important
}
to the projects main css file (src/main/webapp/assets/styles/main.css) and manually adding the images to assets/images.
But jstree seems to have most icons packed into one .png-file - and then shifting/cutting it according to which icon is needed using css rules. This makes it hard to get it to look right.
Using my approach the icons can be loaded - but they are not cut as they should for some (unknown) reason:
So I tried to overwrite attributes like repeat: no-repeat
or background-color: transparent as well (from my understanding they should be present already as they are part of jstree's css and not overwritten by my rules), but the rules seem too complex and I can not get it to look right and I'm hoping for a better solution.
How can I resolve this issue without having to 'rewrite'/overwrite most of jstree's css rules?
I solved the problem by excluding jstree from the gulp build process (thanks for the hint #Gaël Marziou) by:
making sure jstree is listed in bower.json under "devDependencies", not under "dependencies"
adding 'main/webapp/bower_components/jstree/dist/jstree.js', to jstree (like it was added by bower initially)
editing index.html so that
jstree's style.css is included after <!-- endbuild --> in the head section
jstree's javascript file is includes after the <!-- endbower --> and <!-- endbuild --> comments
This way jstree is not packed into vendor.css so that both style and images are loaded from the original location (bower_components/jstree/dist/.
So i was doing some basic formating to my html page using CSS, and when i ran it on netbeans nothing happened. I double checked the <link> on my html page and it was correct.
So kind of confused now I went to the folder where netbeans project is saved and copied the files to a new folder on the desktop. I made the same edits on my css file using notepad++, and then ran my index.html file (double clicked and it opened with browser) and viola, changes i made appeared. Has anyone else experienced this encounter? Why will it not work on netbeans? Am i missing a plugin or something?
The CSS file first need to be listed on the directory tree on the left side of Netbeans. If its not there, the program won't run the css file that you're trying to include in the html.
It'll also help if you put the
your_css.CSS
In a sub folder... e.g. Folder Name: CSS
and then have your CSS file in there.
Then you should have this to link the css to the HTML document
<link type="text/css" rel="stylesheet" href="directory/css.css">