I've just got a fresh Drupal 6 install. The CSS didn't work. Then I realized that a "?U" was appended, and Drupal couldn't find it. Does anyone know where to unset this?
<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?U" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/admin.css?U" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?U" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?U" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?U" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?U" />
<link type="text/css" rel="stylesheet" media="all" href="/themes/bluemarine/style.css?U" />
the ?U (or really any alphabet) is just a method drupal uses to cache information. it has no relevance to the location of the file (ie, node.css and node.css?U is in the same location to drupal).
it sounds like you may have a different issue. perhaps you enabled your cache and moved things around? you may need to clear your cache. or, if you've modified your install variables perhaps you're picking up the wrong base path or something. it's hard to tell the exact issue based on the limited information given.
You're right. Its because of the cache. I configured nginx to serve css files directly. But after I modified the configuration, it works fine now. Thank you!
Did you install Drupal into a sub-directory? Like:
http://domain.com/drupal
This would certainly cause the problems you speak of, though Drupal should have properly accommodated for that.
Related
It's only problem with visability of css. There are a lot of answers in google, but since yesterday I've checked all of them and I still didn't solve my problem...
My project structure in eclipse looks like this:
Only in one file I have relation to css - in header.jsp:
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/css1/bootstrap/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/css1/main.css"/>
This path should be fine. What could be the problem?
In jsp also you can use the Html tags freely so just use
<link rel ="stylesheet" type="text/css" href="src/resources/css1/bootstrap/bootstrap.css">
i think this should work, see that you are not making spelling mistakes or Capital/small alphabet mistakes.
I have placed bootstrap.min.css and bootstrap.min.js in assets/stylesheets and assets/javascripts, respectively. When I run my app locally, I get the styling that I expect. Further, if I view the source locally I see the following tags:
<link rel="stylesheet" media="all" href="/assets/comments.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
(there are many other tags like this one)
I have the same setup on a DigitalOcean Droplet, but the css and javascript doesn't seem to be working.
If I view the source on the server I see tags like this:
<link rel="stylesheet" media="all" href="/stylesheets/application.css" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/stylesheets/bootstrap.min.css" data-turbolinks-track="true" />
Something doesn't seem to be rendering properly. This is probably my lack of experience showing, but I really have no idea how to proceed here.
Any ideas?
One of my stylesheets doesn't seem to load every style. I've read everything i can find but the issues that people usually have are obvious things to me but i can't seem to figure out my own issue. I have a site made using Razor and this is where i call my stylesheets in the head section.
<link href="#Url.Content("~/css/reset.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/jquery-ui-1.10.1.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchLayout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchSkin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/AvailabilityLayout.css")" rel="stylesheet" type="text/css" media="screen" />
<link href="#Url.Content("~/css/AvailabilitySkin.css")" rel="stylesheet" type="text/css" media="screen"/>
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
The issue seems to be with the AVailabilitySkin.css and sometimes AvailabilityLayout.css. So for example i have this code in AvailibilitySkin.css:
td#price h2, td#price h4
{
text-align:center;
}
And it doesn't get picked up, I don't even see it being overwritten by another style or anything. But if I add the same code to the Skin.css file then it works perfectly fine. I can't add all my styles to Skin.css so i can't just put that style in there and call it a day. It has to be separated, right now the site is being developed locally so unfortunately i cannot post a link to the site but if anything is needed (like more code) please let me know. I haven't been able to find the issue and I've tried adding #charset "UTF-8"; at the top of the stylesheets and it didn't really do much.
Problem has been fixed guys/gals. In the end it was just another mistake by me and it wasn't coming up in the Console and Visual Studio wasn't flagging it as an issue. It was mostly just a missed single quote and another programmer here ran the code through WebStorm and it came right up and fixed it. Thanks for the help and sorry for the dumb mistake question.
I'm working on two different WordPress sites that are in many ways similar but are skinned differently.
For example, let's say I'm working on two 'magazine' sites, which share the same CSS layout e.g. grid system, margin's etc., but different CSS decorational properties e.g. gradients, colours, shadows.
What is the best way to get them to share the same base CSS layout, but different decorational CSS?
Initially I thought something like ...
<link rel="stylesheet" type="text/css" media="all" href="LINK-TO-BASE-CSS-ON-PRIMARY-DOMAIN.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/style.css" /> <!-- This would be the 'top-up' CSS -->
This doesn't seem particularly clean to me though. I admit though, there is also a very similar question here.
Is this still considered the best way?
Are there any disadvantages to linking to another domain? I've read that this may even be an advantage because of cross-domain loading.
What you suggested is fine. I'm not sure that there is an advantage called "cross-domain loading", but hosting your style sheets in another server is a very common practice. This other server is known as a CDN, or Content Delivery Network. Here's some information about CDNs and their advantages:
http://www.sitepoint.com/7-reasons-to-use-a-cdn/
Also, pro-tip: do some DNS prefetching if you're going to use a separate domain to host your files. It's as easy as:
<link rel="dns-prefetch" href="//myexternalcdn.com" />
try to separate layout structure and templates and call everything from the same domain
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/firsttamplatename.css" />
OR
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/secondtamplatename.css" />
Benefit of this solution is that you can adtionaly offer switching templates :D
You can use this filter, to filter out styles with any condition or alternate output href string, example:
add_filter( 'style_loader_src', function($href){
if(strpos($href, "name-of-allowed.css") !== false) {
return $href;
}
return false;
});
I know this is a simple question but for some reason I'm wondering if I'm doing something wrong here.
My understanding is that if you declare 2 CSS files
<script type="text/css" src="JQueryUI.css"></script>
<script type="text/css" src="Override.css"></script>
I want to use the "Override.css" to override some values, so if I type let's say ".ui-accordion" and put my own values, i would expect them to take priority over the original values located under that name on the JQuery.css file.
Mainly because the declaration states that Override.css comes AFTER JWuery.css.
For some reason this is NOT happening.
I tried switching the declaration of the 2 files
...but the Jquery.css seems to ALWAYS seems to take priority.
Any reason why ??
This is not working because you are not loading correctly the css files.
It should be:
<link rel="stylesheet" href="JQueryUI.css" type="text/css" media="all" />
<link rel="stylesheet" href="Override.css" type="text/css" media="all" />
I am agree with Zhihao about specificity of elements, but I have also noticed that your are using <script> to attach CSS files, use <link> tags instead, maybe that would load your css and it will override existing styles:
<link rel="stylesheet" type="text/css" href="JQueryUI.css" />
<link rel="stylesheet" type="text/css" href="Override.css" />
P.S. just posted my notice in the comment as an answer