I use the Tablepress plugin for Wordpress and I made a border around one column. Here is how I made it:
.tablepress-id-1 .column-2{border-left:solid 4px #fb9901;
border-right:solid 4px #fb9901;}
.tablepress-id-1 .row-10 .column-2{border-bottom:solid 4px #fb9901;}
.tablepress-id-1 .row-1 .column-2{border-top:solid 4px #fb9901;}
It looks like I wanted it, but I have the feeling that there is a way to make is smarter and leaner. (I need to replicate it on many other tables)
Thanks
I would recommend using css custom property for the color:
.tablepress {
--border-color: fb9001;
}
.tablepress-id-1 .column-2 {
border-left: 4px solid var(--border-color);
}
Related
I added a shadow to some of my buttons. With the :not selector i deselected some elements like link button and pickerfield button. My problem now is that there is also a shadow in my logout section. It didnt work with c-logout and c-login-button. Someone here who has an idea?
.v-button:not(.v-button-link):not(.v-button-c-pickerfield-button):not(.v-button-c-logout-button):not(.v-button-c-login-button) {
box-shadow: 1px 1px 4px darkgray;
}
Found the solution, added some missing stylenames in ext-main-screen.xml and this is my scss:
.v-button
:not(.v-button-link)
:not(.v-button-c-pickerfield-button)
:not(.v-button-c-sidemenu-collapse-button)
:not(.v-button-c-settings-button)
:not(.v-button-c-logout-button)
:not(.v-button-c-login-button) {
box-shadow: 1px 1px 4px darkgray;
}
I am using LESS CSS preprocessor. For example if there are two (or more) rules with same value
.my-class {
border-top: 2px solid #main-bg-color - #123456;
border-bottom: 2px solid #main-bg-color - #123456;
}
can I combine those two into one somehow like this?
.my-class {
border-top, border-bottom: 2px solid #main-bg-color - #123456;
}
UPDATE: You shouldn't be concentrated on the props (border) I wrote just as example. I'd like to know if there's any way to combine any multiple props with same value. If there is no way to do so, please say it explicitly.
Why not just use something like:
.my-class {
border: 2px solid #main-bg-color - #123456;
border-width: 2px 0;
}
As #seven-phases-max says, there is no way to combine several props with same value in LESS. Use variables or mixins instead.
I am new to web development and coding. I might need a little help with something I am trying to get a border around each data cell using CSS below is my code.Please help me. For some reason this is not working.
.table-box table td{
background-color: #ccc
border: 2px soild #000
}
.table-box table td{
background-color: #ccc;
border: 2px soild #000
}
You have to end the statement with semicolon for the last one it is optional
I'm working on a website and I want to add some shadow to my text, is there an easy way to do this using only css? i tried placing a darker clone of the text under it, but that would be hard on different sizes.
You can achieve this using the CSS3 text-shadow property. The general format for specifying this is:
text-shadow: *left-offset* *top-offset* *blur-distance* *color*;
Example Usage:
text-shadow: 2px 2px 1px #000000;
You can create multiple shadows by separating their definitions with commas:
text-shadow: 2px 2px 1px #000000, -2px -2px 1px #111111;
Older versions of IE do not support this property, though; you need to use a filter:
filter: DropShadow(Color=#000000, OffX=2, OffY=2);
Where you replace the values with whatever your preference is.
Note: The answer to your question can be found quite easily using the great search engine Google. Please try that next time before asking a question.
Another note: You really don't have to mention that the website you're working on is an adult website. It's completely irrelevant and might even be a bit dislikable to some users.
Welcome to Stackoverflow, though! I hope that helped!
you can use css text-shadow any times you want on a text:
text-shadow:1px 0px 2px grey, -1px 0px 2px grey, 0px 1px 2px grey, 0px -1px 2px grey;
will create a shadow whole around the text.
Is there a way to set multiple CSS properties to one value?
border-left, border-right: 1px solid #E2E2E2;
The way that you can do with selectors?
.wrapper, .maindiv { ... }
Nope. But for your example, you can do this:
border: solid #E2E2E2;
border-width: 0 1px;
The attributes where there can be separate values for top, right, bottom, and left (eg, border-*, margin, padding) can usually be combined in a single attribute.
Not possible, unless you do:
border: 1px solid #E2E2E2;
..which sets the same border on all sides. If you want to control them individually, you have to write them as separate statements.
Note that in some cases, you can set multiple values for one attribute, but you can not have multiple attributes with one value in one statement.
Not possible with plain css, but you may have a look at scss or less who might have solutions for your problem.
A solution with plain css is the following:
border: 1px solid #E2E2E2;
border-width: 0px 1px;
If you're using sass, try this:
#mixin border($properties , $value){
#each $property in $properties{
border-#{$property}: $value;
}
}
selector{
#include border(left right, 1px solid #E2E2E2);
}
CSS does not allow such control. A workaround is to use larger rule, then restrict it:
border: 1px solid #E2E2E2;
border-top: 0;
border-bottom: 0;
But you end up with more code. Another solution is to use CSS "compiler", like SASS or Less
If the attributes are related, as is the case with border-left and border-right, there usually is a common attribute that allows you to set them:
border: 1px solid #e2e2e2;
On the other side, there are some libraries like Less CSS out there that extend CSS so that you can easily group related properties and attributes.