I am facing a problem in loading CSS in my app made using express. I have done all the necessary things
correctly like using express.static() to server static file and I know this because when I open view source page and tap on the CSS link I get redirect to my CSS file and it is the same as what I have written so I can't understand why my CSS is not working.
the code is used for serving static files (I use it for css only)
app.use(express.static(__dirname + '/public'))
my CSS link in ejs template
<link rel="stylesheet" type="css" href="css/loginstyle.css">
NOTE: If the question is unclear then sorry I am new to StackOverflow and I know title is a little bit misleading but StackOverflow would not let me post question so I had to change the tittle
Related
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.
Disclaimer: This is my first ever website project, in order to learn about html, css etc. I probably need a 'for idiots' guide'
I have a jekyll/github pages site here. I have read the jekyll documentation here, which suggests all you need to do is stick the liquid tag in. Which I have, for example here.
Further research has pointed out I need to set up my config file, like this which I have here. I also have a .css I copied from a site called sciviews which is here and I've made a link into the .css to call it here.
However, my page still displays in black on white in code blocks. What have I missed?
EDIT: I believe I've made another error, the source of my syntac .css was (i think) here. Is .scss maybe not compatible with this process as I've implemented it?
In your html ( inside the head tag ), you are referencing an incorrect path to "syntax.css"
Change:
<link rel="stylesheet" href="/css/syntax.css" type="text/css">
To:
<link rel="stylesheet" href="/Pokemon_FieldStudies/css/syntax.css" type="text/css">
Edit
Following your edit, it seems the code inside syntax.css is a raw scss file. Such files need to be processed before they could be served to the client.
I suggest you read about SCSS and how to compile it ( A simple google search will yield more than enough tutorials ).
In case you're interested in a shortcut, you can use an online compiler such as http://www.sassmeister.com/ but that will require you to define a value for some of the missing variables defined in the scss file.
I know my question is similar to: Bootstrap popup does not appear when include bootstrap.min.css
However it was not resolved and I am practically having the same issue (minus the JS).
I am currently designing my Bootstrap website using Pinegrow, everything looks fine in the software however I realized when I actually preview or upload the code to a browser parts of the website is being overridden, I just found out it's because of the bootstrap.min.css file.
The strange thing is my 'home', 'about me' pages are fine, however when it gets to 'skills', 'portfolio' etc pages the css from my custom file is overridden.
For example:
This is what my software shows
Preview from Pinegrow
And this is what happens when it is in a browser:
Preview from Browser
Things I have done
Some people suggested just deleting the .min file, however doing that mucks up the website.
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css"> The custom css file is placed at the bottom in the html (someone said it provides priority to the custom file)
Using the !important rule doesn't work and I don't think it's the right to use it
I am using ID selections in CSS
Is the only solution to go into the .min file and edit the code from there? Is there a way to get my custom CSS code to override the .min instead? Would it help if i posted some of my code? Many thanks for your time.
I would have done so:
If a few page works, my opinion, problem in markup. If you don't use one header section for all pages, try to copy content from skills to about, then I would check the wrapper, and deeper structure first. Do you see any strange rules in development tools on skills page? (I'm learning, and I can only give you simple tips.)
I built a custom calculator using HTML5, CSS3, and jQuery.
I have a basic hosting account and loaded all the files through cPanel to my root directory. The files include calc.html with a CSS folder holding my stylesheet and a JS folder holding my custom jQuery.
Now someone would like to put my calculator on their Wordpress site and we can not figure out how to do it. For now I just used iframe to show my site on their Wordpress page but we want the calculator to be hosted from his site.
I tried copying and pasting my HTML code from my calc.html file into a Wordpress page which works but I do not have the styling of my CSS and the JS dose not function. So I used FileZilla and created a folder called CALC with the follwing path (public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/) and added the JS sand CSS contents in there.
I linked my CSS in the header of my calc.html code
<link rel="stylesheet" href="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/css/mainCalc.css">
I linked my JS towards the end of the body in calc.html
<script src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/js/main.js"></script>
I view the page and still have my ugly HTML code with no styling and no JS functionality.
Im new to Wordpress/coding and this is the first thing that popped in my mind so I tried it and failed.
I also thought I could put calc.html, mainCalc.css, and main.js inside of the calc directory i created(public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/)
and then use iframe to display calc.html on the wordpress page. I also failed at this.
I used
<iframe src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/calc.html"></iframe>
You could do with creating a custom page template.
Basically you will follow the docs https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/ and create a page with the HTML + CSS + JS in the content part.
When you done, you just create a new page in the admin part, select the template from the list under the publish button. Save it, and that's it.
Its simpler from writing a plugin.