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.
Related
I'm new to SASS and converted a CSS file just to get a base start for my new website. I used this Sublime package, CSS To SASS And Stylus Convert, to convert the CSS to start: https://packagecontrol.io/packages/CSS%20To%20SASS%20And%20Stylus%20Converter
After converting the old CSS to SASS, I fixed most of the issues after converting. But, I continue to get the following error on the last line couple of lines of code:
Error: Invalid CSS after "...ottom: 1.3em; }": expected "}", was ""
I'm unsure of why this error is occurring, looking on different questions or other forums with no solution. Also, I tried changing the filetype to .scss with a different error in the syntax occurring.
Could someone help me figure out why the error is occurring and how to correct this?
Below is the SASS I'm currently trying to run. Any help is greatly appreciated!
html, body
font-family: 'Source Sans Pro', Helvetica, Arial, serif
font-size: 1em
font-weight: 400
line-height: 1.45em
header ul, .mobileMenu
line-height: 6em
margin: 0
padding: 0
.white
#content
padding-top: 120px
header
background-color: #FFF
border-bottom: 1px solid #BBBDBF
#circle
fill: #6095BF
#name
display: none
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter.png')
a[href*="linkedin"]
background-image: url('../images/linkedin.png')
a[href*="pinterest"]
background-image: url('../images/pinterest.png')
#symbol
fill: #F1F1F2
a
color: #6094BE
&.active
color: #000
.mobileMenu
display: inline-block
line-height: 5.65em
position: absolute
right: 20px
h1, h2, h3, h4
font-family: "Ashbury Light"
line-height: 1.2em
margin: 1.414em 0 0.5em
footer
background-color: #6094BE
color: #FFF
padding: 25px 20px 50px 120px
padding: 25px 20px
div
display: inline-block
width: 33%
width: 36%
a
color: #FFF
#pgImg
background-color: #6094BE
color: #FFF
height: 465px
position: relative
h1
left: 120px
position: absolute
top: 250px
left: 0
nav
width: initial
border-bottom: 1px solid #BBBDBF
display: none
margin-right: 0
&.active
display: block
position: static
width: 100%
li
border-top: 1px solid #BBBDBF
display: block
line-height: 3em
text-align: center
a
margin-right: 15px
display: list-item
margin: 0
nav, .socialLinks
display: inline-block
float: right
position: relative
small
font-size: 0.75em
#font-face
font-family: 'Ashbury Light'
src: url('../fonts/2D395B_0_0.eot')
src: url('../fonts/2D395B_0_0.eot?#iefix') format('embedded-opentype'),
url('../fonts/2D395B_0_0.woff') format('woff'),
url('../fonts/2D395B_0_0.ttf') format('truetype')
font-style: normal
font-weight: normal
font-family: 'Source Sans Pro'
src: url('../fonts/SourceSansPro-Regular.eot')
src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/SourceSansPro-Regular.woff') format('woff'),
url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
url('../fonts/SourceSansPro-Regular.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg')
font-style: normal
font-weight: 400
font-family: 'Source Sans Pro Bold'
src: url('../fonts/SourceSansPro-Bold.eot')
src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/SourceSansPro-Bold.woff') format('woff'),
url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
url('../fonts/SourceSansPro-Bold.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg')
font-style: normal
font-weight: 700
.socialLinks
margin-right: 20px
display: none
li
a
background-position: center
background-repeat: no-repeat
height: 25px
display: inline-block
margin-left: 10px
text-indent: -9999px
vertical-align: middle
width: 30px
header a, .mobileMenu
color: #FFF
text-decoration: none
text-transform: uppercase
nav li, .socialLinks li
display: inline-block
list-style-type: none
h1, h2, h3, h4, p
padding: 0 20px
.home
display: list-item
#media screen and (max-width: 660px)
.white #content { padding-top: 91px
a
color: #6095BF
h3
font-size: 1.777em
#content
padding: 0 25px 25px 120px
padding: 0
#media screen and (min-width : 660px)
.mobileMenu, .home { display: none
h4
font-size: 1.333em
h1
font-size: 3.157em
margin-top: 10px
h2
font-size: 2.369em
header
background-color: #6094BE
position: fixed
-webkit-transition: all 1s ease-in-out
-moz-transition: all 1s ease-in-out
-o-transition: all 1s ease-in-out
transition: all 1s ease-in-out
width: 100%
z-index: 5
.logo
height: 100px
margin-left: 20px
vertical-align: middle
width: 300px
height: 90px
width: 250px
#name
path
fill: #F1F1F2
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter-white.png')
a[href*="linkedin"]
background-image: url('../images/linkedin-white.png')
a[href*="pinterest"]
background-image: url('../images/pinterest-white.png')
#circle
fill: #F1F1F2
#symbol
fill: #6095BF
p
margin-bottom: 1.3em
You're error was due to to a couple of bad indentations, and you also have a few stray opening curly braces (SCSS syntax lines 154 and 167) where it should have been a new line (SASS syntax).
For instance:
.mobileMenu, .home { display: none
Should be:
.mobileMenu, .home
display: none
A corrected and compiled file can be seen here:
https://www.sassmeister.com/gist/425717147defa3298e9d01036155cbfc
And corrected source:
html, body
font-family: "Source Sans Pro", Helvetica, Arial, serif
font-size: 1em
font-weight: 400
line-height: 1.45em
header ul, .mobileMenu
line-height: 6em
margin: 0
padding: 0
.white
#content
padding-top: 120px
header
background-color: #FFF
border-bottom: 1px solid #BBBDBF
#circle
fill: #6095BF
#name
display: none
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter.png')
a[href*="linkedin"]
background-image: url('../images/linkedin.png')
a[href*="pinterest"]
background-image: url('../images/pinterest.png')
#symbol
fill: #F1F1F2
a
color: #6094BE
&.active
color: #000
.mobileMenu
display: inline-block
line-height: 5.65em
position: absolute
right: 20px
h1, h2, h3, h4
font-family: "Ashbury Light"
line-height: 1.2em
margin: 1.414em 0 0.5em
footer
background-color: #6094BE
color: #FFF
padding: 25px 20px 50px 120px
padding: 25px 20px
div
display: inline-block
width: 33%
width: 36%
a
color: #FFF
#pgImg
background-color: #6094BE
color: #FFF
height: 465px
position: relative
h1
left: 120px
position: absolute
top: 250px
left: 0
nav
width: initial
border-bottom: 1px solid #BBBDBF
display: none
margin-right: 0
&.active
display: block
position: static
width: 100%
li
border-top: 1px solid #BBBDBF
display: block
line-height: 3em
text-align: center
a
margin-right: 15px
display: list-item
margin: 0
nav, .socialLinks
display: inline-block
float: right
position: relative
small
font-size: 0.75em
#font-face
font-family: 'Ashbury Light'
src: url('../fonts/2D395B_0_0.eot'),
src: url('../fonts/2D395B_0_0.eot?#iefix') format('embedded-opentype')
url('../fonts/2D395B_0_0.woff') format('woff'),
url('../fonts/2D395B_0_0.ttf') format('truetype'),
font-style: normal
font-weight: normal
font-family: 'Source Sans Pro'
src: url('../fonts/SourceSansPro-Regular.eot'),
src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype')
url('../fonts/SourceSansPro-Regular.woff') format('woff'),
url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
url('../fonts/SourceSansPro-Regular.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg'),
font-style: normal
font-weight: 400
font-family: 'Source Sans Pro Bold'
src: url('../fonts/SourceSansPro-Bold.eot'),
src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype')
url('../fonts/SourceSansPro-Bold.woff') format('woff'),
url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
url('../fonts/SourceSansPro-Bold.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg'),
font-style: normal
font-weight: 700
.socialLinks
margin-right: 20px
display: none
li
a
background-position: center
background-repeat: no-repeat
height: 25px
display: inline-block
margin-left: 10px
text-indent: -9999px
vertical-align: middle
width: 30px
header a, .mobileMenu
color: #FFF
text-decoration: none
text-transform: uppercase
nav li, .socialLinks li
display: inline-block
list-style-type: none
h1, h2, h3, h4, p
padding: 0 20px
.home
display: list-item
#media screen and (max-width: 660px)
.white #content
padding-top: 91px
a
color: #6095BF
h3
font-size: 1.777em
#content
padding: 0 25px 25px 120px
padding: 0
#media screen and (min-width : 660px)
.mobileMenu, .home
display: none
h4
font-size: 1.333em
h1
font-size: 3.157em
margin-top: 10px
h2
font-size: 2.369em
header
background-color: #6094BE
position: fixed
-webkit-transition: all 1s ease-in-out
-moz-transition: all 1s ease-in-out
-o-transition: all 1s ease-in-out
transition: all 1s ease-in-out
width: 100%
z-index: 5
.logo
height: 100px
margin-left: 20px
vertical-align: middle
width: 300px
height: 90px
width: 250px
#name
path
fill: #F1F1F2
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter-white.png')
a[href*="linkedin"]
background-image: url('../images/linkedin-white.png')
a[href*="pinterest"]
background-image: url('../images/pinterest-white.png')
#circle
fill: #F1F1F2
#symbol
fill: #6095BF
p
margin-bottom: 1.3em
If I put my extension in menu bar, after closing extension some CSS properties doesn't work. (In the add-on toolbar it works perfectly)
Video: http://www.youtube.com/watch?v=iM9EVFe8M4U
github: https://github.com/Exclumice/firex/tree/master/content
CSS: https://github.com/Exclumice/firex/blob/master/skin/overlay.css
CSS properties which become inoperable:
.proxy-help {
background: url("icon-help.png");
background-position: 97% 50%;
background-repeat: no-repeat;
background-color: #e5e5e5;
border-radius: 10px;
padding: 5px;
text-align: center;
width: 100%;
}
.proxy-help-text > label {
width: 80%;
}
.proxy-list hbox > label.proxy-country {
padding: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: url("planet.png");
background-position: 5px center;
background-repeat: no-repeat;
width: 180px;
text-indent: 25px;
}
.proxy-list .proxy-type {
padding: 5px;
width: 50px;
}
How to fix it? Why is this happening?
Thanks in advance.
Ok after testing we find this.
When it is in toolbar, the elements are black in DOM Inspector, so they are NOT anonymous:
But when we move them to PanelUI-popup they become anonymous, notice how they are red in the inspector:
maybe #nmaier can advise here.
I'm thinking a box loses its box'ness so then the % widths you used are taking the % of osme different box once placed in panelui-poup.
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.
I just can't figure this out. The links below work absolutely fine in every browser except IE8. If you click on the elements in IE8, the button disappears. If you click again where it was it reappears. But no amount of clicking will actually lead you to the href location. Can anybody explain to me why that might be? I've exhausted all of my thoughts and it still doesn't work. Many thanks for all your thoughts!
The html...
<div style="padding:0px 0px 30px 0px; clear: both;">
<div style="width: 50%; display: block; float: left;">
Learn More
</div>
<div style="width: 50%; display: block; float: left;">
Get Started
</div>
</div>
...and the stylesheet...
.big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (
startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}
.big_button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
background-color: #378de5;
}
.big_button:active {
position: relative;
top: 1px;
}
Its because of the 'filter:' part in your css, remove it, then it will work...
I just figured it out. IE8 seems to have a problem with :active in css. So the following section of the stylesheet was causing issues:
.big_button:active {
position: relative;
top: 1px;
}
Current fix is to exclude the ':active' part of the css for the button as it's not essential. If anybody has any further information on why IE8 has issues with :active, I'd be interested to know about it.
Is there a way to make an outer glow in Firefox using a CSS :focus rule? (similar to what Chrome already has)
You could add a -moz-box-shadow (or just box-shadow if you are only interested in Firefox 4 and later) for your :focus rule. You can add glow of various degrees using that.
You can do the same thing like this:
HTML:
<button id="a">click</button>
CSS:
button{
background:#f7f7f7;padding: 0 .5em;
height: 2.0833em;
border: 1px solid #CCC;
color: black;
background: #F6F6F6;
background-image: -moz-linear-gradient(top,white,#EFEFEF);
background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#EFEFEF));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=white,endColorStr=#EFEFEF);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
overflow: visible;}
button:hover{
box-shadow:0 0px 3px #999;
-webkit-box-shadow:0 0px 3px #999;
-moz-box-shadow:0 0px 3px #999;
}
Check on jsfiddle: http://jsfiddle.net/naveed_ahmad/LZGq6/
This can be done by multiple shadows:
CSS
color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
see example 5.5:
http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/