I have created a custom Magento 2 theme called 'gvtheme'.
The folder layout for the css is: frontend->Magento->gvtheme->web->css->source->style.css
In style.css I have put body: background-color: red; just to test if it is working. When I inspect the body tag in chrome it is not showing up, not even as an overridden style.
In Content/Design/Configuration in the Magento 2 backend it's showing that the 'Default Store View' and the other two views have 'gvtheme' as their theme. It was previously showing as 'Luma'.
On the frontend of the site it is no longer showing the 'Luma' logo and style. I have flushed all the caches including 'Flush Javascript/CSS Cache'.
Does anyone have any ideas why this might not be working?
Any help would be greatly appreciated!
Turns out I needed to add 'custom-theme'->'Magento_Theme'->'layout'->'default_head_blocks.xml'. In that file I needed to add:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/source/style.css" />
</head>
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!
Since a few weeks, the favicon of my webzine is no longer displayed, and this on the browser of my work, but also on my personal PC.
I do not think I have changed the configuration. I tried to re-upload it, to no avail.
https://www.yubigeek.com/
In the Google Chrome Developer Console, there is an error on favicon.ico (404) but in the source code of the page, this URL is not called.
There are however two tag link with a rel = "icon" and the URL of the favicon, if I click on the links, the images are there.
This is due to a div markup which wrongly appears if the head section of your pages. Such markup should only be in the body.
More details
Most browsers accept body-only markups in head. But Chrome has a particular behavior. When this happens, Chrome considers the head section to be closed. Therefore, following head markups are actually considered to be in the body. And since favicon markups do not work when there are in body...
This is why your favicon fails on Chrome but works on Firefox.
How to fix
Your first two div are around line 153, still in the head. As a hint, their ids are fb-root and fb-customerchat. That should help you spot which plugin is doing this.
Should you disable this plugin, at least for now? Your choice.
You should also report this issue to the plugin developer. You must not be the only one impacted by this issue.
The best way to add WordPress Favicon is adding favicon via Appearance > Customize > Site Identity. Create favicon image at least by 512 x 512 and follow the path to navigate. Then upload the image in Site Identity section. Save it and you're done.
Please follow this for more info.
It seems you're using a PNG image, you can try to add attribute type.
So your link would be something like : <link rel="icon" href="yourpath" type="image/png">
EDIT : Plus, put your .ico file in the root of you website if it's not already done.
This approach might help if you cannot fix invalid head markup explained by #philippe_b:
remove_action( 'wp_head', 'wp_site_icon', 99 );
add_action( 'wp_head', 'wp_site_icon', 0 );
Add it to functions.php in your child theme. This way we print site icons on top of head.
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.
I am working on a site using Adobe CQ and somewhere CQ is automatically adding:
<meta name="viewport" content="width=device-width,initial-scale=1">
right after the opening head tag. Does anyone know where I can change this is in Adobe CQ so I can get this site displaying correctly for the iPad? Maybe there is a way to override any other viewport settings found on a page? Thanks for any suggestions.
The default head script for the mobile page in CQ5.5 can be found at libs/wcm/mobile/components/page/head.jsp
The default head script for the web page in CQ5.5 can be found at /libs/foundation/components/page/head.jsp
You can override the foundation head.jsp by creating a resource using this path: /apps/<site-id>/components/page/base/head.jsp. Any content in this resource will override content in default(libs/) head.jsp.
Actually it is added via js in /libs/cq/touch/widgets/source/jquerymobile/jquery.mobile.js, search for metaViewportContent string.
I haven't found yet how to change it in proper way, though.
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