I'm working on a project for a client that involved using the existing code they have while also transitioning the files into another location. The files being transitioned include images that can't be moved yet, so in an attempt to make the code future proof, I used CSS to define the image src's by embedding them in the "a" tag.
.iconWriting::before { content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png");
}
iconWriting {
width: 32px;
height: 32px;
margin: 1px;
border: none;
float: right;
}
<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>
Unfortunately, the images will only display correctly when the CSS style defining their location is in the Head of the document. I need to be able to house these styles in an External CSS file, but when I move the previously working CSS to the External file, it breaks. Instead of images, I just get the alt text, in all browsers. I tried adding ":before" to the class specification, but this didn't work, either.
Here's a Fiddle of the working code: JS Fiddle
Thanks to #Mr Lister for his help with this; the solution is to target the "a" tag when specifying the image src using the "content" property.
/*Weekly Activity Styles*/
.activityWrapper {
width: 96%;
overflow-x: hidden;"
}
/*Upper Right Icons*/
.iconExpand::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/V2/icon/sm_expand.png");
}
.iconAcademic::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/academic_research_policy.png");
}
.iconWriting::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png");
}
.iconExpand, .iconAcademic, .iconWriting {
width: 32px;
height: 32px;
margin: 1px;
border: none;
float: right;
}
/*Dropbox & Waypoint Icons*/
.iconDropbox {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Dropbox_small.png");
border: none;
}
.iconWaypoint {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/waypoint_smaller.png");
border: none;
}
.iconWaypointLg {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Waypoint_image1.png");
border: none;
}
padding: 15px 20px 5px 15px;
}
}
<div class="activityWrapper">
<div class="subParaDisc">
<a target="_new" href="javascript://;" class="iconLink iconExpand" onclick="this.href=document.location"></a>
<a class="iconAcademic" target="_new" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Academic.htm"></a>
<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>
<h1>
The Icons above only work when the style defining their img content is in the head of the HTML doc.</h1>
</div>
</div>
Reference this Fiddle for the sample: https://jsfiddle.net/1gxmqnjy/21/
Related
i have setup react big calendar on two different pages and have applied some styling on it through external CSS
i have tried using important tag in css but it only fix one page and disturb other
First file CSS
.rbc-timeslot-group {
min-height:120px ;
/* border-left: 1px solid #000000 */
}
Second file CSS
.rbc-timeslot-group {
min-height:20px ;
/* border-left: 1px solid #000000 */
}
i want to achieve different CSS on both pages but end up fixing one and disturbing other
Update
This is how I'd approach things using React/JSX:
class Demo extends React.Component {
render() {
const BigCalendar = ({classes}) => (
<div className={`rbc-timeslot-group ${classes}`}></div>
)
return (
<div>
<BigCalendar />
<BigCalendar classes="second" />
<BigCalendar classes="third" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector("#app"))
And the CSS
.rbc-timeslot-group {
width: 50px;
height: 50px;
background-color: red;
}
.rbc-timeslot-group.second {
background-color: green;
}
.rbc-timeslot-group.third {
background-color: blue;
}
jsFiddle
You need to introduce greater specificity in your CSS. For example, start with a base style that works for the default case and, most importantly, is available to all pages, globally.
.rbc-timeslot-group {
min-height: 120px ;
}
Then, extend from there using another class. This would be declared on another page.
.another-page.rbc-timeslot-group {
min-height: 20px;
}
<div class="rbc-timeslot-group another-page">…</div>
And so on…
.yet-another-page.rbc-timeslot-group {
min-height: 40px;
}
<div class="rbc-timeslot-group yet-another-page">…</div>
Don't know whether its an elegant solution,but was able to resolve my issue by enclosing my component in another div and overriding that div e.g
<div className="first">
<BigCalendar>
</BigCalendar>
</div>
<div className="second">
<BigCalendar>
</BigCalendar>
</div>
in css
I did
.first.rbc-timeslot-group{
min-height:20px !important;
}
.second.rbc-timeslot-group{
min-height:20px !important;
}
Let's say that I have a custom web element called <my-course> with its own style defined in the <style> tag inside the definition and I do not want to alter this element's file at all as it's an external dependency of my project.
This <my-course> element has a <div> child defined in the <template> tag.
Example:
<dom-module id="my-course">
<template>
<style>
::host {
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: red;
}
</style>
<h1>This is my custom course element</h1>
<div id="progress"></div>
</template>
<script>
class MyCourse extends Polymer.Element {
static get is() {
return 'my-course';
}
}
window.customElements.define(MyCourse.is, MyCourse);
</script>
</dom-module>
I want to make the div#progress green with "background: green;" (it's red by default) via an external stylesheet that is loaded in the same page as the custom element is attached/used.
I tried to do:
my-course div#progress {
background: green;
}
But it does not work, the progress div keeps being red. There seems there is no way to style the shadow dom from outside the element itself, I've tried my-course::content div#progress, and has no result (/deep/ and ::shadow are deprecated) I previously achieved this using ::shadow.
Anyone can help? Thanks
You should use CSS variables, such as:
::host {
--progress-background: red;
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: var(--progress-background);
}
And to overrride it:
my-course {
--progress-background: green;
}
More info here: https://www.polymer-project.org/2.0/start/first-element/step-5
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
I want to place two font icons one above the other. So I can use it as:
<span class="icon1-on-icon2" />
Is it possible to define CSS class(es) to achieve this? It's not permitted to use another elements inside a span i.e. something like that:
<span class="stack">
<span class="icon1"/>
<span class="icon2" />
</span>
Sure, why not use :after and :before pseudo-selectors?
CSS
.font-icon {
height: 40px;
width: 20px;
}
.font-icon:after, .font-icon:before {
color: white;
content: '';
display: block;
font-family: 'your-font-icon';
height: 20px;
position: relative;
width: 20px;
}
.font-icon:before {
background: red;
content: 'h';
}
.font-icon:after {
background: blue;
content: 'g';
}
HTML
<span class='font-icon'></span>
Codepen sketch here: http://cdpn.io/lehzr
UPDATE
To place them on top of each other, simply change the position to absolute, put a relative on the container element, and set top and left to 0 for both the after and before.
Example: http://cdpn.io/lehzr
Hope that helps!
I am trying to change jQuery UI dialog's default styles to something similar to this -
I got it to close changing some CSS in jQuery UI.
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
.ui-widget-content {
background: #F9F9F9;
border: 1px solid #90d93f;
color: #222222;
}
.ui-dialog {
left: 0;
outline: 0 none;
padding: 0 !important;
position: absolute;
top: 0;
}
#success {
padding: 0;
margin: 0;
}
.ui-dialog .ui-dialog-content {
background: none repeat scroll 0 0 transparent;
border: 0 none;
overflow: auto;
position: relative;
padding: 0 !important;
}
.ui-widget-header {
background: #b0de78;
border: 0;
color: #fff;
font-weight: normal;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.1em .5em;
position: relative;
font-size: 1em;
}
HTML :
<div id="popup-msg">
<div id="loading">
<h2>Loading...</h2>
<h3>Please wait a few seconds.</h3>
</div>
<div id="success" title="Hurray,">
<p>User table is updated.</p>
</div>
</div>
THIS IS FIDDLE
But when I add this style its apply to all my dialogs. Can anybody tell me how can I avoid from this problem.
Thank you.
See https://jsfiddle.net/qP8DY/24/
You can add a class (such as "success-dialog" in my example) to div#success, either directly in your HTML, or in your JavaScript by adding to the dialogClass option, as I've done.
$('#success').dialog({
height: 50,
width: 350,
modal: true,
resizable: true,
dialogClass: 'no-close success-dialog'
});
Then just add the success-dialog class to your CSS rules as appropriate. To indicate an element with two (or more) classes applied to it, just write them all together, with no spaces in between. For example:
.ui-dialog.success-dialog {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
You can specify a custom class to the top element of the dialog via the option dialogClass
$("#success").dialog({
...
dialogClass:"myClass",
...
});
Then you can target this class in CSS via .myClass.ui-dialog.
The solution only solves part of the problem, it may let you style the container and contents but doesn't let you change the titlebar. I developed a workaround of sorts but adding an id to the dialog div, then using jQuery .prev to change the style of the div which is the previous sibling of the dialog's div. This works because when jQueryUI creates the dialog, your original div becomes a sibling of the new container, but the title div is a the immediately previous sibling to your original div but neither the container not the title div has an id to simplify selecting the div.
HTML
<button id="dialog1" class="btn btn-danger">Warning</button>
<div title="Nothing here, really" id="nonmodal1">
Nothing here
</div>
You can use CSS to style the main section of the dialog but not the title
.custom-ui-widget-header-warning {
background: #EBCCCC;
font-size: 1em;
}
You need some JS to style the title
$(function() {
$("#nonmodal1").dialog({
minWidth: 400,
minHeight: 'auto',
autoOpen: false,
dialogClass: 'custom-ui-widget-header-warning',
position: {
my: 'center',
at: 'left'
}
});
$("#dialog1").click(function() {
if ($("#nonmodal1").dialog("isOpen") === true) {
$("#nonmodal1").dialog("close");
} else {
$("#nonmodal1").dialog("open").prev().css('background','#D9534F');
}
});
});
The example only shows simple styling (background) but you can make it as complex as you wish.
You can see it in action here:
https://codepen.io/chris-hore/pen/OVMPay