I am in the process of creating a portfolio website for a web design course I am taking. I have created a style sheet for my website but I am having trouble getting the changes to show up on my site. All of the changes appear when I view it locally through Chrome, but when I upload my website the changes don't show up. I have checked my code and even tried validator.nu to see if their are any problems but it appears that their are none.
Here are my html and css files:
https://gist.github.com/J-Conley/94255b04292287b58892b75fdc5e35c0
and my website:
http://cook-camel-58438.bitballoon.com/.
If it helps I have a folder called cf_template-1.1.1 and in that folder I have a folders named html, css, and img. Any help would be appreciated.
There are errors in the console, make sure to fix these and try again if it persist.
the image urls behaves differently in localhost and live, make sure to upload those images properly using your website builder whatever it is and not use static urls.
I see you used bootstrap here. When overriding styles make sure you use the exact same selector whatever library did used you are trying to modify i.e. .md-content .md-container .md-input .md-label span you can use inspect element / web developer tools to find this and use the exact same selector to override the default style given by the library, make sure the last thing you import is your custom style sheet.
You made wrong with css file path.
<!-- Custom styles for this template go here -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
Replace With
<!-- Custom styles for this template go here -->
<link rel="stylesheet" type="text/css" href="styles.css">
all your images are not found. Check the path / upload them again and make sure it's right. Maybe try the absolute path;
http://d33wubrfki0l68.cloudfront.net/bundles/adc83b19e793491b1c6ea0fd8b46cd9f32e592fc.js is not a style sheet. Please remove the style tag of it
You should upgrade your Jquery from version 1.11.3 to 3x.
That will help because version 1.11.3 is not compatible with Bootstrap 3.3.5.
Also you should try to press the "disable cache" button in Chrome Dev Tools->Network->Disable Cache. Usually, cache is the culprit of not updating CSS.
Related
Actually I am making a website using html, css, and normal javascript. I am trying to use google material components using the CDN way. I have perfectly imported a outlined text input field in my website. But now the problem is I want to change the outline color of the component. but I can't be able to change it from sass by using classname. I have tried a lot to find out a solution but unabled.
Please show me a way how can I change the attributes of the meterial elements.heres my html part...
html code
and here's the output...
output
and link to the website - https://material.io/components/text-fields/web#outlined-text
I just want to make the outlines white.
You should add your css file after cdn link so it can override cdn styles
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href=".style.css">
I'm pretty much new to all of this and for the past days I've been working on my first Website using bootstrap. Locally, this works fine, but right now, when trying to get it up online, it looks like this:
http://wearemanjaro.de
Just ugly html, no css nor any images are loading.
I made the link above link to the html which is in the /manjarowebsitebootrap/robots/index.html path. The CSS (bootstrap and custom) is in the following directory: /manjarowebsitebootstrap/css/...
The link to CSS in my html looks like the following:
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
Same problem with the images in my ../img folder. It all works fine locally. I'd really love some help or advice :)
First thing you need to do is use an absolute instead of a relative path.
if your directory structure is:
-root
--docs
---doc1.php
--includes
---header.php
---footer.php
---css.css
--index.php
In your header, you link to my CSS file like so:
<link href="includes/styling.css" type="text/css" rel="stylesheet" />
you need to do like this :
<link rel="stylesheet" type="text/css" href="/root/includes/css.css" />
You also need to use developer tools on chrome that will help you to debug these things.
I saw there that the images are not uploaded so once you able to upload them you will start getting them on the Website if the path is correct.
and best of luck for the new world of web development.:)
Your file structure has changed from local to online/live. I inspected your page, placed in the CDN for Bootstrap and pow, the styling came alive.
Use the following CDN to replace your current src='' path for bootstarp in your html head to see what I mean.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The next steps you should take: make note of where all your files are living on your server, you must place all associated files on the server, as specified by your code, i.e shows that you have a CSS folder.
Also is this HTML file located at the same level as the CSS folder or does this HTML file live in a folder of its own. If not your paths do not need to include the ../ portion and you should use just css/yourFileName.css
So I'm completely new to the world of coding, and I'm trying to make my website with Wordpress. So far I have a theme and all I want to do is tweak a few things here and there, learning how to manage the code. Something which I cannot seem to understand, even though I have looked for answers everywhere, is how to code CSS with wordpress on a specific page. I discovered the CSS code for the entire theme, but I would never find my way round that. All I want to do is link an external CSS stylesheet to the HTML code. I already know about
"link rel="stylesheet" href="style.css"
but this will not create a stylesheet out of thin air.
So my question is, this stylesheet, where will it appear if I have the right code? Will an extra sheet appear next to these ones?:
enter image description here
And if that's not possible, do I need to link to an external stylesheet in a program such as Notepad++? If that's the case, how do I do that?
I hope you understand my question and you will be able to help me. Thanks
you are better off using this to declare your css
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>"/>
and your file will go into your theme directory/ folder no need for additional folders just inside your theme create a style.css file
your css will be in a simmilar adress to the following
wordpress > wp-content > themes > theme-name > style.css
What you need to do is create a Child Theme first. You can do that by downloading Child Theme Wizard plugin. Then after you activate your new theme hover over Appearance tab which is going to open sub-menu with options. Click on editor, and then there will be Stylesheet style.css file to the right. Click on it and put your new styles there.
I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.
I'm working on a simple CRUD application to keep track of phones using Webmatrix 3. My Default.cshtml file displays the table.
When clicking on a row it goes to the EditPN.cshtml page for the user to edit the information for that record.
Now, following this tutorial I look into the value of UrlData[0] in my EditPN page.
Everything works fine with just one problem: since the URL ends up being something like this:
http://localhost:64053/EditPN/2223334444 my paths for CSS and JS files are off. My brute force solution has been to have both:
<link href="_css/myStyles.css" rel="stylesheet">
<link href="../_css/myStyles.css" rel="stylesheet">
in my _Layout.cshtml.
That way both http://localhost:64053/Default.cshtml and http://localhost:64053/EditPN/222333444 will have the CSS styles.
Since I don't like that, I tried to format the URL string to be this: http://localhost:64053/EditPN?pn=2223334444. Didn't work.
Tried this too: http://localhost:64053/EditPN.cshtml?pn=2223334444. Didn't work either. It doesn't even go to the EditPN.cshtml page.
How can I solve this issue? Oh, and BTW, I don't want to use the Webmatrix helpers. I want to keep things under JS, jQuery, etc.
You should prefix the url to your css and js files with a ~/, which tells web pages to work out the relative path:
<link href="~/_css/myStyles.css" rel="stylesheet" />