I'm using APEX 4.2 to build a Training Calendar for the organization I support at work. I am by no means an DBA or any kind of programming expert. I've been learning a lot through trial and error.
My calendar is built, but what I am trying to do is change how items display based on a column in my table. For instance, I have two project types: Project A and Project B. I would like these to have a different border color on my calendar display. Currently, I am using the below CSS code but this applies to all events:
<style>
.Day a, .NonDay a, .Today a, .WeekendDay a {
font: normal 10px/12px Arial,sans-serif !important;
padding: 2px !important;
border-radius: 4px;
-moz-border-radius: 4px;
background-color: #E5E5E5;
border: 1px solid #FF1414;
}
.Day a:hover, .NonDay a:hover, .Today a:hover, .WeekendDay a:hover {
background-color: #A3A3A3;
border: 1px solid #FF1414;
text-decoration: none !important;
}
</style>
I want to be able to alter this so that when PROJECT = A a certain style like above is applied, and when PROJECT = B a variation of the above style is applied.
Does anyone have any guidance on how I can do this? I'm open to suggestions.
Thanks you,
Christina
I don't know APEX, but what you need is to extend html elements (whatever it is, could be a <li/>, a <td/> or something else) with project-specific css classes. You did not show your HTML code, so I just guess the calendar is build with a table. If so, this could look like:
<table>
<tr>
<td class="NonDay">27</td>
<td class="NonDay">28</td>
<td class="NonDay">29</td>
<td class="NonDay">30</td>
<td class="NonDay">31</td>
<td class="Day WeekendDay">1</td>
<td class="Day WeekendDay">2</td>
</tr>
<tr>
<td class="Day">3</td>
<td class="Day">4</td>
<td class="Day ProjectA">5</td> <!-- see the class -->
<td class="Day ProjectB">6</td> <!-- see the class -->
<td class="Day">7</td>
<td class="Day WeekendDay Today">8</td>
<td class="Day WeekendDay">9</td>
</tr>
</table>
With this, you can style this classes like you did for the other classes:
.ProjectA a {
border-color: blue;
}
.ProjectB a {
border-color: red;
}
The question I can't answer is how to add css classes in APEX, but this question would better fit to oracles support forums or maybe to https://superuser.com/ because it's not a programming related question.
I have a table that assigns colors to the different projects, so when I pull the event from the calendar table, I join it to the project table and grab the color.
SELECT e.ID, ''||DESCRIPTION||'' DESCRIPTION, event_date FROM EVENTS e, project a
where e.project_id=a.project_id;
If you want to style the individual calendar entries you could apply a class in the SELECT statement like this:
select ...,
'<div class=project"' || project || '>' || description || '</div>'
as description
from ...
This would result in HTML for the entries like:
<div class="projectA">This is project A</div>
In SQL code add column PROJECT_TYPE returning type of your project.
In calendar properties change "Display Type" to "Custom".
in "Column Format" input something like
<span class="#PROJECT_TYPE#">#COLUMN_VALUE#</span>
Then define ProjectA style.
Related
I am constructing a basic html5 website with 5 pages for practice as I am in the process of relearning html5 and CSS.
I have a div with ID "education" and Class "content-list".
Inside this div is a Caption and an unordered list Class "content-ul"(NOTE: Caption is contained in "content-list"). The list contains 3 list items.
I want to set the font-weight to bold for the caption, but not the unordered list.
Here's what I have:
HTML:
HTML:
<div id="education" class="content-list">
<caption>Education:</caption>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>
CSS:
.content-list {
... styles
font-weight:bold; /* Sets caption and list to bold */
.... styles
}
.content-ul {
.... styles
font-weight:normal; /* Sets list back to normal */
.... styles
}
This achieves the desired result, but I am wondering if there is a better/more efficient way of doing this.
Keep in mind, 4 of the 5 pages use this code. For this reason I opted against using in line styles as I would have to do it 4 times in total. This would remove the need to set the list to bold and then back to normal again, but would still use more code than the chosen method.
Any help/suggestions would be great.
caption is for tables, use i.e. a h4 for lists
<div id="education" class="content-list">
<h4>Education:</h4>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>
Side note, styling a caption work when used properly
table, th, td {
border: 1px solid black;
}
table caption {
color: red;
font-weight: bold;
}
<table>
<caption>Caption</caption>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Cell</td>
</tr>
</table>
Looking through your example, I can see you only want Education to be bold and not the content other than it. For this simply, do it like
caption{
font-weight:bold
}
CSS in OP won't be needed.
I'm fairly new to CSS, but have what seems to be an unique question.
I have a TL;DR if you want to skip to it.
I've seen MANY tutorials on how to display tooltips, but none answer this exact scenario, so it may not be possible.
Backstory:
I've been playing around with tables to show a calendar and have made it so I can simply change the class of a td cell to change the background colour.
This allows me to very easily edit my HTML, changing a single class on each line to change a date from available to booked. For instance:
HTML: <td class="b">1</td>
CSS: .b { color: #FFFFFF; background-color: #CC0033; font-size: 12px; text-align: center}
in my CSS, I have the "b" set to turn the background red, indicating this date is no longer available.
HTML: <td class="a">1</td>
CSS: .a { font-size: 12px; text-align: center}
The above would have no background colour and would indicate the date is available.
Now, I have been able to get a tooltip to show based on what class the cell is set to, but it seems I have to set every cell with the text, like this:
<td class="a">1<span class="tooltiptext">Tooltip text here</span></td>
which I guess is a way to do it, but it takes more time to edit, and I want it so I can display 2-3 different messages depending on which class I select in the td class.
So the question:
Is there a way I can set it up so,
If the td class = "a", a tooltip will show up saying "Available"
OR If the td class = "b", a tooltip will show up saying "Booked"
OR If the td class = "r", a tooltip will show up saying "Reserved"
when I mouseover the cell, without having to set those responses over and over again in every td cell.
IE: Without doing something like this:
<td class="a">1<span class="tooltiptext">Available</span></td>
<td class="b">2<span class="tooltiptext">Booked</span></td>
<td class="r">3<span class="tooltiptext">Reserved</span></td>
<td class="b">4<span class="tooltiptext">Booked</span></td>
<td class="b">5<span class="tooltiptext">Booked</span></td>
<td class="b">6<span class="tooltiptext">Booked</span></td>
<td class="a">7<span class="tooltiptext">Available</span></td>
<td class="b">8<span class="tooltiptext">Booked</span></td>
<td class="b">9<span class="tooltiptext">Booked</span></td>
I'd rather it was simply like this:
<td class="a">1</td>
<td class="b">2</td>
<td class="r">3</td>
<td class="b">4</td>
<td class="b">5</td>
<td class="b">6</td>
<td class="a">7</td>
<td class="b">8</td>
<td class="b">9</td>
and the tooltip text set elsewhere, but displayed on mouseover depending on which td class was set.
I feel I'm explaining this really badly.
Here is a snippet of my CSS using "t" as a test class, just in case you need it. Please don't worry about the formatting or positioning of the tooltip yet, I can fix that easily enough if I can get it working how I want:
.t { color: #FFFFFF; background-color: #FFA500; font-size: 12px; text-align: center; title:"Example";}
.t:hover .tooltiptext{ visibility: visible; }
.t .tooltiptext {visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; }
and the relevant piece of HTML:
<tr>
<td class="t">1<span class="tooltiptext">Test Message</span></td>
<td class="b">2</td>
<td class="b">3</td>
<td class="b">4</td>
<td class="b">5</td>
<td class="b">6</td>
<td class="a">7</td>
</tr>
So, in the above, can I relocate the span somewhere else so it only appears once, and is referenced depending on which td class is defined, and have 2 other spans with different messages, which are defined by the td class "a" and "b"?
An ideal solution to this would be something I can do in the CSS like this:
.t .tooltiptext {custom-text: "This text will display on hover";
visibility: hidden;
width: 120px;
Etc...
}
TL;DR Is there a 'CSS only' way of making the tooltip text display different text by only changing the td class?
Unfortunately in pure CSS you can't
relocate the span somewhere else (only in Javascript, Jquery, etc etc)
But if each td with a specific class has a span element you can display different text in this way:
span {
display:none;
/*Etc etc*/
}
td:hover span {
display:inherit;
}
.a span:after {
content: 'something about class A';
}
.b span:after {
content: 'something about class B';
}
<table>
<tr>
<td class="a">1<span></span></td>
</tr>
<tr>
<td class="b">2<span></span></td>
</tr>
<tr>
<td class="a">3<span></span></td>
</tr>
</table>
I'm learning CSS and HTML.
In my code I have:
<style>
table, td, th
{
padding: 5px;
}
</style>
This rule works on all tables on the page.
Now I want to make a table without padding:
Here is the source:
<table>
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
How to do this?
If you want to add specific styles to this table that override the default styles you've defined, then you'll need some way to reference it in CSS.
Typically, you would give it a class or an ID -- eg <table class='myspecialtable'>....</table>
Then you can have a stylesheet which overrides your default 5px styles, just for this table.
.myspecialtable, .myspecialtable td, .myspecialtable th {
padding: 0px;
}
If you can't add an ID or class to this table, then you could add it on a parent element, and the effect would be the same (as long as that parent doesn't contain any other tables, of course). In this case, your CSS would look something like this:
.myspecialtablecontainer table, .myspecialtablecontainer td, .myspecialtablecontainer th {
padding: 0px;
}
You should change your CSS to define a style instead.
.padded { ... }
Then you can set the class to that style for any tables you want to use that style.
<table class="padded">
</table>
When you set a style, as you have done, for all elements of a particular type, then the only way to remove them is to set the style to something else, or not include a reference to that CSS file from the page that you don't want to use them.
One way would be to give your table a class like so:
<table class="nopadding">
[... table rows and columns...]
</table>
And then put this in your css:
.nopadding, .nopadding td, .nopadding th
{
padding: 0;
}
Which says "any element with the class should have a padding of 0". The .nopadding th and .nopadding td has to be there and is a way of saying "all th and td who is inside an element of class nopadding shouldn't have any padding either", since you previously told all th and td to have a padding of 5px.
I remeber when I first started learning HTML.
What you're after is an id or a class attribute. You'd have two tables like so:
<table class="table1">
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
<table class="table2">
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
To make is so that table1 had padding, but table2 didn't, you would use the appropriate CSS rules to identify and style the tables:
.table1, .table1 td, .table1 th
{
padding: 5px;
}
.table2, .table2 td, .table2 th
{
padding: 0px;
}
There's many ways I could have done this with CSS. For example, You could also use ids in this case, but it's easier to use classes as an id can only be used once per document.
A slightly better approach in this case would be to take advantage of cascading rules. I could have kept your original CSS and just added the second set of rules:
.table, .table td, .table th
{
padding: 5px;
}
.table2, .table2 td, .table2 th
{
padding: 0px;
}
In this case, only tables with the class table2 would have the 0px padding - all other tables would have 5px padding.
It would be a good idea to read the W3CSchools introduction to CSS - http://www.w3schools.com/css/css_intro.asp. This will introduce you to the basics and get you on your way.
Simple use
<style>
table, td, th
{
padding: 0px;
}
</style>
Also try border-collapse: collapse;.
<table cellpadding='0'> If this don't work, you can create a css class that removes the padding and use that in your table: <table class='no_padding'>
I have a table that looks something like this.
EDIT - I re-extracted code. I think the question makes more sense now. (Answers may not)
<div class="view view-latest-news-view view-id-latest_news_view view-display-id-latest_news_block_1 view-dom-id-1">
<div class="views-admin-links views-hide">
</div>
<div class="view-content">
<table class="views-view-grid">
<tr class="row-1 row-first">
<td class="col-1">
</td>
</tr>
<table>
</div>
</div>
How can I address only the "views-view-grid" tables that are contained by the "view-latest-news-view" class? Something like this...
.view-latest-news-view table.views-view-grid {
border-collapse:separate;
border: 1px solid red;
}
** END EDIT **
Thanks!
** ANSWER: **
this works... but maybe I could be more specific?
.view-latest-news-view .views-view-grid {
border-collapse:separate;
border: 1px solid red;
}
This does not work because <table class="views-generic-grid"> is not contained with in any element with the class views-admin-links. (You open the div and then immediately close it, so it has no children.)
So when you say this:
How can I address only the "views-generic-grid" tables that are contained by the "views-admin-links" class?
The answer is you can't, because there are no "views-generic-grid" tables contained in elements with the "views-admin-links" class.
Either extend the div to surround the table, or pick a different selector than .views-admin-links.
The way your markup is right now, you can't, you have to extend .views-admin-links to surround the entire .views-generic-grid table, and then you can write a selector like this:
.views-admin-links .views-generic-grid
I am using JSF Myfaces Impl 1.2 without tomahawk and other libs :
I am using different styles + images to show JSF Error messages, find below a sample.
<h:panelGroup rendered="${adminBean.showErrorIcon==2}">
<table width="375" align="center" class="InfoMsg" border="1"
cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="375" align="center" class="InfoMsg" border="0">
<tr>
<td width="50"><img src="static/images/info_icon.gif"
width="40" height="40" border="0" /></td>
<td width="325" align="left"><h:messages layout="table"
errorClass="InfoMsg" /></td>
</tr>
</table>
</td>
</tr>
</table>
Based on the int variable of the Backing Bean , I am displaying a diff image and the corresponding FacesMessage(s) in the screen - only 2 cases - error or an information.
I am using the below code to set the variable of the Backing Bean
//Checking if there are messages!
log.debug("Checking if there are messages to be shown ]");
if(getShowErrorIcon()==99){//Set only if the value is still the default :
log.debug("getShowErrorIcon was DEFAULT - Changing it ]");
Iterator<FacesMessage> messages = FacesContext.getCurrentInstance().getMessages();
if(messages != null && getShowErrorIcon()==99){//Set Error/Info for messages that are not added here :
while(messages.hasNext()){
log.debug("There are ***messages***");
FacesMessage aMessage =(FacesMessage) messages.next();
if(aMessage.getSeverity().compareTo(FacesMessage.SEVERITY_ERROR)==0){
setShowErrorIcon(1);
break;//just once is enough
}
if(aMessage.getSeverity().compareTo(FacesMessage.SEVERITY_INFO)==0){
setShowErrorIcon(2);
break;
}
}
}
}//if it is not default, then something has been set already, why again?
Now the problem I have is , There are FacesMessage(s) that are added by the MyFacesImpl - like the required=true and the custom validator messages which are added during PROCESS_VALIDATION Phase, These are not shown in the screen since my integer variable of the Backing Bean is not set , and since the INVOKE_APPLICATION Phase was not called (and that means the above code was not called!!!)
How do I resolve this? Or Whats the best way / Where's the best place to place the above checking code ?
Appreciate your help.Thanks!
I'm not sure, but this all look like unnecessarily overcomplicated. To change icons/styles based on the message severity, just make use of the CSS powers. You can specify different CSS classes based on message severity using infoClass and errorClass attributes of the <h:messages> and you can specify the icons as CSS background image.
JSF:
<h:messages id="messages" layout="table" infoClass="info" errorClass="error" />
CSS:
#messages .info td {
background: url('info.gif') no-repeat left center;
padding-left: 15px;
}
#messages .error td {
background: url('error.gif') no-repeat left center;
padding-left: 15px;
}
The <h:messages layout="table"> itself already renders a HTML <table>. I think the whole table around it is unnecessary as well. Just apply styles accordingly the usual CSS way.
#messages {
width: 375px;
margin: 0 auto;
border: 1px black solid;
border-collapse: collapse;
}
See also:
W3schools CSS tutorial/reference
CSStutorial.net CSS tutorial
Update: as per the comments, you're looking for something like this:
<h:messages layout="table" styleClass="messages info" infoClass="info" errorClass="error" />
<h:messages layout="table" styleClass="messages error" infoClass="info" errorClass="error" />
with CSS:
.messages {
width: 375px;
margin: 0 auto;
border-collapse: collapse;
border: 1px black solid;
}
.messages.info {
background: url('info.gif') no-repeat left center;
}
.messages.error {
background: url('error.gif') no-repeat left center;
}
.messages.info tr.error, .messages.error tr.info {
display: none;
}
.messages td {
padding-left: 15px;
}
This shows two separate message tables, one for info and other for error messages, each with a single icon on the left center.