I am trying to add background-image to mat-dialog, by spending some time on mat-dialog docs I realised that I can use panelClass: 'my-class', to customize mat-dialog appearance, here my-class end up getting applied to div having class cdk-overlay-pane in mat-dialog, something like this.
Then I added this css to put the background-image in the matt-dialog.
.my-class .mat-dialog-container {
background: url("assets/illustrations/abc.svg") no-repeat;
padding-bottom: 16px !important;
}
.my-class {
// background: white !important;
border-radius: 10px;
}
eventually mat-dialog ended up looking like this, having transparent background.
In order to solve this issue I ended up adding background: white; to my-class and then it looked like this.
Everything seems to work fine, but it is now bit-buggy as soon as I close the dialog a white background of the same size is theres for milliseconds and then it disappears.
I managed to solve the problem by changing the way I was doing it, sometimes it's easier to change the approach instead of trying to find the solution of situation that you are struck on.
what I did is as follows.
In the attached image div having class='content represents the content of the dialog-box, so it's basically a div that we place as a wrapper on the content we want to display in mat-dialog, in my case I named it content.
So I modified the .mat-dialog-container padding to 0, so that content div can take the full height and width, and then added background-image to content div.
.my-class .mat-dialog-container {
padding: 0px !important;
}
Final outcome can be seen in the below-mentioned image.
Related
I am attempting to remove the hover effect padding on a Wordpress plugin called "Smart logo showcase". Here is the test page I have been working on:
http://brainstormmarketing.agency/dev/afroteqadvisory/test-clients/
So basically just the logo needs to be hoverable with no extra padding around it.
I have tried various code snippets and the class is called .smls-grid-image-wrap for the entire logo block.
I have tried to use padding: 0; but with no luck. Please assist
Because min-height and min-width are applied.
You can try tu use these properties for disable that
min-height: inherit;
max-height: inherit;
padding: 0;
Then, if you want to add spaces between elements you can add margin
Or, you can "hack" this with transparent background instead of color #d5fcfd
You can try
background-color: transparent;
Add this css:
.smls-hover-type-2 .smls-grid-image-wrap:hover {
background-color: transparent;
}
I've been trying to get rid of the thin gray strip that's in the middle of this page:
http://redesign.emdintegration.com/index.html
It seems to be related to the wrapper but I can't get it to disappear. Please help!
Delete this line from your CSS...
#Content{
background: url(../images/content.gif) 0 100% repeat-x; /*Delete this line*/
}
I believe it is line 129 in style-v1.css
Look at the CSS for #content. It has a background image of a gray bar and a child <div> element within has a padding of 10px.
You have a padding of 10px on the following:
<div class="container_24" style="padding-top:10px">
Remove the style, and the gray stripe will disappear.
If you can't edit the HTML, you can add the following CSS rule:
.container_24 {padding-top: 0 !important;}
On your #content you have background: url(../images/content.gif) 0 100% repeat-x;
If you get rid of it, that should take care of your issue.
look at your debugger. in class .container_24, add padding-top:0px;, and delete the inline styling. That should get rid of all top padding in that class.Best practices indicate to use seperate stylesheet for all your styling, instead of dirty, messy inline styling.
The background url for #content is the gray line. You might think it's an element, but it's an image being directed by CSS for a background image for the id="content" on the page. I imagine the section element is for the product boxes and #content is in relation to that.
You could alter the CSS to not load this (../images/content.gif) by simply adding display: none to that line on the style sheet [Line 129]
Try copying this in its place.
#content {
padding:0px 0px 0px 0px;
display: none;
}
I have a background image pulling in but it is taking the height of the text not the image, I will eventually do a text-indent: -99999px but I have tried every CSS property to get the whole image to appear. Can anyone help with this, my website is: http://yesiamshow.biz/ it is the buttons under the slideshow, you can see I have the image for previous pulling but it does not show the whole height. All my CSS properties have a height of 60px and nothing is happening.
The button is actually the right height, but your .window class is cutting off it off. Looks like you can change it to 410px and it will fix:
.window {
height:410px;
}
You should also give the button a display:block or inline-block since you're giving it a width and height.
I took a quick look at your CSS and it seems that you are wrapping your link with a span element. You can still do that, however you need to make sure that you are applying all of your styling to the links.
Example. If your HTML was something like.
<a span="prev_btn">Previous</span>
You would have to style like so.
span.prev_btn a { }
And it should look something similar to the following.
span.prev_btn a {
background: [your url];
display: block;
height: [height];
width: [width];
text-indent: -9999px;
}
Hope that helped.
On this page, you'll see a blog post that has a thumbnail, tag set and other information in a sidepanel on the left: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.
What I am trying to do is to create a black rectangle on this white div, a black rectangle that extends from the top left of the white div to the bottom, just left of the post text.
At first I tried simply creating a two-color image that was one pixel wide and using repeat-y in order to extend the "faux two column" layout from top to bottom. However, this div resizes dynamically, so in many cases the black text from the post ends up running over into this sidebar.
I then tried using the same image in the same way, but giving the white div a "position: absolute" trait. This caused the sidebars on the right to spill over onto the post content.
I want to create this black rectangle to take up any whitespace to the left of the post content.
I have inherited a lot of CSS that I'm not sure how to change. Any advice would be greatly appreciated. `
I will add the style.CSS file here if I can find some way to do so. This is my first time on the site.
Looking into the CSS, it says that everything you said is within its own div:
<div class="info-panel">
With that said, you just make your CSS changes to that class. You'd do something like:
.info-panel {
background-color: #000;
}
But keep in mind that, for it to look good, you should play with the padding and margins for the info-panel and post-content classes as well.
I just made it look better and keep the same overall width by including the following:
.post-content {
background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
padding: 0 4% 30px 1%;
}
.info-panel {
background: none repeat scroll 0 0 #000000;
float: left;
margin-right: 1%;
padding: 2% 0 2% 2%;
width: 29%;
}
The last two code snippets from the CSS are just some advice on what I would do if my solution worked for you. Doesn't mean you have to, so please don't treat it as such. It just keeps the area from looking awful.
It's hard to decipher what exactly you're trying to do, but see if this helps:
.post-content.info-panel {
background-color: black;
padding: 4px;
width: 28%;
}
This is a really odd one. I cannot seem to affect this one image via css at all. Tried adding a class specifically for the image and also writing css to affect just the image, but zip. It won't budge. The only thing that made it move was setting the neg. margin on the actual image, and there it only moved up about 40px and wouldn't go any further (taken that off since then). The image in question is the "imagine" tab (wp-image-39) on this page:http://circore.com/haute/. The bits of css I've left are:
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
I've also tried affecting all images in the content area and a bunch of other things. The red background is just so I can see if something worked. Argh! Thanks so much!
Instead of trying to put styles on the image, why not put styles on the containing div?
.toptab { margin-top: -50px; }
Would that suit your needs?
I would set position: absolute for the image. Then you will be able to move it freely with margins relative to its inline position.
The last 3 classes of your CSS
#text-4
{
font-size:11px;
line-height: 15px;
color: #000000;
text-align: center;
}
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
are inside #media print { which is actually not closed.
Put a closing bracket before #text-4 or wherever you need.
<div style="margin-top:-120px;">
Inline CSS would work also on the div that wraps around the . Hope this helps.