I've tried to replace the styles of link on my site, and it seems like the font face is replaced successfully, but it's not taking in the color and text-decoration. Here is my script:
<script type="text/javascript">var archermed = {src: 'archermed.swf'}; sIFR.activate(archermed);sIFR.replace(archermed, {selector: '.CollectionTopTabHdr',css: '.sIFR-root {font-size:14px; color:#663399; text-decoration; font-weight:normal; margin:0;} a, a:link, a:visited, a:active {color:#663399; text-decoration:none;}',wmode: 'transparent'});</script>
here is my HTML code:
<div class="CollectionTopTabHdr">LINK</div>
Thanks in advance!
18fis
I found out from another question that I need to separate out the link states in css, so here is what I did, and it works now!:
sIFR.replace(archerbold, {selector: '.sifrHeader',css: ['.sIFR-root { font-size:14px; color: #663399;}','a { text-decoration: none; color: #663399; }','a:link { color: #663399; }','a:hover { color: #663399; }','a:active {color:#663399;}'],offsetTop: -1, tuneHeight: 0,wmode: 'transparent', forceSingleLine: true});
Related
I am using Highcharts 6.0.1 in styled mode and trying to set a custom color for a specific point and the correspondent halo.
I need to be able to dynamically append a class name to some of the points in the series. These points need to be displayed in a different color, thus overriding the default series colors (.highcharts-color-i).
I managed to override the color of a specific the point, as the point object accepts an optional className which can then be used to style the color of the slice in the pie chart.
The css rule for the halo though, is set to inherit the color of the correspondent .highcharts-color-i and since it is not a child element of the point it cannot inherit the custom class name.
Here is a code snippet. You can see that when hovering over the grey slice, the halo is using the default color.
Highcharts.chart('container', {
title: {
text: 'Pie point CSS'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
series: [{
type: 'pie',
keys: ['name', 'y', 'className'],
data: [
['Point1', 29.9,],
['Point2', 14.5],
['Point3', 11.5],
['Point4', 54.5, 'custom-style'],
],
}]
});
#import 'https://code.highcharts.com/css/highcharts.css';
#container {
height: 400px;
max-width: 800px;
min-width: 320px;
margin: 0 auto;
}
.highcharts-tooltip {
stroke: gray;
}
.highcharts-pie-series .highcharts-point {
stroke: #EDE;
stroke-width: 2px;
}
.highcharts-pie-series .highcharts-data-label-connector {
stroke: silver;
stroke-dasharray: 2, 2;
stroke-width: 2px;
}
.highcharts-pie-series .highcharts-point.custom-style,
.highcharts-pie-series .highcharts-data-label-connector.custom-style {
stroke: lightgray;
stroke-dasharray: white;
stroke-width: 1px;
fill:lightgray;
}
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<div id="container"></div>
Halo is a property of a series (not a point - only one halo can exist per series). In DOM tree it's on the same level as the rest of the points.
You can use point's mouseOver event for setting the color of the halo:
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var point = this,
className = point.className;
if (className) {
point.series.halo.attr({
class: 'highcharts-halo custom-style'
});
}
}
}
}
}
}
.highcharts-halo.custom-style selector is used for styling via CSS.
Live demo: http://jsfiddle.net/kkulig/fv0zen7L/
API reference:
https://api.highcharts.com/highcharts/plotOptions.pie.events.mouseOver
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I am using jquery dialog with query ui 1.8.7.custom.min.js
I need to customize the buttons on the the dialog and the location where they show up on the dialog. I was able for the most part to customize my dialog box but customizing buttons and its location had been tough cookie so far.
Please find screen shots and code below
HTML:
<style>
.ui-dialog, .ui-dialog-content {
border:1px solid #cde68c;
border-bottom:0px;
background-color: white !important;
color: #333;
font: 12px/180% Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
display:none;
}
#ui-dialog-title-dialog {
color: yellow !important;
text-shadow: none;
}
.ui-dialog-buttonpane {
border:1px solid #cde68c;
border-top:0px;
margin-bottom: 1%;
}
</style>
<div id="dialog">
<p><span id="emailNotice"></span></p>
</div>
Javascript:
$j(document).ready(function() {
$j('#dialog').dialog('open');
$j('#emailNotice').html('show some notice text abcd');
$j('#dialog').dialog({
modal:true,
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$j(this).dialog("close");
},
"Cancel": function() {
className: 'cancelButtonClass',
$j(this).dialog("close");
}
}
});
});
I want to be able to position buttons left , right , top / bottom etc
You can always pass an empty object for the buttons property. You would then add your buttons directly in your "dialog" div. Of course, this would mean you'd have to handle the button click events manually.
Rough example:
<div id="dialog">
<p><span id="emailNotice"></span></p>
<button id="myButton">Submit</button>
</div>
Javascript:
$j('#dialog').dialog({
modal:true,
autoOpen: false,
width: 600,
buttons: {}
}
});
<!-- language: lang-js -->
buttons: [
{
text: "Delete that",
className: 'deleteButtonClass',
click: function() {
alert('foobar');
}
}
Find in jquery-ui-1.10.0.custom.css the class bellow and remove float: right;
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
Tested in jquery-ui-1.10.0.custom.css not in jquery-ui-1.8.7.custom.css
I'm trying ckeditor, but I can't set the toolbar location to the bottom (by default it is set to the top).
I read the documentation, and I wrote this snipet in config.js file:
CKEDITOR.editorConfig = function( config )
{
config.toolbarLocation = 'bottom';
}
In config.js I have defined a toolbar and config.toolbarLocation = 'bottom' then I call ckeditor in this mode:
CKEDITOR.replace('editor', { toolbar : 'Full' });
Did I foget something else? It doesn't work. I see only textarea without toolbar (the toolbar at the top disappears).
Can you help me, please?
I guess it is priority to be covered. Try this:
CKEDITOR.replace('editor', { toolbar : 'Full', toolbarLocation : 'bottom' });
In Ckeditor 4 they have option to move toolbar to bottom but not in Ckeditor 5.
Check configuration table here
So, I did the CSS tweak.
Add a parent class to parent div of Ckeditor element and then add these:
1. Using flex-direction to flip order of toolbar and editing area:
.ck.ck-reset.ck-editor {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
2. Assign less height to Toolbar and more to edit area:
.ck.ck-editor__main>.ck-editor__editable {
height: 200px;
}
.ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar,
.ck-sticky-panel__content {
height: 54px;
}
2. Remove shadow and outline when focusing on edit area (optional, only if you want):
.ck-focused, .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
border: none;
border: none;
outline: none !important;
-moz-outline: none !important;
-webkit-outline: none !important;
-ms-outline: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none
}
try this code :
CKEDITOR.replace('editor1', {
/*
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
*/
// extraPlugins: 'htmlwriter',
toolbarLocation: 'bottom',
height: 200,
width: '100%',
toolbar: [
['Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['TextColor']
]});
use this :
.ck.ck-editor {
display: flex;
flex-direction: column-reverse;
}
I am trying to use font replacement for my links, but have no idea how to do it.
My test site is http://www.internetlinked.com/test/ how do I setup sifr-config.js so that the links on the left have their fonts replaced. I go it to work using
sIFR.replace(decade, {
selector: 'li',
css: '.sIFR-root { background-color: #1A171B; }'
});
But then I lost all the hover affects and borders
using
sIFR.replace(decade, {
selector: 'a',
css: '.sIFR-root { background-color: #1A171B; }'
});
results in the replacement but the links don't work
I am using sIFR 3
Your first approach is correct. You can style the link by adding rules to the sIFR CSS:
sIFR.replace(decade, { selector: 'li', css: '.sIFR-root { background-color: #1A171B; } a { color: #FF9900; a:hover { color: #FF0000; }' });
Borders and such would be trickier, since Flash doesn't natively support these. Looking at your design, I would not recommend using sIFR for the links in the sidebar.
I am building a site right now using the new siFR3 it works perfectly on FF & Chrome but not on IE7 to view click here
Try fixing the errors: Here and see if that helps.
Making sure your site is W3C compliant can be a major help in fixing troublesome quirks.
Make sure there is no trailing comma before a closing brace in the config. These are illegal in IE's JavaScript engine.
ok I found out what was the problem all it was watch my old code that doesn't work in IE:
sIFR.replace(officinaWhite, {
selector: '#boxes h1', wmode: 'transparent',
css: '.sIFR-root { color:#ffffff; }',
});
sIFR.replace(officina, {
selector: '#content h2, #rightCol2 h2, #rightCol h2', wmode: 'transparent',
css: '.sIFR-root { color:#000000; }',
});
and this is the code that fixed it:
sIFR.replace(officinaWhite, {
selector: '#boxes h1', wmode: 'transparent',
css: ['.sIFR-root { color:#ffffff; }']
});
sIFR.replace(officina, {
selector: '#content h2, #rightCol2 h2, #rightCol h2', wmode: 'transparent',
css: ['.sIFR-root { color:#000000; }']
});
it is only missing the parenthesis under the css:['.sIFR-root { color:#000000; }'] no commmas in the end.