Using Foundation 5
<p class="reverse-text">Blahbuhblah</p>
p.reverse-text {
color: white;
}
This isn't working. Other custom styles I have added work fine. Trying to change color of sidebar paragraph text.
add the css class above the tag
<style>
p.reverse-text {
color: white !important;
}
</style>
<p class="reverse-text">Blahbuhblah</p>
Related
I'm looking to show a country's tooltip from outside of the geochart. I've searched through the API, but I'm not seeing the method for doing so.
<script>
google.load('visualization', '1', { packages: ['geochart'] });
google.setOnLoadCallback(function()
{
var data = google.visualization.arrayToDataTable([
["Country","Count"],
["Mexico",600],
["Canada",400]
]);
new google.visualization.GeoChart(document.getElementById('map')).draw(data);
});
</script>
<div id="map" style="width: 500px; height: 300px;"></div>
<ul>
<li>Canada</li>
<li>Mexico</li>
</ul>
<p>Is there a way to trigger the map tooltips when hovering over the links above?</p>
Here's a very basic fiddle to start with
You can do this overriding styling for Google Chart Tooltips defined by:
http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/core/tooltip.css
Use for example:
<style>
.google-visualization-tooltip {
border: dashed 1px !important;
position: fixed !important;
top: 30px !important;
right: 250px !important;
margin: 10px 0 0 400px !important;
}
</style>
Tooltip will be floating on the right side of chart.
I'm learning Zurb Foundation 4 from Lynda.com videos and documentations on Foundation's website.
I have come to this problem when I create my top nav bar. It appears on Foundation's main website, and the training videos from Lynda that the top navigation bar's menu "names" will change colors when the mouse is over (Zurb Foundation 4 official site), as well as the button gradually changing color, which is beautiful!
I build my navigation bar, and my menu names are not changing colors, my button on the navigation bar is not changing colors either (but these buttons do change color while being displayed on some other part of the page).
This is my code for the navigation bar:
<nav class="top-bar hide-for-small">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Windweller's Blog</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<!-- Right Nav Section -->
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="active">Home</li>
<li class="divider"></li>
<li>Project</li>
<li class="divider hide-for-small"></li>
<li class="has-form"><a class="button active" href="#">About Me</a></li>
</ul>
</section>
</nav>
I'm not sure this is resulted from my markup error or this is the default setting of Foundation 4. If this is the default setting (no color change in top nav bar), how should I properly add those effects by myself? (Overriding the CSS or using jQuery to apply classes?)
Update:
I wrote this in my custom.css file and I made the top bar color change happen
.top-bar-section li a:hover:not(.button) {
background: #222222;
}
I found this line of code in the original Foundation.css file, but there is no ":hover" on it...yet still, my button is not changing color.
I tried to add this as I found it again in original Foundation.css file, but I just couldn't get it to work.
.top-bar-section .button :hover {
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
}
Might not be the best solution, but try
.top-bar-section ul li a:hover {
background-color: #222222 !important;
}
user2677732's code seems to do the trick. Extending it to style dropdown items separately would look something like:
/* Main Item selector */
.top-bar-section li a:hover {
color: #fff;
background-color: #2ba6cb;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out; }
/* Dropdown Item selector */
.top-bar-section li li a:hover {
color: #2ba6cb;
background-color: #fff;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out; }
#media only screen and (min-width: 58.75em) {
.top-bar {
background: #ffffff;
change [background #ffffff;] to any color you want
I am using ZURB foundation CSS framework to design a website. Currently I am trying to create a footer that will stay at the bottom of my page. I have the following code for the footer but its not going to the bottom, rather its showing up in the middle.
Could you please tell me how to create a footer (using ZURB foundation framework) that will stay at the bottom?
<div class="row">
<div class="twelve columns" style="background-color:#000000; height:30px; bottom:0;"></div>
</div>
Simple! Zurb Foundation is itself based on Compass. So you can use the 'Compass Sticky Footer' mixin.
http://compass-style.org/reference/compass/layout/sticky_footer/
There is an example of how to do it here:
http://compass-style.org/examples/compass/layout/sticky-footer/
But you just go:
<div class='example'>
<div id='layout'>
<div id='header'>
<h1>Sticky Footer Example</h1>
</div>
<p>
This is the main content area.
</p>
<p>
In this example you should pretend that the red box
is actually the browser window.
</p>
<p>
Because, being a contrived example, it's not actually sticking
to the bottom of the page.
</p>
<div id='layout_footer'></div>
</div>
<div id='footer'>
This is the footer area.
</div>
</div>
And in you SCSS
#import "compass/reset.scss";
#import "compass/layout.scss";
#include sticky-footer(72px, "#layout", "#layout_footer", "#footer");
#header {
background: #999999;
height: 72px; }
#footer {
background: #cccccc; }
.example {
height: 500px;
border: 3px solid red;
p {
margin: 1em 0.5em; } }
I would create two different footers - one for desktop & tablets - and one for phones.
Using Zurb's "show on and hide on options" it's very easy to do. You can have any graphics used by both footers so any "download penalty" is small.
To create a sticky footer for you website you'll have to add some CSS to Zurb. (You can add this to the app.css file, which is Zurb's repository for your extra CSS)
Also the Brad Frost article (posted by Ed Charbeneau) is a great read - I hadn't seen that before.
HTML:
<div id="footer">
My Awsome Footer 2014
</div>
CSS
#footer{
height: 50px;
position: fixed;
bottom: 0px;
left: 0px;
line-height: 50px;
color: #aaa;
text-align: center;
width: 100%;
}
working fiddle: http://jsfiddle.net/AunmM/
Check out this simple sticky footer for foundation, no need for a #wrapper or a fixed height! Works in mobile as well. http://tangerineindustries.com/download/sticky_footer/
For reference, here's how I accomplished this using Foundation 4.0.
Given a <footer> tag.
footer {
#include panel($panel-color, $panel-padding);
width: 100%;
margin: 0;
position: fixed;
bottom: 0;
}
With foundation 6 the compass import isn't possible out of box. And workaround is hard to find.
Good solution together with foundation can be this little helper:
http://tangerineindustries.com/download/sticky_footer/
Pro:
Developer created this for using together with ZF 6.
You only need a <footer> tag.
Works with responsive depending flexible height of footer, even with
window resizing.
You don't need any extra #wrapper, #pusher, #footer whatever
html-elements.
You don't need any extra CSS.
Contra:
Uses JavaScript.
What you are trying to do is create a "Sticky Footer" or "Fixed Position Footer". This is something which is independent of Foundation and instead is a function of CSS in general.
I would suggest reading this article by Brad Frost. It identifies the basic CSS involved in creating a Fixed Position element and the compatibility issues that arise from doing so.
http://bradfrostweb.com/blog/mobile/fixed-position/
I am using dynamic content (WordPress) and would like to center a logo in the middle of a list like: http://www.munto.net/queed-v1/.
I tested it out and my theory works, provided the number of items on both sides is the same...but if they're different it messes up the navigation.
You can see a live example at: http://joshrodgers.com/.
What I did was made my logo a background image and centered that to my unordered-list, then I set a width on each list-item (so that if there was a super-long one it wouldn't mess up the navigation), and finally after the third link I put a 200px margin on to the right of the list-item (that way there is no list-item over the logo)...but like I said this works perfectly if the number of items is even, if the items equal an odd number it looks funny.
Not sure what the best way to do this, so - what would be the best way to fix this?
Page Code:
<html>
<head>
<title>Josh Rodgers - El Paso, Texas</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li class="example">super new lodge</li>
<li>Programs</li>
<li>Events</li>
<li>Contact Us</li>
<li>Contact Us</li>
</ul>
</body>
</html>
CSS Style:
/* Reset */
#import url("reset.css");
body {
margin: 0 auto;
position: relative;
width: 1000px;
}
ul {
background: #ff0000 url("images/example.jpg") top center no-repeat;
height: 200px;
margin: 0 auto;
text-align: center;
width: 1000px;
}
li {
background: #ffff00;
color: #ff0000;
display: inline-block;
font-size: 20px;
padding: 20px 0;
position: relative;
top: 70px;
width: 100px;
}
li.example {
margin-right: 200px;
}
*Figured I'd work on a normal php solution before integrating it into WordPress.
Thanks,
Josh
From a design point of view i would maybe consider making the logo the home link. A lot of web users are accustomed to clicking the logo and it taking them home. You could still incorporate the home text underneath the logo.
I would probably not use your method of margin-right: 200px to not cover the logo, anything you change before that list item will shift the margin.
Ultimately i would suggest rethinking having the logo set as a background-image and make it one of the list items.
I have created a Raphael paper:
var paper = Raphael("my-canvas", '100%', '100%');
I would like to create some HTML radio buttons which are above the paper canvas layer, which means anything drawing on the paper will not cover(hide) the HTML radio buttons but behind the radio buttons.
What I have tried are illustrated below:
My HTML page:
...
<div id="layers">
<div id="my-canvas">
<div id="my-radio-btn">
<input type="radio" value="apple" name="firstRadio"> Apple
<input type="radio" value="orange" name="secondRadio"> Orange
</div>
</div>
...
The CSS for the above page:
#layers {
position: relative;
border: 1px solid #666;
border-color: #72f342;
margin-top: 10px;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
width: 800px;
height: 800px;
}
#my-canvas {
position: absolute;
cursor: move;
}
With the above code, the radio buttons are there, but if there is a Raphael object drawing on the same position of the radio buttons, the buttons are hided by the Raphael object, but what I want is to have the Raphael object behind the radio button, that's the HTML radio button layer is on top of the Raphael canvas layer.
How to get this feature?
Try changing the z-index property of each div (my-canvas, my-radio-btn)? I mean something like this:
#my-canvas {
z-index: 1;/*what you want but less than my-radio-btn*/
}
#my-radio-btn {
z-index: 1000;/*greater than my-canvas*/
}
This works for me, I have a map app with some divs floating over the raphael object. You should also be careful with the positioning of your divs. I'm using absolute positioning.