I'm trying to turn a brand new template into my login script and for some reason the text "ON" for the checkbox isn't aligned properly like the template is as well as there doesn't seem to be a right border when on is selected. I've been trying to match up the elements and css to troubleshoot but not having any luck.
http://www.kansasoutlawwrestling.com/kowmanager/login
http://themeforest.net/item/zice-admin-colorful-admin-templates/full_screen_preview/1980638
I tried changing the padding as suggested by the two people below but I'd rather not change the css because it works on the template shouldn't it work without changing the css on mine.
Any other ideas?
I'm hoping someone sees something.
There's a 13px padding set on the span. Remove it and it will align properly.
It's on line 1187 of your zice.style.css file:
label.iPhoneCheckLabelOn span {
padding-left:13px
}
Change this declaration to this value:
label.iPhoneCheckLabelOn span {
padding-left: 1px;
}
Related
I want to change the color of the social icons (on the left side of the screenshot). Since I have no clue how to change it in WordPress, I tried it with CSS. But now I noticed that I have to change the element. style and I don't know how... I tried just changing the color in the element. style and copying into the additional CSS in WordPress, but it doesn't work. On the screenshot, you can see what I mean. Is there a solution to this problem?
This is what I tried:
element.style {
--wpz-social-icons-block-item-color: #FF0000;
--wpz-social-icons-block-item-color-hover: #FF0000;
}
Please try with this following code in wordpress customizer > Additional CSS
.social-icon-link{
--wpz-social-icons-block-item-color: black !important;
--wpz-social-icons-block-item-color-hover:
red !important;
}
I think that what makes color is the element inside a <span class="social-icon socicon socicon-icon-instagram">
But anyway you are trying to change something via style, and if you want to do like this you´ll hace to use something like
style="background-color:#000"
or wathever, color, font-size etc
But in this case I will use a new style, like
.socicon-icon-instagram {color:#000;}
And maybe depends of the template you´ll need to add !important to CSS class to get the color...like this
.socicon-icon-instagram {color:#000!important;}
It is not a good practice but sometimes is necesary
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
So far I have tried to change the cell padding to 0, but ng-grid wants it to be 5 pixels. I originally made a css class called test with the following definition
test {
padding:0;
}
then i figured out that ng-grid is overriding it with the class called ngCellText so the only way to overwrite inline css is to add important
test{
padding:0 !important;
}
and this didn't work either. By the way my jade (no bracket html)(it also has a little bootstrap) looks like this
div.test
div.row-fluid.span12
div(my ng-grid document)
so then, since that didn't work, I looked at cellTemplate. Here is the default html for it
<div class="ngCellText ng-scope col0 colt0 (**input test class here**)"
ng-class="col.colIndex()">
<span ng-cell-text="" class="ng-binding">***0***</span>
</div>
This is great and it gets rid of the padding, but as you can see "0" is hardcoded since this if from an inspected element using chrome. How would I be able to do this using my ng-grid field? Also, if you have any other ideas on how to fix this please feel free on pitching in. Preferably I would like to get the !important working or anything else since the way I have ng-grid set up is so I can put it in different places of my website so custom css would be best!
This can help:
div.ngCellText[class*="col"] {
padding: 0;
}
But seems you can just override it like this:
.ngCellText {padding: 0;}
I'm trying to write a custom style sheet to rename Facebook Groups in the left sidebar. I am not an admin of the groups and cannot change the names, I just want to read something there that is meaningful to me, especially when many group names begin with the same words and appear the same in the sidebar list.
What I try to do is hide the original name and insert my custom name.
I can insert my custom group name with something like:
#navItem_group_136453550474635 a div:nth-child(2):after{
content: "Custom name";
}
Unfortunately I cannot "shrink" the div with the original name with "display:none", only hide it, so that in effect there is some empty space pushing my custom name to a second line.
This works:
#navItem_group_162405550444366 a div div{
visibility: hidden;
}
This does not work:
#navItem_group_162405550444366 a div div{
display: none;
}
"display:none" does not work, presumably because the div already has display:block, but why doen't my browser style sheet overwrite that?
I'm using safari under OS 10.8.?, but I believe this shouldn't make a difference.
"display:none" does not work, presumably because the div already has display:block, but why doen't my browser style sheet overwrite that?
Does your rule have the same specifity as the one Facebook is using to format this element?
Have you tried adding !important to your declaration, to overwrite the formatting of Facebook’s own stylesheet?
I'm new to Dojo and CSS, so maybe I'm missing something obvious here.
I have a page with several Dijit buttons that are created programmatically, and I want to make one of them bigger- leave the text alone and increase the space between the text and the edge of the button. I don't want to override the CSS for .dijiButtonNode to do so because there are other Dijit buttons the page that shouldn't be altered.
I tried adding this to the widget declaration:
style: { padding: "1em" }
and this:
class: "PaddedButton"
.PaddedButton
{
padding: 1em;
}
but since Dijit buttons are rendered as nested spans it padded the area around the button instead.
The best way to work with CSS is using one of the browser debugging tools (that you should already be using) like Firebug or the Chrome developer tools. You can find an element's DOM node easily with inspect_element and then directly edit its CSS styles until they do what you want. You can also see what CSS rules are active and what are being ignored or overwritten.
I have come up with a working example here:
http://jsfiddle.net/missingno/FrYdx/2/
The important part is the following CSS selector:
.paddedButton.dijitButton .dijitButtonNode {
padding: 1em;
}
This selects any node with class dijitButtonNode that descends from a node that has both of the paddedButton and dijitButton classes. I couldn't do just a .paddedButton .dijitButtonNode because then the rule would end up being cascaded by a more specific selector.