I want to add a logo to a keystone project or if logo is not possible, just a simple text. I was able to add the logo only during the login process. I suppose the best place to add the logo is the navigation bar but its not a must.
I tried to changed the home logo <span class="octicon octicon-home"></span> with my logo but was not able to found where.
I tried to add img(src='/images/logo.png', width='160') to templates/layouts/default.pub but I got an error img is a self closing element: <img/> but contains nested content. It's also wrote There is no .container wrapping class around body blocks to allow more flexibility in design
I tried to add an iFrame using javascript and tried to put some html code on it. This also didn't worked.
I also tried to set a label or singular to one page but this is not what I need
Do you have any idea?
Firstly you can find the default logo in:
\node_modules\keystone\admin\public\images\logo.png
After replace the PNG image, the login screen will reflect the updated logo.
Next for Admin UI, you can check:
\node_modules\keystone\admin\client\App\components\Navigation\Primary\index.js
Line 77:
return (
<PrimaryNavItem
className={className}
label="octicon-home"
title={'Dashboard - ' + brand}
to={Keystone.adminPath}
>
<span className="octicon octicon-home" />
</PrimaryNavItem>
Replace the span with:
return (
<PrimaryNavItem
className={className}
label="octicon-home"
title={'Dashboard - ' + brand}
to={Keystone.adminPath}
>
<img src="/keystone/images/logo.png" width="20" height="20"/>
</PrimaryNavItem>
Finally in public page, edit (if you are using PUG):
\templates\layouts\default.pug
Line 54:
a.navbar-brand(href='/')
img(src='/keystone/images/logo.png' width='20' height='20')
Related
I have added magnific popup gallery in my web page, everything works great. Just I want to know, is there any possibility add bullets in popup gallery below image in .mfp-bottom-bar.
The gallery example on Magnific's demo/homepage shows at least one way to achieve this, by feeding some markup into the return value of a function in the titleSrc option in the image option of the popup. In that example (from the page's source):
$('.popup-gallery').magnificPopup({
...
image: {
...
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}
}
});
The above case appends a <small> element to the current link's title attribute value/text, but you could presumably return some other <ul><li>...</li></ul> markup, or use jQuery to grab some existing <ul> in the markup (if relative to the current item, then presumably using item.el to help locate it).
I am using a dialog from Vue Material (https://vuematerial.io/components/dialog). If I follow the link and open the first custom dialog on the page, it moves to the top left of my screen, and I can only see a portion of the dialog. The same happens with the dialogs that I have in my Vue app, and no CSS seems to bring it to the center of my screen. I am trying to show an interactive map in a dialog. Is there any way to keep my Vue dialog in the center of the browser window so I could actually see all of it and use it?
My dialog has the following markup:
<md-dialog :md-active.sync="showDialog">
<md-dialog-title>Map</md-dialog-title>
<interactivemap :lat="lat" :lon="lon" />
<md-dialog-actions>
<md-button class="md-primary" #click="showDialog = false">Close</md-button>
</md-dialog-actions>
</md-dialog>
It works the same in my browser: both at the docs and code sandbox.
When it's off the screen, the inner div (with the class .md-dialog > .md-dialog-container) has transform: translate(-50%,-50%) scale(1);, pushing it off.
Edit: yea, every dialog box has this CSS bug. Try overriding it and/or notify the devs.
.md-dialog-container {
transform: translate(0%,0%) scale(1) !important;
}
Modified the answer given by https://stackoverflow.com/users/13602136/zed, and my dialogue now sits nicely in the centre of my screen
In elementUI the default background-color is white ; when choosing the them:dark , it is black, but how can I customise the bg-color by myself?
I have tried to add the style property at the el-menu tag , but it didn't work
<el-menu style="{background-color: rgb(36,36,36)!important}"
I try to find the source code of the css file of el-menu tag and I try to change some setting relating to background-color, don't work either
the menu component just like
somebody told me I can code like this
<el-menu style="{backgroundColor: yello}.." but it didn't work
The class for that particular element is not modifiable, have a look:
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse
}"
So your choices are:
Wrap it in a custom <div class="my-specific-selector and target it with .my-specific-selector .el-menu
Override the CSS for the dark theme
Copy + paste contents of component into your own file, adjust accordingly, use that instead.
you can try put background color directly like this
<el-menu
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
style="height: 61px;"
></el-menu>
I'm trying to display an image on mouseover of another image. I'm using dijit/Tooltip for that. Problem is, the image is not displaying on the first mouseover, it always appears on the second time onwards. The images are dynamically displayed and have given a dynamic id.
<c:forEach items="${model.images}" var="image" varStatus="status">
<img src="${image.url}" height="50" onmouseover="showImage('${image.id}')" id="image${image.id}" />
<c:forEach>
<script>
function showImage(name) {
require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: ["image"+name],
label: "<img src='/images/"+name+"'/>"
});
});
};
</script>
With dijit/Tooltip there is no need for an onmouseover function. With your code the first mouseover only sets up the Tooltip. The second time the Tooltip is attached and so it is displayed (and showImage() runs again, which isn't optimal).
You need to create the Tooltip when the image is added to the dom. You can refer to the dijit/Tooltip guide for an example on how to set up a Tooltip declaratively. Alternatively you can convert your code to add the images and their tooltips programmatically.
I’ve added an image tag in ListView in itemTpl as follows:
<img src='/maxtouch/images/close.png' alt='close' id='imgFavClose' class='close-favlist' />
Now I want to remove the css class 'close-favlist' from image on button tap event. To remove the css class I’ve written following line of code:
var favList = Ext.getCmp('favList'),
imgClose = favList.down('#imgFavClose');
imgClose.removeCls('close-favlist');
Here favList is id of ListView.
But it does not work. Plz let me know what correct way to perform this task.
Any help is appreciated!!
You can try this:
Ext.select('#imgFavClose').removeCls('close-favlist');
Check the docs on select