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:
