I hope someone can help a numpty :)
I am using Boostrap 5 and this Lightbox library https://trvswgnr.github.io/bs5-lightbox/
It uses data-toggle="lightbox" to initiate it and is working perfectly.
<a href="http://fpoimg.com/200x200?text=Forth" data-toggle="lightbox" data-gallery="gallery" >
<img src="http://fpoimg.com/200x200?text=Forth"></a>
I would like to apply some css styling eg. lightbox background-color, padding etc but I have no idea where to start.
I used to use the ekko-lightbox for BS4 which had its own CSS but I can't find one for this.
As I can see, bs5-lightbox library doesn't have it's own stylings, and using BS5 markups and stylings.
So you can apply BS5 stylings and HTML you want.
You can start by browsing .lightbox-carousel (CSS class selector) on your page and create custom styling.
Based on this class you can customize it's child nodes.
img {
width: 200px;
}
/* this is how you can add stylings to wrapper, f.e. */
.lightbox-carousel.carousel {
padding: 1rem;
background: #ffffff7a;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="module">
import * as Lightbox from 'https://cdn.jsdelivr.net/npm/bs5-lightbox#1.7.8/dist/index.bundle.min.js';
document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show();
}));
</script>
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid my-lightbox-toggle">
</a>
Related
I have Single-File Components and I want to use it in different places like subscribe page and footer.
But I want to style to be different.
Is it possible to style local components?
Component file: Newsletter.vue
<template>
<form>
<label>Enter your email address here</label>
<input type="text" name="email" required/>
</form>
<button #click="subscribe" >
SUBSCRIBE
</button>
</template>
Subscribe page: Subscribe.vue
let say style Newsletter background-color green and align to left
<template>
<h2>
Subscribe to receive Newsletter
</h2>
<Newsletter></Newsletter>
</template>
<script>
import Newsletter from "#/components/Newsletter.vue";
export default {
components: {
Newsletter
}
}
</script>
<style scoped>
Newsletter{
background-color: green;
text-align:left;
}
</style>
Subscribe page: Footer.vue
but in Footer, I want to style Newsletter background-color red and align center
<template>
<h2>
JOIN OUR NEWSLETTER
</h2>
<Newsletter></Newsletter>
</template>
<script scoped>
import Newsletter from "#/components/Newsletter.vue";
export default {
components: {
Newsletter
}
}
</script>
<style>
Newsletter{
background-color: red;
text-align:center;
}
</style>
This is possible! All you have to do is add the scoped attribute to the style tag.
Here is the snippet from the docs just for reference here:
<template>
<button class="btn btn-close">X</button>
</template>
<style scoped>
.btn-close {
background-color: red;
}
</style>
This will only apply the styles locally, to the component which contains the style tag. Keep in mind though, you really should avoid using tag selectors because they are the most generic. It's a better practice to use a class selector because it has a higher specificity, meaning it is less likely to be over-written (id selectors or inline styles take precedence). I would suggest doing something like this:
<template>
<h2>
Subscribe to receive Newsletter
</h2>
<Newsletter class="newsletter"></Newsletter>
</template>
<script>
import Newsletter from "#/components/Newsletter.vue";
export default {
components: {
Newsletter
}
}
</script>
<style scoped>
.newsletter {
background-color: green;
text-align:left;
}
</style>
In the example above, the newsletter class will make the background-color green only in this single-file component.
There are many options. You may benefit from using the ::v-deep combinator which allows leaking the style to the child components.
Using your example with a small change:
<template>
<h2>
Subscribe to receive Newsletter
</h2>
<Newsletter class="newsletter"></Newsletter>
</template>
<script>
import Newsletter from "#/components/Newsletter.vue";
export default {
components: {
Newsletter
}
}
</script>
<!-- this is the change. Updated to have `::v-deep` to allow style to "leak" to the child component -->
<style scoped>
::v-deep .newsletter {
background-color: green;
text-align:left;
}
</style>
See more at:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Another option to consider is using global style in place of the local style and be sure that each shared class element has a unique parent.
In one component such as Subscribe:
<style lang="scss">
.subscribe {
.newsletter {
// style for this specific version of newsletter
}
}
</style>
In another component where ".somethingelse" should be the specific type of component:
<style lang="scss">
.somethingelse {
.newsletter {
// style for this other specific version of newsletter
}
}
</style>
More info about global specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I am using vuejs with vuetify a material design support for vuejs, but I am confused as to how I can add custom css styles to material design without breaking a convention of the material design itself.
It is like bootstrap where we can call .row{} and override the styling or does it differ in some ways.
I don't think there're many differences from bootstrap since vuetify will automatically add necessary class names for you. Suppose you want to override the background color of the following template.
<v-layout row justify-space-around></v-layout>
Just override it with .row
.row {
background: #123456;
}
Check the sample below.
new Vue({ el: '#app' })
.row {
background: #123456;
}
.theme--dark {
width: 400px;
}
.card__text {
font-weight: 800;
}
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<main>
<v-layout row justify-space-around>
<v-card dark class="primary">
<v-card-text>one</v-card-text>
</v-card>
</v-layout>
</main>
</v-app>
</div>
Please notice that - was converted to __ (e.g. v-card-text) and theme-- was prepended to the theme's name (e.g. dark).
I am trying to style my child components. Isit wrong to put the style in a parent component? It appears that does not work.
I put the style for .card-page in the top level element (containing expenses-module where I use it)
<dom-module id="expenses-app">
<template>
<style>
...
.card-page {
display: block;
width: 100%;
}
</style>
<app-drawer-layout>
<app-header-layout>
...
<iron-pages selected="{{routeData.view}}" attr-for-selected="name">
<dashboard-module name="dashboard" route="{{subroute}}"></dashboard-module>
<expenses-module name="expenses" route="{{subroute}}"></expenses-module>
<settings-module name="settings" route="{{subroute}}"></settings-module>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
In expenses module,
<paper-card heading="Expenses" class="card-page">...
</paper-card>
Seems like if I move the styles into expenses-module it works.
You cannot directly style elements inside custom element from their parents like that, because Polymer processes the style within <dom-module> and will apply styles only to direct child members. It will not descend into child custom elements.
In other words, standard CSS selectors will only work within the scope of the declaring component. Both in Shadow and Shady DOM.
For your styles to work with nested elements, you should use CSS mixins and properties. All PolymerElements and many 3rd party elements will come with such styling extension points. The naming usually follow the convention, where the main mixin is called same as the element itself. Additionally, there may be more specific mixins and properties, which style only parts of the element. <paper-card> docs for example lists --paper-card mixin, --paper-card-content mixin, --paper-card-header-color and more.
If you want to better control the styling of elements you use, you would want to create your own CSS mixins/properties and #apply() them to selected elements. See how in the example below --my-elem-card-page applies only to one of the two paper cards.
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-card/paper-card.html" rel="import"/>
</head>
<body>
<my-wrapper></my-wrapper>
<dom-module id="my-elem">
<template>
<style>
.card-page {
#apply(--my-elem-card-page);
}
</style>
<paper-card heading="my-elem specific style" class="card-page">
<div class="card-content">
Content here
</div>
</paper-card>
<paper-card heading="Default style" class="unstyled-page">
<div class="card-content">
Content here
</div>
</paper-card>
</template>
</dom-module>
<dom-module id="my-wrapper">
<template>
<style>
# will be ignored
paper-card {
width: 200px;
}
my-elem{
--paper-card: {
color: blue;
display: block;
}
}
my-elem {
--my-elem-card-page: {
color: red;
}
}
</style>
<my-elem></my-elem>
</template>
</dom-module>
<script>
Polymer({
is: 'my-elem'
});
Polymer({
is: 'my-wrapper'
});
</script>
</body>
</html>
I'm trying to make a custom infowindow in CartoDB Editor. From the docs, it should be possible to use a <style> block to specify or override the default styles. But it seems like the whole block get's ignored. When I look at the Chrome Dev Tools, my styles are not present at all. They don't get overridden, they are just not there. Inline styles work fine, though.
The markup for the info window popup:
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h4 {
color: #fff;
}
div.cartodb-popup.v2.custom p {
color: #ff0;
}
</style>
<div class="cartodb-popup v2 custom">
x
<div class="cartodb-popup-content-wrapper">
<h4>{{boroname}}</h4>
<p>Borough code: {{borocode}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Any ideas what I could be doing wrong? I already tried it with and without the custom class, but I left it in there, because i thought some extra specifity won't do any harm. I'm pretty sure this <style> approach worked a year ago.
I could do most styling using inline styles, but that's very cumbersome and doesn't work for pseudo elements, like the small popup arrow.
Any way to do this on the web interface, or do we need to host this on our own servers to edit the .js scripts, etc?
This is my map: https://stekhn.cartodb.com/viz/a2534c80-87b0-11e5-a2ef-0e787de82d45/embed_map
The example above is outdated and <style> blocks in the infowindow editor are not allowed any more. You can only use CSS inline styles in the CartoDB frontend editor. To get full control over the infowindow and the tooltip appearance, use cartoDB.js. In this example I'm changing the popup background color to grey:
<link rel="stylesheet" type="text/css" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h3,
div.cartodb-popup.v2.custom p {
color: #fff;
}
</style>
<section id="map"></section>
<script type="infowindow/html" id="template">
<div class="cartodb-popup v2 custom">
x
<div class="cartodb-popup-content-wrapper">
<h3>{{name}}</h3>
<p>{{description}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script type="text/javascript">
cartodb.createVis('map', 'https://your-accout.cartodb.com/api/v2/viz/477bdfc0-8210-11e5-936b-0e787de82d45/viz.json', {
tiles_loader: true,
center_lat: 48.6,
center_lon: 11.4,
zoom: 7
})
.done(function(vis, layers) {
var subLayer = layers[1].getSubLayer(1);
// Select template from dom
subLayer.infowindow.set('template', $('#template').html());
});
</script>
Weirdly, I was able to get my infowindow to dynamically get taller without using any script tags. I set the width of the window using the web interface, and then added this to the infowindow custom HTML by clicking the button near the top.
{{mtrsrc}} is a column in my table.
Here's my code:
<div class="cartodb-popup v2 custom_infowindow">
x
<div class="cartodb-popup-content-wrapper">
<div class="row">
<div class="label"></div>
<div class="info">
<img height="300" src="http://pesticideresearch.com/fum/{{mtrsrc}}.png" />
</div>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
I've got the font-awesome-ie7.min.css in my html, however I'm unable to change the icon class dynamically using JavaScript/jQuery in IE7, works fine in other browsers.
<div id='iconDiv'>
<i class='icon-hand-down'></i>
</div>
<script>
$(document).ready(function() {
$('#iconDiv i').addClass('icon-hand-up');
});
</script>
Any help! appreciated.
Woohoo! I have a solution to this annoying issue. As with all coding that targets IE7 this is a complete hack but hey, it works...
<div id='iconDiv'>
<i class='icon-hand-down'></i>
<i class='icon-hand-up hide'></i><!-- initially hidden -->
</div>
<script>
$(document).ready(function() {
$('#iconDiv i.icon-hand-down').addClass('hide');
$('#iconDiv i.icon-hand-up').removeClass('hide');
});
</script>
Put both icons into your DOM and conditionally display whichever is relevant. You get the idea. I am using this same approach for toggles in my app.
Sample CSS from bootstrap:
.hide {
display: none;
}
.show {
display: block;
}
For reference, in my case I am using AngularJS:
<i data-ng-click="collapsed = !collapsed" class="icon-collapse ng-class:{'hide':collapsed}"></i>
<i data-ng-click="collapsed = !collapsed" class="icon-collapse-top ng-class:{'hide':!collapsed}"></i>