I'm trying to figure out how to change the thick light blue border that appears while the mouse button is down when clicking on a pagination number. I have tried border-color on the a element but that doesn't do it.
ul.pagination a.page-link:active {
border-color: #f00;
}
Don't remove outlines (or their visual substitutes). They have an important purpose.
It's actually a box-shadow variable. But just restyle it. Don't remove it.
.page-link:focus {
box-shadow: var(--bs-pagination-focus-box-shadow);
}
You'll want to learn how to use your browser's document inspector to discover what CSS rule is styling an element. You can force states to find :active and :hover styles, for example.
Related
I was trying to style Vaadin grids header, more specifically, I would like to change the background of the 'checkbox' to 'white'.
This changes all checkboxes to white, not just the one in the header.
:host [part="checkbox"] {
background: white;
}
/*or*/
[part="checkbox"] {
background: white;
}
Any suggestions on how I could accomplish that? See the screenshot below: 1) should have white background, 2) should stay with the default background, not white.
Tx.
Did you try the ID CSS selector?
#selectAllCheckbox {
background: white;
}
As I can see on the grid components demo page, the check box is not part of the shadow DOM, i.e. you can style it using global CSS.
<xe:namePicker id="npUserNames" for="hdnUserNames">
<xe:this.dataProvider>
<xe:dominoViewNamePicker viewName="Techs"></xe:dominoViewNamePicker>
</xe:this.dataProvider>
</xe:namePicker>
The Names in the left box of the dialog are center aligned. Same with the right (selected values) box.
I have tried text-align: left css in every possible surrounding element...The table cell, the table it is in, the surrounding div tag, the panel, the layout, the entire xpage. And the content of the namepicker dialog is still centered. How do I fix that? How can I specify the width of the dialog box?
Also, in IE11, the "X" button does not work. Nothing happens when you click it.
I'd recommend interrogating the HTML generated using your browser's developer tools to see if there's a class defined for the relevant HTML tags that you can override. If so, you can use that. If not, you may need to create your own Renderer or extension of the Name Picker to generate different HTML. That will be more complicated, but the trade-off of any framework is limited configurability at the cost of quicker development.
I'm not doing exactly what Withers suggested, but it did lead me to a solution based on a comment somewhere else.
I added a class dojo attribute and assigned a new css class to it. Only issue is that it is shifting everything in the dialog to the left...but it's ok for now.
<xe:this.dojoAttributes>
<xp:dojoAttribute name="class" value="namePickerClass">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
CSS:
.namePickerClass { margin: 0 auto; width: 50%; text-align:left; border: 1px solid blue; scrolling: none;
}
I have a link button with jQuery mobile.
I want to be able to set it to be constantly pressed or unpressed.
I tried this code for pressed:
$(this).css('background-color', '#e0e0e0');
and this code for unpressed:
$(this).css('background-color', '#f6f6f6');
But when hovering over the unpressed button it does not highlight anymore.
So I tried:
$(this).addClass('ui-button-active');
But the button gets a blue color and I want dark gray color.
Any suggestions?
In jQuery Mobile 1.4.2 CSS you can see that there are button styles for normal/hover/active states (for each theme), and an active style that changes the color of the button (to blue, in your case).
To simulate a "constantly pressed" button you have to add a class for each theme (a and b) based on the button :active class, and override background color:
.button-pressed-a { background-color: #e8e8e8 !important; }
.button-pressed-b { background-color: #404040 !important; }
Then, in your script, you can toggle the "pressed" state with:
$("#button").toggleClass('button-pressed-a');
Have you been to themeroller? There you can try out different styles.
Adding a Custom Theme
Another good way to customize a jQuery Mobile button is adding a custom theme.
<a data-role="button" data-theme="my-site">Button</a>
That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):
.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }
Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. In addition to this, there are other HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (i.e. ui-icon, ui-btn-text, ui-btn-inner, etc).
Otherwise I could recommend you this site
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I have buttons in my web app using jQuery Mobile.
When clicked the buttons have the ui-focus class added which displays a blue halo around buttons. The class stays there until another spot on the page is clicked. This happens in firefox, not iPad. I would like that this halo is not displayed.
What must I do for that focus halo not to be displayed at all ?
You can override the default css instead of hacking up the source. Just make sure your css file is after the JQM one.
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none ;
}
I have found that the best way to do this is to give focus back to the page after your buttons are clicked.
$('yourButtons').click(function(){
//Do some important stuff
// ....
$.mobile.activePage.focus();
});
Well thats easy, just open your xxx-mobile-theme.css file and find the class ui-focus
and remove the box-shadow property manually
None of the solutions worked for me as I had a custom submit button and used data-role="none" on the button. The :focus event still had the blue glow so this worked for me. I wrapped my form in a div called myform.
.myform button:focus {
outline: 0;
}
Im using sifr for the heading of horizontal tabs. When the tab is active it must be blue color and the other tab must be in black color.So how do I switch the tab colors when the tabs are clicked. Please explain
Try adding this to the replace sIFR CSS:
'.sIFR-root {color: #000000; } a { color: #000000;} a:active{ color: #0000FF;}'
Then for your tabs assuming your sIFR selector is p:
<p>YOUR TAB</p>
I assume that the normal state of your tab is black... You can use a:hover for hover, too. For example, if your tab needs to be green when the cursor is hovering over the tab:
a:hover{color:#00FF00}
You might consider using Cufon instead if your text isn't justified... Cufon rocks and I'd use it for everything if only it could be justified... It's very fast and not Flash dependent.
http://cufon.shoqolate.com/generate/