I'm developing an add-on for an existing CMS system. My add-on outputs a link to a style sheet and then outputs a table. The rest of the content(header,left column, footer etc.) is provided by the CMS.
Previously linked CSS styles seems to effect the way my table is displayed. I want to avoid this. I want my table to be shown according to my CSS style. How can I this?
You can add the !important declaration to your style:
table thead th
{
color: #ff0000 !important;
}
Your column headings should have red text now, even if another color has been previously set through another style.
There are only two options:
1) Put the table and its stylesheet in an iframe. Since it is a separate webpage entirely, it won't be affected by stylesheets on the parent webpage.
2) Fully specify the styles of all elements on your table. As long as you override everything the parent page might have specified, your table will look as you want it to.
do you mean a CSS reset? google that for thousands of results.
Related
I was trying to add some css styling to my wordpress website. However, I'm quite confused how to select the element and add the css !
Let me explain it in detals in three scenarios:
Picture 1:
I'm going to change the color and width of that button with text "Submit your attendance" inside. I wanted to make it red.
First Try: Picture 2:
I selected the calss which is :
wpcf7-form-control wpcf7-submit
Added the background-color: red , but it didn't work.
Second Try: Picture 3:
I did the same for this class:
wpcf7-form-control
Thrd Try: Pictur 4:
In inline style, when I add background-color: red and width: 100% in workes. I noticed a style attribute is also added. However, I'm not sure how to add in my Custom CSS of wordpress. I mean which element should I select? Of course Inline-style is not an element.
This is not an issue with regard to WordPress. This is due to CSS Specificity. What this means is that the rule that is more specific will "win" and be applied. This is why inline styles typically work over non-inline styles.
In your example, the rule that is being applied is more specific than the one you're trying to override with.
There is a hierarchy when it comes to specificity and the order in which rules are applied. Here they are in order of most specific to less:
Inline Styles
Ids - targeting the ID of an element is more specific than targeting a class
Classes, attributes and pseudo-classes (for example :hover)
Elements (for example a "p" tag) and pseudo-elements (:before)
Either add an ID for the your button or target the class in a more specific manner. For example body .thecontainer .thediv .anothercontainer .myelement
This might be work. You need to add !important property.
wpcf7-form-control{ background-color:red !important; }
Try this.
To update worpress css you have to edit the file style.css
Appearance -> Editor -> style.css (search inside other files)
or
Appearance -> Customize -> Additional CSS (where you have to add manually every line of code)
Sometimes you need to add "!important;" at the end of line, something like:
background-color: red!important;
I've made a website using the academic theme of hugo; there's an example provided here. I want all of my posts (of which there are three examples provided at the link) to be wider. For example, a post initially looks like this:
where the text is constrained within a more narrow window, but I want it to look like this:
where the text has the same width as the page.
I notice that I can make this happen by unchecking the 'max-width' specification in '.article-container'. How can I edit my local files for my personal page with the academic theme to make it so this automatically happens?
This may be done by overriding the CSS in the .article-container selector.
.article-container {
max-width: none;
}
The simpler way is to create a file layouts/partials/custom_head.html where you place the above CSS rule inside a <style>...</style> block.
Another way is to create a file assets/css/custom.css with that rule, and then updating the property plugins_css in the file config/_default/params.toml so that the new stylesheet can be included as part of the loaded stylesheets.
plugins_css = ["custom"]
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
I am building a jQuery UI site. I can see how easy it is to add widgets or dialogs and also I have seen it is possible to style elements using the theming api:
http://jqueryui.com/docs/Theming/API
So how do I style things like normal text or html headers 1-3 or html tables?
I would like to use the classes and styles from jQuery UI so everything fits together and changes when I change the theme.
I have tried to apply ui-widget-content or ui-widget-header to divs or h1,h2, but maybe there is a better way, or an in depth tutorial somewhere.
I usually detect the class of the theme I want to customize, and then instead of changing directly in the jquery css, (because I prefer to have udner control my changes, and ebcuase if I update the theme, don't need to add the changes again) , I add these modified classes in an "override" block or how you want to name it, so that are same classes, but with an important;! or other hierarchy trick added. For instance, calling the parent ID to give it more weight: #content .ui-widget-content {whatever} , or .ui-widget-content {whatever property:whatever value !important;}
Is usually some small bits, never a large portion of things that I want to customize, so adding these 2 or 3 classes in my main.css does not hurt. It depends, though.
edit: Oh... with "oder" you meant "order". Sorry, was not understanding well your question (is a bit unclear).
If you are not supporting IE7, you might be interested in using:
tr:nth-child(even) {background: #fff}
tr:nth-child(odd) {background: #000}
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.