We have a 3rd party website that uses include files to add header and footer wrappers to the pages(not our wish but we are stuck with it). We need to change these to reflect our new responsive website currently in development, the wrappers load fine with all image paths working well,apart from some font icons in the footer.
I am trying to load the font icons from the remote server where our new site is located but cannot seem to get them to render. We have tried everything including fully qualified paths to no avail. Is this possible or should we consider another approach.?
Related
I want to make an app which will be working similar to Stylish extension and google chrome inspector. Is it possible to make something like this but working not as an extension but as a separate service?
I've already done client app based on react which have menu with elements to change, for example I can choose font type, font size, colors, etc.
Beside menu, I have iframe which displays site from url - my idea was to download whole webpage on the server side, deploy it with docker on nginx to serve it and send back my new url to the client. Is there any easier way to do it?
I've also done simple backend app based on spring which downloads the whole webpage to folder.
The most important thing in this app is to generate separate CSS file which can be later included to given webpage.
I struggle with few problems:
How to display website from url, if with iframe, how to change CSS of given website?
How to display changed CSS immediately?
How you got any ideas or tips how to do it?
Maybe using javascript you can apply your changes to the layout and save it as 'actions' to perform after rendering,,,, or you could generate own css and based on that css generete functions, which perform the change to the layout ( the other way around )
To swop the stylesheet, give the link element an id so you can reference it, then reset its href, i.e.
<link rel="stylesheet" href="style/default.css" id="themeStyles" />
function setTheme(themeName) {
let stylesheetUrl = 'style/' + themeName + '.css';
document.getElementById('themeStyles').setAttribute("href", stylesheetUrl);
}
If the page hosted in the iframe is served from the same domain as the iframe then this is easily done with cross frame scripting.
I would like to showcase a page from my Ionic 3 project onto my website.
I have been trying to copy the rendered html from the simulator with the rendered main.css and placing it onto my website using a Marvel css device.
It still seems to need hours of finessing to get to what the simulator looks like.
** This is not a clashing of css files. I checked.
Does anyone know an easy way showcase a demo of the app onto the website?
Just deploy your built code from project's www directory (wrapped in your css Marvel device container) to your web hosting and it should work given that you do not rely on ionic/cordova only functionalities that would not work on a desktop anyway. In the end it is an Angular app.
I'm trying to deploy a site to Heroku using node.js, and I've run into a bit of an issue. When I run my site locally, it looks as I expected it to. However, once I deploy it to Heroku, it seems that it does not recognize the CSS file I have included, despite the fact that it is using the same exact files and file structure.
I have confirmed that my HTML and CSS code is syntactically correct, and that the CSS file is being pushed through Git. I made a commit by changing one thing in the CSS to make sure that it was being pushed (it did).
Here's how I access the CSS file:
<link rel="stylesheet" type="text/css" href="css/style.css">
Here is an image of how the website looks locally (left) and deployed on Heroku (right) using the same exact code (the black boxes are just from me obscuring some personal details).
Website Comparison
Does anyone know why Heroku refuses to use my CSS? I've been racking my brain for 2 days on this can can't figure it out.
I had the exact same problem, it happend I miss one character in my whole code. Let me explain
When I heroku opened my project no css loaded, but interestingly enough jquery was working fine and the css that jquery was getting from the css file was just fine. The css file was not the problem.
Then I found that the browser was blocking some
content.
If you tell the browser to read the blocked content anyways, it will show the page no problem, but it will show a https with a horrible red line crossing it, not an option. Then I checked what content the browser was blocking
(blocked content)
it was my bootstrap link.
So I was linking my bootstrap with http and not https.
I added that letter s and it is working fine now.
Recently I've been tasked with redesigning a website for the current company I'm working at. I've been using weebly to make the site, and then exporting the HTML to be re-hosted on the company's servers.
However, I've noticed that some functionality in weebly's code has stopped working. I imagine this might be due to weebly hosting some elements on their own servers, but this is merely a beginners best guess.
1. The picture for the logo on the banner does not appear once the HTML is rehosted
For comparison, here's the site while hosted on weebly:
http://mjmacoustique.weebly.com/
and the site on the company's servers:
http://www.mjm.qc.ca/redesign2015/
When weebly hosts, the ''MJM'' image should be on the top left and function as a return to home page button when clicked. However, when it's hosted on the company's server, the image is not found.
2. On Firefox, the background image of the home page is replaced with an all black background
When opened in firefox, it fails to load the background image of the main page.
Any help or solutions to these problems would be greatly appreciated.
Thanks.
I can help with question #1: the logo is hosted on weebly's servers, but in the html it's written in a shortcut method like this example: /uploads/2/6/8/5/26851316/1434298489.png"
the easy workaround would be to keep the weebly version of the site working, in in the html change the src value of the missing images to something like this http://mjmacoustique.weebly.com/uploads/2/6/8/5/26851316/1434298489.png
So you haveto add the http://YOURSITE.weebly.com before all the src values of your images.
otherwise, just load all the images you need on a blank page of the site on your servers, copy image urls of those and replace the urls in the html with that.
Hope that helps?
The firefox issue might also be solved if all your src values are linked correctly but I cannot be sure about that.
When I tried exporting a site from weebly, some assets were missing from the zip it produced. This resulted in some images failing to appear because they simply weren't there. I don't know how often this happens (or if it happens only for some sites), but weebly's export feature definitely seems to have bugs.
I worked around this by using wget to recursively fetch the content that weebly was hosting. Then I hand-copied the missing assets (and only the missing assets) from the directory structure saved by wget and merged them into the directory structure from weebly's export zip. This is time-consuming, but necessary since the directory structure fetched by wget includes dynamically-generated content (meta data for weebly's editor, assets with decorated names, etc) that you probably don't want in the content you host elsewhere.
I am completely new to web design but I have to change out my organization's old website for a new one. I need to install the site into dreamweaver so I can start making changes to the text and the images and fix links that don't work. I was basically handed a set of html, css and dreamweaver files with no instruction. How do I put the files into dreamweaver and define the site or whatever, and how do I publish the site once its polished, and do I need to put in on a server or something? This is my first time doing anything like this.
You can go to site > manage sites in the menu. This will allow you to setup parameters for the server and the local environment. If you have an exported Dreamweaver site file this is where you would import site to adjust the configuration.