I am using ian:accounts-ui-bootstrap-3 and I want to take out the dropdown feature.
I know it is possible with accounts-ui package, by using jamielob:accounts-ui-no-dropdown package. But the same package didn't work with ian:accounts-ui-bootstrap-3 package.
are there any alternatives to serve my purpose?
Have a look at this tutorial (http://www.chaosstuff.com/2015/01/meteor-accounts-with-custom-login-form.html)
The author utilized meteor-template-extension to alter some specific behaviors of the button by keeping the others things untouched.
The steps are briefly first creating your own template which utilizes the original one.
<template name="My_loginButtonsLoggedOutDropdown">
<div class="container">
<section class="panel">
<header class="panel-heading">
<strong>Welcome</strong>
</header>
{{> _loginButtonsLoggedOutAllServices}}
</section></div>
</template>
Then replacing the original one with the one you created
Template.My_loginButtonsLoggedOutDropdown.replaces("_loginButtonsLoggedOutDropdown");
And finally some styling stuff
.panel {
width: 300px;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: auto;
background-color:#fff;
border:1px solid transparent;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);
box-shadow:0 1px 1px rgba(0,0,0,0.05);
border-radius:2px;
}
.panel-heading {
border-bottom:1px solid transparent;
border-top-right-radius:3px;
border-top-left-radius:3px;
border-radius:2px 2px 0 0;
padding:10px 15px;
text-align:center;
}
You can also check this thread as well for some other alternative ideas How do I style Meteor's loginButton to not be a dropdown?
I think these links might help you to solve your problem.
Related
So, to better explain, I am attaching a simple image of what I am trying to achieve.
There is a button, and three contents (two visible and one hidden located in between as shown above).
When the button is clicked, I want to show the hidden content which is located in between to contents.
Is it possible to achieve this with CSS alone?
For example, I can have the hidden content with display:none; then force it visible somehow?
I am not sure what the most efficient way to achieve this.
Any suggestions will be appreciated.
Thanks!
If you want to achieve this using CSS only then there is a way using check boxes or Radio buttons instead of HMTL button tag.
here is a demo https://jsfiddle.net/nileshmahaja/yt76h26n/
HTML
<input type="checkbox" class="check"/>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
.box{
height:50px;
width:50px;
background: gray;
margin-bottom:20px
}
.two{
display:none;
}
.check:checked ~ .two {
display:block
}
And you can style checkbox or Radio button as per your convenience.
Do it purely in css solution here:
How to change an image on click using CSS alone?
However, with jquery it can easily be done in 3 seconds with only a couple of lines if you're not opposed to it as shown below!
$("#buttonsid button").click(function(){
$("#idofhiddencontent").toggle();
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.btn{
display: inline-block;
padding: 15px 45px;
border: 2px solid #000;
color: #000;
text-decoration: none;
}
div{
width: 100px;
height: 100px;
border: 2px solid #000;
margin: 25px auto;
}
.block-hidden{
display: none;
border: 2px solid #f00;
color: #f00;
}
.btn:focus ~ .block-hidden{
display: block;
}
Button Click
<div class="block">Block</div>
<div class="block block-hidden">Block Hidden</div>
<div class="block">Block</div>
.visible_content:hover > .hidden_content {display:block;}
when you hover on .visible_content , .hidden_content will be shown.
but with click , I don't think that there be any way to do this via css.
but in jquery , it is simple:
$(".visible_content").click(function(){
$(".hidden_content").fadeIn();
});
I'm creating a new tumblr theme (I'm almost finished actually). The only problem I'm running into (and I ran into the same problem on the last theme I made) is that no matter how I format an audio post, it will not show up on my blog. My formatted audio posts how up both on the dashboard, and on the customize theme page.
I saw that audio/video posts sometimes have a problem with infinite scroll, so I removed all of my scripts. Audio posts still don't show up.
This is the code I have for the audio post:
{block:Audio}
<div id="post">
{block:AudioPlayer}
<div id="audioplayer">
{AudioPlayerBlack}
</div>
{/block:AudioPlayer}
<div id="albumart">
{block:AlbumArt}
<img src="{AlbumArtURL}">
{/block:AlbumArt}
</div>
</div>
{/block:Audio}
this is the css for those divs (in case that's the problem)
#post
{
float: left;
padding: 5px;
margin: 4px;
background-color: {color:Post Background};
width: 215px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
box-shadow: 2px 2px 4px {color:Post Shadow};
}
#albumart
{
margin: 3px;
margin-bottom: 2px;
width:207px;
height: 207px;
border: 1px solid {color:Border Color};
overflow: hidden;
}
#audioplayer
{
width:25px;
height:25px;
overflow:hidden;
position:absolute;
margin-top:100px;
margin-left:100px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
-khtml-border-radius: 18px;
border-radius: 18px;
opacity:0.75;
border:5px solid black;
}
You can see it here: smash-howard.tumblr.com
Since this hasn't been updated with answer and I had a similar problem, here's what needed to be done:
{block:Posts}
...
{block:Audio}
{block:AudioEmbed}
<div class="audio-embed">
{AudioEmbed-400}
</div>
{/block:AudioEmbed}
{block:AudioPlayer}
<div class="audio-player">
{AudioPlayerBlack}
</div>
{/block:AudioPlayer}
{/block:Audio}
...
{/block:Posts}
This way you're accounting for both possible audio post scenarios: audio embed and the audio player. Only accounting for one will cause the other to not show, which is what was happening in this case.
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}
Hi I'm trying to set a space between two div tags but I don't know how to do it, I've been searching but I don't understand the examples that I've found
Here's the CSS code:
#logo{
position:absolute;
top:160px;
left:65px;
}
#desc{
position:relative;
margin-top:290px;
left:65px;
}
#desc_entry{
position:relative;
margin-top:5px;
left:65px;
}
.pressed {
color:#999;
padding: 10px;
background: #111;
border: 1px solid #000;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
this is the only way I've managed to get a separation between the div tags but the problem is that because I'm using the pressed class it fills the div with this style like this
http://i54.tinypic.com/uoux0.jpg
And i don't want it to be all filled. Any thoughts?
like other people said, you need to post the html or at least say what element do you want to add space to. This being said, I bet what you need is some clear:both somewhere, because that's the most common mistake on people starting with CSS
I want to style a form in html using CSS. It's a really simple form, so I didn't expect to have any problems with accessing it with CSS selectors. But anyway, when I am trying to add something like:
#maincontent #left_side #comments{
margin: 100px;
}
or
#comments{
margin: 100px;
}
I see no visible effect.
Sorry, I think I am not very descriptive, but not sure how to describe the problem...
Maybe you could take a look at the demo url here:
http://chess-advices.com:8000/article/ololo/
And suggest how to fix my CSS, to pretify the form? (Well I actually just need to access it first)
Thanks in advance
You forgot to close this:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
change this to:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
}
To find this: Line 267 in your style.css or you can use strg/cmd + f to find it...
But i think, if you add something like this:
form label { width: 100px; display: block; float: left; }
form p { padding: 5px 0px 0px 0px; }
your form would look nicer :)
I hope this is the answer of your question...
There is an error earlier in the css file that causes this. There is no closing bracket on the style div.pagination span.disabled style, that makes the browser skip the rest of the css file.
Note: as an id is unique in a page, you only need #comments to target the element. The only reason to use #maincontent #left_side #comments would be if you need to make it more specific to override some other style, or if you use the style sheet for several pages and there can be other elements with the id comments that you don't want to target.