I have created a custom theme using JqueryUI ThemeRoller, then I converted it into a jar file, installed in my maven repositoty and appointed it into my jsf 2.2 project just as described on primefaces documentation. Actually everything works fine but the ui-icons that won't show..
Anyone have any clue of what's happening?
I had the same problem.
I resoved it comparing how PrimeFaces themes are defined. jQuery themes created with ThemeRoller imports the icons that way:
.ui-icon { width: 16px; height: 16px; background-image: url("images/ui-icons_626262_256x240.png");
You have to replace it with:
.ui-icon { width: 16px; height: 16px; background-image: url("#{resource['primefaces-YOUR-THEME-NAME:images/ui-icons_626262_256x240.png']}");}</b>
Do it also for the other CSS classes:
.ui-icon
.ui-widget-content .ui-icon
.ui-widget-header .ui-icon
.ui-state-default .ui-icon
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon
.ui-state-active .ui-icon
.ui-state-highlight .ui-icon
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon
Related
I need to remove background for accordion i tried like this
.ui-accordion-content{
border-style: none;
background-color: none;
background-image: none;
}
Didn't helped.
Full code Jsfiddle
Try using following.
.ui-state-default
{
background-color: transparent !important;
background-image: none !important;
}
Should I be able to use EL in css to access an img in the resources folder of a jsf 2 app? It does not seems to be working. In my css I've below:
.sectionDivider {
background-image: "#{resource['default:img/dashes.png']}";
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
When I access the page thru the browser, the background-image is not showing. When I view the CSS using browser Developer tools, the CSS looks like below (The background-image is missing):
.sectionDivider {
WIDTH: 100%; BACKGROUND-REPEAT: repeat-x; BACKGROUND-POSITION: center 50%; HEIGHT: 1px; OVERFLOW: hidden
}
I found the problem. I forgot to put url() in the background-image style. I changed to do below and it is working now:
.sectionDivider {
background-image: url('#{resource['default:img/dashes.png']}');
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.
Here's the problem, i just use these functions.
$(document).ready(function(){
$("#progressbar").css({ "background": '#FF0000' });
$("#progressbar").progressbar({ value: 10 });
});
http://jsfiddle.net/jtf7M/1/
How do i make this fill properly, step by step?
CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.
Edit:
If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:
<style>
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content {
border: 1px solid #AAA;
background: white;
}
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
-khtml-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-header {
border: 1px solid #AAA/*{borderColorHeader}*/;
background: #CCC;
}
</style>
I think there is no jQuery ui lib load on that jsfiddle.
But you are doing right.
http://jqueryui.com/progressbar/#animated
The image I have been trying to put as a logo on the navbar only displays the name. I have the image in the asset pipeline in a folder called images and I am using bootstrap. I currently have this in my code:
`<%= link_to image_tag('WikiLogoFinal.jpg'), getting_started_path, id: "logo" %>`
my CSS as follows:
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: $niceBlandGreen;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
font-size: 1.75em;
color: white;
background: $shinyOrange;
text-decoration: none;
}
}
the image is not the problem as I have used a different one.
Based on what you have, your code should work. Make sure that you have your image in the
app/assets/images
directory. Also, check to make sure that you have the asset pipeline enabled. Go to
config/application.rb
and see if you have this line:
# Enable the asset pipeline
config.assets.enabled = true
In order to add logo or image into your navbar. Perform following steps to do so:
Open your navbar.html.erb, generally this files lies under the layout folder in views and then look for navbar-brand class for e.g.,
<a class="navbar-brand" href="/"><img class="img-responsive2" src ="https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> BLOG</a>
Add following code into your navbar.scss file under the class .navbar
.img-responsive2 {
display: inline-block;
max-width: 20%;
height: auto;}
I hope by following above steps you can add image or logo into your navbar
I've implemented the jQuery datepicker. It seems to be working fine but the calendar is too large.
jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png
The site I'm working on has many layers of stylesheets and parent pages and controls. And I don't seem to be able to isolate what is making it large. (Sorry, the site isn't public.)
It appears the calendar is based on a font size. I tried wrapping my textbox in a div with a smaller font but it seems to ignore that. Is there any way to specify a fixed font size?
While changing the font size for .ui-widget works, I got the best results with the following.
#ui-datepicker-div { font-size:11px; }
Not only does this seem to do exactly what I need, it is also unlikely to impact any other jquery-ui widgets.
try setting font-size for class .ui-datepicker
.ui-datepicker {font-size:11px;}
http://jsfiddle.net/pxfunc/ps5cA/
It takes some digging in firebug but I have included one of the versions I use to reduce it. The key is to copy the exact styles from the jQuery-ui CSS file and put them in the head of the page you need them or in a CSS style sheet after the jQuery-ui style sheet.
.ui-datepicker {
padding: 0.1em 0.1em 0;
width: 11em;
}
.ui-widget {
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
}
.ui-datepicker th {
border: 0 none;
font-weight: normal;
padding: 0.2em 0.1em;
text-align: center;
}
.ui-datepicker th span {
font-size: 11px;
}
.ui-datepicker td span, .ui-datepicker td a {
padding: 0.1em;
}
.ui-datepicker td {
padding: 0.9px;
}
.ui-datepicker .ui-state-highlight {
height: 12px;
margin-bottom: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
font-size: 10px;
font-weight: normal;
text-align: center;
}
.ui-datepicker .ui-datepicker-title {
line-height: 13px;
}
.ui-datepicker .ui-datepicker-title span {
font-size: 11px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
margin-left: -8px;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
height: 15px;
top: 1px;
width: 15px;
}
.ui-datepicker-next-hover .ui-icon {
height: 16px;
width: 16px;
}
Adding this to the site.css worked for me
.ui-widget {
font-size: .7em !important;
}
you can change "jquery-ui-1.10.4.custom.css" as follows
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Our calendar was big and ugly looking with hard to click month arrows. It was caused by mismatching versions of the jquery-ui css and jquery-ui js includes.
version numbers must match e.g.
jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js
but also needed the css recommended above
#ui-datepicker-div { font-size:11px; }
I agree with mdmullinax. You have to change the font size for the whole class
.ui-datepicker-div { font-size:11px; }
because datepicker is not controlled by id so below change has no impact on size
ui-datepicker-div { font-size:11px; }
h