I have a landing page created as a single html file with an external css file and a bunch of jpeg images. It looks fine and everything is good with it. I need to insert this page as an article in Joomla so that it looked the same way as it does now, without broken styles and missing images. It should show all header, footer and sidebar content from Joomla and the landing page as a regular page. What is the right way to do that?
Create a blank template for joomla and paste the whole body of your landing page to a joomla article.
Alternately, if you are using a totally different stylesheet, you may have better luck if you turn it into a custom template. Joomla's templating model is tremendously simple and abnormally flexible!
Try this
place the css,scripts,images in the root folder of your website.
path could be
/css/style.css or for localhost /joomla/css/style.css
/scripts/script.js or for localhost /joomla/scripts/script.js
/images/image.jpg or for localhost /joomla/images/image.jpg
copy and paste your html code including the file paths in article editor.
this could be
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />//for css
<script type="text/javascript" src="/scripts/scripts.js"></script>//for javascript
<img src="/images/image.jpg" />//for images
use absolute paths for locating your files.
this is irrespective of templates
Related
I have placed my CSS and Images folders and index.html on GitHub. Only the html displays without the CSS formatting. I have cleared my cache and cookies. I'm using Chrome. I can't seem to get the CSS formatting to work.
Can anyone help?
uploaded web files to Github: https://github.com/Dennybribri/cv
I have attached a picture of how the top part of the website should look like. Here is a link to the site from Github that just displays the html: https://dennybribri.github.io/cv/
Rename your folder from CSS to css.
The filesystem used on the servers of Github pages sites is case sensitive.
You'll need to import your css from the CSS folder:
<link rel="stylesheet" href="CSS/styles.css">
Also because of the same problem your images will not show up. You will need to specify the path to Images/someimage.jpg instead of images/someimage.jpg
Thank you Mahmoud and Merlin. I changed the folder names to lower case and forever have this issue stuck in my brain. It works great!
i created a html page in pingendo using its drag and drop feature.
3 files were created draft.html, draft.css, draft.less.
I uploaded files on my website on hostinger.
But it only shows the html part and css is not loaded.
what changes should I make in pingendo files to make it work?
Are you linking to the css file sored locally on your machine in your HTML?
IE: <link href="C:\Users\USERNAME\Desktop\web\assets\draft.css" rel="stylesheet" type="text/css">
Rather than directly going to the path of the CSS in relation to your HTML page?
IE <link href="assets\draft.css" rel="stylesheet" type="text/css">
May I have a link to your site to take a look?
I have standard html files with their own style, and use a common css file for different fonts only. I need to put the FB website thumbnail to all the files through that css.
Is it possible to add the following to the css or .js files? (as there are thousands of html files):
<meta property="og:image" content="http://websitename/image.jpg">
You'll need to add that snippet to the html itself, not the css. Meta tags go into the head of your webpage (between the <head></head> tags). There's no way to insert html into a page via a css file.
OpenGraph is some standard - even if you did put it inside your CSS - nobody would know it's there - so no, it can't be done with CSS.
If some website would process the javascript (but facebook hardly would) you could get lucky but the chances are really low so it is not reliable.
However I suggest you to write a little e.g. PHP skript that would run through all the .html / .htm files and would rewrite <head> with <head> <meta property="og:image" content="http://websitename/image.jpg">
But I suggest that instead of adding only html, it would be much better if you would add an include script that would contain further cross-files changes. So next time you would need to add something to <head> in all your files you would just add it inside your e.g. my_include.php
EDIT:
I would also recommend you to look at the facebook's developer tool that tells you exactly what it sees when it visits your site: https://developers.facebook.com/tools/debug/og/echo?q=YOURSITEURL
I have installed Joomla 3.x and some modules.
One of my modules is to display articles from certain categories of my articles, but when I navigate to my article, the CSS stylesheets do not load.
When I view the source, I discovered that the URL for the CSS stylesheet in the page above becomes:
<base href="http://cambridge.mywebcommunity.org/index.php/10-%E7%88%B1%E7%AB%8B%E6%96%B9%E5%8A%A8%E5%90%91%E6%9B%B4%E6%96%B0/3-welcome-to-your-blog" />
... instead of the original I put in, here:
<base href="http://cambridge.mywebcommunity.org/" />
This also happens to another CSS stylesheet from the module. The CSS URL loads like this:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/10-爱立方动向更新/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
... instead of the original CSS URL that I put in:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
So I have figured out that the issue is the URLs are not being added by Joomla correctly. How would I go about fixing this?
From what you've posted it looks like you (or extension developers) are trying to add css with absolute links. Looking at the source of your page will quickly show you that your links look different from the core links in that they are absolute not relative. You may need to look a the code in the modules doing this and fix or contact the developers and ask them to fix. Also ask them about the js.
In Joomla you add style sheets with code like this in your template index:
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
The change in behavior is most likely due to a recent security fix concerning uris in the header. I'm not going to link to details of the exploit but easy enough to find out why this was changed, but it was for good reasons.
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.