django-tables2 stylesheet not loading - css

I'm using Django-nonrel 1.5 and django-tables2
I'm outputting a table and it renders correctly, however there are no styling applied from the paleblue stylesheet (table has 'paleblue' class). I then added a table class with the attrs metadata but it didn't make a difference.
Whether I'm using:
<link href="{{ STATIC_URL }}django_tables2/themes/paleblue/css/screen.css" rel="stylesheet">
or
<link href="{% static 'django_tables2/themes/paleblue/css/screen.css' %}" rel="stylesheet">
it doesn't work. It does strangely enough return a 200 at this url
http://localhost:8000/static/django_tables2/themes/paleblue/css/screen.css
with the response body:
Reload the page to get source for: http://localhost:8000/static/django_tables2/themes/paleblue/css/screen.css
(which does not change after reloads)
Being appenginge, I'm using gaenv and the django-tables2 is thus in this location:
project_root/gaenv_lib/django_tables2/static/django_tables2/themes/paleblue/css/screen.css
I've added django_tables2 to the INSTALLED_APPS, and TEMPLATE_CONTEXT_PROCESSORS also has 'django.core.context_processors.request', (by default)
What am I missing to get the correct path to the css in dev env?

Related

Github pages not rendering css correctly for Jekyll theme

This is the link to github for the theme which I'm working on: https://github.com/PrashantYadav/xosjapps
On the localhost, its working properly.
I have set the baseurl but still its rendering css correctly as you can see it here - https://prashantyadav.github.io/xosjapps/
This is the url for original theme: https://github.com/jeromelachaud/freelancer-theme
Please help.
The console said that it's failed to load ressources. Are you sure you put the correct path to the files ?
CSS files aren't being loaded properly.
Move your css files that are located in /_includes/css to /css and load them from your layout file (or include) as:
<link rel="stylesheet" href="{{ '/css/main.css' | absolute_url }}" type="text/css" />
<link rel="stylesheet" href="{{ '/css/bootstrap.min.css' | absolute_url }}" type="text/css" />

Thymeleaf + CSS+SpringBoot

I have a problem with CSS and Thymeleaf.
In my Spring boot app, I have this structure:
src/main/resource/static/css (for css files)
src/main/resource/static/templates (for html file)
Now, with my html page named ErrorPage and css file named Layout.css, using Thymeleaf I have, in the head of ErrorPage:
<link href="../css/Layout.css" th:href="#{css/Layout.css}" type="text/css" />
But this does not work.
What am I doing wrong?
Move your template folder right under resources:
src/main/resource/static/css (for CSS files);
src/main/resource/templates (for HTML templates).
Then correct the link tag as follows:
<link href="../static/css/Layout.css" th:href="#{/css/Layout.css}" rel="stylesheet" />
Move your template folder right under resources:
src/main/resources/static/css (for CSS files);
src/main/resources/templates (for HTML templates).
Then correct the link tag as follows (relative or absolute):
<link href="../css/firstcss.css" rel="stylesheet">
<link href="/css/secondcss.css" rel="stylesheet">
The old solution with static in front doesn't work for me.
The main culprit of this behaviour is a custom security configuration which is very likely you are doing in your WebSecurityConfigurerAdapter subclass.
If you use SpringBoot 2+ version you should add the following line in your WebSecurityConfigurerAdapter configuration
.requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()

My css and image files are being blocked and don't show in chrome

Chrome is blocking the css files and images from showing by generating this error in its console:
This request has been blocked; the content must be served over HTTPS
I have all my routes to the CSS files with relative paths:
<link type="text/css" rel="stylesheet" href="../resources/css/template.css"/>
<link type="text/css" rel="stylesheet" href="../resources/css/menu.css"/>
<link type="text/css" rel="stylesheet" href="../resources/css/general.css"/>
<link type="text/css" rel="stylesheet" href="../resources/css/system.css"/>
But there is a token (a token for maintaining the application state) added to the path (as this is ADF)
so chrome finds this:
'http://my.site.com/package/faces/resources/css/template.css?_adf.ctrl-state=q0l98h1nm_125'
I don't know how (I searched all my project and there's nothing that has a non-relative path)
I think, maybe the added token mixes it all for chrome?:
?_adf.ctrl-state=q0l98h1nm_125
Problem:
All the styles and images are blocked form the site, nothing shows, only letters (but in firefox shows it perfectly)
As you see in the html tags, all the css files I have have relative paths and I think that the browser should already decide to attach it the proper protocol, i.e the main protocol of the request.
Question:
How to resolve the problem?

How to extract the title image of the web page

I want to extract the title image of a web page using C# in ASP.NET. I checked the windows and document objects but they don't have a property such as title. So searching for method to extract the title image like in the page tab of the Chrome.
using (WebClient client = new WebClient())
{
Byte[] favico = client.DownloadData("http://msite.com/favico.ico");
}
That's using WebClient.DownloadData. You can also use WebClient.DownloadFile if you're looking to store it.
A further bullet-proofed approach would be to download the index page and use an HTML parser to look for the <link> tag that specifies where the icon is supposed to be (could also be applied to apple-touch-icon or otherwise).
BTW, the tags I believe you're looking to parse are:
<!-- StackOverflow's implementation: -->
<link rel="shortcut icon" href="http://cdn.../favicon.ico">
<link rel="apple-touch-icon" href="http://cdn.../apple-touch-icon.png">
<!-- Google's implementation: -->
<meta content="/images/google_favicon_128.png" itemprop="image">
<!-- Facebook's implementation: -->
<link href="http://static.ak.fbcdn.net/.../q9U99v3_saj.ico" rel="shortcut icon">
There is no such a thing as "title image" in HTML specifications. The icon you see in the tab or near the URL in some browser is specified using <link rel="icon"/> construct:
<link type="image/x-icon" href="/images/favicon.ico" rel="icon" />
IE may rquire you to use a slightly different syntax:
<link type="image/x-icon" href="/images/favicon.ico" rel="shortcut" />
Parse the page - and retrieve the value of href attribute - this is the path of the icon.
Note also, that IE version 8 and below ignore this line completely and instead look for file favicon.ico in the root of the site. See this somewhat old article for more information on IE.

SharePoint Content Editor CSS customization caching

When SharePoint's content editor CSS file (HtmlEditorCustomStyles.css) is customized how can I get the updated css file updated on the client browser?
In testing I've found the updated version is ignored in favor of the browser cached version and I've only been able to get the updated version by deleting the CSS file from the browser cache (or just deleting the cache completely).
If you figure out where the CSS file is being included, you can add a URL parameter to the end of the include. For example if you find the include is:
<link type="text/css" rel="stylesheet" href="[some path]HtmlEditorCustomStyles.css">
You can add:
<link type="text/css" rel="stylesheet" href="[some path]HtmlEditorCustomStyles.css?revision=1">

Resources