I am trying to create a single round (bottom right) corner on my navigation menu.
I have a ul id labeled "main-nav" and I created a li class labeled "round".
I added this li class to the Music link to get the round corners, but nothing happened.
Here is a fiddle//
http://jsfiddle.net/2qRLU/3/
You wrote .round li This will try to target list items nested inside elements with the "round" class.
You need to write li.round This targets list items that have the class "round" on them.
Note that spaces are important, it would be wrong to write li .round as this would target children of list items that have the "round" class.
http://jsfiddle.net/2qRLU/4/
If you wanted to style corners individually you can use the more specific versions:
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-left-radius:15px;
border-bottom-right-radius:20px;
I've styled them all here to show the different types, but in practice you probably just want to style one corner, so here's a version of your fiddle with only the bottom-right corner curved: http://jsfiddle.net/2qRLU/6/
Also, as a side note, unless you need to support older versions of the browsers, it is safe enough to just write border-radius without all the vendor prefixes. Browsers haven't needed vendor prefixes for border-radius for a while now.
You can test it without prefixes on your browsers here: http://jsfiddle.net/2qRLU/5/
Related
When I try to show the bar value in the bar chart of apache superset, y axis bar values overlap with each other.
To fix this issue, I want to rotate the y-axis values with 45 degree so that those values will look vertically and won't overlap with each other, just like it is there in x-axis values.
Do you prefer grouped or stacked bars. Using stacked bars would be a shortcut to solving this.
I don't have an easy but bad answer for you, and a more difficult but rational answer.
The bad/easy answer: You might be able to do this with CSS, at least in any given dashboard. For that, you'd want to take your Dashboard into Edit mode, and pick "Edit CSS" from the "..." menu in the top right. There, you should have access to write some clever CSS selectors (let me know if you need help) and tweak CSS properties of the SVG text element (i.e. text-anchor, transform). That said I think you're going to have a bad time with this approach, since you don't have access in CSS to the values you might need for `translate(x, y). So, that brings us to...
The better/harder answer: You could edit the plugin! One caveat is that we'll be replacing some visualizations in the near future (including the Bar Chart) with ones based on Apache ECharts. Meanwhile, you could open up a PR on the Superset-ui repo at https://github.com/apache-superset/superset-ui. The NVD3-based plugin lies in there, as do the controls, where you might be able to add additional controls for rotation.
Door #3, of course, would be to write your own visualization plugin (or help us with the ECharts refactor!) but that's another conversation entirely.
Sorry this isn't more directly helpful, but I hope it gives you more avenues to explore.
Can you change Zurb Foundation's first breakpoint from 640px to 768px? (are there side effects of doing so, and is it a common and generally accepted practice?).
I think Bootstrap's first breakpoint is 768px and it does allow for more room for a "desktop" browser or tablet. 640px actually might be too cramped to fit in all things, and it goes all the way to 1024px, so it is difficult to design for anything in between.
At 640px, we get header elements pushed down the row, so items need to be styled with cramped margin space, and at 900px or so, the margin space are % values, so they get expanded but remain somewhat cramped.
If you are using the SASS version of foundation, it's easy to change the breakpoints. Take a look at the _settings.scss file, here are the few relevant lines:
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$breakpoint-classes: (small medium large);
So for what you are trying to achieve, you could simply change the value of medium to 768, and if you want, also increase large. Note that the array of breakpoint classes doesn't contain xlarge and xxlarge by default - if you want these additional classes just add them into the array. You can also define your own if you need to.
Using Borland/CodeGear/Ebarcadero C++ Builder 2009. Is it possible to show shortcuts (or other text), right aligned in a second column in a TPopupMenu ?
For instance:
[image] Open File ctrl-O
[image] Close File ctrl-W
[image] BlahBlah ctrl-B
etc.
If so, how ?
I checked the break property on an item, but the results is not exactly what I want, since items are selectable on their own, instead of the complete line. Also it's not drawn that nicely.
Your feedback appreciated.
A menu item can have an image (see the TMenuItem.ImageIndex property), and can have a shortcut assigned (see the TMenuItem.ShortCut property). The VCL will automatically draw those elements for you, exactly as you have shown.
By default, they are a little squished together. You can use the TMenuItem.OnMeasureItem event to extend the Width:
If you still do not like the way the default drawing looks, or you want different text than the ShortCut to appear on the right side, you will have to owner-draw the menu items yourself (see the TMenuItem.OnDrawItem and TMenuItem.OnAdvancedDrawItem events), then you can make the menu items appear however you want.
Is there a way to control the order of slides displayed to users in a carousel from the Experience Editor perspective? (or even the Content Editor)
Basically, based on the user that has been identified or not identified, I would like to display a different slide as the first slide of the carousel. All the other slides would still be present, just in a different, specified order.
Is there a way to accomplish this via rules or should I look at having to create separate datasources that have the different slide orders already specified?
TL;DR
Personalization can do three things:
vary a datasource for a rendering
vary a rendering (use another rendering basically)
hide a rendering.
I guess the question you need to answer is whether what you need can be accomplished by doing either one of these actions.
If you've used nested structures to represent your carousel (like we do in SCORE, you can see how it looks like here or here) it's not hard to show/hide certain panels based on personalization conditions and thus reorder the carousel. Depending on how exactly it looks on the published site you may only need to repoint datasources. Either way, it's personalization out of the box and your content structures working nicely together.
If you've used a (variation of a) MultiList field to represent a list of your panels with panels themselves being items somewhere in the shared content area it's not something personalization engine can change based on a condition. Changing a field value is, unfortunately, not on the menu. I am sure you can code around it thanks to Sitecore being so open and flexible but I am not sure you can make it seamless (e.g. variations preview in Page Editor).
Rendering parameters is also not something you can change but if yours are static and defined on the rendering definition item (as opposed to being supplied when component is bound to the placeholder and thus recorded inside the presentation details) you can get away with having two definition items for your carousel component (same code behind it) and picking the right one based on the personalization condition.
Hope it helps.
This may be a question already asked before, but I couldn't find anything on it, and it's a tad strange, so I thought I'd ask it here.
My question is this: is it possible to use a div as a background image for another object, in this case a dt tag in a definition list?
I'll explain it a little more. I have a definition list that organizes to-dos on my page, with the dt being the title of the task and the dd being the description of the task. I also have a div floating to the left of the dt styled to look like a blue circle, which I use as an unread indicator. This works fine on the first dt and dd pair in the list, but afterwards causes the other pairs to get all smashed together underneath it.
I also know that using divs inside of a list is frowned upon, so my ideal solution would be to use the div as a background image for the list, sort of like what Chris Coyier did here: http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/ with images. If not, an image would be fine too, I just wanted to know if there was any way to use a div as a background image for another element. Any and all help is greatly appreciated!
It might be possible to use an absolutely positioned div, with a fixed size, and a low z-index to place it behind the dt.
However, I'm sort of confused as to why you would do this and not just add a background image to the definition tag directly.