Is there a shorthand way to write the following css classes that all have the same style?
.gtlab1-17, .gtlab1-19, .gtlab1-21, .gtlab2-17, .gtlab2-19, .gtlab2-21, .gtlab3-17, .gtlab3-19, .gtlab3-21 {margin-left:-3px;}
I need to avoid picking up:
.gtlab1-16, .gtlab2-16, .gtlab3-16
and
.gtlab1-15, .gtlab2-15, .gtlab3-15
which have different styles.
Thanks.
Mabye try this:
div[class^="gtlab"] {
border: 1px solid magenta;
}
div.gtlab2-16, div.gtlab1-57 {
border: 0;
}
If finds divs that have "gtlab" somewhere in its class, and then override the ones you want to exclude.
reference is here: this site i have bookmarked and i revisit that page all the time http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
You could add the same class to all elements as suggested, but if you dont have access to the html (using CMS or what ever) You could add a class to the elements with jQuery .addClass() and having div[class^="gtlab"] as your selector.
Short answer is:
[class*=gtlab]:not([class*=-16]):not([class*=-15])
But depending on the rest of your code and expected browser support (IE8?), this may not work.
Long answer is, change your HTML if you have that option or just use the long version, it's really not going to cost you much more in terms of coding time or download time and will probably be quicker to render.
Use more classes? It seems like the gtlab2 part is describing one aspect while the number is representing another. Why not split it into two distinct classes that can be used together?
Related
I am trying to use BEM naming convention and having some slight difficulty in deciding where to include a modifier for a specific page.
For example, say I have an orange button:
<button class="btn btn-orange">Button A</button>
My project has 3 different pages:
- pageA.html - pageA.scss
- pageB.html - pageB.scss
- pageC.html - pageC.scss
On pageB.html the button should have a margin-top:30px. Is it correct to write the modifier this way:
.btn {
padding: 5px 20px;
background: orange;
margin: 0
&--margin-top {
margin-top: 30px;
}
}
And what is the best way to include a modifier like that only for a specific page? In this case that would be for pageB.html. Should I include that modifier inside the pageB.scss or .buttons.scss?
I think you're confusing two concepts here - BEM, which is Naming Convention with the problem of structuring your projects. Both have nothing to do with each other, and I think BEM is not opinionated in terms of structuring your SASS files.
But, there's a couple of questions you ask here:
Is it correct to write the modifier this way? - it is correct if you want to stick to BEM convention, although I would say, the name you picked .btn--margin-top might not be very fortunate in a long term - imagine, you'll want to include another btn modifier with margin-top property set to, let's say 40px. How will you name it?
What is the best way to include a modifier like that only for a specific page? - These CSS classes you are usually not making for specific page. Whole point of BEM is to enable you, to write more modular CSS, and having this in mind you should use these CSS classes, by assigning them to your Blocks/Elements/Modifiers respectively. Trick here is to determine what is a block/element/modifier in your markup. What you'll achieve by this is reusable CSS, so you can quickly apply same css, by adding BEM classes.
Think in terms of Blocks or Components, NOT pages. You want to use it only on pageB - just add btn--margin-top class to your pageB markup.
Should I include that modifier inside the pageB.scss or .buttons.scss? - it depends on how you structure your project, and I would say that usually, buttons and other UI elements, are in most cases common to whole website/webapp, so there is no need of having them "attached" to specific page (which concept I think you need to drop, if you want to take full advantage of BEM). Besides, whatever suits you will be good for you, and unless you're not working within a team of developers, just stick to your own method, so you'll know in future where to look for things.
In production sites I solve this problem by using a file for the page that is deliberately more specific.
The other answerer is correct, BEM doesn't solve this problem but the solution is available in the css architecture.
I tend to structure projects as follows:
modules
sections
pages
with each getting more specific.
A section might have some specific way of rendering a button, in which case the sass would be like this:
.section {
.button--primary {
// styles
}
}
For a page, the same, but with a page specific key:
.page {
.button--primary {
// styles
}
}
You could even do:
.page {
.section {
.button--primary {
// styles
}
}
}
The key is keeping on top of the specificity in the structure of you sass files. Your button file would not change and you could be sure of dropping it in anywhere in the HTML of your site and having it render correctly and, as a module, it should only contain styles you would want to apply site-wide. For example:
.button--call-to-action {
background-color: $brand-colours__call-to-action;
}
(the hyphens are used to denote that call-to-action is a variation of button and the underscores to denote that call-to-action is one of a set of colours that belong to brand-colours)
Your margin top would then be defined simply as margin-top: 20px; in part of your sass that limited it's effect to the desired portion of the site.
As an aside, usually find that almost everything in the specific page files can be refactored further up the chain into variations of sections and modules, meaning often that they end up empty.
As the title says I would like to create a unique div ID for some class in css. Here is some examples:
http://prntscr.com/29rom4
These two blocks are using the same class in the wordpress' css. They are both named as td_block4.
http://prntscr.com/29rp81
Now I would like to create a unique div in the css file of the wordpress theme, where I can put a different background for each "block4".
Here is the example of what I actually want to do: prntscr.com/29rpvd (not a perfect improvisation) :)
And... when I put (in example):
.td_block4 {background-color:#000;}
...in the css, I get this: prntscr.com/29rqbh , and that's not what I want to get.
I hope I'm clear enough, how can I fix this?
Thanks in advance.
I think you can do that only via javascript.You can attack div data-image's with their background , and on load check it and write some js like ".css('background-image',dataimage)"
Take it easy
Your <div>s are surrounded by some more unique parents, so you can simply do:
.span6 .td_block4 { background-color: #f00; }
.span4 .td_block4 { background-color: #000; }
Sometimes, it's not about hooking onto a unique element you want, but by finding a way to use its parents to hook onto a common element, differentiated by unique parents.
Try jquery for this
$(document).ready(function(e) {
$('.td_block4:first').css('background-color','#000');
});
And you can use css for the rest
I am trying to use Bootstrap on a project that encompasses 400+ sites and uses the previous CSS class names (which I have no control over). I've been running into some CSS name clashing and the solution for me is to add a prefix to Bootstrap (.row to .tb-row for example).
I am familiar with the method of adding a namespace using LESS, where an additional class is wrapped around the classes. Unfortunately, this doesn't look like it will solve my issues.
Is there a method via LESS, SASS, or any other compiler that makes it easy for me to add a tb- prefix to all existing classes in Bootstrap?
You could probably do this with SASS
$namespace: "tb";
⌘ + f (or similar) to find all the classes in your CSS file. You're going to probably need a regex (and some trial+error) to find them all.
add .#{$namespace}- to all the classes.
Ideally, you'd get get something like this:
$namespace: "tb";
.#{$namespace}-myClass {
background:pink !important;
}
.#{$namespace}-carousel-module {
width: 25%;
}
compiled to
.tb-myClass {
background:pink !important;
}
.tb-carousel-module {
width: 25%;
}
"Easy" might be a stretch but "easier" seems fitting.
I'm not sure if this is the best approach, in honesty, I'm just ripping off a gist that I saw with comments from people a lot smarter than I am. May come in handy for you though!
You would need to modify the bootstrap code directly, an example of how this could be achieved elegantly in less:
.prefixname {
&-row {
...
}
}
I've added prefix "tb-" to all the bootstrap class (for LESS) in v3.1.0. So after you compile the less files you will get something like ".tb-btn"
You can fork my project at https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-
I've got a tr:table that I need to style using CSS. All the normal style functions of a table are working, but row banding and row selection aren't coming up. When I view the rendered source, I'm not seeing a difference in the rows for an id or class to grab on to, and the official documentation doesn't have any attributes for declaring a style class for either. Is this possible and if so what do I need to do to get my CSS to grab onto it?
<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
<tr:column>
##Stuff##
</tr:column>
<tr:column>
##Stuff##
</tr:column>
<tr:column>
##Stuff##
</tr:column>
</tr:table>
Edit
Let me try to clairfy what's happening.
First, using the declaration above tells jsf to generate a table, and the attribute rowBandingInterval tells it to give each row alternating colors (If it was set to 2, then it would do 2 rows one color, 2 rows another, 2 rows the original, etc.)
Once the page gets rendered into standard html, trinidad (and jsf) apply their own classes and IDs to the html. My normal procedure is to look at the rendered html, find the class that it is appling and add CSS rules for it. However in this case, no additional styles are added (nothing in the rendered html denotes one row to be different from another).
So the question is, how do I tell trinidad to either give alternating rows and the user selected row different classes/IDs for me to grab on to with CSS?
Edit 2
Just to keep anybody paying attention posted, there are no changes to the actual td elements either
Edit 3
After having switched all the attributes around and then stripping all the code down to it's bare bones, I found the row banding attribute. Trinidad classes are rather convluted, and unless you reformat the code and pull out all the noise you won't see it. Trinidad adds the class .af_column_cell-text-band to the banded rows, where as the normal rows have just .af_column_cell-text. So that's half the problem solved. I still need to know the selector for a user selected row, for which I'll happily give all the marbles to anybody that can give me an answer to just that.
This is not directly answering your question, but why not use the CSS3 pseudo-class nth-child to achieve this effect ? For instance :
tr:nth-child(2n)
{
background-color:red;
}
There is a nice and simple jquery code to do the row highlighting located here.
The jQuery is as follows
<script type="text/javascript">
$(document).ready(function(){
$(".stripeMe tr")
.mouseover(function() { $(this).addClass("over");})
.mouseout(function() { $(this).removeClass("over");
});
$(".stripeMe tr:even").addClass("alt");
});
</script>
Then a bit of css
tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }
btw I took all that code from the following site where you can also view the demo.
I made something wrong during the registration process, so this is a new answer instead of a comment.
To deal with the trinidad-skinning topic you need to do the following:
In your web.xml you need to set this parameter to true while developping:
<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>
Get firebug for your firefox. With that add-on you can determine which trinidad-selector is used on a component.
There is no selector for a user selected row. I did it this way:
Give your object something like a "highlight property", which you change if it is the selected one.
<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>
Do that for all columns of your table and you are done.
put these selectors in your trinidadskin.css-file(smSkin.css in my case):
.AFTableCellDataBackgroundColor:alias
{
background-color: #F5F5DC;
}
.AFTableCellDataBandedBackgroundColor:alias
{
background-color: #FFFFFF;
}
Configuration of trinidad-skins.xml
<skin>
<id>
sm.desktop
</id>
<family>
sm
</family>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/sm/smSkin.css
</style-sheet-name>
</skin>
I will refer you to the trinidad documentation.
http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html
In their example they declare the banding as row banding="row" I would assume the reason you do not get anything is that you have not declared if it is row or column banding.
I just finished a medium sized web site and one thing I noticed about my css organization was that I have a lot of hard coded colour values throughout. This obviously isn't great for maintainability. Generally, when I design a site I pick 3-5 main colours for a theme. I end up setting some default values for paragraphs, links, etc... at the beginning of my main css, but some components will change the colour (like the legend tag for example) and require me to restyle with the colour I wanted. How do you avoid this? I was thinking of creating separate rules for each colour and just use those when I need to restyle.
i.e.
.color1 {
color: #3d444d;
}
One thing I've done here is break out my palette declarations from other style/layout markup, grouping commonly-colored items in lists, e.g.
h1 {
padding...
margin...
font-family...
}
p {
...
}
code {
...
}
/* time passes */
/* these elements are semantically grouped by color in the design */
h1, p, code {
color: #ff0000;
}
On preview, JeeBee's suggestion is a logical extension of this: if it makes sense to handle your color declarations (and, of course, this can apply to other style issues, though color has the unique properties of not changing layout), you might consider pushing it out to a separate css file, yeah. This makes it easier to hot-swap color-only thematic variations, too, by just targeting one or another colorxxx.css profile as your include.
That's exactly what you should do.
The more centralized you can make your css, the easier it will be to make changes in the future. And let's be serious, you will want to change colors in the future.
You should almost never hard-code any css into your html, it should all be in the css.
Also, something I have started doing more often is to layer your css classes on eachother to make it even easier to change colors once... represent everywhere.
Sample (random color) css:
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}
Then some markup, notice how I am using the colors layer with otehr classes, that way I can just change ONE css class:
<body class='main_text'>
<div class='main_color secondary_text'>
<span class='secondary color main_text'>bla bla bla</span>
</div>
<div class='main_color secondary_text>
You get the idea...
</div>
</body>
Remember... inline css = bad (most of the time)
See: Create a variable in .CSS file for use within that .CSS file
To summarize, you have three basic option:
Use a macro pre-processor to replace constant color names in your stylesheets.
Use client-side scripting to configure styles.
Use a single rule for every color, listing all selectors for which it should apply (my fav...)
I sometimes use PHP, and make the file something like style.css.php.
Then you can do this:
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
Now you can use that colour wherever you want, and only have to change it in one place. This also works for values other then colours of course.
Maybe pull all the color information into one part of your stylesheet. For example change this:
p .frog tr.mango {
color: blue;
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
background: green;
color: red;
font-size: small;
float: left;
}
// ...
to this:
p .frog tr.mango {
color: blue;
}
#eta .beta span.pi {
background: green;
color: red;
}
//...
p .frog tr.mango {
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
font-size: small;
float: left;
}
// ...
You could have a colours.css file with just the colours/images for each tag in.
Then you can change the colours just by replacing the file, or having a dynamically generated CSS file, or having different CSS files available and selecting based upon website URL/subfolder/property/etc.
Or you can have colour tags as you write, but then your HTML turns into:
<p style="body grey">Blah</p>
CSS should have a feature where you can define values for things like colours that you wish to be consistent through a style but are defined in one place only. Still, there's search and replace.
So you're saying you don't want to go back into your CSS to change color values if you find another color 'theme' that might work better?
Unfortunately, I don't see a way around this. CSS defines styles, and with color being one of them, the only way to change it is to go into the css and change it.
Of course, you could build yourself a little program that will allow you to change the css file by picking a color wheel on a webpage or something, which will then write that value into the css file using the filesystemobject or something, but that's a lot more work than required for sure.
Generally it's better to just find and replace the colours you are changing.
Anything more powerful than that will be more complex with few benefits.
CSS is not your answer. You want to look into an abstraction on top of CSS like SASS. This will allow you to define constants and generally clean up your css.
Here is a list of CSS Frameworks.
I keep a list of all the colors I've used at the top of the file.
When the CSS is served by a server-side script, eg. PHP, usually coders make the CSS as a template file and substitute the colors at run-time. This might be used to let users choose a color model, too.
Another way, to avoid parsing this file each time (although cache should take care of that), or just if you have a static site, is to make such template and parse it with some script/static template engine before uploading to the server.
Search/replace can work, except when two initially distinct colors end up being the same: hard to separate them again after that! :-)
If I am not mistaken, CSS3 should allow such parametrization. But I won't hold my breath until this feature will be available in 90% of browsers surfing the Net!
I like the idea of separating the colour information into a separate file, no matter how I do it. I would accept multiple answers here if I could, because I like Josh Millard's as well. I like the idea of having separate colour rules though because a particular tag might have different colours depending on where it occurs. Maybe a combination of both of these techniques would be good:
h1, p, code {
color: #ff0000;
}
and then also have
.color1 {
color: #ff0000;
}
for when you need to restyle.
This is where SASS comes to help you.