I'm currently developing a plugin in wordpress the problem is its layout with different themes the layout of plugin changes.
How to make the plugin css wont change whatever themes is applied?
#playbutton
{
z-index:99;
bottom:15%;
padding: 10px;
right:0px;
position:absolute;
font-size: 95%;
width:24%;
height:10%;
text-align:center;
color:white;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900000 0, endColorstr=#99000000);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)';
border:1px solid #bfbcc5;
}
Here is css which changes when different themes is applied? I'm currently using % in width or height .
There are a lot of things to consider when you want an element's layout to look the same even when using different themes:
1.) Specificity
Research what specificity is all about and how you can use it to your advantage
If you want to make your StyleSheet more dominant, place the tag after the less
dominant sheets.
Make sure your class names are not used by others - trick: use class prefixes
If all else fails, the !important keyword is your friend.
2.) Parent Layouts
Say the playbutton's parent element is affected by the theme and that the #playbutton is using percentages, chances are the button will take on the parent's size as it is still dependent. It would be easier if the parent is not affected by the theme so you may need to go back to #1.
I don't know what the total markup of this project's page but I hope this helps.
You need to create wrapper for you plugin and use namespaces. I don't know what you are developing but for example if its video player plugin it could be something like this:
html:
<div class="my-video-player">
<div class="foo">
<div id="playbutton"></div>
</div>
<div class="bar">
</div>
</div>
now html code in place, you need to use namespaces also for your css:
.my-video-player {
/*wrapper styles go here (and also baseline styles: font-size for example), for example: required width and height*/
}
.my-video-player .foo {
/*now these styles are based on 'my-video-player' styles*/
/*so if you use width in percentage its based on the my-video-player width*/
}
.my-video-player .bar {}
.my-video-player #playbutton {}
This way your css will not collide with other styles. Also if you need javascript do it like this:
var myVideoPlayer = {
foo: function() {
},
bar: function() {
}
};
usage:
myVideoPlayer.foo();
Note: Javascript namespaces can be overriden by external code so the best way would be to follow modular javascript pattern, but thats out of scope of this question.
Related
I'm an old hand with CSS, but have recently decided to take the plunge and begin using BEM. For the most part, I understand the value of using such a flat system, avoiding overly specific selectors etc...
My question is, is the following approach correct. It works, technically, but also seems fragile:
.badge {
/* additional declarations */
background: rgba(0, 0, 0, 0.2);
}
.badge--error {
background: red;
}
.badge--success {
background: green;
}
This works fine, because of the cascading nature of CSS. So the default background is overwritten by the modifier successfully. But if I put the modifier before the initial declaration, the modifier is ignored (because of the equal specificity).
Are there any issues with writing BEM this way? Is it considered bad practice to declare a default value of something like a background within the block, if it's to be overwritten with modifiers? Should the default background in this instance, live in a .badge--default modifier? Or have I written this in a true BEM fashion, and BEM actually relies on CSS' cascading in order to remain flat?
You could make use of CSS variables
.badge {
background: var(--background);
}
.badge--error {
--background: var(--error);
}
.badge--success {
--background: var(--success);
}
:root {
--background: yellow;
--error: red;
--success: green;
}
<div class="badge">
a badge
</div>
<div class="badge badge--success">
a badge success
</div>
<div class="badge badge--error">
a badge error
</div>
<div class="badge" style="--background: purple">
a badge random
</div>
I don't see why a modifier could not modify just a background if it is(n't) set in the initial element.
For BEM I can recommend using a CSS preprocessor like SASS since it make it quite easy to nest elements there is less change of declaring some modifier before the initial declaration. Because of the nesting your CSS becomes much more organised. It is also easier to import different components so each component can live in its own file.
With SASS you can do:
.badge {
&--error {}
&--success {}
}
I have a angular project which use a library called smDateTimeRangePicker , it include the code below:
Link Here
.action {
height: 30px;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%; }
However, in my project, there is a code which also include action class
<div flex class="action cell">
And it is impacted by the CSS above, how to avoid it?
This question considered about these points below:
There is a way that can avoid the CSS impact between project and library.
The library uses a bad practice, it must avoid impacting project. It is a bug for the library and must be fixed.
This impact usually happens, so I need to change my project to avoid the conflict
Rename your project action class to something else is the cleanest way. Else you have to resort to fixes that are considered bad practice like !important, however these still get the job done.
this happens to me quite frequently, so to solved it I just add one parent class to my page or that particular section
<div class="my-unique-class">
---
<div class="action">
---
</div>
---
</div>
.my-unique-class .action {
height: 30px;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%;
}
You can avoid such kind of situation by increasing specificity of your css rules.
There are multiple ways to do so:
Include all third party CSS files before your custom file so that css rules with same priority (In Your Case) can override the rule in third party CSS file.
Above solution should work in most of the cases, but there are chances that Third party CSS might come with higher priority orders, so you can increase weight of your css by adding class at your parent tag as:
.parent > .action {
/ * Some CSS Code */
}
<section class="parent">
<div flex class="action cell"></div>
</section>
MDN has great article about CSS Specificity here
If you can't change your class name, you could make your styles unique to your element by doing:
.action.cell {
/*your styles here*/
}
By leaving out the space between action and cell you are saying that both classes are on the same element. Also, make sure you are loading your stylesheet after the 3rd party stylesheet so that your styles are being applied over theirs.
When you have a CSS rule, you can use !important before semicolon:
background: black !important ;
It marks your rule as "important" and it cannot be changed with any CSS file.
Only inline CSS can overwrite it:
style="background: blue !important"
Polymer makes by default nice but airy layouts (due to paddings, margins, font sizes...).
What is the official (or clean) way to scale down all the user interface so that we can have more content on fewer surface?
I could find a quick hack with:
html {
transform: scale(0.8);
}
but this shifts all the content, leaving an empty space on each 4 borders.
I could do it with the CSS mixins. For instance to override every paper-button layout, I added the following css to the main html file :
:host {
--paper-button: {
padding: 3px;
font-size: 12px;
}
}
According to https://elements.polymer-project.org/elements/paper-button , this is injected to the end of each paper-button css.
I have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars
So let's say I have the following in 'foo.css':
.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }
Now let's say that I have two divs I want borders for, so I do:
<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>
This works fine, but I find that when defining #foo and #bar in my css file, I would rather give them the characteristics of .border than give the div's the class, like so:
.border { border : solid 1px; }
#foo {
<incantation to inherit from .border>
color : #123;
}
#bar {
<incantation to inherit from .border>
color : #a00;
}
and then my html would just be:
<div id="foo">Foo</div>
<div id="bar">Bar</div>
Anybody know what that magic incantation is?
That is not supported by css. The best you can do is something like:
#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }
You might be interested in mixins with Sass. Sass lets you write css style sheets in a more efficient way, using tricks like this. Mixins let you define a group of attributes (say, to do with borders), and then include those attributes within certain css classes.
As Wsanville said, you can't use the class.
But normal CSS inheritance does work - say if your html was
<div class="border">
<div id="foo">
hello
</div>
<div id="bar">
world
</div>
</div>
You could say
.border {border: 1px solid #f00;}
#foo {border:inherit;}
Which in some cases might be good enough
If you're looking to push your CSS further instead of using some of the tricks outlined in earlier posts, you should look into CSS Compilers. They take CSS-like code you've writen, usually CSS with a few tricks added in, and turn them into normal CSS for the web.
David Ziegler wrote about some of the cool featured CSS compilers offer:
Variables - Good programmers don’t like to hardcode. In many cases you can avoid this in CSS by using good inheritence, but sometimes it’s unavoidable. With variables, changing your color scheme means updating one variable instead of 13 attributes.
Math - This goes hand in hand with variables. Say your left column is 100px, your right column is 500px, and your wrapper div is 600px. Well, maybe you decide to change it to 960px. Wouldn’t it be awesome if the width of your columns adjusted automatically? The answer is yes.
Nested Styles - This is probably the most important. CSS is flat, which means complex sites end up with CSS that is a pain to go through.
You can read about popular compilers in his blog post on the subject, or do some searching and find one that works best for you.