I encountered such a problem, static files (pictures) are not loading in my Django project.
The most amazing thing is that I did not change anything, just yesterday, everything worked, and today the pictures are refusing to load.
If I follow a direct link to an object, the picture is and opens. However, if you register it in a CSS file, the path to the image is crossed out, and the inscription in the browser debugger "invalid property value"
This is weird, but it works. Maybe someone will be useful. The graphic files that were the background were not loaded.
The background was assigned through CSS according to this principle:
#showcase-inner {
background: url(../img/flowers.jpg) no-repeat top center fixed/cover;
position: relative;
overflow: hidden;
min-height: 350px; }
I repeat. Previously, everything worked, at what point everything went wrong, I did not follow. But when I changed CSS, the graphics started loading:
#showcase-inner {
background-size: cover cover;
background-repeat: no-repeat;
background-position: top center;
background-image: url(../img/building.jpg);
background-attachment: fixed;
position: relative;
overflow: hidden;
min-height: 350px; }
Related
I want to create my own logo in login page.First i uploaded image at =>Shared Components/Static Workspace Files (also tried Static Application Files).Then used below code +>Login Page+>Css Inline.But i am not getting any logo.any idea where i am doing any wrong or any clue to do cross check.
span.t-Login-logo {
background-image: url(#WORKSPACE_IMAGES#Fjimages1.png);
background-size: cover;
width: 100px;
height: 100px;
}
I would like to adapt the .css file provided here to include a small logo in the top right corner of every slide except the title, inverse, and final slide. Ideally, I can just add something simple to the .css file rather than manually code each slide of the presentation.
I tried adding this
background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
background-position: 9% 15%;
background-size: 55px;
to
.remark-slide-content {
padding-left: 100px; /* delete this for 4:3 aspect ratio */
}
to get
.remark-slide-content {
background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
background-position: 9% 15%;
background-size: 55px;
padding-left: 100px; /* delete this for 4:3 aspect ratio */
}
the image shows up on all slides including the title and transition. It even over-rides the .title-slide image.
You can do the following to exclude the title-slide:
.remark-slide-content:not(.title-slide){
background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
background-position: 9% 15%;
background-size: 55px;
padding-left: 100px; /* delete this for 4:3 aspect ratio */
}
but the downside of this is that if you have a background image in other slides, it will overwrite the image above. So you may like to define another class, e.g. exclude as well:
.remark-slide-content:not(.exclude){
background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
background-position: 9% 15%;
background-size: 55px;
padding-left: 100px; /* delete this for 4:3 aspect ratio */
}
.logopos {
position: absolute;
top: 9%;
left: 15%;
}
and for the corresponding slide that you have an issue with another background image disable this and add it manually. E.g.
class: exclude
background-image: url("bla")
content
<img class="logopos" src="https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png">
Recently I ran into the package xaringanExtra by Garrick Aden-Buie, see https://pkg.garrickadenbuie.com/xaringanExtra/. Lots of useful functionalities, including a very easy logo handling option. You just add a chunk
```{r xaringan-logo, echo=FALSE}
xaringanExtra::use_logo(
image_url = <fill in your path> )
```
and that is all.
I have a problem align text in the center in the header because of arrow for back page. My code is like this:
<ion-header>
<ion-navbar>
<ion-title>
<center>
Domótica
</center>
</ion-title>
</ion-navbar>
</ion-header>
But the text "Domótica" is not in the center. Somebody know who can resolve it?
Thank in advace.
Best regards.
I know it is late for this answer but I found a solution to get the back button working using centered title.
You can add this piece of code to your app and it is fixed.
.back-button.show-back-button {
z-index: 9999;
display: inline-block;
}
It basically move the Z position of the button to the top because by using position: absolute for the title it takes the whole space overriding all elements.
I think you should use sass to apply customer css . You have to locate sample code in your test.scss in same location with html page
ion-title {
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
}
Cheer !
I was trying to build myself a portfolio site. When I thought I was about to finish building the basic template, the margin and media queries stuff totally drove me crazy.
Here is my temporarily hosted domain, www.kenlyxu.com/portfolio_new
I made the pages fit to whatever browser size by using
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
I'm trying to make 10px margin on all side and on every page so that I use this container.
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 100%;
width: 100%;
}
#workcontainer {
margin: 10px;
background-color: #f29e28;
width: 100%;
}
I hope the end result would be like orange background with white margins on all sides. When seeing my site on the desktop, the margin-right and margin-bottom not showing. They only show when I use width: 98.5%;
Also, the orange background color should expand according to the size of browser. On the iPhone 5 portrait view, the orange background does not extent the bottom part. I tried to use some standard media queries for it, but I don't know what values should I give to each of the mobile devices.
Try
Position:fixed;
in
# thethecontainer
now your code looks like
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 98%;
position:fixed;
width: 98.5%;
}
Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):
We've got a gradient over text with a drop shadow on a background that has a slight gradient.
I've tried every method I could find.
This method won't work with a text-shadow.
The PNG overlay method won't work because I don't have a solid color background.
This method won't work because it requires me putting the text string in the CSS and my text will be dynamic.
So, I'm stumped.
It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.
That should be the answer:
HTML
<h1><span>Filthy</span></h1>
CSS
h1 {
position: relative;
font-size: 300px;
line-height: 300px;
text-shadow: -3px 0 4px #006;
}
h1 span {
position: absolute;
top: 0;
z-index: 2;
color: #d12;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
content: attr(cssFilthyHack);
color: #000;
text-shadow: 3px 3px 1px #600;
}
JS
$('h1').each(function(i, e){
var el = $(e);
el.attr('cssFilthyHack', el.find('span').html());
});
The important thing is to use content: attr(cssFilthyHack); to extract the text from the h1 text. You could add the text a second time in html like this
<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>
Or you use the js jQuery method to do this automatically.
UPDATE
Replaced the a tag with span, added js function.
See the example here in action: http://jsfiddle.net/alligator/Gwd3k/