just successfully imported a db from a real website to my local website.
the problem is, the localhost/mysite doesn't display the template. i'm thinking it might be a problem of the URL while importing.
The settings in the configuration are also correct.
Now in my CSS
if i want to point it locally, is this correct: or do I have to eliminate the C:/ ?
Appreciate for your help
.product #header {
background: url('c:/xampp/htdocs/mysite/assets/templates/mysite/css/images/header_.jpg') no-repeat left;
}
Is this the correct way to write the path locally?
Thanks
Ideally any paths to images should be relative, so that when moved the site will still work correctly.
You should be using something like
.product #header {
background: url('/assets/templates/mysite/css/images/header_.jpg') no-repeat left;}
I don't think you can even reference a file the way you are doing. Maybe if you had url('file://C:....') but I can't see a good reason for it.
Related
i'm working on some website. I wanted to add a Cube Effect by swiper.js.
But when i'm adding into my JS an [effect: 'cube',] the whole website is going crazy :/
But if delete [effect: 'cube',] OR use flex-box instead of GRID, everything works?
Plz help
https://github.com/AdamZajler/First-Website
The solution was to add a position: absolute; FOR .swiper-wrapper
Yes, there are questions about this. Unfortunately, the answers are all messy now with information about different things that worked differently across the past five or so years.
So how the heck am I to
embed
an svg image
in a GitHub .wiki folder
inside a GitHub .wiki page
I can't believe you need a PhD for this.
Here is my example page with broken embedding:
- https://github.com/Sciss/ScalaCollider/wiki/Architecture/2413e094a59df4705e770b2a57ff84a8f0a1e7b4
Here is the actual thing:
- https://raw.githubusercontent.com/wiki/Sciss/ScalaCollider/images/ScalaCollider_types.svg
I suppose the problem is this renders as raw text instead of being shown as svg image?
And no, I don't want to set up gh-pages. I want to use the bloody Wiki, because that is what it's supposed to do.
Ok, so apparently this is what happens:
GitHub doesn't want to render images properly from rawgithubcontent.
So forget about embedding them in the wiki
Create a gh-pages branch for the main project unless you already have one
Find or create an unused directory in that branch, and add the image there
Link to the gh-pages URL
E.g. https://sciss.github.io/ScalaCollider/images/ScalaCollider_types.svg
Not cool, but it works.
You can do that using jsdelivr.net.
Steps:
Upload the file https://raw.githubusercontent.com/wiki/Sciss/ScalaCollider/images/ScalaCollider_types.svg to one folder under any repository.
Find the svg link on GitHub, and click to the "Raw" version.
Copy the URL.
Change raw.githubusercontent.com to cdn.jsdelivr.net
Insert /gh/ before your username.
Remove the branch name.
(Optional) Insert the version you want to link to, as #version (if you do not do this, you will get the latest - which may cause long-term caching)
Using label image, then add ?sanitize=true to the path tail of the svg file.
For example,
If raw svg file path in github is:
https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/github-pendant-rightCorner.svg
You can use below:
<a href="https://github.com/yanglr">
<img style="position: absolute; top: 76px; right: 0; border: 0" alt="Fork me on GitHub"
src="https://cdn.jsdelivr.net/gh/yanglr/Beautify-cnblogs/images/github-pendant-rightCorner.svg?sanitize=true"></a>
The result:
Reference:
Link and execute external JavaScript file hosted on GitHub
I just started trying out the TideSDK to deploy a website to .exe and .app, which for the most part is fantastic.
The problem that I'm currently coming across is that all my CSS styles are written in .less styles utilizing the less.js framework. Inside of here, I have custom font-faces declared, and when deployed to a standard web browser, they apply fine to all the elements that use them.
When deployed through Tide, it doesn't seem to stick unless I take all my styling out of .less style sheets and put them back into regular .CSS files, which leads me to believe that there is some sort of compile time change that Tide is using internally when deployed the actual view of the application.
I have no idea how to go about fixing this. As a note, I'm not getting any
[Error] Error finding
errors from the Tide console, which leads me to believe that the .svg's are being found, just not applied.
UPDATE:
It seems I was using wrong syntax in the src: url('...'), so the CSS in the .less file was actually failing silently. I'm getting a pretty strange [Error] Error finding... file for the .svg now. The URL that is inside this line of CSS is being prepended by app: 3 times.
After several hours of looking at this problem, I eventually have figured it out. Couple of things to note when you are using the combination of these frameworks:
less.js spits out really odd path directories when using
src: url('...');
As a solution for this, you can use the import directive that is available to you in less and put the #font-face declarations inside of that .css style sheet. By importing a plain .css style sheet, you are telling less.js to treat it as regular .css, and the muxed url that gets spit out won't happen.
#import "../css/style.css";
After putting the import directive and confirming that the SVG was indeed being generated under Resources - Fonts in the Chrome inspector, I proceeded to take a look at the SVG file itself to determine if there was something wrong in the CSS naming conventions for the SVG file. According to this answer, and the blog post within it, your SVG name should be using:
font-family
value in the naming scheme from the SVG meta data
src: url('YourSVGFont.svg#Silkscreen') format('svg');
when in fact, you should be using the font id, at least that was the solution in my case:
src: url('YourSVGFont.svg#slkscrb') format('svg');
This is the image embedded in the blog post so that you can see what I'm talking about, and see where in the SVG meta data these two names are placed.
I've got an express.js app currently using ejs (using jade for newer projects) and I'm trying to solve a problem in a clean and appropriate manner.
I've got a layout.ejs file with my header and footer in it. Most of my site so far has been one layer deep http://innovationbound.com/about or /services or /amy and so on....
I'm beginning to created online courses at http://innovationbound.com/courses/course-name and the issue I'm having is that these course pages can't reference the images the same way. <img src="images/linknedin.png" alt="LinkedIn Icon"> for instance.
From the course-name page it tries <img src="courses/images/LinkedIn.png" alt="LinkedIn Icon"> and obviously can't grab the image there.
Is there a setting in express, or something obvious I'm missing? I hope I don't have to use absolute urls, that just makes developing on the local machine insane.
Just use site root–relative paths. For example <img src="/images/linknedin.png" alt="LinkedIn Icon">. Note the / makes the difference.
There are three types of link paths:
Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
Document-relative paths (such as dreamweaver/contents.html).
Site root–relative paths (such as /support/dreamweaver/contents.html).
From Adobe.
You might consider it, but you can use "../images/link(n?)edin.png". However, I'd recommend to use absolute path, because images should be stored in /public (in general jade setup) and your path depth could be varied by your route rule.
As a tip, if you lost in relative path of image, right click on broken image and see a URL in properties on web browser. It'll give you a hint of where the image is.
All,
Simple question: I want to include an image "logo.png" as the background for my-app. Where should I put the file and how should I refer to it in the CSS file which is in the resources folder along with the main_page.js?
Here is the rest of the story:
I have a CSS class called doc-background. I know this class works because when I set the color of the background in a CSS file like so:
.doc-background { background-color: red} it has the desired effect and Firebug shows me that the class doc-background is being used.
However, when I add a line like
.doc-background { background-image: url('logo.png'); }, there is no effect. Firebug shows that the class doc-background is not applied. And when I modify the style in Firebug to add the line about the background-image it says "Failed to load URL" in the tooltip.
Can someone please point me to a guide on how to work with resources and images and where to put them if I want to use CSS? I have successfully used them using the image-view and coding them into the HTML.
Here is what I have already tried:
Using static-url instead
Moving the image file to images folder under resources
Referred to the image by using all variations on the path - including resources/images only including images, not including either...
Lot of Googling for the answer, Reading create your own app tutorials etc.
If you have an example app that uses colors and images from a CSS that will be the ultimate! But a location and some help with the background-image CSS property will get me started!
Thanks much,
Vis
Place your image somewhere relative to your css:
resources/style.css
resources/images/logo.png
Then use static_url to refer to the image:
background-image: static_url('images/logo.png');