this is my first question here, hope I am doing this right :)
I am trying to change the colours of the calendar on this page:
https://realsailing3.vanbruben.de/dehler-41-shelter.
But the classes are as long as
.monthly-fluid .ext_month_day_nox, .monthly-fluid .ext_month_day_nox_r, .ext_month_day_nox.morning_occ_nox
or
ext_month_day_nox no_start nocuscol
or
.monthly-fluid .cur_month_day_nox.arrival_day
I have tried to separate them with a dot but i get the message "dont use adjoining classes"
Any idea of how I can change these colours?
Thank you very much!!
code picture
try to add !important with that property.
.monthly-fluid td.reserved_nox {
background-color: #f0c2c2 !important;
}
It shouldn't matter how long the classes are. If you've used an email client such as Outlook before, classes act the same way as tags do in Outlook. You can "categorize" each element as cur_month_day_nox or no_start or nocuscol, or any combination of them. Then when the element is styled using CSS, the file will describe how elements will appear based on their categorizations. Each description is called a "rule."
We want to look for a rule which modifies the background-color, since our objective is to change it the color of the day. While the element is selected in the Inspector, If you look on the right pane called Styles and scroll enough, you'll find the following CSS rule:
.monthly-fluid .cur_month_day_nox {
background-color: #c2dfd0;
}
This style "selects" any elements which have the class .cur_month_day_nox, which is all the green days with the exception of today (at the time of writing, that's February 1st). So, you can double click the color value and change it. You should see all the green days change instantly.
Edit: For a weird reason, the class names are different on your end, but regardless the approach is the same.
Related
I am working on a website, https://wordpress-625707-2032312.cloudwaysapps.com/, with the WP Shopify Plugin, and trying to change the default button colors. I have gone into dev tools and found the div class to change the button background. I can clearly see it's labeled as "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton"
But when I use this class for my css changes, it doesn't work. The change is "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton {
background-color: #D71614 !important;
}"
Why is this not working?? I can't attach screenshots since I'm too new on here...sorry!
Actually you are pretty lost here.
This is not actually a class:
wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton
There are 4 classes there, separated by spaces. The last one is actually unique for the first button. And in css, when you are styling a class, you should start with a dot, like: .class-name
The code you are looking for is:
.wps-btn.wps-btn-secondary.wps-add-to-cart {
background: red;
}
We concatenate 3 classes here with dots and NO spaces.
You should take a look at CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
I'm trying to change the class name of my header when I hover over it. The class name when NOT hovering is ".l-header.pos_fixed.bg_transparent.shadow_wide", but I'd like to rename it when hovering to ".l-header.pos_fixed.bg_solid.shadow_wide".
Is this possible?
EDIT: Maybe a bit more background information: I want to change the header of https://pinkypromise.pictures to the header of, for example, https://pinkypromise.pictures/contact when hovering on the home page.
To answer your question, yes, it is possible to change class names based on events (hover, in this case), but you will need javascript for that. You can't achieve this with pure css.
As others have mentioned, it is usually a better approach to have a css rule with the :hover pseudo-class. But also be aware that you might have problems with the intended result in touch devices.
A good source of information for these rules is Mozilla Developer Network. Please have a look at the full documentation for :hover's pseudo class on MDN.
Sorry I thought only the logo should change.
I see you site is using jQuery.
When I enter this in the console it seems to work fine:
jQuery('.l-header.pos_fixed.bg_transparent.shadow_wide').mouseenter(function() {
jQuery(this).removeClass('bg_transparent').addClass('bg_solid');
}).mouseleave(function() {
jQuery(this).addClass('bg_transparent').removeClass('bg_solid');
});
You don't need to change the class name on hover, just specify the styles that you want to apply when you hover:
header:hover {
// place the styles that make the background solid here
}
I have posted another similar problem yesterday. Here's the link.
Now I ran into a different problem. Under a rich-column of an extended data-table, I have added another 2 rich-datables. One table for the header, the other table for the table-data. All these were done to make sure our design doesn't get changed.
Now, coming to the problem, you can see the attached image down. [Intended Page Rendering][2]. This is what I need. But when the page loads, I generally get something like this [Actual Page rendering][3].
After looking through the generated HTML code, I can get the desired output by deselecting the background-color property of the rf-dt class. See the third image below.
[Generated HTML -code][4] - this shows by deselecting the background-color property of rf-dt class, I can achieve my purpose. But when I go to actual code and try to put the changes its not working... I tried to put this in the CSS class
.shipmentBrowseTable .rf-dt {
background-color: none;
}
where shipmentBrowseTable is the styleclass for outer Extended-data-table - the same styleclass used for inner data-table too.
The above code is not giving me the intended result. If someone can help me with this, it would be great.
.shipmentBrowseTable .rf-dt {
background-color: none !important;
}
the !important tag should override most styles
Page in question: http://secantmedical.com/biomedical-textiles/biomedical-textiles.php
The heading area with the words "Biomedical Textiles" is set very simply with a CSS class that mirrors the page name, in this instance the class is "biomedical-textiles". Other examples include "medical-applications", "design-and-development", etc. You get the gist.
Exclusively in IE6, every main page after Biomedical Textiles has a blank heading area. The dimensions are kept in place, but the background is not being applied. The same is true for all subpages. The first child of Biomedical Textiles, Textile Science, has the header applied correctly and all other subpages have a blank heading area.
I can vouch simply by viewing the source that the classes are being applied correctly; couple that with the fact that the headings appear fine in every other browser. In the CSS file, the classes that are working appear first in their respective groups. When I swap one of the later ones to the top, that one works and every proceeding one does not. I have no idea why this is. Any assistance would be greatly appreciated.
The CSS in question is on lines 83-123 of style.css. Thanks in advance!
The way you have your selector written in your CSS written for those bg images, ie6 doesn't recognize it. You have it written:
#l2-header.medical-applications { background: url('../graphx/l2-medical.jpg') no-repeat; }
It doesn't recognize the id.class. If you aren't using the class anywhere else just use the class without the id in front of it. Just use:
.medical-applications { background: url('../graphx/l2-medical.jpg') no-repeat; }
That should fix it.
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.