Im trying to change the default expand/collapse icons to bigger icons. I've set the following css change which doesnt seem to be taking any effect:
.k-treelist .k-minus {
background: url('../img/Misc/customCollapsedIcon.png') center center;
}
.k-treelist .k-plus {
background: url('../img/Misc/customExpandedIcon.png') center center;
}
Can anyone give me some advice on what I need to change for this to take affect on the TreeList?
Try specifying the exact height and width for each new icon, in these CSS rules.
If that doesn't work, make sure that other CSS rules aren't overriding these rules.
with the 2016 Q1 version you need to use
.k-treelist .k-i-expand{
background: url("/Content/...") center center no-repeat // i'm on an asp.net web app
}
.k-treelist .k-i-collapse{
background: url("/Content/...") center center no-repeat
}
i was using font awesome icons so i had to go to http://fa2png.io/ and convert chevron-right to a png and save it 16x16
Related
I have inserted an image in the background in my drupal 7 portal. And the css for it is ...
code :
* {
box-sizing: border-box;
text-align: center;
background-image:
url
('https://xx.xxx.xx.xxx/devuser/sites/all/BackgroundWallpapersforPortal/blue
image.jpg') !important;
background-color:none;
}
However, with this my image looks like this -
I don't want my background image to overlap the blocks. I have visited few websites, their background image doesn't overlap every new statement / every new entity. it stays embed to background. Please help.
I want to Achieve this - where the blocks are also visible and there is a background image also.
You need to set the background only to the specific elements you want it on, not everything. For example have a class for your menu items called "navigation" and set the CSS like this:
.navigation{
background-image: url('https://xx.xxx.xx.xxx/devuser/sites/all/BackgroundWallpapersforPortal/blue
image.jpg') !important;
}
I've been trying to figure out for hours where the border from the sidebar is coming from in this site: http://sökoptimering.se/
Here's a screenshot of what I'm trying to look for: http://imgur.com/VY9QplF
It's this
#entries-area {
background: url(images/content-main-bg.png) repeat-y top right;
}
and
#entries-area-content {
background: url(images/content-area-topbg.jpg) no-repeat top right;
}
you can filter properties by 'background' and just check elements with keybord arrows one-by-one. be careful some of them have duplicated rules - so when you disable one, the second is still showing the image
background you're looking for is set for this elements
#entries-area-content
#entries-area
I am trying to create a hover over image from a single split PNG
How do I enable it so when the image is not hovered over, the top image will view, but when they hover over, the bottom one will show.
The technique you are asking for is called "CSS-Sprites". Here's a tutorial
It uses the background-position style. For the default state of your element, just set the image as background. Note that you need a fixed height (half the height of your sprite) to hide the second part of the image. You also need a width, because your button will contain no content, just a background. For the hover state, use a negative background-position:
.button-foo{
display: block;
height: 29px;
width: 110px;
background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent;
}
.button-foo:hover{
background-position: 0 -29px;
}
This means the image is moved up so the top icon in there is above the visible area of your button.
Try to make sprites there is many applications out there. Google Css sprites generator.
Or try this one its free http://csssprites.com. Then its just simple css or jquery if u want any effects.
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
I'm adding icon with Twitter Bootstrap without problem. They have a lot of alternatives.
http://twitter.github.com/bootstrap/base-css.html#icons
However, I couldn't find appropriate icon for one of menu item. It is about "car".
What I want is I would like to add my custom icon. How can I do this?
You can create your own icon by defining it in your own class like s:
.icon-car {
background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
background-position: center center;
}
Keeping in mind of course to use the prefix .icon-* since it is targetted by an attribute selector set by the bootstrap to apply all styles (widh/height/line-height etc...).
Just try to keep to the same width and height as the original icons (14x14), this way you won't have to define your own width and height and it won't mess with the line-height of your elements. Here is a demo with such a case: http://jsfiddle.net/RwFeu/
Here's what we do, so that all the icons are in a single sprite file and you can allow arbitrary sized icons.
create a CSS file like
[class^="icon-custom-"],
[class*=" icon-custom-"] {
background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8");
}
.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px; }
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px }
And then in your markup,
<i class="icon-search"></i> a standard bootstrap icon
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file.
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon
<!-- spritefile from www.10000ft.com. not for reuse, please -->
Note that this assumes a single sprites file that contains all the icons. If you have multiple sprite files, the background-image needs to be set for each icon, accordingly.
JSFiddle at http://jsfiddle.net/shyamh/cvHdt/
This solution is based on the example posted by Kevin