How should I increase the size of icons(add,delete..) in jqgrid?I have written following code in ui.jqgrid.css
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon,
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon{float:left;margin: 2px; width:18px;}
.ui-jqgrid .ui-jqgrid-toppager {border-left: 0 none !important;border-right: 0 none !important; border-top: 0 none
!important; margin: 0 !important; padding: 0 !important; position: relative;white-space: nowrap;overflow: hidden;}
Free jqGrid supports vector based Font Awesome icons as alternative to raster icons of jQuery UI. To use Font Awesome you need just include the CSS of Font Awesome and to add iconSet: "fontAwesome" option. For example, https://jsfiddle.net/OlegKi/9f9exg91/1/ uses the following simple code
$("#grid1").jqGrid({
colModel: [...],
iconSet: "fontAwesome",
...
});
which displays
If you want for example increase the size of navigator icons in 1.5 of the standard size you can just add CSS rule
.navtable .ui-pg-button {
font-size: 150%;
}
and get the navigator buttons
see https://jsfiddle.net/OlegKi/9f9exg91/2/. You can see that the navigator buttons are wrapped automatically. See the wiki article.
If you want in increase the size of all the buttons of the pager then you can use CSS rule
.ui-pg-table .ui-pg-button {
font-size: 150%;
}
alternatives. See https://jsfiddle.net/OlegKi/9f9exg91/3/, which displays
Free jqGrid supports additionally iconsOverText: true option, which allows to get the following look of icons:
see https://jsfiddle.net/OlegKi/9f9exg91/4/
In general you can customize the buttons in easy way like you need. For example you can go to some button generator page like this one create custom button and to copy the CSS styles to .ui-jqgrid .navtable .ui-pg-button. I did this and created the next demo https://jsfiddle.net/OlegKi/9f9exg91/6/, which displays the following navigator bars:
Below you can find the CSS rules used in the last demo:
.ui-jqgrid .navtable .ui-pg-button:not(.ui-state-hover) {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
-webkit-box-shadow: 3px 3px 7px #666666;
-moz-box-shadow: 3px 3px 7px #666666;
box-shadow: 3px 3px 7px #666666;
color: #ffffff;
font-size: 14px;
padding: 6px 6px 6px 6px;
border: solid #0089de 1px;
text-decoration: none;
}
.ui-jqgrid .navtable .ui-pg-button.ui-state-hover,
.ui-jqgrid .navtable .ui-pg-button:hover{
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
padding: 6px 6px 6px 6px;
font-size: 14px;
text-decoration: none;
}
I used additional pagerRightWidth: 100 option in the last demo to fix the right part of the pager and to provide more place for the navigator icons.
UPDATED: One can use top pager by usage of toppager: true instead of pager: true or to use both pagers. If one would replace .navtable in the above CSS rules to .ui-pg-table then the style will be applied to all buttons of the pager: https://jsfiddle.net/OlegKi/9f9exg91/9/
Your query is missing some valid information but you can always use zoom in your CSS over proper selectors.
Another possible solution is to increase the font-size - see the classes
.ui-jqgrid .ui-jqgrid-view
and increase the font size you want.
Since you use Guriddo jqGrid 5.2.1 you can get quick and professional response in our public forum
Related
I'm trying to create a multiple color background to implement this:
And right now I managed to do this:
What I did:
Desired Background:
I'm trying to do it using gradients, but it seems that it's not possible to combine two gradients to do that. (It's possible to do other things, but not this).
Is there a way to implement this backgorund?
Thanks!
Try this (adjust the percentage and colors as your needs):
.yourdiv{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 70%, #f1f1f1 70%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 );
}
DEMO HERE
i am guessing u need the darker grey section in the desired output to be shown? if so i would suggest to divide it into sections and give individual background.
if u can post some code. i would be happy to help.
Okay, not sure if this is exactly what you want but this is how I'd do psd to css/html. See screen shot below.
Also a WORKING DEMO HERE
Just wrap the whole card in a div and apply a left border would do the trick.
border-left-width: 8px;
border-left-color: rgba(10, 255, 80, 0.75);
border-radius: 5px;
You may remove the box shadow if you don't want, just feel move active with it.
At the end, I managed to do it with this:
This for the GREEN part:
.assignment-item {
padding: 5px 5px 0px 10px !important;
margin:15px auto;
border-radius: 8px;
background: linear-gradient(to right, #4f8b2b 0%,#4f8b2b 2%,#ffffff 2%,#ffffff 100%, transparent) !important;
}
This for the GREY part:
.assignment-item:before{
position:absolute;
z-index:-1;
bottom:0;
left:2%;
width:100%;
height:25%;
content:"";
background-color:#f2f2f2;
}
Here is the result:
What I am trying to do is I want to keep the top 50% of the html button to have a gradient say from #FFF to #BBB and the bottom 50% should remain in one color lets say #111. I can't figure out a way to do it, any help would be largely appreciated.
The code of my button is:
<button class="Button1" type="submit">Submit</button>
The css:
.Button1 {
background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%);
}
This should do the trick in latest browsers. It's up to you to make it cross-browser compatible. (I personally like the Photoshop-esque interface of http://www.colorzilla.com/gradient-editor/)
Here is a sample from Bootstrap that should help you out with button gradients. This also covers most modern browsers.
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
Hope that helps.(these are sort of teal, so you'll have to change that part)
I made a CSS class that applies a gradient and rounded corners to a span element to act as a button. It seems to work in most browsers that I've tested, but IE9 is giving me some issues. As the class is now the rounded corners aren't working correctly. However if you look very close it seems like there are rounded corners underneath a layer that is not rounded (I think that's the best way to explain how it looks, forgive me if that doesn't make sense)
Anyway, by trial and error I messed with the class until I found that removing the 'display:inline-block;' property allows for the rounded corners to be displayed correctly, but as a result the gradient no longer works. Any ideas?
http://jsfiddle.net/jessikwa/wcgzkkgr/
The HTML:
<span class="action_button">Button</span>
The CSS:
.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}
Update: Further reading of other posts in StackOverflow gets me a bit closer, but still not quite right.
IE9 border-radius and background gradient bleeding
This post's answer suggestions using an image, which I would prefer to avoid. Another proposed answer of the thread puts a wrapper around the button with "overflow:hidden;", but this doesn't seem to be quite right, either.
http://jsfiddle.net/uu19uqg4/
you have forgot the "-" near webkit-border-radius
try this :
-webkit-border-radius: 3px;
this link can be usefull
Add the following in the head of the page.
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9" />
This will disable the compatibility mode in IE9. If it's due to compatibility issue then it will be solved.
I'm working with bootstrap, but I wanted to change a few of the colors around (navbar and buttons). I have an un-modified bootstrap.css, and a custom.css that changes all of the properties that I want changed from the default.
In my index.html, I link the default bootstrap, and then the custom css file.
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="bootstrap/css/custom.css" rel="stylesheet" type="text/css"/>
I'm new to web stuff, but my understanding is that style sheets add to each other in the order they are linked. But when I open it in a browser, it doesn't use any of the changes specified in custom.css. Is my understanding wrong, or am I just going about this incorrectly?
Edits:
Original navbar-inner (bootstrap.css)
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa; /* #fafafa */
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); /*#f2f2f2 */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
navbar-inner with a few properties modified in custom.css
.navbar-inner {
background-image: -moz-linear-gradient(top, #002f6c, #002f64);
background-image: -ms-linear-gradient(top, #002f6c, #002f64);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#002f6c), to(#002f64));
background-image: -webkit-linear-gradient(top, #002f6c, #002f64);
background-image: -o-linear-gradient(top, #002f6c, #002f64);
background-image: linear-gradient(top, #002f6c, #002f64);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'002f6c, endColorstr='#'002f64, GradientType=0);
}
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Test</a>
<ul class="nav pull-right">
<li class="pull-right">About</li>
<li class="pull-right">Contact</li>
</ul>
</div>
</div>
</div>
Do the first div classes also need to be changed? (They aren't)
I used this tool to generate the custom.css file.
Saying that CSS styles stack in the order they are applied isn't necessarily a correct one. CSS is applied in order of importance, or specificity.
For example, consider the following HTML:
<ul id="testList">
<li>Some data</li>
</ul>
If your first file has the CSS:
ul#testList { color: #f00; }
and your second file has:
ul { color: #00f; }
Then your first file has more specificity, even though the second file comes second in your markup. The first style is more precise in its declaration.
If however, you change your second style to have matching specificity, then your second declaration will override the first. Hope this helps!
Edit:
It turns out that the tool I used does not change every property required! It should have also changed the .navbar-inverse class. After applying changes there, it works as expected.
In other words, both files were linked correctly.
Thanks for the answers though! I certainly learned a few new things.
As far as I am aware, IE9 should have CSS support for rounded corners. I have apparently coded my page in such a way as this does not occur in IE9 though - although it displays correctly in Chrome and FF.
*I have edited CSS to reflect suggestions as per answer below - the problem is still occurring *
I need top and bottom left corners only to be rounded for the div that contains the site main navigation.
The 'Activate Now' buttons are also not working, in the hosting package display boxes.
Site link to view is http://activehost.co.nz
I've checked other questions - and the most common cause (using prefixes) is not something I am doing.
Relevant CSS for sections is below.
Navigation:
#main_nav {
margin: 0px 0px 10px 0px;
float: right;
height: 37px;
/*background:url(../img/nav_bg.png);
background-repeat: repeat-x;*/
background-color: #286e38;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
background-image: -moz-linear-gradient(top, #6dc067, #286e38);
background-image: -ms-linear-gradient(top, #6dc067, #286e38);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
background-image: -o-linear-gradient(top, #6dc067, #286e38);
background-image: linear-gradient(top, #6dc067, #286e38);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-radius: 20px 0px 0px 20px;
clear: right;
}
And the CSS for the 'Activate Now buttons:
.hosting_order {
position: absolute;
top: 148px;
border: none;
height: 35px !important;
background-color: #286e38;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
background-image: -moz-linear-gradient(top, #6dc067, #286e38);
background-image: -ms-linear-gradient(top, #6dc067, #286e38);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
background-image: -o-linear-gradient(top, #6dc067, #286e38);
background-image: linear-gradient(top, #6dc067, #286e38);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
width: 120px;
padding: 0px 20px;
font-weight: bolder;
font-size: 1.1em;
border-radius:20px;
box-shadow: 2px 2px #888888;
}
The background image CSS is to produce a gradient effect - I wonder if that's the problem?
It's because you combine filter and border-radius for same element. Try to apply border-radius to one element, and filter to its child element instead.
see this question regarding the meta tag and some other possible issues/process to eliminate: IE9 border-radius
For IE9, you are correct it doesn't like the border radius and the filter combined. Here is what I followed and it worked perfectly in IE9, as well as all the other browsers.
https://github.com/bfintal/jQuery.IE9Gradius.js
Hope that helps!
You only need to define one number for your border radius if you're using "bottom-left" and so on. By specifying two numbers IE9 may not interpret it correctly.
If you use the following, the first number is the top-left, second is top-right, third is bottom-right, and fourth is bottom-left.
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
-0-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
Making the border radius compatible to IE browsers, follow these steps:
Open Setting option in IE.
Go to compatibility and view setting.
Uncheck "Display intranet sites in Compatibility view " as well as uncheck "Use microsoft compatibility list".