How can I make toolbars moveable in e4 application?
I've added DnDAddon to my application model but it doesn't work for toolbars.
Edit: my problem was missing org.eclipse.ui.themes plugin in my product configuration.
Add the tag 'Draggable' to the toolbar in the Application.e4xmi.
Looking at the IBFDragAgent class which deals with tool bar drag, it requires that the trim be an instance of ImageBasedFrame, this is created by the CSS code as long as the trim bar has at least one of the frame-image and handle-image CSS properties set.
Something like:
.MToolControl.TrimStack
{
frame-image: url(./winXPTSFrame.png);
handle-image: url(./winXPHandle.png);
frame-cuts: 5px 1px 5px 16px;
}
I found a solution:
I add to my ToolBar in the Application model file the Draggable tag.
I add in the css file the following:
ToolBar.Draggable {
/*frame-image: url(./winXPTSFrame.png); */
handle-image: url(./winClassicHandle.png);
frame-cuts: 5px 1px 5px 16px;
color: #ededed;
}
I add in my dependencies in the plugin.xml the following package: org.eclipse.platform (when the images are found)
With this the draggable icon appears, you can go to org.eclipse.platform.images and see what Image feets your application.
Hope this helps.
Related
I would appreciate if someone can help me.
I can change the font color of menu by:
style={'color': '#C0C0C0', 'font-family': 'Arial'}
but when I select the option from the menu the font color changes to the BLUE.
I have tried:
style={'font-color': '#C0C0C0'}
and:
style={'font-color': 'black'}
but still when I select the option it appears as BLUE in the menu.
here is the screenshot:
Looking forward for your help.
Thank you.
You will need to modify the CSS directly to change the styling of selected options. If you have never done this before it is straightforward- create an assets folder under the root of your project and create a .css file in that assets directory (name shouldn't matter). Enter the code below (and modify it as you want) and then save it- your Dash app should dynamically reload the .css file when you save it so you can play around with options and see what works.
.Select--multi > .Select-control .Select-value, .Select-placeholder {
border: 1px solid grey;
border-radius: 4px;
background-color: white;
color: #C0C0C0;
}
here is an example running my own dash app:
the default view
with the css
I have read this document https://www.tiny.cloud/docs/advanced/creating-custom-notifications/ but i have not found where i can change the text color, icon color, background color. Currently the background and text are so light that users cannot read anything in the notification box, so i need to make some changes. But i have not been successfull.
First I added this code to my site css. (it is what i see in the console)
.tox .tox-notification--info {
background-color: #d2cbcb; /* off white */
border-color: #000000;
color: #000000;
}
.tox .tox-notification--info p {
color: #000000;
}
.tox .tox-notification--info svg {
fill: #000000;
}
And no effect even after hard cache clear. Then i put that same code in a custom css file and used the tinymce content_css: like so
content_css: 'sbc_custom.css',
if found the file but still no change. I can change the values in the console only. How do i get the css to work? (i am using TinyMCE version 5)
The proper way is to build a custom skin either by building it yourself as outlined in the docs, or use the TinyMCE 5 skin tool. The TinyMCE styles are written in LESS and you basically modify variables to customize the look and feel of TinyMCE. To style the notifications, the following variables are available to you.
If you're using the skin tool, switch to the advanced mode and copy & paste the following into #notification-warn-background-color: red; at the end of the existing variables which should turn the yellow notification red in the preview.
I am building a site in Wordpress this week and I want to place a call to action at the top of the the site, but separate from the main navigation. Wordpress does not seem to offer this out of the box (think Donate button on Unicef site e.g.
I've tried using the Menuizer plugin it can add a button, but it places it at the end of the navigation, so that it is still wrapped up in the hamburger on mobile, I want it to appear as a seperate item like on (for example, unicef.org)
I don't also mind coding it by hand, but I don't really know where/how to do that.
Thanks for any pointers
First, you need to set a new header menu location, in my opinion, you better duplicate from the existing menu you have.
Second, you create a menu item which later you'll be using as CTA button, probably it will pile up the current menu location, or the position maybe not right.
Third, customize it using css to have proper positioning.
This is done directly from the template (If the template was created by you) But, something tells me that you are using a ready-made template then use the custom script
To insert the js code you сan use https://wordpress.org/plugins/insert-headers-and-footers/ plugin or https://ru.wordpress.org/plugins/custom-css-js/
I can't see your html layout to help you with the selector, so try experimenting with this example:
<script>
(function($) {
let selectorOfContainer = '.mybox',
url = '#your-link',
className = 'my-btn',
btnLabel = 'DONATE';
let $mybtn = $('<a/>', {
class: className,
href: url
});
$mybtn.text(btnLabel);
$(selectorOfContainer).append($myBtn); // prepend, after, before
})(jQuery);
</script>
Then use css styles to style your button
<style>
.my-btn {
text-decoration: none;
display: inline-block;
padding: 10px 20px;
border-radius: 3px;
background-color: #FFF;
box-shadow: 0 0 4px rgba(0,0,0,.3);
color: #e25420;
text-transform: uppercase;
font-weight: 700;
}
.my-btn:hover, .my-btn:focus {
background-color: #f0eded;
}
</style>
It would be easier for me if I saw your site
I am using the Cakephp framework and I need help changing the text color of my dialog boxes.
The text and headers are white in the dialog box, but if I disable the dialog box and go directly to the action's view in the browser the text is color is fine. I was wondering if this is something that needs to be edited in layout.css or text.css.
I have no idea what I am doing when it comes to css files.
I'm hoping its just a small change of one line in a css file but I don't know which one.
If this question is too ambiguous or unsolvable, I will delete it.
Thanks for the help
Edit ------------------------
I found out that this is the codefrom layout.css.
tbody td {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 1px solid #BBBBBB;
border-top: 1px solid #BBBBBB;
}
The white colored text is in a table cell,
what should I change to make it black?
You can add your css class or id form /app/webroot/css/styles.css. and check it by firebug. It is applying or not?..
Try looking in /app/webroot/css/cake.generic.css.
You'll want to add the property color to your dialogue box css. (e.g. color: black;)
Use Firebug on Firefox or just right click and chose Inspect Element on Chrome to see in which CSS file properties are defined.
A very simple question. I do not know Apache Tiles.
For a Spring Roo generated web app the views are created using Apache Tiles. The classic layout with the menu on the left is created.
I want to have the menu (menu.jspx) appear on the right hand side of the page instead of the classic left hand side. How do I do this?
I have read the Apache Tiles tutorial on the main web site, however the description there uses jsp and html.
You have the alt theme in Spring Roo default generated User Interface.
It has the menu to the right. Go ahead and customize.
I figured it out.
I had to edit the standard.css file menu items.
I got to thinking that all of the jspx elements are controlled by the css files. Sounds like a no brainer no but I am use to using html tables to do all of the ui work, not css.
So, I found a place http://csscreator.com/node/461 that had some sample code and I modified it for the standard.css menu elements and below is what I pasted in. Its not perfect but it is a place to begin.
#menu {
background-image: none;
position: absolute;
right:0px;
width: 525px;
top: 80px;
height: 15px;
display: inline;
}
#menu ul{
padding: 3px 5px;
border-left: 1px solid #cccccc;
list-style: none;
display: inline;
}
Your best option for moving around the menu is to modify the css as you have described above. However you also have the option of changing where the menu appears in the html source by modifying the page layout file. This can be found under WEB-INF/layouts/default.jspx.
You could then choose to use a table based html layout if that was your preferred option.
I hope this helps
Your other option is to select the "alt" option on the page which will auto-change to the layout you want.
If you then make that the default layout instead