I'm making a widget for my user so they can include in their website.
In file style.css which hosted in my user website:
p {
font-size: 0;
}
In my widget - widget.css:
#mydiv {
font-size:12px;
}
However, when user include my CSS widget on their website. My CSS won't work and the one work is style.css. How to make my widget.css always work on top ?
I tried !important and it not work:
You can use !important next to the declaration; like this:
#mydiv {
font-size:12px !important;
}
Some people will claim that using !important is always bad practice but that's not the case. In fact, when making a plug-in or widget that's going to run in other people's sites, then that's when it's actually good practice. Take a look here: http://css-tricks.com/when-using-important-is-the-right-choice/
Edit: after seeing your image in the question, the problem is that it seems the ID ulcfrmcontainer refers to the container of the list and not the actual li elements within the containers. Try with this:
#ulcfrmcontainer li{
font-size:12px !important;
}
p is an existing html balise, and mydiv is an id, probably which select the parent div of your paragraph.
CSS apply rules following priority levels.
Here more informations:
W3C wiki about selector priority
Tips and tricks about it
Try to solve your problem with those informations, and use "!important" only if there is no other solutions.
(Good article to determine if use !important is the right solution :))
Hope it will help you to understand and resolve your problem :)
Wrap your widget in a div with an id that is unlikely to be used in the users site like 'widget-wrapper-div'. Or you could be more descriptive by including a one or two word description of the widget in the id such as 'partsearch-widget-wrapper'.
<div id="widget-wrapper-div">
<div>
Widget code...
</div>
</div>
Then in your CSS you would start each style rule with #widget-wrapper-div
#widget-wrapper-div div{
font-size: 12pt;
}
You have 2 options:
The right way:
1) Make sure your path to the element is exactly right. For example
.wrapper div p {}
2) Make sure your css file is include AFTER the other one
The other way (if the 1st doesn't work)
Use !important. Like this:
font-size:12px!important;
EDIT
Looking at your latest screenshots it looks like you're adding the font-size to a div with id #ulcfrmcontainer instead of to unordened list.
Might wanna try:
#ulcfrmcontainer ul {
font-size:12px;
}
Related
I have a web page, which I need to change its CSS. At the moment, I need a quick fix to an annoying issue. There are some HTML elements that use several CSS classes like the one below.
<ul class="core nested-level">
The problem is that "core" is defined in many places with different rules; hover, ul, *, etc. One of these rules for some reason cause "nested-level" to be disabled as chrome developer tool annoyingly keep showing up.
Any idea how to quick fix this issue or to force this style to override the already defined one (if it exists) ? I tried out the style below, but it didn't show up properly:
.nested-level {
padding-left: 62px;
}
It seems that you defined a rule in your "core" css class for a specific HMTL element. For instance:
ul.core{
padding-left: 0px;
}
Then in your "nested-level", assumingly, you tried to define a rule for the same property.
The way to fix it is either to avoid defining your css rule based on an HTML element, or to use the "important" keyword when defining your css rule, as this
.nested-level {
padding-left: 62px !important;
}
This will fix your issue.
better is dont use !important.
Read More: https://j11y.io/css/dont-use-important/
add ID in Element tag . id Selector have Higher priority than class Selector
<ul id="myId" class="core nested-level">
and use css Like :
#myId {
padding-left: 62px;
}
I need your help to understand a selector of css that I wuold like to use to hide an element.
At this url you can see the page http://www.bachecahotel.com/annunci/all_ads.html
Well I wuold like to hide "Tutte le offerte" the second one in orange.
DOing some test I succeded in that using this css:
.juloawrapper.adsmanager-list.adsmanager-list-table div > h3:first-child
{
display:none;
}
But I dont understand why it doesn't effect other h3 also if they are child of divs
Thanks
Frank
I am using a special link effect on <a> tags with the background-image: CSS. The links look nice but the website also contains a lot of <img> that are links, which also get the CSS.
I am currently solving the issue with jQuery: $("img").parent().css("background", "none");
Is there any correct way of doing this with CSS, getting this CSS not to affect tags.
Code:
a:link ,a:visited {
text-decoration: none;
background-image: url(/underline.png);
background-repeat: repeat-x;
background-position: bottom;
}
CSS4 defines the following syntax:
!a>img {background-image:none}
However, as far as I'm aware no browser supports it yet. It's also not final on where the ! goes, as a!>img and !a!>img all have been suggested.
So, basically, there is no CSS solution for this. However, there is a "hack" solution.
Assuming body {background:white}, you can do this:
a>img {background:white}
This will cover up the link's background with a white one, which essentially hides it. Adjust the colour as needed. Note that this won't work if your content area has a background image...
When I saw this: background-image: url(/underline.png); I got very nervous. Is there some special effect you need to employ here? What's wrong with the underline property in CSS?
To solve this in CSS2 you'll need to redesign your code. Therefore, this might be a bit impractical.
Keep your css code for links.
Then wherever you have a link with an image in there, you should add a class. Use this class to link CSS that overrides the typical behavior.
There is no way to do what you want in current CSS capabilities. Jquery works but it is afterall a hack.
a {
code here that you want
}
a.img {
override properties
}
<!-- Html -->
Normal Text
<a class="img" href="#"><img src="image.png" width="x" height="y" alt="" /></a>
Some food for thought -> The reason CSS does not support what you seek is because a child should not define a parent's style! AFterall, we (as people) do not define our parents' traits but we surely override what we inherited.
What would be the difference in your links ?
Domain, peticular folders, extension name , etc...
I asked cause you could filter them by url.
[href~=picto] will mathch if url contains picto or something similar
[href^="image/] will match any url begining with image/whatever_is_behind_or_not
[href*="image/] will match any url containing image/
[href$=".jpg"] will match any url ending with this .jpg extension
As you can see , there's nowdays lots of option , level4 will make it much easier though :)
Well, unless I am missing something, the solution to this is rather simple.
On a website I worked on I used the following two CSS rules to differentiate between linked text effects and linked image effects:
a:link {
/* rules for linked text effects */
}
a img {
/* rules for linked img effects */
}
I'm attempting to override the link color in a certain area of an existing theme. The links are blue on a blue background by default. I'm not sure how this theme was approved to be offered to customers, but I'm going to attempt a simple fix by making links in this area white.
Here is the markup of the area of the page with the problem:
<div id="product_details_customtab2_tab">
example
</div>
Here was one of my unsuccessful fix attempts. I tried dozens of similar things. None worked.
#product_details_customtab2_tab {link{color: white !important}}
However, the links in the area I wished to fix did not change. (There is an admin area where I can add custom CSS, so I inserted this there. I can make other styles in other areas of the theme change, so the basic functionality works, but in this specific case I don't have the details right.)
What is wrong with my CSS? Have I given enough info in this question? Thanks
UPDATE: Here's the solution that worked:
#product_details_customtab2_tab a:link{color: white}
Thank you!!!
Your selector is wrong... there is no standalone CSS "link" selector, only the ":link" selector:
http://www.w3schools.com/cssref/sel_link.asp
Also, to use CSS inheritance, you only need to separate each part of the inheritance chain with a space, not wrap it in {}. i.e., if you want to change all links inside a div with id "foo" you would do this:
#foo a { ... } /* CORRECT */
and NOT This:
#foo { a { ... } } /* WRONG */
I assume that you either wanted to do this:
#product_details_customtab2_tab a{color: white !important}
or this:
#product_details_customtab2_tab a:link{color: white !important}
Your CSS is not valid. To make a selector inside another selector, you just need a space, like:
#product_details_customtab2_tab a { color: white; }
This will select all a elements inside that div.
I'm creating a kind of CMS. In this system, each editor can define their own CSS like below.
This style should be applied to their own articles.
<style>
p{
color:blue;text-align:center;
}
a{
color:red;
}
</style>
These styles must be applied to a particular div, in this case id="editors_area".
<body>
<div id="editors_area">
===Styles should be applied only here.===
Each editors article are displayed in this area.
</div>
===Styles should NOT be applied here.===
</body>
To achieve this, I have a plan to insert #editors_area into editor's CSS, as a descendant selector on serve side like below.
<style>
#editors_area p{
color:blue;text-align:center;
}
#editors_area a{
color:red;
}
</style>
But I guess there are more simple ways to achieve above requirement.
EDIT
I deleted the javascript code. Which was not suited here.
Any idea will be appreciated.
Thanks in advance.
CSS was designed for this, so your first method is the correct one -- not to mention that the jQuery method you have wouldn't work.
You should only use jQuery to change css properties when it is required after page load, and even then you should use addClass() or removeClass() and have those classes defined in your CSS file. This is a better separation of concerns.
SASS and SCSS give you the ability to do stuff like this (unless I'm totally missing the point of you're question, which is possible as I'm about as far as you get from a front end person).
Something like:
#editors_area
a
color:blue
text-align:center
p
color:red
Depending on what language you're working in, it might be worth checking out. I've seen implementations for Ruby, Python, PHP and Java, although I've only used Ruby's myself.
you try this
$("#editors_area > *").css("color","blue"); // * may be p or a whatever
If you are finding a way to insert CSS blocks dynamically from jQuery, then you can do as follows:
$('<style type="text/css">
#editors_area p {
color:blue;text-align:center;
}
#editors_area a {
color:red;
}
</style>').appendTo('head');