I need to change those blu button color but I'm not able to find the correct selector (in my application I've got a site.css file that has all the custom css rules)
I've also search on the telerik's online reference for the kendoui scheduler but with no luck
Anyone can help me please?
Thanks in advance
You can use the following selectors:
Views:
.k-scheduler-views .k-link { // For all the views
background: blue;
}
.k-view-day .k-link { // For day view only
background: blue;
}
.k-view-week .k-link { // For week view only
background: blue;
}
.k-view-month .k-link { // month-view-only
background: blue;
}
Date navigation:
.k-scheduler-navigation .k-link { // For all date navigation controls, including arrows, "Today" and the date picker
background: blue;
}
.k-nav-today .k-link { // For the "Today" button only
background: blue;
}
.k-nav-prev .k-link { // For the previous arrow only
background: blue;
}
.k-nav-next .k-link { // For the next arrow only
background: blue;
}
.k-nav-current .k-link { // For the date picker only
background: blue;
}
Note that you can find all of these selectors in the "Elements" tab of the Dev Tools of any browser.
Check out the snippet below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<style>
.k-scheduler-navigation .k-link {
background: blue;
}
.k-nav-today .k-link {
background: green;
}
.k-nav-prev .k-link {
background: red;
}
.k-nav-next .k-link {
background: yellow;
}
.k-nav-current .k-link {
background: cyan;
}
.k-scheduler-views .k-link {
background: blue;
}
.k-view-day .k-link {
background: green;
}
.k-view-week .k-link {
background: red;
}
.k-view-month .k-link {
background: yellow;
}
</style>
</head>
<body>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
views: ["day", "week", "month", "agenda"],
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
},
{
id: 2,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Meeting"
}
]
});
</script>
</body>
</html>
Related
I'm documenting my API created using Spring Boot 2.4.3 using springfox-swagger 3.0.0. So I have the below page now.
My client wants to change the Swagger UI logo to their own. I'm not able to do so. I have searched and found few solutions and it is not working.
Added the below custom code under /resource/static/swaggercustm.css. But no changes.
.swagger-ui img {
content: url('/static/css/mylogo.png');
width: 140px;
height: 40px;
}
Imported swagger-ui.css to local and triede modifying image path. But this also didn't help.
Can somebody please help me here to just modify the logo? How to override the logo properties?
Unfortunately, There is no Configuration available in Springfox library to Customise UI elements CSS and Icons.
If you want your own customised Swagger Page then create a static HTML page and disable usage of auto-generated swagger page from Springfox.
Since its HTML, you can change ICONS and the look of it however you want.
resources/static/new_swagger.html
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui.css" >
<link rel="icon" type="image/png" href="./swagger-favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./swagger-favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
.top-nav-bar{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
overflow: hidden;
background: #333;
padding: 15px;
}
.nav-bar-icon{
margin-top: 1px;
float: left;
display: block;
text-decoration: none;
}
.nav-bar-title{
float: left;
display: block;
text-decoration: none;
margin-top: 7px;
margin-left: 10px;
font-size: 18px;
color: #ffffff;
font-family: sans-serif;
}
.nav-bar-select{
width: 30%;
float: right;
font-family: sans-serif;
display: inline-block;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border-radius: 2px;
border: none;
background: #fafafa;
color: #3b4151;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select.classic {
background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
background-size: 5px 5px, 5px 5px, 3.5em 3.5em;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="top-nav-bar">
<a class="nav-bar-icon"><img src="swagger-favicon-32x32.png"></a>
<a class="nav-bar-title"><b>X name</b></a>
<select class="classic nav-bar-select" id="service-selector" onchange="changeSwaggerUI()">
<option value="./swagger.json">X service</option>
</select>
</div>
<div style="margin-top: 100px" id="swagger-ui"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-bundle.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-standalone-preset.js"> </script>
<script>
function changeSwaggerUI(){
let selected_service_swaggerURL = document.getElementById("service-selector").value;
loadUI(selected_service_swaggerURL);
}
function loadUI(swaggerJsonURL){
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: swaggerJsonURL,
validatorUrl: "",
dom_id: '#swagger-ui',
deepLinking: true,
docExpansion: 'none',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
CustomTopbarPlugin
],
layout: "StandaloneLayout"
});
// End Swagger UI call region
window.ui = ui
}
function CustomTopbarPlugin() {
// this plugin overrides the Topbar component to return nothing
return {
components: {
Topbar: () => null
}
}
}
window.onload = function() {
loadUI("./swagger.json");
}
</script>
</body>
</html>
I´m rendering my chat using this:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"] {
background-color: black;
}
div[role="log"] {
background: gainsboro;
}
div[role="status"] {
background: darkgray;
}
#webchat {
position: fixed;
height: calc(100% - 135px);
z-index: 9999;
width: 400px;
top: 132px;
overflow: hidden;
border-color: red;
border-style: dotted;
visibility:visible;
}
</style>
</head>
<body>
<div>
<div id="heading">
<div id="heading">
<h1><img src="mylogo.png"> mychat</h1>
</div>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
openchat();
function openchat() {
const styleOptions = {
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
botAvatarInitials: '',
userAvatarInitials: 'You',
bubbleBackground: 'rgba(0, 255, 50, .4)',
bubbleFromUserBackground: 'rgba(125, 125, 125, .3)',
botAvatarImage: 'mylogo.png'
};
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: '*'
}),
styleOptions
},
document.getElementById('webchat')
);
}
</script>
</body>
</html>
It works fine, but now I need to publish this chat in the webpage of the company, as a popup or something like that, so using the previous script is OK but I have not options to add a title to the popup and also I need to add a minimize button. How I can set title and minimize button to my webchat inside a main page?
Tx,
I think your best bet going forward is to use the samples provided by the webchat team.
The minimizable webchat sample is a good example.
I have the cropWidth, cropHeight and the start co-ordinates of the image from which I need to crop.
How should I crop an <amp-img> using these information ?
For example, if the dimensions of the image is 10 X 10, and suppose cropwidth is 2 and cropheight is 3 and the start location is 3,5. This means I want the part of the image described by the rectangle with (3,5) as the top-left point and (5,8) as the top-right point.
The following is what I have tried and it is not working properly:
HTML code
<div style="width:400px;height:200px;position: relative;">
<amp-img class="cropped2" width="2px" height="1px" layout="responsive" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
CSS code:
.cropped2 {
width: 100px; /* width of container */
height: 100px; /* height of container */
object-fit: cover;
object-position: 20% 10px;
border: 5px solid black;
}
Can someone tell why this is not working and give a working solution for the same?
Next time, try inserting the working code so that it can be run. Look at my example.
Like your code: I'm not sure if the option with layout= "responsive" and object-fit: cover is a good idea. Look at my example, I hope it will help you.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
.wrapper {
margin: 15px;
position: relative;
}
.wrapper_one {
height: 100px;
width: 100px;
}
.wrapper_two {
height: 150px;
width: 300px;
}
.cropped2 img {
object-position: 20% 10px;
border: 5px solid black;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<div class="wrapper wrapper_one">
<amp-img class="cropped2" layout="fill" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
<div class="wrapper wrapper_two">
<amp-img class="cropped2" layout="fill" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
</body>
</html>
Codepen: https://codepen.io/alexandr-kazakov/pen/ZEQxqKE
Also check out the examples on the official website:
https://amp.dev/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/?format=websites
at the moment i get in touch with laravel. i tried to create a page who scan qr codes.
i created a normal project with laravel (composer create-project laravel/laravel testqrinstascan) and tried to implement step by step instascan.
I wanna use this library instascan -> https://github.com/schmich/instascan
But i get everytime the error "Laden fehlgeschlagen für das mit der Quelle "http://localhost:8000/instascan.min.js"."
but the file is in the same directory
It means loading script with source .... not possible -> https://imgur.com/a/SKang
This is my welcome.blade.php------------------------------------------------------------------------
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<script type="text/javascript" src="instascan.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="links">
<video id="preview"></video>
Hello World
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
</div>
</div>
</div>
</body>
I'm using a Nivo Slider in a website that uses Ajax to load its content. It saves the user from loading new pages every time they click on a link.
My problem is that when I load the home page initially, the slider works fine; but if I navigate away from that page then back to it, it just has the loading gif on a loop. Can anyone help?
My index.php is this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I.C.T - St. Patrick's Academy, Lisburn</title>
<script type="text/javascript" src="assets/js/jqmin.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all" />
<script type="text/javascript" src="assets/js/js.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/nivo.css" media="all" />
<script type="text/javascript" src="assets/js/sliderpack.js"></script>
<script type="text/javascript" src="assets/js/slide.js"></script>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Learn</li>
</ul>
</div>
<img src="assets/images/logo.png" alt="logo" />
</div>
<div id="screen">
<div id="pad"></div>
<div id="cont_wrap">
<div id="cont">
<h2>Home</h2>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="assets/images/slide1.jpg" alt="1" />
<img src="assets/images/slide2.jpg" alt="2" />
<img src="assets/images/slide3.jpg" alt="3" />
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<p align="center"><i>Copyright 2013 - Finbar Maginn - St. Patrick's Academy, Lisburn</i></p>
</div>
</div>
</body>
</html>
(Note that my Nivo Slider initialization is inside slide.js and looks like this:)
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 16, // For slice animations
boxCols: 6, // For box animations
boxRows: 3, // For box animations
animSpeed: 1000, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
The Ajax jQuery file I'm using is this:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#links li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-3)){
var toLoad = hash+'.php #cont';
$('#cont').load(toLoad)
}
});
$('#links li a').click(function(){
var toLoad = $(this).attr('href')+' #cont';
$('#cont').fadeOut('fast',loadContent);
$('#load').remove();
$('#wrap').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('#cont').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#cont').fadeIn('fast',hideLoader('fast'));
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
And here is my CSS:
body {
font-size:95%;
font-family:georgia;
line-height:1.576;
}
h2 {
padding:0;
margin:0;
}
#wrap {
margin:0 auto;
width:784px;
}
#head {
width:100%;
height:175px;
}
#links {
width:300px;
height:30px;
padding:140px 0 0 0;
float:right;
text-align:right;
}
#links ul {
margin:0;
padding:0;
}
#links ul li {
display:inline;
margin:0 -2px 0 -2px;
}
#links ul li a {
font-size:1em;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
-o-transition: 0.1s;
text-decoration:none;
color:black;
background:-webkit-linear-gradient(bottom, white, #74b998);
background:-o-linear-gradient(bottom, white, #74b998);
background:-ms-linear-gradient(bottom, white, #74b998);
background:-moz-linear-gradient(bottom, white, #74b998);
padding:3px 5px 3px 5px;
}
#links ul li a:hover {
background:-webkit-linear-gradient(top, white, #74b998);
background:-o-linear-gradient(top, white, #74b998);
background:-ms-linear-gradient(top, white, #74b998);
background:-moz-linear-gradient(top, white, #74b998);
padding:7px 5px 7px 5px;
}
.left {
border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-ms-border-bottom-left-radius:10px;
-o-border-bottom-left-radius:10px;
border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-ms-border-top-left-radius:10px;
-o-border-top-left-radius:10px;
}
.right {
border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-ms-border-bottom-right-radius:10px;
-o-border-bottom-right-radius:10px;
border-top-right-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-top-right-radius:10px;
-ms-border-top-right-radius:10px;
-o-border-top-right-radius:10px;
}
.radius {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
}
#screen {
width:100%;
height:480px;
background-image:url(../images/bckgrnd.png);
}
#pad {
width:100%;
height:29px;
}
#cont_wrap {
overflow:auto;
margin:0 auto;
width:724px;
height:335px;
padding: 0 0 0 6px;
}
#load {
display: none;
position: absolute;
top: 150px;
left: 950px;
text-indent: -9999em;
width: 16px;
height: 16px;
background: url(../images/load.gif) no-repeat;
}
#cont {
}
#foot {
width: 100%;
font-size:90%;
color:gray;
}
#slider {
margin: 0 auto;
width: 700px;
height: 273px;
}
.nivoSlider {
position: relative;
background: url(../images/load.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.nivoSlider a {
border: 0;
display: block;
}