iam writing a simple firefox toolbar, but i have failed to set a few list style images with css. Please help.
//
katimbatoolbar.css
(found in chrome/skin) folder
#katimbatoolbarstart
{
list-style-image :url("chrome://katimbatoolbar/skin/button-1.png");
}
katimbatoolbar.xul (my user interface file, found in "chrome/content/" folder)
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://katimbatoolbar/skin/tuttoolbar.css" type="text/css"?>
<overlay id="katimbatoolbaroverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://katimbatoolbar/content/katimbatoolbar.js" />
<toolbox id="navigator-toolbox">
<toolbar id="katimbatoolbar" toolbarname="katimba suite" accesskey="k"
class="chromeclass-toolbar" context="toolbar-context-menu"
hidden="false" persist="hidden">
<toolbarbutton id="katimbatoolbarstart" tooltiptext="start surfing using katimba ++"
label="Start" oncommand="katimbaClass.installLocalHost()"/>
</toolbar>
</toolbox>
</overlay>
Here is my chrome.manifest file
content katimbatoolbar chrome/content/
overlay chrome://browser/content/browser.xul chrome://katimbatoolbar/content/katimbatoolbar.xul
skin katimbatoolbar classic/1.0 chrome/skin/
The toolbar works fine, but really looks ugly since the css is not working. Any help appreciated in advance.
By the way, Here is my folder structure
mytoolbar/
install.rdf
chrome.manifest
chrome/
content/
katimbatoolbar.xul
katimbatoolbar.js
skin/
katimbatoolbar.css
button-1.png
In your XUL file you reference chrome://katimbatoolbar/skin/tuttoolbar.css while the file in your folder structure is called katimbatoolbar.css. Plus, you define
content katimbatoolbar chrome/content/
but the folder structure starts with mytoolbar.
Related
i have a TabbedPage with multiple Child-Pages, with a title each.
When the title is short enough to be single line the text gets centered perfectly, but as soon as the text needs more than 1 line it is no longer centered.
Can anyone tell me how to fix this?
I think it's impossible to do in common way for all platforms, and you have to do it in platform specific way.
For android project I did it in such way:
In file Styles.xml from folder Resources/values I added style
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme"
parent="#android:style/Theme.Holo">
<item name="android:actionBarTabTextStyle">#style/CustomTab</item>
</style>
<style name="CustomTab"
parent="#android:style/Widget.Holo.ActionBar.TabText">
<item name="android:gravity">center</item>
</style>
</resources>
And in MainActivity.cs I added
[Activity(Theme = "#style/CustomTheme")]
For Windows phone I found this article https://nocture.dk/2014/12/10/xamarin-forms-customizing-tabbed-page-header-title-windows-phone/, but didn't try it.
For iOS i didn't check too http://jfarrell.net/2015/02/25/customizing-the-tab-bar-on-ios-with-xamarin-forms/.
I got the Salesforce Design System pilot from this morning's Webinar. I uploaded the package (as 'sds.zip') as a static resource. I'm calling the CSS (immediately after '' in the .cmp file) with:
<link href='/resource/sds/index.scss' rel="stylesheet"/>
However when I attempt to save I get the error:
Failed to save undefined: No COMPONENT named markup://use found : [markup://c:contactList]: Source
I think the 'use' error is a refrence to this code block, which is later in the .cmp file:
<svg aria-hidden="true" class="icon icon--large icon-standard-user">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user" />
</svg>
I assume I'm importing the CSS incorrectly, what's the right way to do it?
You are importing the CSS correctly. That's the way to do it from inside a Lightning Component. From inside a Visualforce page you do <apex:stylesheet value="{!URLFOR($Resource.sds, '/resource/sds/index.css')}" />.
The problem is not the CSS import but VF not understanding the use and svg tags inside the component. For Visualforce to properly parse the tags you need to declare the namespace by adding the line <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">, with its matching closing tag at the end. This works fine if you just put it in VF, and you are using the svg tag in VF.
However, if you are putting the svg tag inside a Lightning Component, you need to create a separate svg component for it, as described in this tutorial.
I'm trying to put an icon in a KMZ file so the user can view a thumbnail when they click on the pinpoint. I have the following code - It's working, but isn't showing the icon/thumbnail. I've looked at the Google Developers and can't see a difference. Just need a second pair of eyes to view it.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Evidence File</name>
<description>SAMSUNG - GT-I9000
2012:10:25 17:36:57
2797 KB
Height: 2448 Pixels
Width: 3264 Pixels
C:\Users\Steve\Desktop\FYP Cases\M2510\IMG_20121025_163656.jpg</description>
<IconStyle><scale>1.1</scale><Icon><href>C:\Users\Steve\Desktop\FYP Cases\M2510\IMG_20121025_163656.jpg</href></Icon></IconStyle>
<Point>
<coordinates>-2.6172222222222223,51.43</coordinates>
</Point>
</Placemark>
</kml>
You have an absolute reference to the file in your KML file (C:\Users\Steve...). If image is inside your KMZ then you should reference the relative file location instead. Also, the file path C:... is not a valid URL which should be of the form http:// or file:// if using an absolute URL.
Let's assume the KMZ file has two entries (in this order):
doc.kml
IMG_20121025_163656.jpg
The IconStyle within the doc.kml should be rewritten like this:
<IconStyle>
<scale>1.1</scale>
<Icon>
<href>IMG_20121025_163656.jpg</href>
</Icon>
</IconStyle>
I have my own toolbar with toolbox and toolbarpalette.
I have followed this https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand
and background image for toolbar is not displaying, what can be wrong?
Cannot found any debug message in Error console
Note that Image #logoimage is displaying correctly
XUL
<toolbox id="navigator-toolbox" class="nav-box" crop="end">
<toolbarpalette id="BrowserToolbarPalette">
<image id="logoimage"/>
<toolbarbutton type="menu" label="&toolbar.quicklinks.label;" id="quicklinks">
<menupopup>
<menuitem class="menuitem-iconic" label="&toolbar.quicklinks.quicklink1;" image="chrome://tbar/skin/icon.png"/>
</menupopup>
</toolbarbutton>
</toolbarpalette>
<toolbar id="test-toolbar"
class="nav-bar"
mode="full"
iconsize="small"
customizable="true"
context="toolbar-context-menu"
toolbarname="Toolbar"
crop="end"
defaultset="logoimage,toolbarseparator,quicklinks">
</toolbar>
</toolbox>
CSS
toolbar.nav-bar {
background-image: url("chrome://tbar/skin/tbg.png");
}
#logoimage {
list-style-image: url("chrome://tbar/skin/logo.png");
}
As nobody could help, I asked in mozilla.dev.tech.xul Google group, and got an answer
Try adding "-moz-appearance: none;" to your CSS stanza. This turns off
OS-defined theming.
And that thing simply worked ! It also removes all OS specific look and feel effects
see: https://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/a4cd4452a72b9151#
Given that there are no issues in the code you show here I only see one explanation: the background image is being set to a different value elsewhere, maybe in some built-in CSS file. You can check the CSS rules applying to a particular UI element using DOM Inspector.
Does your toolbar have a height and width? I can't remember if they're block by default, but it might not be showing because it has no dimensions?
What is the correct/recommended way of including remote CSS style sheet in OpenSocial gadget module XML?
I hope we CAN use remote CSS (to enable client caching etc), so that we can get rid of inline styling...
Should a link tag be included in the CDATA section of the html typed Content tag below, or what are your suggestions?
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My App title">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="url" view="mobile" href="somemobileplace" />
<Content type="html">
<![CDATA[
<div>some html content</div>
]]>
</Content>
</Module>
I got a reply that it's ok to include things like remote js script files, style sheets in the body section.
I also read in an Open Social book that these things actually get moved into the header section once displayed by the container.