I will try my best to explain this -->
I am using Fancybox and everything works great. Here comes the issue.
I want to remove the white background as well as the shadow of the iframe-pop, not the overlay!
I tried playing around with the css files which didn't really work...
If you click on the "#1" square you can see what I mean : http://testingpage.de/
(I destroyed the background image on purpose to see the white bg.)
Thanks for any and all help and advice!
UPDATE:
Because of the helpful tips I could get rid of the white background of images. It's still not working for iframe...
No need to edit the original css file ... just add this in your custom css file and after loading the fancybox css file
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
}
then your script
$(".fancybox").fancybox({
padding: 0 // remove white border
});
See JSFIDDLE
EDIT :
For a full transparent background, also add
.fancybox-skin {background: transparent}
in your custom css file
See updated JSFIDDLE
NOTE: this make fancybox transparent BUT the background of your iframe content (body, html) should be transparent too
Related
Please help me, i can't seem to figure out a way to remove the black border box surrounding all my product images and containers.
My website is tucsons.ng
here is a sample of what i really want gone
my site right now = https://postimg.cc/xXCq5SBg
my desired result = https://postimg.cc/V0gL97R3
The border is added by this CSS code:
.products-grid .product-item-info .product-item-photo {
...
border: 1px solid #dddddd;
...
}
If you remove that line from css, the border will be gone.
I can't tell the exact location of the file because of static content deploy.
But seems like the name of the file is product-1.css.
I've inherited management of an existing Wordpress site that uses a custom Genesis child theme. I have attempted to set a full screen background image using the "Full Screen BG Image" plugin. However, the Home 2 area, used for a widget displaying latest posts, seems to have an irreversibly opaque background and the background image hides behind it. When I pull that section of the page down, I see the background image peek out from behind at the top. See It Here.
I am not a Wordpress expert, and I'm learning as I go. It would be amazing if there were a simple solution that would get our background image to display on our front page.
Thanks in advance, with apologies for my lack of knowledge!
The solid white background is set by your child theme's style.css file like so
.home-widgets-2 {
background-color: #fff;
...
}
You can just change that background-color statement to background-color: transparent; or background-color: rgba(255,255,255,.5); where .5 can be anywhere from 0 - 1 and controls the opacity.
You can either edit that in your style.css file itself (recommended if it's a child theme you manage/made) or you can add it in the Appearance > Customizer > Custom CSS section like so:
.home-widgets-2 {
background-color: transparent;
}
Using transparent makes it hard to read, so I'd suggest using the transparency options like rgba(255,255,255,.65)
I'm trying to make a very basic userChrome.css file to hide this 1 pixel line between the navbar and the current web page.
I scrolled and tried all this original css firefox but I can't find what class I have to edit to do that..
Found the tag by stripping down a stylish style piece by piece.
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
margin-bottom: -1px !important;
}
I am currently working on CSS design on my site FortheStartup.com
I am stucked at a point. The header of site is BLUE COLOR (#0d47a1) but from somewhere a white line is appearing just over the header.
I have looked around to see if there is any CSS padding etc but not able to fine.
Can anyone assist?
(I can post screenshot if required)
Looks like it comes from your #wrapper?
#wrapper {
padding: 10px 0 40px;
}
I am using the Cakephp framework and I need help changing the text color of my dialog boxes.
The text and headers are white in the dialog box, but if I disable the dialog box and go directly to the action's view in the browser the text is color is fine. I was wondering if this is something that needs to be edited in layout.css or text.css.
I have no idea what I am doing when it comes to css files.
I'm hoping its just a small change of one line in a css file but I don't know which one.
If this question is too ambiguous or unsolvable, I will delete it.
Thanks for the help
Edit ------------------------
I found out that this is the codefrom layout.css.
tbody td {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 1px solid #BBBBBB;
border-top: 1px solid #BBBBBB;
}
The white colored text is in a table cell,
what should I change to make it black?
You can add your css class or id form /app/webroot/css/styles.css. and check it by firebug. It is applying or not?..
Try looking in /app/webroot/css/cake.generic.css.
You'll want to add the property color to your dialogue box css. (e.g. color: black;)
Use Firebug on Firefox or just right click and chose Inspect Element on Chrome to see in which CSS file properties are defined.