I'm new to Foundation, and I started using Foundation 6, don't know anything about the older versions.
I have a responsive top-bar that becomes a title-bar when the screen is small.
If you are familiar with Foundation, you know that the title-bar has a menu-icon by default, that allows you to toggle the content from your top-bar when you click it, and also toggle it back when you click again.
Well my problem is simple. I don't know how to change the color of the menu-icon, I've seen tutorials to change it on Foundation 5, but it did not work for me on F6.
I'd also like to know how change the position of the menu-icon inside the title-bar. Even change it's functionality or the way it toggles your top-bar content as I have seen it in some websites.
Any extra help and additional tips will be very well appreciated, as I'd like to learn as much as possible about F6. (:
Thank you.
Foundation 6 menu "hamburger" icon consists of
one 2px high block (upper line);
two shadows of that block at 7px and 14px down in vertical direction (middle and bottom lines).
So, to change menu icon color use the following CSS:
.menu-icon::after {
/* the block itself, the first line */
background: #fecf0f;
/* middle and bottom */
box-shadow: 0 7px 0 #fecf0f, 0 14px 0 #fecf0f;
/* respect WebKit */
-webkit-box-shadow: 0 7px 0 #fecf0f, 0 14px 0 #fecf0f;
}
where #fecf0f is the color you want to change.
You need to change the color of pseudo elements ::after of class menu-icon, there you can play with positions and styles, so you can do this for example:
.menu-icon::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
bbackground: red;
background-size: 150%;
background-position: 7px 11px;
background-repeat: no-repeat;
}
Related
I have forked this codepen from chris coyer example and I am wanting to make the label move to the top instead of the bottom as his was doing.
In so doing, I simply can't get the cursor/carrot to move to the bottom instead of staying at the top, and so when you type, it overwrites the label and is a mess. The code to move label (still called go-bottom but that doesn't matter)
form.go-bottom {
input {
padding: 12px 12px 12px 12px;
}
label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
input:focus {
padding: 4px 6px 20px 6px;
}
input:focus + label {
top: 100%;
margin-top: -36px;
}
}
I've tried various padding settings on the input and for some reason none are affecting the cursor position itself - if anyone can help adjust it that would be great. (this is purely css/sass based and don't want any JS or other)
Bonus points for changing the transition animation to go from bottom to top instead of top to bottom :)
You could try adding more top padding and less bottom padding for the input on focus.
input:focus {
padding: 17px 6px 4px 6px;
}
I would play with overall padding too if your going to try this approach, the inputs feel cluttered when 2 lines of copy.
I've been trying to solve this issue for a few hours, and I've searched for a good solution without much luck. It's driving me bonkers, fiddling with the padding and line-height. Vertical aligning it isn't doing anything (it was suggested in another thread here).
Basically I'm trying to create a responsive nav menu that, when the icon is tapped or clicked, will push down the page when the menu is revealed. I'm using a mobile-first strategy without using a framework (the site is simple so I feel Bootstrap is overkill).
But the icon seems to have an extra 1px on top.
I'm using Chrome, and I've reproduced the issue for you guys to look at.
<i class="fa fa-bars"></i>
i {
width: 48px;
height: 48px;
margin-top: 24px;
box-sizing: border-box;
border: 2px solid #555;
border-radius: 50%;
}
.fa-bars {
color: #555;
font-size: 24px;
text-align: center;
line-height: 48px;
}
You can view the result: http://jsfiddle.net/thecornishninja/jK8rD/
See the icon is not vertically centered? It looks like it has an extra 1px or 2px on top, and it's there whether I use rem or px.
I was using the code from Fontastic, but for demo purposes I'm using the simpler CSS from Bootstrap. The problem exists with both methods.
It's probably something ridiculously simple and I may well end up kicking my own butt, but my brain's fried so I hope you can help.
You need to change the css for .fa-bars:before, that's the element that is mispositioned.
Try:
.fa-bars:before {
content: "\f0c9"; /*This is what the creator of font-awesome put in to show the lines character */
display:block;
margin-top:-1px;
}
Also, it seems the height of the lines altogether is odd, so it won't position correctly. I changed the size of the circle to 49px so that it'd be centered.
Forked jsfiddle.
I would like to adjust the CSS code for the Fiore theme on Wordpress. My URL is theuniversalasian.wordpress.com. It is an upgraded premium wordpress account.
With the upgrade, I am able to edit the CSS, but a number of problems are happening. If you could help me with the code, I'd appreciate it!
I want to make a white background for the post texts. When I do that, it moves the date, comments, edit links on the left side. I would like those to stay up top near the post title ribbon. At the moment, the site does not show the changes I wanted because I keep fiddling with the code....
If possible, I'd like the white background for the text to have rounded corners....
The left column somehow loses the graphics....There should be a top cherry blossom graphic like the original theme (http://fioredemo.wordpress.com/), along with the rest of the ribbon image for the post titles.
I cannot paste the entire code here..., but hopefully you will know what I mean from the site...
For the first two, I'll work on the last now, you needed to locate the .entry-content class in your css file.
The first style I added was the background: #fff; which added the white background and then I added border-radius: 7px; which gives it rounded corners.
.entry-content {
color: #2b2b2b; /* changed to black font since you wanted a white background */
width: 300px;
padding: 10px;
border: 0 solid #000;
margin-left: 10%;
margin-bottom: 10px;
margin-top: 10px;
background: #fff;
border-radius: 7px;
}
For the third question, I am not 100% positive but since you removed the nav on your site I believe you removed the image as well. For some reason on the template page I can not find any styles when you inspect an element. The image is apart of the nav/header area so this is just my best guess.
EDIT: Moving the comment/date block around.
.entry-meta {
color: #333;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 1px;
position: absolute;
text-align: right;
text-transform: uppercase;
width: 150px;
top: 0;
left: 35%;
}
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/
I've run in to a bit of a problem. I have a menu list where I custom made some image hover states for list items. This worked perfectly fine until I needed to change the menu items (list item text length, etc). I have to go back and re-make all of the images each time something changes.
Here are some images of what I'm trying to accomplish:
Basically the hover adds a red background and a duplicate of that red region rotated ~2 degrees and is lighter colored. Would it be possible to do this via CSS with :after and transform: rotate()? If not, what would be a nice way of accomplishing this effect for varying word lengths?
Thanks ahead of time!
Tre
This can easily be done with transform as you say. You'll need to have two elements in each button though, one for the text and one for the skewed background:
<div class="menu-button">
<div class="text">Screenings</div>
<div class="hover-bg"></div>
</div>
And style the .hover-bg class something like this:
#menu .menu-button:hover .hover-bg
{
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(220, 50, 50, 0.4);
transform: rotate(2deg) scale(1.05, 1);
transform-origin: center right;
}
Here's an example on JSFiddle
Here's an example where I had some fun with transitions. Due to lazyness I only bothered to make it work in Webkit, meaning Chrome and Webkit.
Note that for cross-browser compatibility you'll need the vendor specific property prefixes (-webkit-, -moz-, etc)
this can be done in pure CSS (not even 3).
On hover have a tilted background image, position it a few pixel to the left and top and add background color.
Because of the background color, you will see only a part of the image:
<div class="text">Screenings</div>
.text {
color: #000;
margin-left: 5px;/*to make room for the hover image */
padding: 4px;
}
.text:hover {
background: #900 url(tiltedimage.png) no-repeat -5px -5px;
color: #fff;
}
This will point you to the solution.