Currently, I am trying to use Codepen Project's environment to build a website and later deploy it. I am using a template that I want to start building from. It has its own HTML pages as well as CSS and JS that is linked. However, when I am working in the project environment I cannot seem to get the CSS to apply to the html code (in other words, the live preview keeps showing naked HTML). I have tried uploading the files into the project's root, tried copying them in newly created css files, and tried using them as external sources (href to an external url in the head tag).
It is really to bad because I feel the Project environment can really offer a lot, though I just can't get it to work.
Thanks in advance, and take care!
LINK TO CODEPEN PROJECT:
https://codepen.io/Thumpertje/project/editor/DxxkqM/
<div class="code">
</div>
Related
I have my code with the following structure, where I only have a style.css, favicon.png, logo.png, and an external Javascript file in their respective folders.
index.html
assets
CSS
img
I'm looking to convert it to a template on GitHub, where a user can use it and change only the <title> of the head, the main <h1> and <h2> of the body, the logo.png (next to the <h1>) and the favicon.
I have no idea how to do it, as an example, I put this Github project, where using the template just edit .upptimerc.yml to configure your site, and Github Actions makes the deploy in Github Pages every time you modify it. While the source code is in another repository.
If someone could give me something to guide me or give me an example even with a "Hello world" HTML I would appreciate it. I couldn't find anything on the internet beyond the basics.
So I began studying code this month and I'm doing an online Web Development Bootcamp. My first assignment was to create a publish a simple HTML site on GitHub. I just published my site but when I go and check it out, the image is broken, which wasn't happening on the Offline version.
So this noob here needs help trying to figure out what I did wrong.
sakurach4n's first HTML project
This commonly happens when migrating from a local site to a live site.
The "src" for the image needs to be published/hosted somewhere on the web so it has a direct URL to the image, like this image of a cat: https://ichef.bbci.co.uk/news/1024/cpsprodpb/151AB/production/_111434468_gettyimages-1143489763.jpg
It works locally because that file is present on your local machine in a folder somewhere. Because the file path is relative it now searches for the image like this: https://sakurach4n.github.io/images/mafalda.png (which does not exist)
What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.
So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.
What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.
What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.
What are you testing on?
hugo-coder and(or) hugo-academic
Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.
Do let me know if its possible and worthwhile to pursue this and any references that might help.
So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.
I got something working by doing the following -
I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -
[[menu.main]]
name = "CustomHTML"
url = "CustomHTML/index.html"
weight = 50
hugo serve And it worked.
Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.
EDIT
Looks like the Hugo folks also suggest doing the same way.
hope you're doing fine.
I am currently stuck with my Web App project. This is the context: I would like to code a Web App using J2E. There's a free template that I liked and thus I decided to download it. When starting to use it I notice the CSS isn't applied.
Instead of having this, I have this:
However I do not see where the error is. The CSS & Bootstrap files should be visible in the JSP file and IntelliJ recognizes them. However I can't display these files (whether css or even pictures) that are referenced in "href".
Here's the project structure and code, maybe something's wrong there.
I'm used to HTML and to my understanding JSP isn't too different. Are the referencings different though?
Thanks in advance for any help you'll give,
Fares
YES.
Found the answer. Put resources in different folder than WEB-INF.
I believe that, your HTML file is inside the WEB-INF folder, for the to work either remove the WEB-INF path
<link href='style/stylesheet.css'>
or move your HTML one folder up.
I'm assuming this is an easy question, but I'll be darned if I can find the answer.
I have a website in Visual Studio 2008. The paths to the stylesheets (and images) are in the following format /css/stylesheetname.css
At the root of the web project in Visual studio the folder exists as does the stylesheet. These paths work fine when running it in IIS.
If I use the inbuilt webserver in Visual Studio the paths fail because it puts the projectname in the path i.e. http://localhost:2020/projectname/default.aspx
In this case the / takes the path right back to http://localhost:2020
This is further compounded by the fact that if you click "design" the styles that import background images all fail although the stylesheet is imported correctly (becuase all other aspects of the stylesheet work i.e. .class{font-family:arial;} works but .class{background: url(/images/image.jpg)} does not).
I guess it's all to do with how Visual studio calculates its root path for the website, however I can't find a setting to change this.
Any ideas??
Update: as per Egil Hansen's answer I converted the paths in the CSS file to relative paths. However the background images still do not display in Design mode. I'll take a look at using Themes to get round this in due course.
I think the correct solution is to use relative urls in the style sheet instead of absolute urls as you use now.
Do note that relative urls in style sheets are relative to the location of the style sheet, not the current page being view by the browser.
If you use ASP.NET Themes, you can put all your website graphics in a /App_Themes/YourTheme/Images/ folder, and put your style sheet in the /App_Themes/YourTheme/ folder.
In your style sheet, you can then simply reference an image with url(Images/img.gif), and it will work both online and in development.
The you just need to assign your ASP.NET Theme to the page(s) you want, either through web.config's Pages section (<pages styleSheetTheme="Default">) that will assign a theme to all pages on the website or through the <%# Page ... directive on each page.
In general, you can do some really neat things with ASP.NET Themes and Skins, just take a look at the ASP.NET Themes and Skins Overview over at msdn.microsoft.com.
There are a few issues to be aware of with Themes in ASP.NET, take a look at my post How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control, which explains and solves the issues I have come across so far.
I have been running projects using the custom Image folder for all my graphics for ASP.Net applications. While there have been advancement in this regard with the App_Theme and App_Code folder(s) available in the progressive VS IDE; I still kept my folder and it has not disapponited when deploying it on the server.
So with that said - the proverbial folder will be sitting with all the bin, App_Code and _Themes and the reference to it is made through this way
background: url(../image/..);
of course the code above sitting in the CSS file. It works for me all the time
not sure if this works for VS 2008 or not, but im using visual web developer 2010 and it worked for me:
1) click on the project in the solution explorer
2) it shows a "Virtual Path" property which is defaulted to "/projectname"
3) change it to "/" instead and it seems to do what is desired
let me know if this works for you!
it has been ages since I did anything in css, but maybe url(./images/image.jpg)
will work?
Edit:
Or rather ~/format /css/stylesheetname.css or ./format /css/stylesheetname.css as the url to the stylesheet.
I had the same issue and it drove me crazy. Solution is to add an Apps_Theme folder and copy the images into there. When you publish the site the folder structure is preserved and the imnges display.
I had set path css url image by
code { background:url(/images/xxx.jpg) no-repeat; }
and running file at IIS, so must to point default website to your project
how to running testing preview
type:
http://localhost/default.aspx
this is correct path same running on server
include file js or css can use "/" root path
cheers
Noboyband