I want to make a Slate dashboard that has collapsible containers that I've seen elsewhere, but I don't know which CSS styling to apply.
Can someone help me understand how to accomplish this?
The basic strategy is to set the container's height to 0px and its overflow to hidden when its parent has a certain class. In other words, add a conditional class to the parent container, like {{#if w_toggle.on}}hide-me{{/if}}, and then add CSS that looks like
.hide-me {
#widget-w_child_container {
height: 0px !important;
overflow: hidden;
}
}
For more advanced styling and layout techniques, find the UX/UI Considerations portion of the Slate Development Best Practices guide in the documentation.
Related
I have installed bbPress in my website and my theme override some bbPress css which I do not want.
The forum breadcrumb is hidden with the following code:
div.bbp-breadcrumb, div.bbp-topic-tags {
font-size: 12px;
}
bbpress.css?ver….5.14-6684:404
div.bbp-breadcrumb {
float: left;
}
vlog-bbpress.css?ver=1.8.1:335
.bbp-breadcrumb {
display: none !important;
As you can see in the picture the CSS comes from two different files:
bbpress.css
vlog-bbpress.css
Somehow the rendering seems to override bbpress.css.
What code should I use to make the breadcrumb visible?
Having installed a plugin (Simple Custom CSS) to write custom css, what should I write there in order to have the forum breadcrumb visible?
Please look at the real website here http://italiancrypto.it/forums/
The breadcrumb is hidden by:
.bbp-breadcrumb {
display: none !important;
}
What you see is that it is addressed by one class, and an !important. One class isn't a problem, but !important is (and is generally viewed as bad practice).
The easiest way to overcome this, is by addressing the same bbp-breadcrumb with an extra class, that's above it. For example:
.entry-content .bbp-breadcrumb {
display: block !important;
}
You could also use the above ID of bbpress-forum, but that is generally viewed as bad practice as well. Then again, desperate times call for desperate measures ;-)
Try add an id to the class .bbp-breadcrumb with JS
document.querySelector('div.bbp-breadcrumb').id = 'breadcrumb';
this will add the id to the element, then in your css use
#breadcrumb {display:block !important;}
since the id takes precedence over class I think this should work.
I'm trying to create my first project with Polymer. I use core-pages to navigate between different pages. These pages should have a white background-color in css, but there is no on the site.
Here is a link: http://www.test.gruppenstunde.eu/
The problem is, that core-pages and my custom element modules-list don't have a fixed height, because that changes with the content. What do I have to change?
Currently, your <modules-list> is styled with position: absolute. Switching to position: relative should accomplish what you're looking for—the white background color will show up. Below is an example of the change made via Chrome's DevTools, illustrating what it will look like:
I've found myself needing to brush up on CSS positioning quite a bit in order to work effectively with Polymer, since there are a number of <core-*> elements that effectively don't have any default positioning/sizing info, requiring developers to make the appropriate decisions for their apps. I've found this guide particularly useful, but there are plenty of other good resources out there.
This works when using vanilla core-pages and children with class="core-selected"
core-pages .core-selected {
position: relative;
display: block;
}
Found more help here: https://groups.google.com/forum/#!topic/polymer-dev/HrsXUjni2kA
I have changed the font size on my Kendo grid to 11 and by doing so, the calendar icon on a datepicker textbox gets cut off at the bottom. I was able to move the icon up using margin-top when you hover over it with the following code, however I am not able to figure out how to get it moved up in just its normal state.
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar{
background-position:-48px -176px; margin-top: -6px;
}
See example: http://jsbin.com/ufimom/592/edit
Try this,
.k-i-calendar {
background-position: -32px -176px;
margin-top: -6px !important;
}
Demo : http://jsbin.com/ufimom/596/edit
I have a highly personalized Kendo stuff. Custom styling is one of the biggest problems of kendo (along with million other issues that you will find once you start using kendo at a big scale). To minimize the size of the stylesheets they have combined a lot of styling of different controls into few files. Although its a good thing but it makes the custom styling (and then updating in the future) a nightmare. Knowing how ":not", ">", ":first", ":first-of-type", etc. work in css will really help you with styling of the grids and other controls.
I usually write separate stylesheets to override kendo styling (by using a lot of !important keyword in my override css). It helps when I update kendo.
Without seeing your html and background image in context, I'm just taking a guess here. Try appending the normal state of the calender icon to your css rule like this,
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar, .k-i-calendar { background-position:-48px -176px; margin-top: -6px; }
DEMO
EDIT: As the previous poster mentioned, !important is likely the best solution here, in order to override the Kendo settings. Example:
.k-i-calendar {
margin-top: 0px !important;
}
DEMO here: http://jsbin.com/ufimom/598/
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com