I'm using a <p:dataList> to display vehicles. Everything is okay except the icons. My icons look like that right now
and i want them to look like that
.
I know how to modify the datalist itself using css, but not the buttons in the list. So how can i replace the icons using css?
If I do this, i can color it yellow and place an image, but not replacing it:
.ui-paginator-next {
background-color: yellow !important;
background-image: url(#{resource['images/logo.png']});
}
Related
This class .elementor-kit-8 input[type="submit"] sets the button's color and background color the same essentially making the text look invisible any idea how I can fix this?
Seems to be a typical Elementor glitch.. My usual workaround is simply adding custom CSS by (potentially adding a class or ID) and then selecting the class/ID and adding the respective hex code.
If you want the text color to be white, for instance, your code would look something like this:
.password-submit {
color: #fff;
}
Currently busy on creating a range input. However, the range input should be a different background-color, depending where the thumb is.
So far it is working fine, but the thumb is barely visible. Is there some way I can get the thumb on top of the slider? Tried all sorts of styling; position, z-index, display etc.
Here is a snippet of what I have so far.
My expected behavior would be a white circle as thumb, around 20x20.
Use gradient background on the track
You could style the track in such a way that you achieve the same result, using a gradient as background. For a slider at 20% it would be something like:
background: linear-gradient(to right, blue 20%, purple 20%);
A full working example can be found here: https://jsfiddle.net/jkrielaars/frdyr15L/7/
Add styles to CSS
Unfortunately, we can not access the track style directly from js. A workaround for this problem is to add all the possible values in CSS, and than activate them by changing the class, or an other attribute on the input element. (I use style in my example)
This can easily done using some SASS magic.
For a range input from 0 to 100 it could look like this:
#for $i from 0 through 100 {
input[type=range][style=v#{$i}]::-webkit-slider-runnable-track {
background: linear-gradient(to right, blue round(percentage($i/100)), purple round(percentage($i/100)));
}
}
(Note that you can't just use a numeral value in the style attribute. I've adde a letter to make it a string.)
Update element using javascript
Updating the style attribute can be done with some simple javascript. Using the oninput attribute you can make the style update as you slide around.
<input type="range" style="v20" value="20" oninput="this.setAttribute('style', 's'+this.value);"></input>
Example of Sencha Touch loadmask: here
Is there any way to customize the loadmask properties without needing to create a new one? I want to increase the size of the darker grey box (i think its the inner-mask right?) because i want to use html to make the loadmask looks better. But with box that has a size like that, there's little thing that you can do to make the loadmask looks better.
masked: {
xtype: 'loadmask',
message: 'Now Loading..',
}
How would i set that darker grey box size? I tried with height and width but that one modifies the whole loadmask size, not the darker grey box area.
i tried some, here is the result.
Solution 1
{
xtype: 'loadmask',
id : 'testMask',
message: 'Now Loading..'
}
CSS
div#testMask{
font-size: 20.95px;
}
it's working but note that it will increases font size.
Solution 2
CSS
.x-mask .x-loading-spinner-outer {
min-width: 20.5em !important;
height: 19.5em !important;
}
it's also working, but it overrides the existing style.
On my wordpress powered website I have widget title boxes if you have a look you will see I have a one titled 'british lions' in the left sidebar on the right hand side of the website.
This is a category widget and will only show posts from that category. I would like to change the title box from green to red to match the 'british lions' style.
I will then add more of these widgets but they will be pulling from different categories and will also have their own color style. You will see what i mean on the main content on the front page aviva is yellow super rugby is blue etc etc but i want this for the widgets aswell.
How do i target the specific widget boxes with css to change the background. I have tried with firebug but it seems to change all the widget title boxes and not that specific one i am after.
http://www.rugbyclubhouse.net
Hopefully someone can help and i am making sense.
Thanks
you can access it by its id #feacpost_featuredcategorypostswidget-2.
so you could add something like
#feacpost_featuredcategorypostswidget-2 h3 {
background-color: #b22023;
}
to your CSS.
It is possible.
Let us take the 'British Lions' tab here for instance.
#feacpost_featuredcategorypostswidget-2 h3 {
background-color: #ff0000 !important;
}
Take this css and put it inside your own stylesheet.
I hope this helps.
I'm developping a Wordpress website for a painter, and I'd like to use paintings as backgrounds for menu elements, just like on this picture :
http://img829.imageshack.us/img829/7364/capturedcran20120509094.png
The active page has colors, the inactive ones are in black and white, and become colored on mouse over.
I'm using a premium WP theme to have a similar menu, but I don't know how to achieve this menu. (this is a dropdown menu, if there is a submenu, everything below it drops down as it appears, but there is no spacial background on the submenu).
Do you know how to achieve that, please ?
There is no any type of option in WP menu but you can do it by assign class for each menu from WP menu section and providing custom CSS
Like
And CSS with bg image
.dashboard a {
background: url(../../images/navicons/81.png) no-repeat;
}
Just use the ID of the items and apply a background with CSS. Then add a Greyscale script: http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/ You can also apply a CSS fall-back if necessary (not with grey scale, but with opacity).