What I want is to create a simple circle with raphaeljs that will have the facebook's 'f' inside (this will also be used for other similar cases). The 'f' symbol will be produced by font-awesome.
What I have done (and did not work) is to set the font family using css and/or as a raphael attribute.
The code is the following:
HTML
<div id='share-facebook'></div>
CSS
#share-facebook {
font-family: FontAwesome;
}
Javascript
var canvas = Raphael('share-facebook', 100, 100);
var facebookWrapper = canvas.circle(50,50,50);
facebookWrapper.attr('fill', '#E3E3E3');
facebookWrapper.attr('stroke','none');
var facebookText = canvas.text(50,50,'');
facebookText.attr('font-size', 40);
facebookText.attr('fill', '#fff');
facebookText.attr('font-family','FontAwesome');
Here is also a fiddle to make your life easier. From what I have seen the issue is that raphaels places the character inside a tspan inside the text node and it cannot be decoded. Anyone has an idea how to overcome this issue?
use canvas.text(50,50,'\uf09a'); instead of canvas.text(50,50,''); and it works
Not really the answer you expect, but you can use Raphael free icons (http://raphaeljs.com/icons/) instead of FontAwesome. Each icon is a Raphael path you can then do:
paper.path(<icon path here>).attr({fill: "#000", stroke: "none"});
then I guess you can apply any transform, scaling, positionning as with any other path.
I did a little update on your fiddle to demonstrate http://jsfiddle.net/K6rrf/1/. I did not remove your code just added the 2 last lines...
Hope this helps a bit
Cheers
Related
For my purposes, the font size and spacing of the individual items in MudSelect and MudList don't work for me. Unfortunately, my attempts to change these parameters with styles were unsuccessful. That is, the components don't respond to the "font-size:" setting in the style.
<MudListItem Style="font-size: 10px">#context.Name</MudListItem>
How can I do this?
Try this:
<MudListItem Style="--mud-typography-body1-size: 10px;">#context.Name</MudListItem>
https://try.mudblazor.com/snippet/cOwQOZnYeaGHumVm
First time poster; long time admirer of the Stack Overflow angels.
I'm having an issue with colors in span text that are controlled by Pango.
Long Version:
I'm updating an old UI program which has C++ code guts with GTK, XML (written by Glade), and an RC stylesheet handling the graphics. Some of our colored markup text is hard-coded in the XML. Some of it is dynamically set in the C++ code.
The problem is, that when the program runs on our older systems, the color referenced by span text as 'green' shows up as #00FF00. On our newer systems, 'green' is showing up as #008000.
Example of code printing to a label widget:
gtk_label_set_markup((GtkLabel *) TitleBarLabel, "<span color='green'>Orbital Cannon Positioning</span>");
I'm fairly certain that Pango is in control of the span text markup. I found that the difference between the greens is exactly the difference between X11 and W3C color lists (https://en.wikipedia.org/wiki/X11_color_names#Clashes_between_web_and_X11_colors).
It seems that our old systems are using X11 and our new ones are using W3C, which makes sense.
I could just replace all instances of 'green' with '#00FF00' but if we wanted to change the colors in the future, we'd have to go through the whole thing again. I'd much rather have the colors changeable through a stylesheet instead of baked into the code.
C++ Code:
GtkWidget * TitleBarLabel;
TitleBarLabel = GTK_WIDGET (get_builder_object (builder, "TitleBarLabel"));
gtk_label_set_markup((GtkLabel *) TitleBarLabel, "<span color='#00FF00'>Death Ray Power Status</span>");
I can create a GdkColor at run-time and gdk_color_parse it with values from a config file, and then use gtk_widget_modify_text() to apply the color to the label widgets. But then that doesn't work for all of the hard-coded span text in the XML. Also, we have pleanty of labels with bits of text colored differently inside the same line.
C++ Code:
GdkColor pass_color;
gdk_color_parse("#00FF00", &pass_color);
gtk_widget_modify_text(TitleBarLabel, GTK_STATE_NORMAL, &pass_color);
I can make a style in my RC file for each color and link every single label that would use that color at run-time. But we'd have to remove all markup coloring and add lots of code for grabbing widgets that we never bothered with before and code for setting names of widgets instead of just printing to them with new span text. It gets the desired result of having the colors changeable in a stylesheet but it's a massive undertaking and it's not intuitive for our veteran engineers who are used to using the color attributes.
RC File:
style "pass_color"
{
fg[NORMAL] = #00FF00
}
widget "*TitleBarLabel_Pass" style "pass_color"
C++ Code:
gtk_widget_set_name(TitleBarLabel, "TitleBarLabel_Pass");
Short Version:
Ideally, I would like to be able to make a new color at run-time that we can link with span text in such faction:
<span color='MyNewColor'>Weather Manipulation Settings</span>
Or maybe even create a new tag that applies specific attributes, like:
<span><MyNewColor>Shark Tank pH Balance</MyNewColor></span>
But I doubt that's possible.
I tried playing around with pango_attr_type_register(), pango_attr_foreground_new(), and friends, but I couldn't figure out how attributes work of if they could even do what I thought they did. After much research, it looks like an 'attribute' is just a one-time setting on a single string of text. And not a new value that can be called in line with span text, as I hoped.
Is anything like this remotely possible without rebuilding all of Pango?
Is there a different work around that would get me a stylesheet like setup?
At this point, I'm open to suggestions.
Version Specs:
Computers showing green as #00FF00
OS: Linux Slackware 13.37 and below
GTK: 2.24.4
Pango: 1.28.4
Computers showing green as #008000
OS: Linux Slackware 14.1
GTK: 2.24.20
Pango: 1.34.1
If you are able to use GTK 3.x, I would suggest doing that, where this is much easier to do using CSS. There is even a way to use multiple CSS styles for different regions in the same label, though it is awkward.
In GTK 2, as you noted, you can reference widgets by their name property in your RC file:
widget "shark-tank-ph-label" style "green-text"
style "green-text" {
text[NORMAL] = #008000
}
I would recommend taking this approach even if it's not what you're used to. Refactoring once to remove the hardcoded colors from your labels will make it much easier the next time you have to change something like this, and will also make your code closer to how things would work in GTK 3.x should you decide to make a port in the future.
I have this::
FB::DOM::ElementPtr _element=m_host->getDOMWindow()->getDocument()->getBody()->getElementById("plugin0");
I got the element(i.e. object tag of the plugin that i wanted) by ID. It's compiling. I now want to SET its property from the JSAPI side...like border color style and width....
I went through this page . I could find only 1 method "setInnerHtml"...which sets something. What should i pass in its argument...?it has std::string type...so that I can manipulate the plugin's document. Any ideas...
Basically I want to set the attribute of a tag from PluginAPI side.....
Honestly? You'd be much better off putting the plugin in a div at 100%x100% and then managing the border of the div. For something like this I'd probably just use:
m_host->evaluateJavascript("document.getElementById('pluginCont').style.border = '1px solid black';");
That'll be the easiest. You could also look at the DOM abstraction code and add some tools for managing CSS; note that on IE you may need to use special activex methods to do this, which is why I dont' recommend just doing it through getDOMElement() (which is a shorthand, btw, for the long code you have in your example)
I am new working with KendoUI and need to modify the default backcolor for selected item on k-listview (currently orange), however I have not been able to find out where is it and the css is hard to read since they use no space or carrier return on file.
Any ideas are welcome!
This is the sample code
.k-calendar .k-state-selected { background: blue; }
from the SO answer
You shouldnt use calendar, but element you need
I am currently trying to understand a bit more about how Orchard handles Lists of Custom Content Types and I have run into a bit of an issue.
I created a Content Type named Story, which has the following parts:
Body
Common
Containable
Route
I created a list that holds these items, and all I am attempting to do is style them in such a way:
Story Title
Story Description (Basically a truncated version of the body?)
However, I cannot seem to figure out how to do the following:
Get the Title to actually appear (Currently all that appears is the body and a more link)
Remove the "more" link (and change this to be the actual Title)
I have looked into changing the Placement.info, and have looked all over in an attempt to find where the "more" link is added in each of the items. Any help would be greatly appreciated.
I finally managed to figure it out - Thanks to the Designer Tools Module, which made it very simple to go look into what was going on behind the scenes during Page Generation.
Basically - all that was necessary to accomplish this was to make some minor changes to the Parts.Common.Body.Summary.cshtml file. (found via ../Core/Common/Views/)
Which initially resembles the following:
#{
[~.ContentItem] contentItem = Model.ContentPart.ContentItem;
string bodyHtml = Model.Html.ToString();
var body = new HtmlString(Html.Excerpt(bodyHtml, 200).ToString()
.Replace(Environment.NewLine,"</p>"+Environment.NewLine+"<p>"));
}
<p>#body #Html.ItemDisplayLink(T("more").ToString(), contentItem)</p>
however by making a few changes (by using the Designer Tools) I change it into the following:
#{
[~.ContentItem] contentItem = Model.ContentPart.ContentItem;
string bodyHtml = Model.Html.ToString();
string title = Model.ContentPart.ContentItem.RoutePart.Title;
string summary = Html.Excerpt(bodyHtml, 100) + "...";
}
<div class='story'>
<p>
#Html.ItemDisplayLink(title, contentItem)
</p>
<summary>
#summary
</summary>
</div>
Although it could easily be shortened a bit - It does make the styling quite a big easier to handle. Anyways - I hope this helps :)
Alternately you can use the placement.info file in your theme assign different fields to your Summary and Detail views. It's much simplier.
http://orchardproject.net/docs/Understanding-placement-info.ashx
But, I used the same method you did till I discovered the .info file as well. It works and gives you a good understanding of how the system works, but the placement.info file seems easier.
Also, you probably don't want to be editing the view files in Core. I think your meant to override views in your theme directory.