I am working with sitefinity 3.7. I have added some custom classes to the Apply Class drop down menu in the radeditor.
The problem is that they appear in firefox, the drop down gets populated and you can apply them to elements. However in Chrome and Safari they do not show up, in fact when viewing the source, they are not in there. As if sitefinity did not parsed it out.
One thing I noticed is that you had to add the style of the text(as it would appear in the drop down) in a file EditorCssFile.css with out that it would not show up in the list. The css is 100% valid and super basic.
Ex
.test {
font-size: 14px;
color: #000;
}
Where test is a class I have added to the classes collection
<classes>
<class name="test" value=".test" />
</classes>
I have also made sure it is in the drop down toolbar as well
<tools name="DropdownToolbar" dockable="false">
...
<tool name="ApplyClass" />
...
</tools>
Has anyone run into this at all? I seem to be at a lose for why it would show up in everything other than webkit.
EDIT:
I just want to point on that the css file that is used to display the items in the list does load, there is no errors.
Thanks
So I figured it out. It was camel case.
I had some classes like .headerImg in my EditorCssFile.css and they seemed to be the problem, again only in webkit browsers.
Still really doesn't make much sense. But now it is fixed.
Related
I've got a rather weird scenario going on here. I am trying to add tooltips to an existing ASP.Net MVC application in which I'm upgrading Bootstrap to 4.6.2. The upgrade was very smooth with no complications; I just want to replace the default display of titles with the nicer looking tooltips, but for some reason they're not appearing. I tried to simplify things by creating a new view to isolate the problem, and still no tooltip. I tried again with completely new solution, and wouldn't you know it, it works! So my question isn't "how do I create tooltips", but "how can I debug what's going on in the failing project?"
Here's what I've discovered so far. I believe you can see everything that's relevant in this screenshot of the nearly-empty view. All the included script files are there in the right order, my script is there, initializing the tooltip, and there are no messages in the console. When I hover over the link, a new <div> element is added to the DOM. In DevTools, I use the arrows to expand the tree, showing everything in the tooltip. The .fade:not(.show) CSS selector is the reason I don't see it. In the working solution, the show class is properly added to the tooltip's <div>.
So, could there be some setting in the existing application preventing the addition of the show class? Is something failing in the tooltip code,causing it to never add the show class without reporting errors? How should I continue debugging this? I tried stepping through the bootstap.js file, but being a JS noob, I'm getting a little lost. The screenshot is from Chrome, but I see the same behavior in Firefox.
This turned out to be one of those embarrassing oversights. My BundleConfig.cs file was still pointing to old Javascript files that were still hanging around after the upgrade. I should have seen it in the version numbers in the <script> tags.
When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.
Proposition:
G'day, I have a question for the collective dart wisdom-trust. I made an observation while trying to resolve a mysterious error with Dart and Dart-Polymer (see: related).
The thing I came across relates to dart-polymer (and dart-polymer) Element code-reuse; during my investigation of the aforementioned bug, I created two cloned dart-polymer elements:
<x-fred> and
<z-fred>
Both are clones of the Stopwatch element in the dart-polymer example.
Define a Custom Element tutorial.
The only change from the original is element name(s).
What occurs to me, is that to be able to code-reuse a nice 'stock element' such as a stopwatch I minimally need a distinct fred.html for each Element I code-reuse.
That presupposes that I can organise my project such that this is convenient and simple to maintain.
Question(s):
The real question is about how-can a developer do the following things ... ?
code-reuse an Element layout definition without needing to make a clone (or copy).
Is there a dart-polymer pattern to (at least) allow a project to code-reuse the base dart code for cloned dart-polymer elements?
Is there a way to code-reuse an Element definition, using a declarative or "what-not-how" pattern so that I can say:
<z-fred> is-a stopwatch-element (for example).
Are there patterns or recipes to let you be-a stopwatch-element and configure and/or customise an instance to certain styling, parameters, or behaviours.
If not, then these things need to be set-down for discussion. Where does that happen for dart and [dart:polymer]? Is there an comp.lang.dart? :-)
Example:
Assume I have a Polymer element called <z-fred>. And I want to subclass the z-fred element to produce a new (daughter) element definition: <x-fred>
How can I do this?
I'd expect to be able to do something like ...
<!DOCTYPE html>
<polymer-element name="x-fred">
<link rel="import" href="elements/zfred/fred.html">
<template>
<style>
:host { /* override zfred defiitions */
background-color: blue;
text-align: center;
display: inline-block;
border: solid 1px;
padding: 10px 10px 10px 10px;
}
</style>
<div>
<x-fred>
<h1>X-Fred: {{counter}} </h1>
<p>Fred X is a count-down timer. Fred Z is a normal stopwatch (count-up).</p>
<override>
<button on-click="{{stop}}" id="stopXFredButton">Stop</button>
</override>
</x-fred>
<div>
<p>this is a count-down timer. Remaining time at end: {{ counter }} </p>
</div>
</div>
</template>
<script type="application/dart" src="xfred.dart"> </script>
</polymer-element>
See? My example won't work because what's required here is that XFred.polymer inherits from ZFred.polymer.
That said, there is nothing I've seen to bind .html plus .dart into a 'element module' of some ilk. In my small way I wanted to do that by putting each widget in its own folder. For this to work (and there will be better mechanics), the daughter needs to be able to override parent Public and Protected attributes (not private).
I was thinking that xfred.dart would implicitly inherit zfred.dart (since lexically) both Dart files are unrelated to the Polymer element. At this juncture there are product design questions to be explored. Options like:
HTML files have independent inheritance tree to the .Dart files.
That means that zfred and xfred might use (share) the same underlying implementation, per various examples.
Alternately, one could 'invoke' a suitable .Dart implementation of a defined interface.
A blended 'widget' element made up of .html and .dart code specifications.
In a real user interface, I may want to combine a variety of base UI elements into different kinds of sub-elements to make-up a page, form or layout. I think life remains less messy following concept #1. That satisfies another requirement for me, to do with being able to manage alternate code-behind behaviour for the same element.
At the end of the day. The main question I'm asking is how much is part of the framework and how much is manual hack work to ensure things stay happy? :-)
You can inherit from existing polymer elements.
Polymer.dart Extending DOM elements
Seth Ladds dart-polymer-dart-examples
For discussions the best place are the Dart Google groups
https://groups.google.com/a/dartlang.org/forum/#!forum/misc
https://groups.google.com/a/dartlang.org/forum/#!forum/web
https://groups.google.com/a/dartlang.org/forum/#!forum/vm-dev
https://groups.google.com/a/dartlang.org/forum/#!forum/compiler-dev
https://groups.google.com/a/dartlang.org/forum/#!forum/editor
I think the title of my question accurately describes what I think I want to know.
I would like to be able to emulate/reproduce the exact scrolling functionality of this site https://dotvita.com/.
It seems the background is fixed but only scrolls to a point. Or, more clearly, it scrolls simultaneously with the rest of the content but only to a point. When I looked at the html source, here is what I saw:
<body>
<div id="background"></div>
<body>
and the CSS for the background is:
#background {
position: fixed;
top: -458px;
}
Can you guys tell me what is going on here? Does the above code produce what we see on that site or is there something else going on?
Thanks!
There is indeed something else going on in the background. It looks like they are using Jquery and perhaps a custom script to produce this effect.
For many browsers, you can inspect individual elements or the entire site and see what files are being used. In Google Chrome, you can do this by pressing CTRL+SHIFT+I and clicking the "Resources" tab. Here you can use the file tree on the left to go into Frames > [website name] > Scripts and see the various script files loaded up.
Here is the file that appears to be causing this cool effect:
https://dotvita.com/php/min/?f=js/core/jquery.retina.js,js/core/jquery.resize.js,js/core/jquery.equalHeights.js,libs/qtip/js/jquery.qtip.js,libs/colorbox/js/jquery.colorbox.js,js/plugins.js,js/script.js
In order for this to work, the site needs to have Jquery installed, which is this file:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
This has been an effect I've been meaning to recreate myself for a while now. Good luck!
based on the custom-player-examples im building my own player.
i used the minimal-player template.
after i set up the player like i want it to be, i started to customize the design (color.css, structure.css, standard,css)
but now i am stuck badly..
i found out that i cant change the background-color of the waveforms unless i use a webkit or the waveform.js.
the webkit should do just fine for me...
my only problem is,
i dont know how to acess the track.waveform_url in neither my index.html or *.css files.
i know its inside waveform-container div but i need the url
.wavekit{
-webkit-mask-box-image: url(**IN HERE!!!**);
background: #81D8D0;
height: 280px;
width: 100%;
bottom: 0px;
position: fixed;
}
inside my stylesheet..
sadly i cant provide a link because its only on my hard drive yet
can somebody please help me out here?
thank you verymuch
Well, this is very hacky, but after a couple of attempts I haven't found a better way to get waveform URL.
Idea is that for first play there is an event of 'ajaxSuccess' that is firing and for the next ones there is 'scPlayer:onAudioReady' event. The point being that image’s DOM is being generated by the plugin only at some point, so we need a certain “hook” like an event to know for sure the image will be already present in DOM.
$(document).bind('ajaxSuccess scPlayer:onAudioReady', function () {
// get image from DOM of player
// it will be re-set every next play
console.log($('.sc-waveform-container > img').attr('src'));
$('.wavekit').style({
'-webkit-mask-box-image': $('.sc-waveform-container > img').attr('src')
});
});
Here's working example http://jsbin.com/uhofom/2/edit (only tested in Chrome)
Custom player project is outdated and will probably not get much attention. Its current state is not very extendable from the JavaScript point of view.
My suggestion would be to use something like Audio5JS or SoundManager2 to play music and to have custom HTML and CSS UI. To get actual sounds or sets data you could query our HTTP API or use SoundCloud JavaScript SDK. Then you'd have proper object with all data including waveform API and would control the process much better.