I'm not very familiar with LESS and trying to rework a SCSS mixin into something more LESS-like for a team who predominantly work with LESS, as they don't want to re-work their project to SCSS/SASS.
The SCSS mixin is very simply, need to map two arrays and using the outcome, output either #content() or write a simple media query statement with the #content() in between:
$breakpoints: (
xs: 'screen and (max-width: 599px)',
sm: 'screen and (min-width: 600px) and (max-width: 959px)',
md: 'screen and (min-width: 960px) and (max-width: 1279px)',
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
lt-sm: 'screen and (max-width: 599px)',
lt-md: 'screen and (max-width: 959px)',
lt-lg: 'screen and (max-width: 1279px)',
lt-xl: 'screen and (max-width: 1919px)',
gt-xs: 'screen and (min-width: 600px)',
gt-sm: 'screen and (min-width: 960px)',
gt-md: 'screen and (min-width: 1280px)',
gt-lg: 'screen and (min-width: 1920px)'
) !default;
$helper-breakpoints: (
xs: null,
sm: 'gt-xs',
md: 'gt-sm',
lg: 'gt-md',
xl: 'gt-lg'
);
#mixin media-breakpoint($breakpointName) {
$mediaQuery: map-get($breakpoints, $breakpointName);
#if ($mediaQuery == null) {
#content
} #else {
#media #{$mediaQuery} {
#content
}
}
}
And my attempt in LESS, take into account, that I've read that LESS 1.7 allows you to do .if() which I can't get to work.
#breakpoints: {
xs: 'screen and (max-width: 599px)';
sm: 'screen and (min-width: 600px) and (max-width: 959px)';
md: 'screen and (min-width: 960px) and (max-width: 1279px)';
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)';
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)';
lt-sm: 'screen and (max-width: 599px)';
lt-md: 'screen and (max-width: 959px)';
lt-lg: 'screen and (max-width: 1279px)';
lt-xl: 'screen and (max-width: 1919px)';
gt-xs: 'screen and (min-width: 600px)';
gt-sm: 'screen and (min-width: 960px)';
gt-md: 'screen and (min-width: 1280px)';
gt-lg: 'screen and (min-width: 1920px)'
};
#helper-breakpoints: {
xs: null;
sm: 'gt-xs';
md: 'gt-sm';
lg: 'gt-md';
xl: 'gt-lg'
};
.media-breakpoint(#breakpointName) {
#mediaQuery: map-get(#breakpoints, #helper-breakpoints);
// .if(#mediaQuery eq null, {
// .-then() {
// #content();
// }
// .-else() {
// #media #mediaQuery {
// #content();
// }
// }
// });
}
How would I rewrite that IF() in SASS in LESS correctly?
Update
Seems that .set(...) works the best for the guard in this scenario, my problem now is that it cannot find #bp. Seems like you cannot pass a #variable into the new Map functionality :(.
.media-breakpoint(#bp) {
// .set(#bp) when (#breakpoints[#bp] = null) {
// font-size: 12px;
// }
// .set(#bp) when not (#breakpoints[#bp] = null) {
// font-size: 14px;
// }
}
Final solution, got it figured out:
#breakpoints: {
xs: 'screen and (max-width: 599px)';
sm: 'screen and (min-width: 600px) and (max-width: 959px)';
md: 'screen and (min-width: 960px) and (max-width: 1279px)';
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)';
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)';
lt-sm: 'screen and (max-width: 599px)';
lt-md: 'screen and (max-width: 959px)';
lt-lg: 'screen and (max-width: 1279px)';
lt-xl: 'screen and (max-width: 1919px)';
gt-xs: 'screen and (min-width: 600px)';
gt-sm: 'screen and (min-width: 960px)';
gt-md: 'screen and (min-width: 1280px)';
gt-lg: 'screen and (min-width: 1920px)';
};
#helper-breakpoints: {
xs: null;
sm: 'gt-xs';
md: 'gt-sm';
lg: 'gt-md';
xl: 'gt-lg';
};
.media-breakpoint(#bp, #rules) when not (#bp = null) {
#media #breakpoints[$#bp] {
#rules();
}
}
.media-breakpoint(#bp, #rules) when not (#bp = null) {
#media #breakpoints[$#bp] {
#rules();
}
}
Basically, when the variable #bp is not supplied, just render the #rules() directly, otherwise, wrap the #rules() as 'content' within the confines of the #media query.
Less expects a different mindset, but once you get the hang of it, it's not that bad :D.
Output from the above:
1.) usage
.fg-light {
.media-breakpoint(null, {
font-size: 12px;
});
.media-breakpoint(lg, {
font-size: 14px;
});
}
2.) output
.fg-light {
font-size: 12px;
}
#media 'screen and (min-width: 1280px) and (max-width: 1919px)' {
.fg-light {
font-size: 14px;
}
}
Related
I have css as a String such as the following
.c8450 {
color: #000000; font-family: TsukuMin,TsukuMin,TsukuMin,TsukuMin; font-size: 18px; line-height: 1.6em;
}
.c8451 {
text-indent: -4em; text-align: left; min-width: 1.6em; border-top: solid transparent 4em;
}
.c8451 {
text-indent: -4em; text-align: left; min-width: 1.6em; border-top: solid transparent 4em; text-align-last:auto;
}
And I need to find a match between two curly braces if it contains a text-align property but not a text-align-last property, so I should be able to match the 2nd set of curly braces so that it returns
{text-indent: -4em; text-align: left; min-width: 1.6em; border-top: solid transparent 4em;}
I can find the matches between the curly braces with \{+([^}]+)}+ and find the text-indent property with text-align:(.*); and but I'm unsure of how to combine the two to match this specific condition.
try this
fun main() {
val text = """
.c8450 {
color: #000000; font-family: TsukuMin,TsukuMin,TsukuMin,TsukuMin; font-size: 18px; line-height: 1.6em;
}
.c8451 {
text-indent: -4em; text-align: left; min-width: 1.6em; border-top: solid transparent 4em;
}
.c8451 {
text-indent: -4em; text-align: left; min-width: 1.6em; border-top: solid transparent 4em; text-align-last:auto;
}
"""
val pattern = "\\{(.|\\r?\\n)*?\\}".toRegex()
val matches = pattern.findAll(text)
val list: MutableList<String> = mutableListOf()
matches.forEach { f ->
val value = f.value
val pe = "text-align".toRegex();
val pne = "text-align-last".toRegex()
if(pe.containsMatchIn(value) && !pne.containsMatchIn(value)){
list.add(value)
}
}
print(list)
}
output
[{
text-indent: -4em; text-align: left; min-width: 1.6em; border-top: solid transparent 4em;
}]
I want to call all values from each $lists of specific $map ($value-tree in this case.) and do to create media queries for that numbers.
The $map what I have looks like this:
$breakpoints: (
564
768
992
1200
);
$value-tree: (
width: (
80%, 70%, 400px, 500px
),
font-size: (
20px, 30px, 40px, 50px
),
color: (
lightblue, orange, lime, crimson
),
border: (
1px solid black,
4px solid orange,
7px solid brown,
10px solid lightblue
)
);
And this is my code:
#mixin media-module($prefix, $properties...) {
#each $names, $value in $properties {
$myValue: map-get($names, $value);
$myGrid: nth($breakpoints, $myValue);
// doesn't work
#media all and (min-width: $myGrid + px) {
#each $names in $properties {
#{$names}: 123;
}
}
}
}
The main problem is these two directives, map-get and map-values can't call the $values from the $lists.
used map-get directive to call the $values:
Error: $map: "width" is not a map for 'map-get'
on line 112 of scss/app.scss, in 'media-module'
used map-values:
Error: $map: "width" is not a map for `map-values'
Is there any ways to get or call the values from the $lists that inside of $map?
Many thanks always.
================ UPDATE 12/6 ================
I made it to create the numbers of media queries for each of the $breakpoints' values but it only calls width's values like this:
#media all and (min-width: 564px) {
.qaz {
width: 80%;
display: 80%;
border: 80%; } }
#media all and (min-width: 768px) {
.qaz {
width: 70%;
display: 70%;
border: 70%; } }
#media all and (min-width: 992px) {
.qaz {
width: 400px;
display: 400px;
border: 400px; } }
#media all and (min-width: 1200px) {
.qaz {
width: 500px;
display: 500px;
border: 500px; } }
My second code looks like this:
#mixin mqg3($prefix, $properties...) {
#each $contents, $dummy in $prefix, $properties {
$myGroup: map-get($prefix, $contents);
#each $values in $myGroup {
$myIndex: index($myGroup, $values);
$myGrid: nth($breakpoints, $myIndex);
#media all and (min-width: $myGrid + px) {
#each $names in $properties {
#{$names}: $values;
}
}
}
}
}
P.S
Thanks for answer me #Jakob, but I want to make the $properties can be able to checked inside of #include so the user doesn't need to scroll up every time for checking the $properties:
.qaz { #include mqg3($bp-values, width, display, border); }
As I tried to say in this post: How to get $values of Array in SCSS?, in my opinion a nested map helps you to find a more clear & simple solution:
$bp-values:(
xs:(
display: 564px,
width: 200px,
font-size: 20px,
color:lightblue,
border:1px solid black
),
md:(
display: 768px,
width: 300px,
font-size: 30px,
color:orange,
border:4px solid orange
),
lg:(
display: 992px,
width: 400px,
font-size: 40px,
color:lime,
border:7px solid brown
),
xl:(
display: 1200px,
width: 500px,
font-size: 50px,
color:crimson,
border:10px solid lightblue
)
);
#mixin mqg3($map, $keys...) {
#each $keyMap, $valueMap in $map {
#media all and (min-width: map-get($valueMap, display)) {
#each $v in $keys {
#{$v}: map-get($valueMap, $v);
}
}
}
}
It is more clear every correlation. It is not necessary to insert the display in your args 'cause I suppose it is your min-width:
.qaz { #include mqg3($bp-values, width, border); }
.qaz1 { #include mqg3($bp-values, color, font-size); }
This is the result:
#media all and (min-width: 564px) {
.qaz {
width: 200px;
border: 1px solid black;
}
}
#media all and (min-width: 768px) {
.qaz {
width: 300px;
border: 4px solid orange;
}
}
#media all and (min-width: 992px) {
.qaz {
width: 400px;
border: 7px solid brown;
}
}
#media all and (min-width: 1200px) {
.qaz {
width: 500px;
border: 10px solid lightblue;
}
}
#media all and (min-width: 564px) {
.qaz1 {
color: lightblue;
font-size: 20px;
}
}
#media all and (min-width: 768px) {
.qaz1 {
color: orange;
font-size: 30px;
}
}
#media all and (min-width: 992px) {
.qaz1 {
color: lime;
font-size: 40px;
}
}
#media all and (min-width: 1200px) {
.qaz1 {
color: crimson;
font-size: 50px;
}
}
EDIT 1
As you asked in the comment, if you want work with lists, this is another solution. I put your $breakpoints with the other lists. You can remove display in your args 'cause by default I use it always as min-width:
$value-tree: (
display:(
564, 768, 992, 1200
),
width: (
80%, 70%, 400px, 500px
),
font-size: (
20px, 30px, 40px, 50px
),
color: (
lightblue, orange, lime, crimson
),
border: (
1px solid black,
4px solid orange,
7px solid brown,
10px solid lightblue
)
);
#mixin mqg3($map, $keys...){
$myList:map-get($map, display);
#each $myItem in $myList {
$i: index($myList, $myItem);
#media all and (min-width: $myItem * 1px) {
#each $v in $keys {
#{$v}: nth(map-get($value-tree, $v), $i);
}
}
}
}
.qaz { #include mqg3($value-tree, width, border); }
This is the output:
#media all and (min-width: 564px) {
.qaz {
width: 80%;
border: 1px solid black;
}
}
#media all and (min-width: 768px) {
.qaz {
width: 70%;
border: 4px solid orange;
}
}
#media all and (min-width: 992px) {
.qaz {
width: 400px;
border: 7px solid brown;
}
}
#media all and (min-width: 1200px) {
.qaz {
width: 500px;
border: 10px solid lightblue;
}
}
I think you want something like this
SCSS
#mixin media-module {
$index: 1;
#each $bp in $breakpoints {
#media all and (min-width: $bp * 1px){
#each $key, $list in $value-tree {
#{$key}: nth($list, $index);
}
$index: $index + 1;
}
}
}
.class {
#include media-module;
}
CSS Output
#media all and (min-width: 564px) {
.class {
width: 80%;
font-size: 20px;
color: lightblue;
border: 1px solid black;
}
}
#media all and (min-width: 768px) {
.class {
width: 70%;
font-size: 30px;
color: orange;
border: 4px solid orange;
}
}
#media all and (min-width: 992px) {
.class {
width: 400px;
font-size: 40px;
color: lime;
border: 7px solid brown;
}
}
#media all and (min-width: 1200px) {
.class {
width: 500px;
font-size: 50px;
color: crimson;
border: 10px solid lightblue;
}
}
Hello guys im having a hard time configuring out what is the missing part of my css, because the animation in hover out is not the same in hover in, here is the fiddle link thank you.
[https://jsfiddle.net/m2Lz4euv/][1]
You need to apply the timing properties in the not-hover selectors.
jsFiddle
What I've done is changing this:
.hamburger-wrap span:first-of-type {
top: 0;
}
.hamburger-wrap:hover span:first-of-type{
top: 12px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
transition-property: top, transform;
transition-duration: .3s, .3s;
transition-delay: 0s, .1s;
}
To this:
.hamburger-wrap span:first-of-type {
top: 0;
transition-property: top, transform;
transition-duration: .3s, .3s;
transition-delay: 0s, .1s;
}
.hamburger-wrap:hover span:first-of-type{
top: 12px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
}
If you want different timing for the in- and out state you can set the in-timing in the :hover selector and the out-timing in the regular selector.
HOVER FIDDLE DEMO
* {
margin: 0;
padding: 0;
}
/* Icon 1 */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #d3531a;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1:hover span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1:hover span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1:hover span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 18px;
}
#nav-icon3 span:nth-child(4) {
top: 36px;
}
#nav-icon3:hover span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3:hover span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3:hover span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3:hover span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
/* Icon 4 */
#nav-icon4 {
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4:hover span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4:hover span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4:hover span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
I'm running into difficulties with Foundations Orbit slider on mobile and tablet views, when swiped with figure to the right the slides start to go then get a little stuck then they go to the next slide and so on, when swiped from right to left the slides and headline text get very messy, view website here: kids toy site
HTML
<div class="small-11 small-centered columns">
<ul class="orbit-content" data-orbit>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>jigsaws</h3>
<p>New jigsaws in stock. Colourful animal shapes designed to teach children numbers and the alphabet.</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-three/" title="jigsaws">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii-Slider_02.jpg" alt="slide image" />
</li>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>String Dolls</h3>
<p>String Dolls first appeared in Thailand over a decade ago. Since then they have been slowly making their way around the world.</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-two/" title="String Dolls">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii_slide01.jpg" alt="slide image" />
</li>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>Socky Dolls</h3>
<p>Socky Dolls are a collectable range of heatable soft toys, made from real sock materials!</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-one/" title="Socky Dolls">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii-Slider_03.jpg" alt="slide image" />
</li>
</ul>
</div>
</div>
CSS
.content-slider h3 {
font-weight: 700;
line-height: 1.1;
}
.content-slider {
position: relative;
}
.orbit-slide-number, .orbit-timer {
display: none;
}
.orbit-bullets-container {
position: relative;
z-index: 10;
}
.orbit-bullets li {
background: none repeat scroll 0 0 #f1f1f1;
}
.orbit-slides-container li {
position: relative;
z-index: 10;
}
.orbit-slides-container li div {
padding: 2em 50px;
position: relative;
top: 4.5em;
z-index: 10;
}
.orbit-slides-container li img {
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
.orbit-container .orbit-slides-container img {
display: block;
max-width: 1282px;
max-height: 432px;
}
.orbit-container .orbit-slides-container > * {
height: 432px !important;
}
.orbit-container {
min-height: 432px;
}
.insliderbox {
background-color: rgba(240, 142, 10, 0.8);
margin: 0 42px 0 0;
}
.insliderbox h3 {
font-size: 2.2em;
}
#media screen and (min-width: 40.063em) and (max-width: 64.063em) {
.insliderbox h3 {
font-size: 1.8em;
}
.insliderbox {
margin: 0 4% 0 0;
}
}
#media screen and (max-width: 40.063em) {
.content-slider {
width: 100% !important;
}
.insliderbox h3 {
font-size: 1em;
}
.insliderbox p {
font-size: 0.8em;
}
.insliderbox {
padding: 5px 10px 1px !important;
}
.orbit-container .orbit-slides-container img {
display: block;
max-height: 212px;
}
.insliderbox {
margin: 0;
}
}
.orbit-prev {
background: url("../images/sprite-sheet.png") no-repeat scroll 2px -375px rgba(0, 0, 0, 0);
}
.orbit-prev:hover {
background: url("../images/sprite-sheet.png") no-repeat scroll 2px -454px rgba(0, 0, 0, 0);
}
.orbit-next {
background: url("../images/sprite-sheet.png") no-repeat scroll -9px -295px rgba(0, 0, 0, 0);
}
.orbit-next:hover {
background: url("../images/sprite-sheet.png") no-repeat scroll -9px -220px rgba(0, 0, 0, 0);
}
.orbit-container .orbit-next:hover,
.orbit-container .orbit-prev:hover,
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
background-color: rgba(0, 0, 0, 0);
border: none;
}
.orbit-container .orbit-prev, .orbit-container .orbit-next {
margin-top: 17px;
width: 50px;
top: 35%;
}
.orbit-container {
overflow: visible !important;
}
.orbit-slides-container {
overflow: hidden !important;
}
.orbit-container .orbit-prev {
margin-left: -5%;
}
.orbit-container .orbit-next {
margin-right: -5%;
}
.content-slider, .content-slider h3 {
color: #fff;
}
#media screen and (max-width:40.063em) {
.orbit-slides-container li div {
padding: 2em 0;
}
.orbit-next, .orbit-prev {
display: none;
}
}
#media screen and (min-width:768px) and (max-width:1024px) {
.orbit-slides-container li div {
top: 11.5em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.1em;
}
}
#media screen and (min-width:741px) and (max-width:768px) {
.orbit-slides-container li div {
top: 10em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.1em;
}
}
#media screen and (min-width:600px) and (max-width:741px) {
.orbit-slides-container li div {
top: 11em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.5em;
}
}
#media screen and (min-width:458px) and (max-width:600px) {
.orbit-slides-container li div {
top: 9em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.5em;
}
}
#media screen and (max-width:458px) {
.orbit-slides-container li div {
top: 13.23em;
}
button, .button.slider-btn {
font-size: 0.3rem;
float: left !important;
margin: -19px 0 12px;
}
.content-slider:after {
margin-top: -65px !important;
}
}
JS
$(document).foundation('section').foundation('orbit', {
timer_speed: 3000,
animation_speed: 400,
stack_on_small: false,
navigation_arrows: true,
slide_number: false,
pause_on_hover: false,
resume_on_mouseout: false,
timer: false,
variable_height: false,
});
I have tried taking away the JS, the CSS nothing changes and I have tried copying pasting HTML directly from the Zurb Foundation Orbit webpage, no change, it is a Wordpress site so I took down all the plugins...no change? Kinda stuck, any ideas most welcome.
Thanks
I'm trying to change the font color of just the active tabs on Nivo slider.
I have tried this but, it's not working;
.nivo-controlNav a:hover, .nivo-controlNav a.active {
background:url(../image/a_active.png) repeat-y 0px 50%;
--> color:#000 !important;
}
I have also, tried;
.nivo-controlNav a.active {
color:#000 !important;
}
the file I'm editing is the slideshow.css
Go check these styles:
.nivo-controlNav a h1 {
color: #E4007B;
font: bold 15px/20px Arial;
text-transform: none;
}
and add these after:
.nivo-controlNav a.active h1 {
color: #000;
}
This should work.