I installed the facebook comments plug-in on a website but the theme's color is overriding the chosen dark background color for the plugin:
The site is: truenode.org.
Scroll down to the bottom to see the plugin. It's all white but it should have a dark border. I've tried adding !important to the plugin's div background color to no avail.
How can I override this?
i am coding a very simple css navigation menu, im trying to the the "nav" div to stretch 100% width across the page, and set the last menu option to orange background and white text to no avail.
can someone have a look at my css code see where my problem is.
body {background: #282828;}
#nav ul{ margin:0; padding:0; list-style:none; }
#nav ul li{ margin-right:5px; padding:10px 20px; position:relative; height:20px; line-height:20px; background-color:#282c2b; color:#fff; }
#nav > ul > li { float: left; height:30px; line-height:30px; background-color:#282c2b; border-left:4px solid #282c2b; }
#nav li > ul{ visibility:hidden; position: absolute; top:0px; color:#fff; }
#nav > ul > li > ul{ width:100%; top:50px; margin-bottom:10px; left:-4px; }
#nav li:hover{ background-color:#ffffff; color:#282c2b; border-left:4px solid #ff3d00; }
#nav li:hover > ul{visibility:visible;}
#nav ul li .navOrange { background-color:#ff3d00; }
also a link to my codepen: http://ift.tt/1QkvlGO
i know it might be hard to achieve with pure css but is it possible to make the manu drop down upon clicking or is it just set to rollover without java script?
The auto scroll works for a couple messages on it's own. Then it randomly gives out and starts scrolling up when the user sends a message.
Here's the applicable Javascript. And the limited styles (Haven't really gotten to styling yet.) Also the site if you want a reference as to what it looks like. http://ift.tt/1cjVJCd
//send message
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $messageBox.val());
$messageBox.val("");
$("#chat").animate({ scrollTop: $("#chat").height() }, "fast");
return false;
});
//Add the users message to the chat.
socket.on('pushMessage', function(data){
$chat.append("<li><b>" + data.nick+ ": " + "</b>" + data.msg + " </br>" + "</li>");
$("#chat").animate({ scrollTop: $("#chat").height() }, "fast");
});
Styling:
#chat{
height:500px;
width:300px;
overflow-y:scroll;
overflow-x:auto;
}
#mainWrap{
display:none;
}
#chatWrap{
float: left;
border:1px #000 solid;
overflow-y:scroll;
width:302px;
I'm having trouble with this and it's driving me crazy trying to figure out why it wants to take up the full width.
HTML
<div class="api-tile-ribbon-front">
<div class="api-tile-ribbon-text">
Finance<a href="#"> »</a>
</div>
</div>
CSS
.api-tile-ribbon-text {
color: #0C5B85;
padding-top: 8px;
display: inline;
height: 16px;
margin: 0 5px;
text-overflow: ellipsis;
line-height: 18px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.api-tile-ribbon-front {
position: relative;
background-image: url("http://ift.tt/1cjVLu4");
background-repeat: repeat-x;
height: 36px;
max-width: 95%;
}
I'm using relative position so I can use the :before and :after images and I'm doing a bunch of stuff to truncate text with ellipsis.
Notice that the ribbons will automatically go to the max-width. I'd like the width to be determined by the textual content within. What is causing it to go full width and how can I stop it?
After seeing questions about this topic, I request your help.
/assets/stylesheets/styles.css: @import url("http://ift.tt/1cDTOkU");
When I run rails s on test or development, the font 'Merriweather' is loaded, but when I run server on production, the font is not loaded, but the styles.css is loaded.
• To put @import url(...) in application.css or welcome.scss or bootstrap.css.scss
• To change @import url('http://fonts.google...') by @import url('//fonts.google...')
application.css
*= require_tree .
*= require_self
*= require 'styles'
Github: http://ift.tt/1OYQTvs
Is there any possible way to get the text to not jump up and down? I can't use position: absolute. because it messes up the rest of my website. Please look at this fiddle: http://ift.tt/1cjSRFy
Here is the html:
<div id="rotating-item-wrapper">
<div class="rotating-item intro">Text 1</div>
<div class="rotating-item intro">Text 2</div>
<div class="rotating-item intro">Text 3</div>
<p class="slidermwtext"> Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p>
See fiddle for javascript and css.
Thanks!
I am using a Gotham font, if you go to this website: http://fctrs.com and see the "//Value section header you will see that the "// is a larger height than the text.
I am using this CSS:
.section .subheading
{
font-family: "Gotham Bold";
font-size: 130px;
color: #c12330;
text-transform: uppercase;
margin-bottom: 10px;
margin-right: -12px; /* offset letter-spacing */
/*line-height: 1em;*/
}
.section .subheading.left-slashes:before
{
letter-spacing: -35px;
margin-right: 30px;
content: "//";
}
I would like the "//" to be the same height as the "Value" text.
Should I consider this a Font issue? My "Gotham Bold" Font asset is delivering the "//" to be a different height than that of AlphaNumberic characters in the Font asset?
I am trying to emulate this PSD capture:
I am trying to fadeIn a background color in the beforeSend and fadeOut in the success with ajax. I don't know what I have done wrong. Help, please.
var data={
action: 'tag_user_update',
postSearchNonce : MyAjaxSearch.postSearchNonce,
tag : $(this).closest("a").text(),
users_id : $("#users_id").val()
}
$.ajax({
url: MyAjaxSearch.ajaxurl,
type:'POST',
cache: false,
data:data,
beforeSend: function() {
$('.tag_link').animate({ backgroundColor:'yellow'},'slow');
},
success: function(data){
$('.tag_link').animate({ backgroundColor:'white'},'slow');
}
});//ajax
For my web-page, things work fine on Android API level 21.
But when I test the same page against Android API level 18, some features do not work.
When I toggle class "check" on .div1 with javascript. The .div2 display is not updated.
Here is sample HTML and sample CSS
HTML
<div class="div1 check"></div>
<div class="div2"></div>
<div class="div1"></div>
<div class="div2"></div>
CSS .div2{ display: none;} .div1.check ~ .div2{ display: block;}
Again, this works fine in Android API level 21 but facing issues in Android API level 18.
Any suggestions?
I'm trying to vertically align the shopping cart image and have it change on hover as well. I checked the other answers but they all seem involve changing the height.
JSFIDDLE http://ift.tt/1KKFnOs
.navlogo, .navlogo_strip {
z-index:99;
}
.navlogo img {
width:120px;
margin:10px 10px 10px 10px;
}
.navlogo_strip img {
width:50px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:none;
}
.floatright {
float:none;
}
.nav_container ul li {
display: inline-block;
text-align: center;
line-height:90px;
}
.nav_container ul li a {
padding:50px 30px 50px 30px;
margin:0px;
cursor:pointer;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
margin-top:0px;
}
.nav_container {
text-align: center;
width:100%;
font-size:16px;
letter-spacing: -1px;
}
.nav_container ul li:hover {
/* not needed background-color:#08298A; */
}
.nav_container ul li:hover a {
color:#fff;
background-color:#08298A;
}
header {
width:100%;
margin: auto;
min-width:420px;
/* 0 0 8px rgba(0,0,0,0.1)*/
}
HTML
<div class="navlogo floatleft">
<a href="http://localhost/auction/"><img src="logo.png" /></a>
</div>
<div class="desktopnav">
<div class="floatleft">
<div class="nav_container">
<ul>
<li><a href="">Browse</a></li><li><a href="">Sell</a></li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li><a href=""><img src="http://ift.tt/1KKFnhg" /></a></li><!-- <li><a href="">Profile</a></li> --><li><a href="">Sign out</a></li>
</ul>
</div>
</div>
</div>
<div style="clear:both;"></div>
</header>
PLEASE HELP OR TELL ME IF THIS IS POSSIBLE BY ENSDAY NIGHT. The spinning and everything works it just wont go where i want or reload when its re-selected.I want the 360 image sequence to be displayed at the bottom in the caption div, but i cant get it in there. Also i want the 360 image sequences to load only for each still image above the caption that corresponds to each 360. i dont know how to link everything properly in jfiddle but the code is there if you think you can help.
$(document).ready(function(){
$('.carousel_data .carousel_item').each(function(){
$('#carousel').append($(this).find('.image').html() );
});
createCarousel();
showCaption();
});
//custom function for roundabout called createCarousel
function createCarousel(){
$('div#carousel').roundabout({
childSelector: 'img',
startingChild: window.startingItem,
tilt: -11.5,
minOpacity: 7,
minScale: .3,
duration: 1200,
clickToFocus: true,
clickToFocusCallback: showCaption
});
createCustomButtons ()
}
//custom function to wire next & prev buttons to roundabout carousel
function createCustomButtons (){
$('.nextItem').click(function(){
hideCaption();
$('div#carousel').roundabout('animateToNextChild', showCaption);
});
$('.prevItem').click(function(){
hideCaption();
$('div#carousel').roundabout('animateToPreviousChild', showCaption);
});
$('div#carousel img').click(function(){
hideCaption();
});
}
//custom function to showCaption
function showCaption(){
var childInFocus = $('div#carousel').data('roundabout').childInFocus;
var setCaption = $('.carousel_data .carousel_item .caption:eq('+childInFocus+')').html();
$('#captions').html(setCaption);
var newHeight = $('#captions').height()+'px';
$('.caption_container').animate({'height':newHeight},500,function(){
$('#captions').animate({'opacity':1},150);
});
}
function hideCaption(){
$('#captions').animate({'opacity':0},250);
}
I am trying to create a drop down like functionality where a div is shown once somebody starts typing in the input box. I am able to attach mouse click event on the individual elements to select them. But I am not able to select them via pressing enter.
HTML
<input type="text" class="input" name="example" id="example" placeholder="example..." autocomplete="off" list="examplelist" />
<div class="autofill">
<ul class="autocomplete">
<li class="autocomplete-list">John Doe (San Jose, CA)</li>
<li class="autocomplete-list">Jane Doe (San Francisco, CA)</li>
<li class="autocomplete-list">John Jane (San Carlos, CA)</li>
</ul>
</div>
JQuery
$(document).ready(function () {
var $listItems = $('li.autocomplete-list'),
$div = $('div.autofill'),
$input = $('#example');
$div.hide();
$('input#example').on('keydown', function (e) {
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
$div.show();
if (key != 40 && key != 38) return;
$listItems.removeClass('selected');
if (key == 40) { // Down key
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
} else if (key == 38) { // Up key
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
}
$current.addClass('selected');
// When I press enter after selecting the li element
// Does not work :(
$current.on('keypress keydown keyup', 'li', function (event) {
if (event.keyCode == 13) {
var value = $(this).text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
});
});
// If somebody clicks on the li item
$('li.autocomplete-list').on('click', function (e) {
var value = $(this).text().split('(')[0].trim();
$input.val(value);
$div.hide();
});
// change color on hover
$('li.autocomplete-list').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
);
// When I press enter after selecting the li element
// Does not work :(
$('li.autocomplete-list').on('keypress keydown keyup', 'li', function (event) {
if (event.keyCode == 13) {
var value = $(this).text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
});
});
How can I select a particular li element and then take its value when press enter? Here is the JSFiddle
I want to apply red color only to class t2 which are followed by t3.
For example
<div class="t1">
<div class="t2">2</div>
<div class="t3">3</div>
</div>
<div class="t1">
<div class="t3">3</div>
<div class="t2">2</div>
<div class="t4">4</div>
</div>
<div class="t1">
<div class="t2">2</div>
</div>
I want to apply red color only to class t2 which are followed by t3 in class t1.
t2 + t3 -> selects t3 and applies css to t3 t2 ~ t3 also does the same.
what other options do I have. Order or t2 is not know as it might be first/last/any child of t1.
I need to set the icon for cursor when a user is dragging DIV (red div in the following example).
I have tried several attempt, including using CSS cursor:move and event.dataTransfer.dropEffect with no success, as the icon always show up a "crossed circle".
Any ideas how to solve this issue using HTML5 drag-and-drop API?
<script>
window.app = {
config: {
canDrag: false,
cursorOffsetX: null,
cursorOffsetY: null
},
reset: function () {
this.config.cursorOffsetX = null;
this.config.cursorOffsetY = null;
},
start: function () {
document.getElementById('target').addEventListener('dragstart', function (event) {
console.log('+++++++++++++ dragstart')
this.config.cursorOffsetX = event.offsetX;
this.config.cursorOffsetY = event.offsetY;
this.adjustPostion(event);
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.dropEffect = 'move';
}.bind(this));
document.getElementById('target').addEventListener('drag', function (event) {
console.log('+++++++++++++ drag')
this.adjustPostion(event);
}.bind(this));
document.getElementById('target').addEventListener('dragend', function (event) {
console.log('+++++++++++++ dragend')
this.reset();
}.bind(this));;
},
adjustPostion: function (event) {
if (event.pageX <= 0 || event.pageY <= 0) {
console.log('skipped');
return;
}
var elm = document.getElementById('target');
elm.style.left = (event.pageX - this.config.cursorOffsetX) + 'px';
elm.style.top = (event.pageY - this.config.cursorOffsetY) + 'px';
console.log(event.pageX);
console.log(event.pageY);
}
};
</script>
This may sound quite silly, but I have no idea how to make a thin line smaller then 1px.
What I am looking for is something like this:
If you do:
.nav-bar {
border-bottom: 1px;
}
It's almost twice, if not three times as thick. As you are also probably aware, doing 1em would just round up to 1px.
Anyone have any ideas?
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://ift.tt/1ciYXWE And heres my css: http://ift.tt/1EOF8Qr (lots of thrash there though) Please ask if you need anything else! Thanks in advance!
I'm having problems getting a table to display uniformly across browsers using Twitter Bootstrap 3.
Here's the HTML:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-striped table-responsive first-table">
<thead>
<tr>
<th>Ingredient</th>
<th>Amount <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Amount" data-content="This is the amount of the ingredient you want to appear on the label." aria-hidden="true"></span></th>
<th>% Carrier <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Carrier" data-content="The amount of carrier (or salt) that's used with the ingredient. This information should come from the quality assurance docs from the supplier." aria-hidden="true"></span></th>
<th>$$/Kilo <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Price" data-content="The price of the ingredient. You should get this from your supplier." aria-hidden="true"></span></th>
<th>Who Sources? <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Source" data-content="Choose whether or not you or the manufacturer will source the ingredient." aria-hidden="true"></span></th>
<th>Pack Size <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="packSize" data-content="The minimum packsize of the ingredient supplied by the provider. You only have to fill this out if you're sourcing the ingredient yourself." aria-hidden="true"></span></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="formulaRow">
<td>
<input type="text" class="ingredient required" name="ingredient">
</td>
<div class="col-md-1">
<td>
<div class="input-group">
<input type="number" class="amount required small-input" name="amount" >
<div class="input-group-addon">mg</div>
</div>
</td>
</div>
<td>
<div class = "input-group">
<input type="number" class="carrier required small-input" name="carrier" max="100">
<div class="input-group-addon">%</div>
</div>
<p class="message">Only use numbers smaller than 100</p>
</td>
<td>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="price required small-input" name="price" size="6">
<div class="input-group-addon">.00</div>
</div>
</td>
<td>
<select class="tableDropDown" style="min-width: 100px;">
<option value=true>The Manufacturer</option>
<option value=false>Me</option>
</select>
</td>
<td>
<div class="input-group">
<input class="packSize small-input" type="number" size="8" disabled>
<div class="input-group-addon">kg</div>
</div>
</td>
<td>
<a><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</td>
<td>
<a><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can also see it here: http://ift.tt/1IdWl8d
It's the table that displays under the heading: "Per Serving"
What I want: For it to be evenly centered in the screen and so you don't have to scroll to the right to finish filling in the input fields.
My condundrum: It works fine in Mozilla. It also works fine in Chrome when I view it offline from the files on my computer.
But it bleeds to the right in Chrome and IE when I view it online.
I'm not sure why has the desired effect in Mozilla but not the other two.
The ultimate goal is to have it center-align if at all possible (or close to it).
Also, here are two screenshots to demonstrate what I'm talking about.
On Chrome, the table does not offset on the right and instead gets pushed out of the window:
Whereas in Firefox it justifies properly:
I am looking for a tutorial on how to reproduce an effect very similar to http://ift.tt/1E9nbt3 I really like the way it animates and navigates. Does anyone have any pointers. Much appreciated,
Cheers, Greg.
The site I am making has a hover menu, what is best practice to deal with this for touchscreens. How can I get it to work on mobile devices?
I googled this and some responses suggest:
:active
So I tried a quick fiddle on an iPhone, but it doesn't appear to work.
Whats the correct way to tackle this and why does my fiddle not work?
Also is there a CSS only solution?
I am trying to target individual posts so I can change the css (title tags, padding, etc) of specific posts. My Wordpress site currently generates the posts in a loop.
index.php code (brings in content.php which has 'post' code)
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php code (gets post-title, category, and sets post-thumbnail to background-image)
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID()), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
<article id="post-<?php the_ID(); ?>" style="background-image:url('<? php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12">
<h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
functions.php (setting image size)
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size', 'thumbnail');
The output is 'rows' 100% width with the title, category and background-image (feature-image). Stacked on top of each other. I want to be able to target the text and bg-image of different posts to make them each look different.