This is maybe a bit of a simple question to be asking here... I am a newbie so sorry if it is...
I am having problems with a CSS border around the main image on my website, I have got it to work on my blog pages but cannot get the same style work on the royalslider plugin on my homepage. Basically I want it to look exactly the same on the homepage as it does around the image on the blog page.
Working Link:http://alanbrandt.com/blog/copenhagen-wedding-photographer/
Not working: http://alanbrandt.com/
What am I doing wrong?
CSS:
.ab-royalslider {
position: relative;
zoom: 1;
padding: 32px;
-webkit-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2);
EDIT:
It appears as if we are getting there... Thank you for all your help! I still have a bottom border that is too far away from the image???
I had hoped to achieve this in the Royalslider CSS style sheet for the .abSliderSkin style but I cannot get it to work... :( If anyone has ideas on how I can improve this I would very much appritiate it.
.ab-royalslider - add padding: 42px 0;
#homepage, #stories - remove margin
#new-royalslider-1 - there is inline stile, height should be about 415px; width: 684px;
Try that, although I dont like this structure, it could be done easier and cleaner.
I think you should check your div's first. When i inspected the elements i noticed that the structure is different. And also the width of the area is different. At first link you have a div called header preview. and in the second you dont basically the container is different.
This is my first relply hope it helps you out.
It could be because there is no element of class ab-royalslider in the second link, so you'll have to apply the shadow to other elements. Try using .rsOverflow or .royalSlider.
Well I think you should disable the 'css optimization/combining" in the admin area, so we can pin point what edit you have to do in which file, because right now we are getting an optimized/combined css file so figuring out which file has the fault is really difficult.
You need to do changes in your CSS files:
http://alanbrandt.com/wp-content/cache/minify/000001/ZYxBCoAwDAQ_ZImefEhfkLZRgjGFpCL6esWT4m1nZ9kBctWGuYWp2hpGYM2yFXLI7uDtEPKuBxTUZKilPb3eWxQ-6a9mUjKUbgClPVg9UFy4kIFwgje_8v8GU3xMXFg_cAE.css
on Line number 1390
.rsContent img{
//Remove margin:0px !important and also other styles
}
AND
http://alanbrandt.com/wp-content/cache/minify/000001/ZYxBCoAwDAQ_ZImefEhfkLZRgjGFpCL6esWT4m1nZ9kBctWGuYWp2hpGYM2yFXLI7uDtEPKuBxTUZKilPb3eWxQ-6a9mUjKUbgClPVg9UFy4kIFwgje_8v8GU3xMXFg_cAE.css
on line number 1392
.rsOverflow{
//Remove height:415px !important
}
Try out this will work
I figure out these changes using fire-bug
Related
I am using Angular and the Kendo control suite. In particular I'm wondering about tooltip styling.
I have successfully styled the tooltip how I want it with one minor exception that I can't figure out. There seems to be a shadow on the tooltip but it's around the entire extents including the little triangle callout piece so it doesn't fit the actual representation.
It's pretty faint, but you can see the light edge of the shadow below the triangle (the red arrow I added to highlight it).
Here is my style:
.tooltipStandard *{
background: var(--adskBlue);
color: white;
box-shadow: none;
text-shadow: none;
}
.tooltipStandard .k-callout{
background-color: transparent;
color: var(--adskBlue);
}
and I'm just using it like this:
<div class="contentSections" style="flex: 1" kendoTooltip tooltipClass="tooltipStandard">
Ideally I would like to have the shadow around just the blue portion of the tooltip but turning it off entirely would be fine too.
I tried to use the Chrome console to look at the styles but since it's a tooltip it won't stay open long enough for me to go to the inspection panel and select it. It also doesn't show up when I force hover state from the developer console. Is there any other way to inspect the element from the browser?
Any help would be appreciated.
EDIT
Thanks to the comment below I was able to get the tooltip to stay up and therefore find what I needed to override. Here is the much better output:
For anyone else having this issue, here are the styles I put into my code to make this update:
.k-animation-container-shown, .k-animation-container>.k-popup{
box-shadow: none;
}
.k-tooltip-wrapper .k-tooltip{
box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.5);
}
.tooltipStandard .k-callout{
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}
The bottom style places the shadow onto the triangle and unfortunately it goes over the rectangle just a hair but you'd have to look pretty hard to see that so I'm not super concerned about that. You could also just remove the triangle shadow. If anyone has a good solution to 'clip' the triangle shadow on the top only that would be awesome.
Posting this answer based on the comment by #yazantahhan above.
I just needed to find the right styles to apply. Thanks to the comment I was able to set the tooltip to show on click using the showOn property. To do so I changed this:
<div class="contentSections" style="flex: 1" kendoTooltip tooltipClass="tooltipStandard">
to this:
<div class="contentSections" style="flex: 1" kendoTooltip tooltipClass="tooltipStandard" showOn="click">
That allowed me to click the element and the tooltip stayed up and I could inspect it in the developer console.
Once I found that out I found the right styles pretty quickly. Here are the css overrides I put into my style sheet to make it work:
.k-animation-container-shown, .k-animation-container>.k-popup{
box-shadow: none;
}
.k-tooltip-wrapper .k-tooltip{
box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.5);
}
.tooltipStandard .k-callout{
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}
And this is the result:
I added a shadow and a background to a button, but the shadow causes the background to be interupted and broken as is described in the following screenshot.
What's strange is that when I remove the box-shadow of the button, the issue disappears.
This is my CSS :
.btnx3{
background: #4687DF;
border: 1px solid #2667BF;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
color: #FFFFFF;
padding: 5px 10px;
}
I'm using Firefox 29.0.1, But what makes me ask this question is that I have other buttons and I don't have this issue.
I made sure to restart the browser, upgraded to 30.x.x, but the problem persists.
Edit
I tested the same code on JsFiddle, and it works normal : http://jsfiddle.net/nemzL/
This is not a CSS issue, it's apparently a Firefox bug. For some reasons :
There's no problem on chrome, and other browsers.
The problem is solved when you change css properties of other
elements : Like the margin-top or the border of the container, or
remove the shadows etc...
The same button, and the same CSS code works normally in different pages. (If I move the button to another place)
I will ignore this issue, since it's just related to the browser as you can see.
Thank you,
I'm editing the Wordpress login page and it is going pretty good so far. I created a separate css file to do so and everything is working as it should except one thing.
I am unable to remove the border and box shadow from the form. I tried this:
#login form {
background: #7554a5;
border: 0px !important;
-moz-box-shadow: 0px !important;
-webkit-box-shadow: 0px !important;
box-shadow: 0px !important;
}
but it doesn't work. I also tried to look in the Wordpress's wp-admin.css to find how the box shadow is applied but I cannot find it. Any help?
Try this. You dont need important. Just put your css after wordpress one.
border: none !important
However you should check in firebug or chrome dev tools in css tab how your css gets overided.
box-shadow: none !important;
did the trick
I most likely know the answer but maybe I'm wrong so lets try.
I want to change the appearance of the comment form from Blogger (blogspot - Google blog system). Sadly, this awful little form is embedded in an iframe so my CSS styles wont work.
Also playing around with jquery is useless, of course.
I know, iframes are not meant to manipulated but maybe its possible for blogger, somehow... in a distant world.
Is there a way or just not possible as i think?
Have you tried styling your comment iframe?
you cannot style content inside iframe, but you could style your iframe .
Below is an example, add this just before closing the <head> tag.
<style type='text/css'>
#comment-editor {
background: #F9F9F9 url(http://2.bp.blogspot.com/-Bdsls_ui_vY/UX-d4NVcHiI/AAAAAAAAB3M/IIzD9w00lDs/s1600/form-gradient.gif) repeat-x scroll -1px -2px;
border: 1px solid rgb(221, 221, 221);
border-radius: 6px 6px 6px 6px;
box-shadow: 5px 5px 5px rgb(204, 204, 204);
padding: 5px;
width: 560px;
height: 224px !important;
}
</style>
So it will look like this!
Screenshot of the resulting comment form!
I never had a need to style comment section in Blogger, so I cannot help you in that regard.
But you could try to replace it with third-party comment systems like IntenseDebate.
It supports custom CSS and URL to external stylesheet and has lots of other useful features too.
If you decide to try it just remember to backup a template before making a switch in case you want to revert back.
i have the problem whit my layout, make in css some, whit no javascript because i dont know dynamically position my divs(posts)...this divs have spaces, make lines and i dont want lines because are diferent sizes, see the photo to understand perfectly:
see this photo please
http://postimage.org/image/hibb48iq3/
this is the normal, but the next see this:
http://postimage.org/image/6h9b8mpt9/
this big space i dont want, im try use various properties of display in the css but nothing change this big space, my css to this is it:
#post {
box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.4);
background: #fbffff;
color: #6d6d6d;
margin:10px 0;
padding:15px;
box-sizing: border-box;
font-family: tahoma;
line-height: 20px;
width:30%;
float:right;
}
if someone have some solution, or using css or javascript of a made dinamyc, my code is in ruby on rails some to inform.
Im thanks and wait response, please.
Looks like your going for a "Pinterest" layout. Your best bet is to use jQuery and add the plugin Isotope or Masonry