We're using a template for joomla where creators defined the rule in constant.css
table
{
border-collapse:collapse;
border:0px;
width:100%;
}
When I need my own table with a custom params (width, border and so on), a nightmare begins. If I use general html params, they don't work since css rules are more important (CMIIW). If I use style= param, I suppose I can't control how the table looks for IE up to 7 inclusive.
So is there a general approach to work around this or I just need to comment the rule (as I already did).
And also, am I right if I say that creators of joomla templates should not define such general rules as width:100% by default? I mean if they don't want users of their template to complain.
Method 1
Put a class on all tables that you create, and create a selector like table.classname that overrides the properties. Since you should only use tables for tabular data, adding a class name makes sense because it's easier to apply additional styles (colours, borders) to all your tables.
To override border-collapse: collapse, use border-collapse: separate along with border-spacing: 4px (or whatever value). This doesn't work in IE6 and may not work in IE7 either.
For a border round the table just add a border rule. If you want borders on individual cells, target table.classname td and put the border rule there.
To reset the width, use width: auto or put an explicit width.
Method 2
An alternate method would be to find all the tables used in the template, add a class to them instead, and change the original rule to use that class. Then, any tables without that class will use the default table properties.
This is probably going to be quite difficult to implement because Joomla templates often have module and component overrides, meaning there will be many tables in many places. Good luck! :p
You're correct, setting those styles (well, width at least) on a generic table element is a bad idea for a template. Although the fact they're probably using tables for layout isn't a good sign anyway.
table{
border-collapse:collapse;
border:0px;
width:100%;
}
The following should override the above css rule:
.classofyourtable
{
width:50%;
}
#idofyourtable
{
border:1px;
width:20px;
}
Please note also of the following CSS cascading precedence(1 being the highest):
inline
ids
class
tagname
Rules with less precedence will be overriden by the higher ones.
Applying the style to a class or id both override the style in the general tag style.
There's a number of ways to do it. As Marius says, a class or ID will help.
Lets say you put an id on the body element (<body id="foo">), then you could override the built-in table style using
#foo table {
width: auto;
}
Or if you only want to restyle certain tables, try using a class (<table class="foo">):
table.foo {
width: 25em;
}
But yeah, why not just edit the template's CSS to do what you want?
Apply another rule below the existing one:
table
{
background-color: Navy;
width: 100%;
}
/* override existing rule: */
table
{
width: 960px;
}
When a CSS rule is specified twice, the browser will use the last one.
And yes, you are correct--The proper way for Joomla go about this is to implement namespacing using classes. Overriding default CSS rules is bad practice.
Related
It is possible to pass parameters for CSS in class name? For example:
.mrg-t-X {
margin-top: Xpx;
}
<span class="mrg-t-10">Test</span>
In this example X should be 10.
No it isn't. The closest we have to this is the attr() function, but that only works within the content property:
figure::before {
content: attr(data-before) ', ';
}
figure::after {
content: attr(data-after) '!';
}
<figure data-before="Hello" data-after="world"></figure>
Perhaps one day this will be expanded so that we can use it elsewhere, but for now this isn't possible.
Currently as I'm sure you're aware if you want to be able to use the .mrg-t-X class, you'll need to define separate style rules for each X you wish to allow:
.mrg-t-1 { ... }
.mrg-t-2 { ... }
.mrg-t-3 { ... }
...
Nowdays you can use CSS variable inside a style attribute instead generating a specific class:
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).
Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts.
Custom properties are subject to the cascade and inherit their value from their parent.
example
span {
display: block;
margin-top: var(--m-t);
}
html {
background: repeating-linear-gradient(to bottom, transparent, 10px, lightgrey 10px, lightgrey 20px);} /* see 10px steps */
<span style="--m-t:50px">one</span>
<span style="--m-t:85px">two</span>
<span style="--m-t:110px;">three</span>
Maybe you are looking for SCSS or LESS. It have mixins, variables, etc, and it autocompile real and long css. It was maded to this purposes and write less and less css with the same result.
http://sass-lang.com/guide
http://lesscss.org/
#size: 10px;
.class { font-size: #size; }
Good luck!
It isn't possible to directly pass parameters using just CSS but you're not the first person to ask - check out this question which looks at CSS and JavaScript options and also this might be helpful regarding attribute selection.
This will only help if you are looking at a few variables of margin-top but I don't know what context you're using this in. Depending on what you're using it for there might be better ways.
The simplest way would probably be just to add the style inline to your span <span style="margin-top:10px"> but I try to stay away from inline CSS!
no your code is wrong
but you can write css inside the tag
*<span style="margin-top:Xpx;">*
I am using a stylesheet in my code to stylize proprietary widgets, therefore I don't have access to alter the base stylesheet (nor is that really good practice anyway). One of the styles is causing problems in my application and I determined that the margin: 0 property needs to be removed entirely from this CSS rule:
.esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail {
border: 2px solid #F99;
margin: 0;
}
Is there a way to do this? Since I cannot view the stylesheet in a formatted way, I cannot get the index of this rule. The styles aren't in-line so I don't think I can use the .css() method. If I can't remove it, the only alternative I can think of is setting it to 1px (which I tested and it removed the problem that's occurring) but I'm not a big fan of that solution.
You will need to expand the specificity of your element if you do not wish to override css rules. The easiest way to do this is to add an id on an element and then write a css rule for that element using the id instead of the classes.
Read more here:
https://css-tricks.com/specifics-on-css-specificity/
I have a website created by a designer entirely in a table format. I am embedding another table within its cell, the thing is my table has its own stylesheet. When I link mine externally, the entire site get warped. All I want is my Stylesheet to work on my table.
How do I include this stylesheet without causing a conflict or override on the entire site?
If there's no better option, then give your table an id or specific class. Then use this in all your CSS declarations, ensuring the styles within will apply to only your new table. This article explains the idea of pseudo-namespacing further, which is worth considering.
So instead of:
td { border: 1px solid black; }
You would have, e.g.:
.myClass td { border: 1px solid black; }
There are two kinds of things to take care of: 1) preventing your style sheet from affecting the table used for formatting the entire table, and 2) preventing the formatting of that table from affecting your table. Your style sheet must be modified for this.
Start from assigning a unique id to your table and then using the corresponding selector in all rules of your stylesheet (see Rob W’s answer). This suffices for 1). It mostly suffices for 2), too, but not always. You should test it and have a look at the overall style sheet. There is no quick way here.
To illustrate the problematic point, suppose that you want your table to have borders around cells. For this you could have table#foo td { border: solid; }. But if the overall style sheet has td { border: none !important; }. That’s not good practice, but such things are used; authors often use !important for no good reason. In this case, if the overall style sheet cannot be changed, you would need to use !important in your style sheet, too. In extreme cases, you might even need to use !important and write selectors so that they are more specific.
I'm currently working on refactoring a large amount of CSS, and a common trend I'm seeing is that several classes have been created for a very specific item on a page. Rather than trying to describe what they do, the classes are named things like "PressReleaseText", or "SpecLabel", etc. Most of these just define one item, like a font-size or a color.
I'm wondering if it would be better to just create several utility classes, like .fontSize140 {font-size: 140%;}, .bgColorWhite{ background-color: white;}, and utilize those in place of all the duplication occurring across the current set of classes.
Are there any drawbacks to doing this? The point where it becomes blurry is if a current class has 3 attributes set, like color, background color, and font size, and I already have generic classes for all three of those, would my class definition in the html just look something like class="white bgColorBlue fontSize140". That just seems excessive.
This is absolutely a horrible practice. It's 10x worse than the current class names that you're trying to replace. Consider the following class names:
fontSize140
bgColorWhite
marginTop150
These are obviously very descriptive class names. The problem is that they describe the styles behind the class, not the content that it styles. While this can be easier to read in HTML, it will be a complete nightmare in the future when and if you decide to make even the tiniest redesign.
For example, let's say we just applied these three classes to a block of text. It has a font size of 140%, a white background, and a top margin of 150px. That's all fine--until we decide that it needs to be 90% font, a blue background, and no top margin. Now, not only do you have to change the CSS declarations, you have to either:
(1) edit every instance of the class in the HTML to be fontSize90bgColorBlueNoTopMargin or whatever; or
(2) leave the class name alone and leave an extremely confusing class name in the HTML.
Either way it will be a massive pain for you in the future, whereas the current class names (e.g., specLabel, pressReleaseText) appropriately describe the content that they style; their styles can be easily changed without affecting the content inside of them, and thereby never affecting the name of the class.
Part of the point of CSS is to separate the content from the presentation, to make it easier to alter the presentation without altering the content. If you have class="white bgColorBlue fontSize140" all over the place, you have defeated this goal; you might as well just go with style="color: white; background-color: blue; font-size: 140%". Your classes should say what you mean not what you want it to look like.
If you find yourself repeating certain settings for lots of classes, like the following
.PreReleaseText { font-size: 140% }
.SpecLabel { font-size: 140%; background-color: white }
.SomeOtherThing { font-size: 140% }
You can instead combine several of them into one single rule
.PreReleaseText, .SpecLabel, .SomeOtherThing { font-size: 140% }
.SpecLabel { background-color: white }
If you really do just have several classes that are synonyms of each other, you might want to think about why that is. Why are all of those styled the same way? Is there some class name you can come up with that encompasses all of those uses? Or is it just incidental that they happen to be styled the same way? If it's just incidental, then they should have separate rules, so you can easily update the styles of each class independently. If there is some unifying theme, then perhaps you should merge them into a single class.
Remember to consider what will happen in different media, or in a redesign. Imagine that the company is bought out, and you want to change the color scheme to match the new corporate colors, without doing a full redesign. If you have a .bgColorWhite class, but only some of the things labelled with that class should change to a new color in the redesign, you'll have to go through all of your templates and markup again to separate out the classes, but if you labelled them with more meaningful classes, you may be able to just tweak the colors in the appropriate classes.
These are some general guidelines; you should always use what works best for you. If you had a more specific example, I might be able to suggest a better way of refactoring your classes for your specific need.
There is not a right and wrong way to do this as far as I'm concerned. It depends on knowing how often you'll reuse things and what makes it easiest to understand the CSS. I've often seen those general things like .fontSize140 end up causing problems later on when you have to make changes. I prefer in most cases to group classes but keep the individual names.
So I might have
.Thing1,
.Thing2,
.Thing3 { font-size:14px; }
.Thing1 { font-weight:bold; }
.Thing2 { font-size:italic; }
Instead of having
.font14 { font-size:14px; }
And then still needing the .Thing1 and .Thing2 clases.
That was I can always change the CSS easily later without having to worry what is sharing that common .fontSize140 for example.
I would stay away from getting too general like .fontSomeSize. That said i generally try and use classes that define things as logical "types" or "objects" for example .ruled-list or .summary.
Why don't you try something like this:
Use a css preprocessor like sass.
/* define app/website colors */
$main-color: #223c61;
$secondary-color: #2954a2;
$accent-color: #4cceac;
/* some example css classes */
.text-main { color: $main-color; }
.bg-secondary { background-color: $secondary-color; }
.bg-accent { background-color: $accent-color; }
/* define app/website spacings */
$spacing-xs: 10px;
$spacing-sm: 15px;
$spacing-md: 25px;
$spacing-lg: 35px;
/* some example css classes */
.padding-up-xs { padding-top: $spacing-xs; }
.padding-down-lg { padding-bottom: $spacing-lg; }
.margin-left-md { margin-left: $spacing-md; }
The above code has generic css classes, but it is not bound to a specific value. For some very specific styling, you can always make a custom css file to account for that.
I see a lot of people using custom margins and paddings throughout their css. See the code below.
.blog-post-sidebar-right { margin-top: 14px; }
.news-post-bottom-text { margin-bottom: 23px; }
As a rule of thumb, I always use 4/5 predefined margins and paddings. And not some arbitrary number you make up on the fly.
So why not define generic css classes to use them. I took this same idea an applied it to all of my css. Now I can have the same code base in every project.
Because you now use a css preprocessor, it's easy to maintain, flexible and easy to extend.
Im not saying this is the best option, but it does the job for me.
I have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.
I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a class based on their presentation. But I don't want to do this (and can't because of the way the markup is generated)
Is there a way to do this, without just putting a class on the divs? I could copy the details of the class desired to a stylesheet mentioning the divs by id, but that feels wrong.
Edit to clarify:
The OP wants to avoid adding class="grid_3" etc. to the HTML, but also doesn't want to add #header { width: 960px; margin: 0px; } (which I think is okay) – Rory Fitzpatrick 3 hours ago
Exactly, I don't want to put presentation information in my HTML, but I hoped I wouldn't have to just take the css classes that make up the grid system apart, and apply the relevant parts (like margin:0px and width:960px), since that is bad from a maintenance and reuse angle.
So, I'll look at an automated system for doing what I need, unless there is an answer to how do you apply a css class to an HTML element, using css, without adding class="blah" to that element? Because that doesn't seem like a crazy thing to want to do to me.
Well if you use blueprint-css as your grid system you can use the compress.rb to assign the rules for given bp framework classes to a specific selector of your choice like #footer or what have you. for example in your project yaml you could have:
semantic_styles: # i dont think this is the right key definition but you get the idea
'#footer,#navigation': ['span-12','clearfix']
'#footer': ['push-1']
# etc...
Then when you call compress.rb on the project file it will roll up the necessary declaration from the array of selectors on the right into the selector on the left producing:
#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */}
#footer {/* declarations from .push-1 */}
But all in all this is essential an automation of copying the declarations to a separate file that you say seems "wrong". But i mean other than doing this (automated or manually) i dont see what the possible options could be.
I'm not sure I understand the question. Why don't you want to put styles in a stylesheet and reference them by id?
#header{
position:relative;
...
}
I have the same reservations about grid systems, adding class names just goes against separating markup and style (but is often sacrificed for productivity).
However, I don't see what's wrong with setting the right column widths and margins using your own CSS. You could have a specific site.grid.css file that contains only selectors and widths/margins for the grid. I think this is perfectly okay, it's just a way of using CSS like variables. For instance, all 3-column elements would appear under
/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
width: 301px;
}
Then rather than adding class="grid_3" to your HTML, you just add the selector to the CSS.
You might want to consider using the class names initially, until you're happy with the layout, then convert it into CSS selectors. Whichever works best for your workflow.
If you don't have access to the markup you must either copy the styles, referencing the ids, or maybe you can apply the class to the ids using javascript?