I am trying to replace the indicators on a bootstrap carousel with text, almost like a navigation of sorts but have not successfully discovered how to do this even after hours of searching. I have found a lot of css options for customizing the indicators, but not a method for replacing them with text entirely. The text will be an identifying title for the carousel "slide". Naturally the code is
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
I would like to say I've tried a lot, but everything has been a shot in the dark and I knew it was going the wrong direction to begin with. I appreciate help in advance figuring this out.
This is how I did it:
HTML
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active">text1</li>
<li data-target="#carousel" data-slide-to="1">text2</li>
<li data-target="#carousel" data-slide-to="2">text3</li>
</ol>
CSS
.carousel-indicators li{
text-indent:0;
width:200px;
height: 40px;
border:none;
background-color: transparent;
}
Related
I'm trying to get rid of the white margin/gutter in the popover, so that the yellow buttons span the entire width of the popover. How can I achieve this?
Code:
<button type="button" data-html="true" class="btn btn-secondary btn-sm btn mr-1 "
data-trigger="focus" data-container="body" data-toggle="popover" data-placement="bottom"
data-content= '<div style="display: none">
<ul class="list-group custom-popover ml-0 px-0">
<li class="list-group-item">Profile</li>
<li class="list-group-item">Logout</li>
</ul>
</div>'>
<?php echo 'popover menu'?></button>
To change styles of the popover you can use just CSS. The solution to your problem is just adding this to your custom css file.
.popover-body{
padding: 0px;
}
If you'll like to know all the styles that go into play when boostrap cretes the popover you can check them on the file named: _popover.scss in the folder you downloaded from boostrap.
In Bulma, how does one change text color for multiple items at once?
That is, being low-vision, I want to change all text on a navbar to be black rather than the fainter gray.
I'm new to Bulma and so far see I can use "has-text-black" helper but have to add them to every link.
<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-size-4 has-text-black" href="/">
<span class="icon is-large is-circle">
<i class="fas fa-cube has-text-primary fa-lg"></i>
</span>
My Site
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-black" href="/about/">
<span class="icon has-text-link">
<i class="fas fa-info-circle"></i>
</span>
About
</a>
....
I was hoping to add the helper just in one place in the class on one div or container containing the navbar link items but that doesn't seem to work.
I looked in the customization docs and tried setting $text: black; but that didn't work either.
Is there a way to set all the grayish text color in a section or container to black?
And, how does one set/customize the global or site-wide text color from grayish to black (or something else?
(Otherwise, is there detailed directions for all the color variables and how to revise them in the correct order?)
Thanks in advance.
Ralph
The key is to pay attention to documentation. Bulma provides SASS variables for all its components or elements to play around with for making your own customization. The objective is to write the custom CSS AS LESS AS POSSIBLE. Here's the link
https://bulma.io/documentation/components/navbar/#colors
In your project's global SCSS file, you can add these SCSS variables and add the colors of your choice:
$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;
If you are confused over the color combination, visit--> https://coolors.co
Cheers!! :)
I'm trying to popup menu with Bootstrap 4 popover for category list.
My code below
<a tabindex="0" class="nav-link catdropdown" role="button" data-toggle="popover" data-placement="bottom">Kategoriler</a>
<ul class="no-bullet" id="categoryPopOverMenu">
<li class="nav-item dropdown">
#foreach($categories as $category)
<a class="dropdown-item" href="#">{{$category['category_name']}} #if ($settings['show_category_movie_count'] === 1) ({{$category['movies_count']}}) #endif</a>
#endforeach
</li>
</ul>
And JS code below
$('[data-toggle="popover"]').popover({
trigger: 'focus',
html:true,
content : function() {
return $('#categoryPopOverMenu').html();
}
});
Please Look at below image and you can see at the left side of image my list has no bullets. Also you can see at right side of picture, a black bullet is appearing when i show my list in a popover
https://i.hizliresim.com/az01LB.png
Thanks inadvance.
Thanks for the replies. Below code working good
<a tabindex="0" class="nav-link catdropdown" role="button" data-toggle="popover" data-placement="bottom">Kategoriler</a>
<ul class="list-group" id="categoryPopOverMenu" style="padding:0px;display:none;width:70px;">
#foreach($categories as $category)
<li class="list-group-item list-group-item-info justify-content-between" style="padding:0px">
<a class="dropdown-item" href="#">{{$category['category_name']}} #if ($settings['show_category_movie_count'] === 1) <span class="badge badge-default badge-pill pull-right" style="font-size:11px; font-weight:normal">{{$category['movies_count']}}</span>#endif</a>
</li>
#endforeach
</ul>
Obviously your css is overriding.
Try adding this to your css:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
See this link this might help you.
Visit Apply CSS to popover in Bootstrap
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.
I'm using Watir to try to interface to the Quibids "Bid Now" (not Buy Now) button but can't seem to get the right combination of the following command to click the button:
browser.button(:value => 'Bid Now').click
I'm able to fill in a text field on the page so all my object set up is correct. It's just this command that I can't get to work. Every attempt gives me the error that the element cannot be found. I've also tried :id but nothing works and after working on it for 2 hours, thought I'd ask.
The following is the html out of IE around that button and any help would be appreciated. Thanks.
<p class="large-price">
<span style="background-image: none;" class="price">$5.68</span>
<span class="medium light-grey">USD</span>
</p>
<p class="time large-timer2 red">00:00:06</p>
<h2 class="margin-five username-height">
<span><img style="display: inline;" class="user-icon winning_avatar" src="https://s1.quibidscdn.com/n1/avatards/12.png" width="64" height="64"></span>
<br>
<span style="height: 30px;" class="winning">TOLLCOLLECTOR</span>
</h2>
<div id="298085604">
<p>
<a class="buttons bid large orange" href="#">Bid Now</a>
</p>
</div>
<script>
$(document).ready(function(){
AuctionDetail.updateSavings({"r":0,"v":0,"value":0});
});
</script>
<ul class="price-breakdown">
<li>Value Price:
<span id="product_valueprice" class="float-right">$649.99</span>
</li>
<li>Bids Credit:
<span class="float-right">- <span id="breakdown_bidsvalue">$0.00</span></span>
</li>
<li class="bid_breakdown last">
<span id="breakdown_realbids">0</span> Real / <span id="breakdown_voucherbids">0</span> Voucher </li>
<li>Buy Now Price<span class="float-right breakdown_buynowtotal">$649.99</span>
</li>
</ul>
<p>
<a id="buynowbtn" class="buynowbtn buttons large blue" href="#">
Buy Now
<span class="clear"></span>
<span class="buynow-price breakdown_buynowbtn">$649.99</span>
</a>
</p>
The HTML does not list it as a button. It lists it as a link- <a>. I've never used WATIR but given that the command is browser.button, it would seem that you need something like browser.link instead.
The process is quicker if you don't do a text scan and use the classes available to you:
I'd recommend using
browser.a(:class => "buttons bid large orange").click
instead, both will work, just generally it would be better practice to use the html if it's available to you!
My Friend...
My two possibilities.
browser.div(:id, "298085604").text(:name "Bid Now").click
or
browser.div(:text, "Bid Now").click
Remember that, the HTML is not displayed all functions, only the HTML code that the browser recognizes. this is the cause of programming language. example (framework, NET) these encrypted language code for the final user. You can not see the button entirely.
Good Luck!