How to change the props of bullet in ion-slider (color, size and position)
I apply the snippets of the next link, but not working in ionic 4
Change ion-slides pager dot color
I just find out the answer
You should apply your styling as shown as an example here:
.swiper-pagination-bullet {
--bullet-background: #00a0be;
width: 12px;
height: 12px;
}
.swiper-pagination-bullet-active {
width: 12px;
height: 12px;
--bullet-background: transparent;
}
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 5%!important;
}
Those are the classes needed to change the styling of the dots. Hope it works for you.
Related
I am not able to change the arrow size in vue-tour. While I am able to change it by inspecting in Chrome, in CSS I am unable to do it as it has some runtime generated ID associated with it.
.v-step__arrow[data-v-e97491e4], .v-step__arrow[data-v-e97491e4]:before {
position: absolute;
width: 10px;
height: 10px;
background: inherit;
}
The v-step GitHub is available here: https://github.com/pulsardev/vue-tour/blob/master/src/components/VStep.vue
You can make use of v-deep. It helps in applying the styles to the child-components directly.
If you are making use of sass then you can apply styling as:
::v-deep .v-step {
background-color: black;
}
If you are simply using css then you can use v-deep as:
>>> .v-step {
background-color: black;
}
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I've been digging through the Ant-Design node_module trying to change the default color and default width of an active tab but have had no luck. Anyone know how to override it?
The problem is that I don't know which element has the border to begin with. Any help is very welcomed.
you can go with:
.ant-tabs-tab.ant-tabs-tab-active {
border-bottom: 2px solid #BF2D30 !important;
z-index: 2;
}
UPDATE
This style will do as expected.
.ant-tabs-ink-bar {
height: 5px;
background: red !important;
}
Check https://pro.ant.design/docs/style#Override-the-component-style on how to override style .
Refer dis answer too Antd: How to override style of a single instance of a component
To figure out on what needs to be changed on your own, Inspect the element in browser.
You need use tabBarStyle props.
See docs: https://ant.design/components/tabs/
I solve this problem with this code:
import './styles.less';
const [tabIndex, setTabIndex] = useState('0');
const borderClass = ['redBorder', 'greenBorder', 'blueGreyBorder'];
<Tabs
className={`tabs ${borderClass[tabIndex]}`}
defaultActiveKey={tabIndex}
onChange={onSetTabIndex}
>
// And in the styles.less:
` .tabs {
margin-top: 17px;
width: 100%;
}
.redBorder{
.ant-tabs-ink-bar {
background-color: #e94747;
}
}
.greenBorder{
.ant-tabs-ink-bar {
background-color: #24ad52;
}
}
.blueGreyBorder{
.ant-tabs-ink-bar {
background-color: #5b708b;
}
}`
with the state we can change the class and use the cascade css to solve our problem
I'm developing a reactjs project by ant-design (antd) library. I want to use Carousel component in my project. When I put the background color of the content -which should be shown inside the carousel- to #FFF, the bullet navigation buttons will be disappeared. How should I change the color of the bullets? This is a normal Carousel:
import { Row, Col, Carousel } from 'antd';
export default class Temp extends Component {
render(){
return (
<Carousel vertical autoplay>
<div>{this.ContentDesign()}</div>
<div>{this.ContentDesign()}</div>
<div>{this.ContentDesign()}</div>
<div>{this.ContentDesign()}</div>
</Carousel>
)}
and this is my CSS:
.ant-carousel .slick-slide {
overflow: hidden;
height: 160px;
}
Thanks :)
Just stumbled upon this question over a year later, but hopefully, this will be of help to someone. To style Ant Design components, you can open the inspect tool in your browser and find the class name used on the part you want to style.
So for example, if you want to style the bullet points for the carousel, you look in the inspect tool and will see that they have the class names: .ant-carousel .slick-dots li button and .ant-carousel .slick-dots li.slick-active button for the active bullet point.
So to change the colour of the bullet point you simply have to override what is already set. Example of this:
.ant-carousel .slick-dots li button {
background: #ff4ef6;
opacity: 0.4;
}
.ant-carousel .slick-dots li.slick-active button {
opacity: 1;
background: #ff4ef6;
}
Code Sandbox: https://codesandbox.io/s/elegant-rgb-1e2fo?file=/index.css
Assuming that you are adding color directly to .ant-carousel .slick-slide (which is wrong),
You should add color code to css like dis... Differentiate color based on your requirement
.ant-carousel .slick-slide {
overflow: hidden;
height: 160px;
background: #364d79;
}
.ant-carousel .slick-slide div {
color: #fff;
}
So I am providing the resources for my celllist via the constructor. Everything seems to work, I have provided my own style sheet:
.cellListWidget {
color: #021650;
background-color: #021650;
}
.cellListEvenItem {
cursor: pointer;
zoom: 1;
background: red;
}
.cellListOddItem {
cursor: pointer;
zoom: 1;
background: blue;
}
.cellListKeyboardSelectedItem {
background: #ffc;
}
.cellListSelectedItem {
background-color: green;
color: white;
height: auto;
overflow: visible;
}
I must not understand it quite right because the background color I tried to set for the widget does not seem to take any effect. The rest of the styles work though, even item, odd item, selected item, etc.
Just to clarify, I want to change the color of the whole column this list is on, it items in the list are obviously styled, but the list takes up more vertical space than there are items, so where there are no items, is just a grey color which I want to change.
The solution I found was to not style the cell list, but the flowpanel that the cell list was on.