I am trying to edit the Login page for Oracle Apex Application.
.t-PageBody--login .t-body{
background: url(#APP_IMAGES#dataact_back.jpg)
background-size: 100% Auto;
}
After I've applied above CSS code in the css field, website still isn't displaying the image and I have no idea where it went wrong.
Your syntax is wrong and you should try this:
.t-PageBody--login .t-body {
background: url(&APP_IMAGES.dataact_back.jpg);
background-size: 100% Auto;
}
I have been playing with Drupal 8. At the moment I want to have an image as the header background in Bartik. For this I created a subtheme called "freex" in the following way:
Create folder freex in /themes/custom/
Create freex.info.yml in /themes/custom/freex/ containing:
name: Freex
description: Basis thema voor verenigingen
type: theme
core: 8.x
base theme: bartik
libraries:
- freex/global-styling
Create file freex.libraries.yml in /themes/custom/freex/ containing:
global-styling:
version: 1.0
css:
theme:
css/style.css: {}
Create file in /themes/custom/freex/css/ called style.css containing:
#header {
background-color: yellow;
}
Just to see of it works... It doesn't, the header does not change background color. Any ideas as to what I am missing?
Turn off the page cache: Configuration Menu -> Development -> Performance
Uncheck the checkboxes : Aggregate Css files, aggregate javascript files.
If you do this, when you see page source, you see your file name style.css - not the generated css file name, as you write. At the top of the performance page, click to clear all cache. And after that, see your page.
The Bartik theme includes colors.css last (I think it's auto-generated from the theme settings) so the subtheme colours are overriden by the later color module colours.
Add "!important" to your CSS color settings, so they won't be overridden. For example:
#header {
background-color: #CDBE79 !important;
background-image: linear-gradient(to bottom, #CDBE79 0%, #CDBE79 100%) !important;
}
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.
I have a reference inside my CSS file that refers to a static image:
#logo
{
background: url('/static/logo.png')
}
This works just fine on my dev machine but not on my production environment since the url should be static.mydomain.com/logo.png.
How do I dynamically change the css file according to the STATIC_URL in my settings file?
Use a relative path. Relative to the folder where the css file reside
You can move any CSS that contains static file paths to inline CSS, contained in the template.
i.e.
<div style="background: url('{% static 'logo.png' %}')"></div>
The catch here is that it won't work for #media queries, you'd need to put those in a block, e.g.
<style>
#media (min-width: 1200px){
background: url('{% static 'logo.png' %}');
}
</style>
Use absolute URL from base directory, this will point to any file in a static folder within an app
settings.py:
STATIC_URL = '/static/'
style.css:
background-image: url('/static/img/sample.jpg');
If you want to use {% static %} tag in your CSS file, you should use {% include %} tag. Here is an example to do so:
foo.html
{% load static %}
{% load i18n %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html>
<head>
<style>
{% include "path/to/custom_styles_1.css" %}
</style>
<link rel="stylesheet" href="{% static 'css/custom_styles_2.css' %}">
</head>
<body>
<!-- Your HTML body -->
</body>
</html>
custom_styles_1.css
{% load static%}
{
background: url('{% static "/img/logo.png" %}')
}
custom_styles_2.css
.fa {
position: relative;
text-align: center;
font-family: BTitrBold;
font-size: 3.5em;
}
.name {
position: absolute;
top: 37%;
right: 15%;
}
.school {
position: absolute;
top: 530px;
right: 200px;
}
.id {
position: absolute;
top: 700px;
right: 200px;
}
.degree {
position: absolute;
top: 740px;
left: 195px;
}
custom_styles_1.css is the CSS file that includes {% static %} tag. You should integrate it with your foo.html file with {% include %} tag. In this way, Django will put all the styles you need at the appropriate place and render the static tags correctly.
custom_styles_2.css is a normal CSS file located in STATIC_ROOT directory, so you can use {% static %} tag for it without any problem.
See this similar stackoverflow question.
The only way to do what you want is to generate your CSS through Django. HTML is usually associated with Django views and templates, but in truth, you can return any file type: CSS, JavaScript, plain text, etc. However, doing so will add overhead to your site, so setting proper HTTP headers and server-side caching of the generated file will be very important.
Basic method:
return render_to_response('stylesheet.css',
{ 'domain': 'http://static.mydomain.com/' },
context_instance=RequestContext(request),
mimetype='text/css'
)
Alternatively, you can set up hosts on your system that map the static domains back to localhost for development purposes. Then, you can reference the domain as normal, but it'll still pull from your development files. Also, if you happen to have Ruby installed on your system, you can make use of a rubygem called Ghost. It lets you easily create, enable, disable, and delete custom hosts right from the command-line with no fuss.
If you're using django-libsass to generate your css, you can use custom functions to bridge django and the sass precompiler.
As a matter of fact, the function static is already implemented, and you can use it:
.foo {
background: url(static("myapp/image/bar.png"));
}
as described here:
https://github.com/torchbox/django-libsass#custom-functions
There might be a way to get django to treat the CSS file like a template (I'm not very familiar with django) but you might want to try a different solution instead: use a dynamic stylesheet language such as LESS or Sass. With LESS it would be as simple as
#base: "//static.example.com/"
#logo {
background: url(%("%s/logo.png", #base))
}
Okay, 10 years down the line and I am facing this now. Here is my fix which will save you some trouble.
PS Not really sure if it is ethical however
grab your CSS file and place it in Templates
In your html file,
<style>
{% include 'path/to/css' %}
</style>
Solved my problems.
If your images aren't too big you can use data URIs, which can be embedded right in the css file without any links. They look like this:
.box-with-background {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgI=')
background-repeat: repeat;
}
Usually they're a bit longer then the one I've shown. You can generate them with javascript and you can find some online generators.
I have a Django view that renders a piece of text and word wraps it. I am using the below CSS. When I convert the same to PDF using PISA, I dont see the word wrap and text is lost.
Do I need to set any properties on PISA for this?
{
margin-left: 20px;
padding: 0;
font-size: 12;
font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
color: #333;
word-wrap: break-word;
}
Keep in mind that Pisa does not use CSS itself, it just implemented some of the CSS syntax and properties to apply its own rules in PDF generation.
See the section 6, Cascading Style Sheets, of the manual for the supported properties. And take a look at this nice manual, that is a little bit more detailed.
It's hard to find good documentation about pisa.