I'm using the "Progress circle" widget (version 2.0.0) in Mendix Studio Pro 9.2.0, and I would like to individually change the color(s) of each one of my progress circles, primarily the part that is shown in blue by default. By looking into Chrome DevTools, I found that the attribute stroke might be storing the color, but I'm not sure. Adding stroke: red in the Appearance > Common > Style form didn't work. On the other hand, adding background: red did have the intended effect of changing the background of the progress circle.
Can anyone help? I'm quite new to Mendix, so any help from you would be greatly appreciated.
By going into the documentation i found the source code of the widget.
Check this link: https://github.com/mendixlabs/progress-circle/tree/master/src/ui
In the ui folder there is a theme.scss and _variables.scss in which the developer defines the variables which drive the colors or theme of the widget. You could take some hints from there.
I am not suggesting to rebuild the widget but you can certainly do so by downloading the widget (.mpk gets downloaded) and then change the extension to .zip then change the source code.
Or since you can already inspect the DOM of the widget you can do: give a class to the widgets root DOM element. and then using cascading CSS selectors you can drill down to the element which affects background.
Related
I have just upgraded to CKEditor 4.4.5 from 3.5, and notice quite a few changes !! One of the changes is the new skin called Moono which looks great. However it did get me wondering whether it would be possible to change the black in the menu icons to a custom colour, for branding reasons for example. We do this in the rest of the web application using a combination of Server code and CSS.
Many thanks.
Toolbar icons in Moono are images, so if you want to change them, you'd need to create a new skin or use an alternative one from the CKEditor Addons Repository.
However, since Moono is a monochromatic skin, maybe for branding purposes it would be enough for you to use the so-called "chameleon feature" that lets you change the UI color with a simple configuration option?
If so, just use config.uiColor to provide a mataching RGB color value or an HTML color name, as in:
config.uiColor = '#AADC6E';
See a working example here: http://sdk.ckeditor.com/samples/uicolor.html
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I am working with the Kendo UI beta (v. 2013.1.226) and I found that there are some glitches when you change the font size of a combobox.
The drpodown arrow doesn't seem right - it is a bit up while it shouold perfectly position itself in the center of the dropdown button.
To illistrate - I am attaching a screenshot.
Anyone know if there's a way to fix this?
I am thinking of somehow change the x and y position of the background to be relative.
Any help will be appreciated.
Update: Not quite sure if it's only me but found another problem changing the font size, the list seems to overlap the input field as shown in the second image:
I am using IE 9. Anyone have those problems or is it just me?
As far as I know Kendo shouldn't be interfering with other styles on the page (the styles start with k- prefix) so I am wondering if the issues only occur for me or are common.
The KendoUI Combobox is made up of multiple components and has its own styling for all the parts including the arrow. The arrow is actually two nested spans in the version I am using (2013.1.514).
I changed my textbox heights and got different alignment problems:
I would not expect the supplied KendoUI CSS to survive a font-size change as they are tweaked to look good at its own default font size. Your best bet is to use Chrome's F12 tools to determine what CSS styles are affected and tweak the Kendo styles (or your overrides) to match your requirements.
The ckeditor editor window for the site content areas has a blue background to match the website so that the client sees a true representation of the website while adding content.
When "show blocks" is selected the blocks border displayed is barely visible on the blue background.
Therefore, where can the colour of the show blocks border be changed to a darker colour?
Unfortunately, color of border displayed for blocks isn't customizable. CSS that styles them is generated by JS. You can find it here http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/showblocks/plugin.js#L28
I guess that you're using compiled version of CKEditor, so source is minified. You'll have to open ckeditor.js file and find this fragment and change it manually.
Or you can try to clone CKEditor 4 (new version that will be release next Tuesday), change this value here https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/showblocks/plugin.js#L48 and then compile your build of CKEditor (you can find instructions here https://github.com/ckeditor/ckeditor-dev). But to do this you'd need Mac or Linux, because build script is written in Bash.
CKEDITOR.replace( 'textarea_id', {
uiColor: '#14B8C4'
});
Update :-
Check the sample url:ckeditor
It's not possible to set transparent background for WebBrowser of WP7. To make impression of transparent background I want to do the following workaround. I want:
To find a position and size of WebBrowser on the page.
To get page's background image.
Crop it with values what I found on step 1.
To save result in IsolatedStorage
To parse HTML and place <body background="RESULTBACKGROUND">
MyWebBrowser.NavigateToString(NewHtmlString);
I think this should be a workaround of transparent background and should work.
For now I am trying just to place any .jpg image (let's say test.jpg) on step 5.
But fail. I have "Build Action" property of file set to "Content". It is placed in the root of the project. And <body background="test.jpg"> not working. Back of the WebBrowser is still white.
What I am doing wrong?
UPD:
Step 5 is solved.
2Claus: No! Not only from web. I saved both html file and image file to IsolatedStorage and WebBrowser can show image as a backgroud.
Now the problem is that background cannot be fixed. I tried many differrent things with styles. I also tried to add a fixed div behind my text. Nothing works. The picture is always scrolling with a text. I tried to add onscroll event and pass it scrolled value to move the div in an opposite direction, but div is glued to the page :(
Any ideas?
So assuming you're talking about the WebBrowser control, you're forgetting that the HTML only can refer to urls on the world wide web.
So either you need to host your background images on a website, or you need to inject a CSS style that sets the background to either white or black (the two default background-colours of the platform).
For WebBrowser, You don't actually have to save it to the ISO to make changes on the page. You can load it navigate to it normally, and then use InvokeScript to make the changes via custom JS code. It can be a little tricky though, as you will probably need to heavily rely on the eval and stringization. The problem mentioned by Claus is still there - but you need to do some experiments. With the Mango release and SDK 7.1+, the platform support IsoltatedStorage imagesources in the form of is://path/file - maybe - maybe - maybe squared - the webbrowser's renderer udnerstands them too - then setting your bkg's url to such would work. I doubt though, as it could be seen as some minor security breach, etc
I now bumped into the same background fixed image problem. For someone wandering here I solved it placing content into a fixed-height container (div) therefore the container contents is being scrolled and not the html page, leaving background picture "fixed".
body
{
background-image:url('...');
background-position:-20px -150px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div
{
height:300px;
overflow:scroll;
}
Of course background-position and div height is set specifically for a WebBrowser position in page and it's size.