I am trying to set a title image using css within my custom theme.
I know i can set a title image for an app manually but i want to do it within a theme using css. I have managed to set the background colour blend and the font colour but i cant work out how to set the image.
I have tried the following with no luck.
.sheet-title-logo-img {
background-image: url("https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F...");
}
.sheet-title-logo-img.ng-scope {
background-image: url("https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F...");
}
.sheet-title-logo-img.ng-scope {
background-image: url("https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F...") !important;
}
Has anybody managed to achieve this and can point me in the right direction?
Thanks
Unfortunately, you can't specify the image/favicon in css.
You would have to do it like this.
<link rel="shortcut icon" href="your_image_path_and_name.ico">
You should consider searching before posting a question because there are a lot of unanswered questions that actually don't have a solution.
Here is a link to a similar question: Add image in title bar
try this
#sheet-title .sheet-title-logo-img {
background-image: url(https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F...) !important;
}
Related
I have a map, but it repeats. I would like it to stop repeating, and get only one map. How do I do this?
<MapContainer
className='h-[700px] w-[700px] float-right mr-10 mt-10'
center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true}>
<TileLayer
noWrap={true}
url="/allmap.jpg"
/>
</MapContainer>
I see that you added in the URL a path to image url="/allmap.jpg". as it's an image you can inspect on the TileLayer after it's rendered. see on the right side the class which contains this image as background-image add to that class the following.
.tile-layer-class {
background-repeat: no-repeat;
background-size: cover;
}
UPDATE:
The problem was that the image was not shown. because there was a style from leaflet.css hide the image to show. you can override that style by using the below class.
.leaflet-container {
overflow: unset <= or by using !important as well if that didn't reflect.
}
The problem is not related to styling at all. what I figured out that the image is not only rendered just one time in the dom but it's gets rendered for 4 images tags. you can inspect the image and you will see that there're 4 img tags in the dom.
I think you will need to find out the reason for why there're 4 images rendered in the dom.
I tried to be honest to do my best. but I'm not familiar with Next.js
I am building a mobile app with ionic and I am trying to change the background image of the div but its not working
Here is the code
<div style="background-image: url(./assets/IMG/set3.jpg);">
......
</div>
I also changed the file path to
style="background-image: url(assets/IMG/set3.jpg);"
style="background-image: url(./assets/IMG/set3.jpg);"
style="background-image: url(/assets/IMG/set3.jpg);"
And I have other div of such, but the background image is not displaying, pls I need your help, I have search online but non of the solutions worked
If your goal is to set background image to the entire page, you could use --background for ion-content. Something like following has worked for me.
ion-content {
--background: url('../../assets/BackgroundImages/splash-screen-background.png');
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
}
here are more details about --background CSS property
Some IDEs (Visual Studio Code) allow you to ctrl click the url (follow link) and ensure that the resource is correctly pointed to. You may want to double check. Even otherwise please check if your assets folder is present at the same level as your page html. If it is not you may have to ensure the correct path, for ex.
background-image: url('../../assets/BackgroundImages/splash-screen-background.png');
Instead of setting the background-image directly with a style tag inside your <div>, give it a class. Then, inside your CSS, define the background-image on that class. That way, the IMG folder should be relative to the CSS file or the app-root. This always gets me with every new project, and it requires some trial and error to get it right.
I have the following CSS in order to get an image on my page background, and a color around it.
#home{text-align:center;background:Red url('/Content/image.png') no-repeat fixed center;}
When I run it on my computer with any browser (I prefer Chrome), everything is fine. However, when I open the website on my phone (also using Chrome), I only see the background color, not the image. However, as soon as I remove the center part (background position), I can see it.
Any idea?
After some searching, I found that images wider than 1024px don't display on iDevices. I used a media query to change the background, like this:
#media all and (max-width:900px), (max-device-width:900px){
body{
background-image: url('smaller-image.gif');
}
}
Hope that helps someone.
I faced a same problem, then I applied background:url("../img/pic1.jpg") no-repeat center; its working you can try if you faced problem in ios.
Nowadays it doesn't really matter whether picture is wider than 1024px. The issue for me that caused not displaying background-image was: background-attachment: fixed;
In this case, just change this line to background-attachment: scroll; with #media query
I am making a Responsive site using the foundation framework and TinyMCE breaks the format when the page is scaled down(it's not responsive). How do I make TinyMCE responsive?
The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table.mceLayout and the tinyMCE textareas. You will need to enforce these css rules using !important because they would otherwise be overwritten.
E.g., I use css similar to this:
/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
width: 100% !important;
}
/* on large screens, I use a different layout, so 600px are sufficient */
#media only screen and (min-width: 600px) {
table.mceLayout, textarea.richEditor {
width: 600px !important;
}
}
See this jsfiddle: http://jsfiddle.net/johannesjh/384uf/
Note: You may wish to use different media queries or css classes to make use to the "foundation framework"'s responsive grid.
There is a way to get the toolbars to wrap on smaller screens.
/* make the toolbar wrap */
.mceToolbar td {
display:table-row;
float: left;
}
.mceToolbar td:nth-of-type(11){
clear: left;
}
I made a fork of the fiddle that Johannes posted that includes the above rules:
http://jsfiddle.net/joshfeck/gMVSE/
Making the toolbar responsive for the latest version of TinyMCE:
.tox-toolbar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
.tox-toolbar__group {
flex-wrap: nowrap !important;
}
This adds a horizontal scrollbar to the toolbar on mobile devices.
TinyMCE 5.1 was released with a new mobile responsive design.
To ensure it functions as intended, you need to add the following code to the head of your pages that are using TinyMCE.
<meta name="viewport" content="width=device-width, initial-scale=1">
More information here: https://www.tiny.cloud/blog/the-future-of-work-is-mobile-and-tiny-is-ready-for-it
I'm using version 4 of TinyMCE, there is a plugin named autoresize. It makes the editor responsive.
Here is something I use on a site to make the editor resize and the toolbars moves with the size of the page :
.mceEditor table {
max-width:none; /* Bug in computation of fullscreen */
}
.mceEditor table.mceLayout {
width:100% !important;
height:auto !important;
}
table.mceToolbar { float:left; }
body .mceToolbar div {
white-space:normal;
}
Using small toolbar, they are properly layed out as the editor width changes.
"theme_advanced_resizing" should be set to "false". Also, more work is needed to make it work with fullscreen.
Remove Width and height from the TINYMCE_DEFAULT_CONFIG.
then apply your styling normally.
i am using this in the CSS:
div.tox.tox-tinymce {
width: 200px !important;
}
I use !important because tinymce using inline styling for that div, use #media if necessary.
a cropped screenshot from firefox inspector
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;