I had been developed a custom block 'Colleges', along with a stylesheet: styles.css within the block.
by using moodle2.8+
styles.css
.block_colleges .header { display:none; }
.block_colleges .title h2 { color:#fff; font-size:18px; font-weight:bold; margin:-5px; }
.block_colleges { float:left; margin-left:5px; width:317px !important; }
.block_colleges .content { border:1px solid lightgray; border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; margin-top:0px; border:0px solid #a6c9e2; padding:0px; min-height:220px; }
The above css should be applicable for only students and teachers...and for admin, the css shouldn't be applicable i.e., a moodle block format design.
Can we create block::custom css, different for student/teacher and admin.
A file named styles.css in the main directory of a Moodle block will automatically be cached and used on the page. There's no way to load different CSS based on role that I know of.
If you want to show different CSS for different roles, perhaps you can have role specific CSS classes, then change the classes in your markup based on the logged in user's role.
For example:
#block_colleges.student .header { display:**none**; }
#block_colleges.teacher .header { display:**block**; }
In your block_colleges.php file, you could write something like:
if (is_siteadmin())
{
// class = admin
}
else
{
// class = student
}
This is how I would do it.
Related
I'm using the :valid and :invalid pseudo-classes, so the users can see if the input is correct in each form. I'm able to style them with CSS, but I have yet to find a solution where I can use an iconfont on the right side of the form, to display a valid or invalid input. Anyone knows how to do this?
Also some forms should not display valid or invalid before the user starts to type (like signup email). Can I bypass that code/css and just activate it when the user starts to type in the form?
You could realize what you want like this:
jsfiddle
input {
border: #666 1px solid;
padding: 0.5em;
}
label {
display: block;
margin-top: 8px;
}
input + i:before {
display: none;
}
input:focus + i:before {
display: block;
}
input:focus:invalid {
background: red;
}
input:focus:valid {
background: lightgreen;
}
input:focus:valid + i:before {
content: "\f14a";
}
I've used the fontawesome iconfont here.
EDIT
To make the icons inside the form elements you can add this rule:
input + i {
position: relative;
left: -20px;
}
I was creating a <div> tag in which I wanted to apply two classes for a <div> tag which would be a thumbnail gallery. One class for its position and the other class for its style. This way I could apply the style, I was having some strange results which brought me to a question.
Can two classes be assigned to a <div> tag? If so, which one overrules the other one or which one has priority?
Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:
<div class="rule1 rule2 rule3">Content</div>
This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.
If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.
So, if you had styles like this:
.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.
If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):
div.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, it would take precedence and the background color here would be green.
If the two rules don't conflict:
.rule1 {
background-color: green;
}
.rule2 {
margin-top: 50px;
}
Then, both rules will be applied.
Actually, the class that defined last in the css - is applied on your div.
check it out:
red last in css
.blue{ color: blue; }
.red { color: red; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
vs
blue last in css
.red { color: red; }
.blue{ color: blue; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
If you asking about they have same property then as per the CSS rule it's take the last statement.
<div class="red green"></div>
CSS
.red{
color:red;
}
.green{
color:green;
}
As per the above example it's take the last statement as per css tree which is .green.
The class that is defined last in the CSS have priority, if nothing else applies.
Read up on CSS priority to see how it works.
Many classes can be assigned to an element, you just separate them with a space
<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>
Because of the cascade in CSS, the overwriting rules closest the to bottom of the document will be applied to the element.
So if you have
.myClass
{
background: white;
color: blue;
}
.keepOnClassing
{
color: red;
}
The red color will be used, but not the background color as it was not overwritten.
You must also take into account CSS specificity, if you have a more specific selector, this one will be used:
.myClass
{
background: white;
color: blue;
}
div.myClass.keepOnClassing
{
background: purple;
color: red;
}
.stayClassySanDiego
{
background: black;
}
The second selector here will be used as it is more specific.
You can take a look at it all here.
I'm using GWT. I see that the gwt "clean" theme (the default one?) makes our body element have a 10px margin:
body {
color: black;
margin: 10px; <------
border: 0px;
padding: 0px;
background: #fff;
direction: ltr;
}
In my own css file, I set the margin to 0px, but it seems that GWT's keeps winning (maybe because it gets loaded last?).
What's the right way to override their setting?
Thanks
There are several possibilities:
You can use margin: 0px !important (this is the "brute-force" approach).
Or you can give your body a class like <body class="myApp">...</body>, and then in your CSS, use body.myApp { ... }. This will take precedence, because body.myApp is a more specific selector than body.
Or you can simply not use any theme at all (which is often a good idea if you want to create a fresh layout without worrying which attributes you'll have to override)
Another option is to load your css file by using clientbundle. (assume that playground.css is your css file)
public interface Resources extends ClientBundle {
public static Resources INSTANCE = GWT.create(Resources.class);
#Source("playground.css")
CssResource getPlaygroundCSS();
}
Note: playground.css is located in the same package as the Resources interface.
in the onmoduleload:
public class Playground implements EntryPoint {
#Override
public void onModuleLoad() {
Resources.INSTANCE.getPlaygroundCSS().ensureInjected();
Label lblHelloWorld = new Label("Hello World");
RootPanel.get().add(lblHelloWorld);
}
}
In the CSS:
body {
background-color: #FFFFD2 !important; }
works fine to change the background color.
How can TH style name/s of a GWT CellTable's heading be looked up programatically?
I have looked at the Client Bundle documentation but it isn't immediately obvious to me how it all fits together. Thanks.
Not sure exactly what you want to do when accessing the TH style names.
If you want to override the standard css style of a celltable header, here are some of the css styles you can override to change the Look and Feel of the component.
.cellTableFirstColumnHeader {}
.cellTableLastColumnHeader {}
.cellTableHeader {
border-bottom: 2px solid #6f7277;
padding: 3px 15px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
Here is the complete list of styles for cellTables CellTable.css
Now if you want to access you header programmatically, you can use this solution to get the TableSectionElement corresponding the the Header of your table. Then you can access the row, then the cells, and lookup for their styles I guess.
Last thing if you want to override the header style, maybe you can use the following method when adding your column to your table
public void addColumn(Column<T, ?> col, Header<?> header)
Then create your Header or use a TextHeader for example then set your style on it before adding it to the table using
public void setHeaderStyleNames(String styleNames)
Example
TextHeader textHeader = new TextHeader("headerTitle");
textHeader.setHeaderStyleNames("my-style");
myTable.addColumn(myColumn, textHeader);
Easy solution:
import com.google.gwt.user.cellview.client.CellTable.Resources;
private String getCellTableHeaderStyle() {
Resources res = GWT.create(Resources.class);
return res.cellTableStyle().cellTableHeader();
}
I'm using JQTOUCH and in JQTOUCH several of the links are being loading via AJAX and then sliding in. The problem is that there is no loading indication provided to users.
I'd like a way to add a Loading class with an AJAX spinner, when ever the an ajax call is loading, and have the class removed when the loading is done, and the page is displayed.
Any ideas?
the showPageByHref() answer is partially correct.
But, instead of
$('body').append('<div id="loadinginprogress">Loading...</div>');
You need
$('.current').append('<div id="loadinginprogress">Loading...</div>');
Body is too general for jqtouch, need to be specific to the currently displayed DIV-page
showPageByHref() function in jqtouch js is a good start. i added it right into ajax call so the please wait will not flicker when you click on link that is already loaded etc.
In short - add loading div (id loadinginprogress in exmaple) right before the ajax call and remove later "success" or "error". the ajax call section would look something like that (shortened it ):
function showPageByHref(href, options) {
...
if (href != '#'){
$('body').append('<div id="loadinginprogress">Loading...</div>');
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data, textStatus) {
$('#loadinginprogress').remove()
var firstPage = insertPages(data, settings.animation);
if (firstPage)
{
if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
{
settings.$referrer.attr('href', '#' + firstPage.attr('id'));
}
if (settings.callback) {
settings.callback(true);
}
}
},
error: function (data) {
$('#loadinginprogress').remove()
if (settings.$referrer) settings.$referrer.unselect();
if (settings.callback) {
settings.callback(false);
}
}
});
}
...
}
css for loading div would be something like:
#loadinginprogress {
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
z-index: 5000;
}
This is the basic behavior if your links are li class="arrow" elements. how are you displaying your links and where do you want the loading-spinner to display?
Thank you for your different posts. They helped me a lot.
I have a solution to propose without patching the jQtouch code on which jQTouch relies.
It uses jQuery ajax capabilities.
$(document).ready(function() {
...
$('#jqt').ajaxStart(function() {
console.log("ajaxStart");
...
}).ajaxSuccess(function() {
console.log("ajaxSuccess");
...
}).ajaxError(function() {
console.log("ajaxError");
....
});
....
});
more details available in this jQuery doc page.
You could add a custom event handler, and trigger the loading.gif everytime the click on the specific element was done.
I just answered Darin Parker's question. Just check it out it may help you.