SCSS
.footer-color{
#include linear-gradient(lighten(black, 20%), black);
}
#mixin linear-gradient($fromColor, $toColor) {
background-color: $toColor;
background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor));
background-image: -webkit-linear-gradient(top, $fromColor, $toColor);
background-image: -moz-linear-gradient(top, $fromColor, $toColor);
background-image: -ms-linear-gradient(top, $fromColor, $toColor);
background-image: -o-linear-gradient(top, $fromColor, $toColor);
background-image: linear-gradient(top, $fromColor, $toColor);
}
its not specifying where it is coming from but i believe it has something to do with the .footer-color. Not 100% sure how to fix as i said this is my first attempt at anything using it.
Place your mixin before your .footer-color class and it should work fine
Related
I'm using Scss and came upon something that puzzles me.
Background properties don't carry over into the media queries so I need to rewrite it all and this just seems very repetitive and not DrY at all.
Maybe I'm missing something or overlooking something here
Let's say I have two divs styled the same but different background images.
<div class="section section--dog"><h3>Dog</h3></div>
<div class="section section--cat"><h3>Dog</h3></div>
Now I add my style via SCSS as follow
.section {
padding: 3rem 2rem;
background-position: top center;
background-size:cover;
background-repeat: no-repeat;
&--dog {
background: url(./images/dog.jpg)
}
&--cat {
background: url(./images/cat.jpg)
}
}
Renders CSS:
.section {
padding: 3rem 2rem;
background-position: top center;
background-size:cover;
background-repeat: no-repeat;
}
.section--dog {
background: url(./images/dog.jpg)
}
.section--cat {
background: url(./images/cat.jpg)
}
The result is that the background properties don't carry over even though it's applied to the same div.
Then I tried the extend the background properties in SCSS:
.section {
padding: 3rem 2rem;
background-position: top center;
background-size:cover;
background-repeat: no-repeat;
}
.section--dog {
background: url(../images/dog.jpg);
#extend .section;
}
.section--cat {
background: url(../images/cat.jpg);
#extend .section;
}
Rendered CSS:
.section, .section--dog, .section--cat {
padding: 3rem 2rem;
background-position: top center;
background-size:cover;
background-repeat: no-repeat;
}
.section--dog {
background: url(../images/dog.jpg)
}
.section--cat {
background: url(../images/cat.jpg)
}
The result is that the background properties still don't carry over even though it's applied to each of the specific divs.
I then created a mixin to add in which solved part of the problem, but there was still an issue - The SCSS:
#mixin bg-properties {
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.section {
padding: 3rem 2rem;
}
.section--dog {
background: url(../images/dog.jpg);
#include bg-properties;
}
.section--cat {
background: url(../images/cat.jpg);
#include bg-properties;
}
Rendered CSS:
.section {
padding: 3rem 2rem;
}
.section--dog {
background: url("../images/dog.jpg");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.section--cat {
background: url("../images/cat.jpg");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
This works fine until I add in the Media Query to use a different size image. Then the properties don't carry over again.
SCSS:
#mixin bg-properties {
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.section {
padding: 3rem 2rem;
}
.section--dog {
background: url(../images/mobile/dog.jpg);
#include bg-properties;
#media screen and (min-width:768px) {
background: url(../images/desktop/dog.jpg);
}
}
.section--cat {
background: url(../images/mobile/cat.jpg);
#include bg-properties;
#media screen and (min-width:768px) {
background: url(../images/desktop/cat.jpg);
}
}
Rendered CSS:
.section {
padding: 3rem 2rem;
}
.section--photography {
background: url("../images/mobile/cat.jpg");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
#media screen and (min-width: 768px) {
.section--photography {
background: url("../images/desktop/cat.jpg");
}
}
.section--design {
background: url("../images/mobile/dog.jpg");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
#media screen and (min-width: 768px) {
.section--design {
background: url("../images/desktop/dog.jpg");
}
}
So the above works fine for mobile but once you hit the media query it discards the background properties again. the only resolution was to add the mixin inside the media queries as well. All this is fine but doesn't feel very DRY.
Feedback would be greatly appreciated
I am trying to override a link style in a parent CSS file someplace that is underlining my button text on hover.
I found that by attaching the style I want (text-decoration:none) inline, on the element does the override but I would rather not do that.
Any ideas on how to do this better?
Approve
.nco-approve-btn {
background: #ad0a0a;
background-image: -webkit-linear-gradient(top, #ad0a0a, #de5252);
background-image: -moz-linear-gradient(top, #ad0a0a, #de5252);
background-image: -ms-linear-gradient(top, #ad0a0a, #de5252);
background-image: -o-linear-gradient(top, #ad0a0a, #de5252);
background-image: linear-gradient(to bottom, #ad0a0a, #de5252);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 11px;
padding: 5px 7px 5px 7px;
text-decoration: none;
}
.nco-approve-btn:hover {
background: #8f1313;
background-image: -webkit-linear-gradient(top, #8f1313, #731717);
background-image: -moz-linear-gradient(top, #8f1313, #731717);
background-image: -ms-linear-gradient(top, #8f1313, #731717);
background-image: -o-linear-gradient(top, #8f1313, #731717);
background-image: linear-gradient(to bottom, #8f1313, #731717);
text-decoration: none;
color: #ffffff;
}
.nco-approve-btn:link {text-decoration: none; color: #ffffff;}
.nco-approve-btn:visited {text-decoration: none; color: #ffffff;}
.nco-approve-btn:active {text-decoration: none; color: #ffffff;}
Placing the !important keyword after an attribute will give that attribute precedence.
About CSS order of precedence
There is probably some stronger rule in your stylesheet such as
.parent-class .nco-approve-btn{text-decoration:underline;}
Check in developer tools what is the rule, and then make the one for the link without decoration stronger (by adding extra class). You can use !important, but do that only if you are sure you will never ever ever will need the class to have the decoration.
In PyroCMS, I'm using the session:messages tag to display messages to the user. This is working well, but I'd like to add a close button to each message which requires placing a span within each message. For example:
<div class="alert success">
You have logged in successfully. <span class="close">X</span>
</div>
Each message is wrapped in a div, which is given a class by setting an attribute of the session:messages tag. There is no built-in way to specify the output. How can I override the messages() function in session.php, adding a new attribute to append this close button?
So far I have tried:
Copying system/cms/plugins/session.php to *addons/shared_addons/plugins/session.php* and modifying the messages() function. The core function is used, rather than the new plugin as I had hoped.
Copying the plugin as described above, and then changing it's class to My_Plugin_Session extends Plugin_Session in hopes that its functions would then override the core Plugin_Session class. No luck.
It's not possible to extend certain things that are in the core (e.g. libraries and helpers) - I think this applies to plugins too.
In this case, if I was you (and I may well have to do this for my next project as these closable alerts are typically in Twitter Bootstrap etc.) I'd just edit /system/cms/plugins/session.php directly and add the extra <span> for the close button to the success, notice and error conditionals ('if' statements).
On a typical site I can't think of a situation where you'd ever need some alerts displayed differently to others (other than different colours depending on the outcome of course, which you can do in the CSS using the class name).
Providing you're using Git (you've cloned or forked the official PyroCMS repository and made your own branch) you'll be absolutely fine with future updates - if in a future version the session plugin changes, any changes will just be merged into your code automatically, or if Git can't figure it out, it'll show you the differences and prompt you to fix it by hand.
Note - there are a couple of other solutions for this specific problem based on the admin interface (you may have noticed the flash messages there are closable).
You could create a partial - which can contain PHP, not just Lex tags - e.g. see /system/cms/themes/pyrocms/views/admin/partials/notices.php with something like this (edit as needed and duplicate for notice and error):
<?php if ($this->session->flashdata('success')): ?>
<div class="alert success">
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
PyroCMS admin actually uses liveQuery to append the close button <span> in the browser
Source: /system/cms/modules/wysiwyg/js/wysiwyg.js:
// Add the close link to all alert boxes
$('.alert').livequery(function(){
$(this).prepend('x');
});
I did this and it is working perfect no need other plugin than jQuery.
in the template layout add this:
{{ session:messages success="message success" notice="message info" error="message error" }}
JavaScript:
$(function() {
$('.message').prepend('<a class="baxclose" id="baxclose"></a>');
$('#baxclose').click(function(){
$('.message').fadeOut('slow');
});
});
and the CSS:
a.baxclose{
float:left;
width:30px;
height:30px;
background:transparent url(../img/close-icon.png);
margin-top: -30px;
margin-left: -30px;
cursor:pointer;
}
.message {
padding: 20px 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px;
-moz-box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
zoom: 1;
margin-bottom: 20px;
}
.message h3 {
margin-top: 0;
font-size: 12px;
font-weight: bold;
}
.message p {
margin-bottom: 0;
}
.message.info {
border: 1px solid #cadcea;
background-color: #cdf;
background-image: -o-linear-gradient(top, #eef, #cdf);
background-image: -ms-linear-gradient(top, #eef, #cdf);
background-image: -moz-linear-gradient(top, #eef, #cdf);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eef), to(#cdf));
background-image: -webkit-linear-gradient(top, #eef, #cdf);
background-image: linear-gradient(top, #eef, #cdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEFF', endColorstr='#CCDDFF');
color: #225b86;
text-shadow: 0 1px 1px #fff;
}
.message.error {
border: 1px solid #eeb7ba;
background-color: #fae2e2;
background-image: -o-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -ms-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -moz-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fae2e2), to(#f2cacb));
background-image: -webkit-linear-gradient(top, #fae2e2, #f2cacb);
background-image: linear-gradient(top, #fae2e2, #f2cacb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae2e2', endColorstr='#f2cacb');
color: #be4741;
text-shadow: 0 1px 1px #fff;
}
.message.success {
border: 1px solid #b8c97b;
background-color: #e5edc4;
background-image: -o-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -ms-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -moz-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e5edc4), to(#d9e4ac));
background-image: -webkit-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: linear-gradient(top, #e5edc4, #d9e4ac);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5edc4', endColorstr='#d9e4ac');
color: #3f7227;
text-shadow: 0 1px 1px #fff;
}
Instead of the button you use to remove, another option would be to create a fadeOut message on click event.
HTML:
<div id="msgAlert"> …session:messages goes here...</div>
JS:
<script type="text/javascript">
$('html').click(function() { $('#msgAlert').delay(5000).fadeOut('slow'); });
Having a click will fadeOut the session message after 5sec.
For some reason my CSS Gradient isn't working in Firefox (v10.0.1). The main background for the page is supposed to be a gradient from white at the top down to a blueish colour, but in Firefox instead of a smooth gradient I'm just getting two solid blocks of colour, one white, one blue. In Chrome and Safari (on iPad & iPhone) it works perfectly.
Here is the test url for the page:
http://testing.xenongroupadmin.com/bitesize/login.html
And here is my CSS code:
body { font-family: arial, tahoma, verdana, sans-serif;
background: linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -o-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -moz-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -webkit-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -ms-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.42, #FFFFFF),
color-stop(0.06, #CDEDFA));
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 100%;
min-width:1350px;
}
I've tried searching for an answer but can't seem to find an example which matches my current predicament.
Thanks everyone
try this... its cross browser even works in ie6
.bodyGradient {
position: absolute;
top: 0;
left: 0;
border-top: 3px solid #93ae59;
z-index: -1;
background: -moz-linear-gradient(top, #cfddac, #fff);
background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
}
use "background-image" instead of "background", like this example from http://gradients.glrzad.com/
background-image: -moz-linear-gradient(bottom, #DBA803 13%, #FFCA1D 57%, #FFF338 79%);
write this in your css
background-image: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
Better way to define gradient for all browsers
body {
background: linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
background: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
background: -webkit-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
}
I'm learning about animations/transitions with CSS3, but in this code the transition don't worked... why?
HTML:
<div id="test">
</div>
CSS:
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}
#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
http://jsfiddle.net/LLRfN/
This works for me as it should intended. A couple things, this will only work in google chrome if you want it to work in other browsers:
Here is a generator
Here is an explanation
edit
Sorry I didn't realize there was a transition property in there. After doing some googling and trying some stuff out on my own, it is pretty clear that transitions on background gradients isn't possible... yet.
Here is a good article on how to get it to work with a little bit of a hack
http://nimbupani.com/some-css-transition-hacks.html
its working fine on me. have you wrapped the css file with tag?
<style>
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}
#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
</style>
<div id="test">
</div>
It worked for me, Also I can point you to the CSS3 playground where you can check it on the fly CSS3 Playground
Gradient transition can by done with little bit of "cheating". I am definitely not pro in css stuff (and I am new here so don't hate me fast :D ), but just place to divs on top of each other, one with opacity 1 and second with 0.
(Each div has set different gradients) On hover, change opacity from 1 to 0 and vice versa.
Set timing function and however these divs are placed on each other z-index property do the rest.
(Optimized for Safari) Maybe rookie way, but this works (surprisingly) perfectly:
#divgradient1
{
z-index:-1;
height:100px;
background: -webkit-linear-gradient(90deg, red, blue);
background: -o-linear-gradient(90deg, red, blue);
background: -moz-linear-gradient(90deg, red, blue);
background: linear-gradient(90deg, red, blue);
opacity:1;
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index ;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient1:hover{
z-index:-1;
opacity:0;
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient2:hover{
opacity:1;
z-index:2;
background: -webkit-linear-gradient(-90deg, red, blue);
background: linear-gradient(-90deg, red, blue);
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient2
{
z-index:1;
opacity:0;
height:100px;
background: -webkit-linear-gradient(-90deg, red, blue);
background: linear-gradient(-90deg, red, blue);
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
and whatever-it-should-look-like divs:
<div id="divgradient1" style="position:absolute;width:100px;"></div>
<div id="divgradient2" style="position:absolute;width:100px;"></div>