Might anyone know of a way to style the CSS of a popup used in Openlayers?
Using an OL popup method, returned is a div with an ID of
Would I just add that to my CSS and style, or might there be a better way?
Properties:
There are properties such as backgroundColor, border, opacity you can set directly.
Have you taken a look at the popupMatrix example?
JQuery:
In case you use jquery, you can reference the DOM Elements by doing:
popup.contentDiv
popup.groupDiv
popup.closeDiv
Reference
CSS:
Yes, and nothing is stopping you from using css like I demonstrate in this example:
http://jsfiddle.net/BLLqB/1/
Conclusion:
The better way is the one which works best for what you're doing. If you see that the available styling properties are not enough, use jQuery or CSS.
Related
I am trying to find what is overriding my CSS element using chromes element selector but am unable too.
This answer seems outdated I can't find how to access "computed styles":
Chrome Developer Tools: How to find out what is overriding a CSS rule?
I don't know why this color is overridden with gray:
chrome
How can I find whats doing it with google chrome?
If you look at the image, it will tell you that the property is changed in the element.style.
In other words, the change is not applied using a selector such as class or id, but rather to the element itself.
This can be done in two ways, as far as I am aware.
1) In HTML, writing the properties directly within the element:
<div style="color:gray;"></div>
2) In Jquery, referencing the specific object (for example, using the id property) and then using the css property:
$('#divname').css({
color:gray;
});
With regard to finding what is causing the issue:
1) Finding out if the change has been made in HTML should be fairly straightforward, as you would just need to have a look at the HTML file.
2) If the change has been made through Jquery, things get a little more complicated: a ghetto method would be to search your script files for the "gray" string. Don't forget that scripts can also be embedded into HTML, however, looking for the property the HTML file would be a good way to proceed :)
It is possible?
I mean this:
<div style="?css animation?"> Content </div>
It can be any tag, or maybe triggering the animation or transition from other tag.
This question is because I will like to use animations and transitions in a web app, but this app just let me use css included in the style tag attribute.
Pseudo clases I guess are out of the question so I can not trigger transitions, neither I can use javascript, so onmouseover or similar kind of stuff are out of the question.
Animations on the other hand needs their keyframes settings, and I can not set keyframes inside a style tag.. (or can I?). I read something similar here:
https://css-tricks.com/animate-to-an-inline-style/
But I guess it would not work for what I am asking.
Not sure if there is a hack to import a css from an attribute or just achieve animations in chrome browsers (another thing, I have not access to the head section of the html).
Yeah I know, it seems mission impossible, I was just wonder in case there is some kind of trick to achieve this even if the animation is very limited.
Thanks for your time.
No, afaik.
Atleast not for those animations that require :hover or keyframes as you mentioned. However, it is possible by including animations attached to <style> contained within the same html page. Or by injecting css code using js code on the same html page . This suits if you are okay with CSS resting in the same file.
The link you've mentioned is NOT using inline CSS for animation; it has a separate CSS file.
I'm trying to select a element with css and I can't use css3 because this is for a older system, so I can't use.
nth-last-child(2)
is there a way to do this in css
You can add a class using jQuery like such:
// #css3 and .query can be any css3 selector
$("#css3 .query:nth-last-child(2)").addClass("lasties2")
And then define the class (lasties2) in your css.
If you can't use JavaScript or are using a different library, or don't want to use a library, then please specify. Other libraries like mootools and prototype will have ways to achieve the same end. You will have greater difficulty with pure JavaScript in an environment that does not support CSS3, but it is possible. If you can't or don't want to use JavaScript then you will have to add a class to the relevant items manually.
One caveat of the javascript and the manual approach is that if the page is modified by javascript, the behavior won't match css3. With CSS3 if the nth from last child changes, it then the new one will get styled, with jquery or manual classing it will stick to the initial one. Here is a jsfiddle that illustrates what i mean: http://jsfiddle.net/CSExB/35/
As you can see if you tried the fiddle, it is possible to fix this with javascript by first removing the class, then making the modification and finally reapplying the class, for the above code for example it would be:
$("#css3 .query:nth-last-child(2)").removeClass("lasties2");
$("#css3").append('<p class="query">something</p>');
$("#css3 .query:nth-last-child(2)").addClass("lasties2");
If you want make page compatible with IE < 9 or Safari < 3.2 you should add additional class to list items <li class="some_additional_class">. You can do it when page generated on server-side, or using JS on client-side.
I have a project that uses JQuery-UI. I recently found formee, which is a nice framework for building forms. One annoyance is that the formee submit button styling overrides the jquery-ui themed button style. How can I get all of the formee goodness but keep my jquery-ui button style? I realize I can edit the formee CSS to remove the button style, but I'm hoping to avoid that.
You can, as you said yourself, remove the offending CSS, which is what I would recommend.
Alternatively you can give the jQuery UI css classes that apply on the relevant button more specificity than the formee classes. This would be second best solution.
As a last case you could add !important; behind all CSS attributes in the classes for jQuery UI... I really wouldn't recommend this.
use this to bring front:
#your-div-id{
position:relative;
z-index:999999;
}
I define fonts on their own like this:
.smallboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:11px;color:#3A63A5;}
.medregblue{font-family:Trebuchet MS;font-size:13px;color:#3A63A5;}
.medboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:13px;color:#3A63A5;}
I also define elemets that are recurrent such menu options or section titles like this:
.MenuOptions{float:right;margin-right:0px;}
.SectionOption{float:left;margin:10px 0px 0px 50px;}
So when I create divs, I often find myself writing this:
<div class="MenuOptions medboldblue">
I know I could merge the two classes but I like to have my fonts in one class and another class to handle positioning and such.
Is there a way in CSS to have all MenuOptions be of font medboldblue so that if I want to change the font from a medboldblue to a largeboldblue I do can that change without going through every MenuOptions div? I know I can easily do this with jquery and addClass but I was wondering if there a way to do this with pure CSS.
Thanks.
No, you can't do that with pure CSS.
You could use SASS or LESS CSS.
Or you can add the styles from medboldblue to MenuOptions.
But really I would recommend reading about OOCSS if you want to learn about the best way to organize CSS.
Unless I misunderstand your question, you can very easily do that with css.
All the properties that you define in the first section are inherited (font, color), so you only need to apply your style to the parent / menu element and the styles will be inherited by all menu options.
When you decide to change the font class, you just have to change it for the menu.