how can i apply the yellow gradient to the white arrow?
here is the fiddle link:
http://jsfiddle.net/VNnKR/
$('.white').hover(function() {
$(this).addClass('gradient');
})
I found a solution, note that it only works with a solid background.
HTML:
<div class="arrow">
START HERE!
</div>
CSS:
body {
background: #6cc5c3;
}
.arrow {
margin-top: 150px;
position: relative;
font-weight: bold;
margin-bottom: 5px;
height: 20px;
padding: 10px 30px 10px 10px;
width: 140px;
color: #6cc5c3;
background: #fff;
text-align: center;
}
.arrow:after {
content:'';
height: 0;
width: 0;
display: block;
border-color: #6cc5c3 #6cc5c3 #6cc5c3 transparent;
border-width: 20px;
border-style: solid;
position: absolute;
top: 0;
right: -20px;
}
.gradient {
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
}
DEMO
The arrow is transparent, and the rest of the "arrow" is the same as the body background color.
Related
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 1 year ago.
I'm trying to add a tooltip arrow at the bottom left. Here I use pseudo-classes I want this should be transparent but when I give transparent to :before white color is coming to the top. I had tried but unable to achieve the desired output. Can anyone suggest to me how can I achieve this output. Any help will be appreciated.
body {
background-image: url('https://i.ibb.co/wcTv3Jf/download.jpg');
display: flex;
justify-content: center;
align-items: center;
}
.tolltip {
width: 250px;
height: 150px;
background: #80808000;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
}
.tolltip:after,
.tolltip:before {
content: "";
position: absolute;
left: -3px;
bottom: -40px;
width: 40px;
height: 40px;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.tolltip:before {
background: #fff;
}
.tolltip:after {
background: #80808000;
bottom: -32px;
width: 38px;
left: 0px;
}
<div class="tolltip">
contnet
</div>
Desired output
One of solutions
body{
background: darkgray;
display: flex;
justify-content: center;
align-items: center;
}
.tolltip{
width: 250px;
height: 150px;
background: gray;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
}
.tolltip:after,
.tolltip:before{
content: "";
position: absolute;
left: -3px;
bottom: -40px;
width: 40px;
height: 40px;
background: red;
clip-path: polygon(0 0, 100% 0, 0 100%);
background: white;
}
.tolltip:after{
background: gray;
bottom: -32px;
width: 38px;
left: 0px;
}
<div class="tolltip">
contnet
</div>
Edit after updating question.
body{
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,49,1) 35%, rgba(0,212,255,1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.tolltip{
width: 250px;
height: 150px;
background: transparent;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
border-bottom-color: transparent;
//
padding: 20px;
}
.tolltip:after{
content: "";
position: absolute;
left: -3px;
bottom: -38px;
width: 40px;
height: 40px;
background: red;
clip-path: polygon(0 0, 3px 0, 3px 38px, 36px 0, 40px 0, 0px 45px) ;
background: white;
}
.tolltip:before{
content: "";
position: absolute;
left: 33px;
right: 0px;
bottom: 0;
border-bottom: 3px solid white;
}
<div class="tolltip">
<h3>content</h3>
</div>
Could some one help me with one question:
I have 2 divs.
The first one is being used to rotate the second div.
the second one to rotate it self to the regular rotation.
I click on first div --> it rotates the second DIV.
I click on the second div, it's rotating it self to the previous/regular position.
#_4220w_86 {
height: 20px;
width: 20px;
background-color: #171717;
border-radius: 50%;
margin-top: -43px;
margin-left: 124px;
cursor: pointer;
}
#_4220w {
width: 0;
height: 0;
border-top: 3px solid transparent;
border-left: 6px solid #ec820f;
border-bottom: 3px solid transparent;
margin-left: 132px;
margin-top: -13px;
cursor: pointer;
}
#_4220w_2 {
position: absolute;
right: 20px;
height: 28px;
width: 28px;
background-color: #0f0f0f;
border-radius: 100%;
cursor: pointer;
top: 45px;
}
._4220w_2 {
width: 0;
height: 0;
border-style: solid;
border-width: 5.5px 0 5.5px 10px;
border-color: transparent transparent transparent #ec820f;
margin-left: 10px;
margin-top: 8px;
}
<!--Here is the first DIV:-->
<div id="_4220w_86">
</div>
<div id="_4220w">
</div>
<!--Here is the second DIV:-->
<a href="#" id="_4220w_2">
<div class="_4220w_2"></div>
</a>
try to use this code
http://jsfiddle.net/24yboknc/1/
html
<div id="rotate">rotate the other</div>
<div id="rotate2"> back to normal</div>
css
#rotate,#rotate2{
width: 100px;
height: 100px;
background: red;
margin: 50px;
text-align: center
}
#rotate2.rotated{
transform: rotate(90deg);
}
js
$('#rotate').click(function(){
if(!$('#rotate2').hasClass('rotated')){
$('#rotate2').toggleClass('rotated');
}
});
$('#rotate2').click(function(){
if($('#rotate2').hasClass('rotated')){
$('#rotate2').removeClass('rotated');
}
});
inspired to jQuery rotate div onclick +/-90
I want to have a div element that acts like a checkbox. When a user clicks it once, a checkbox will appear in the upper-left corner. If a user clicks the div again, the checkbox will disappear. Currently, I'm using the following CSS, which can be seen in this Fiddle.
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield-selected {
border: solid 1px green;
}
.my-checkfield-selected::before,
.my-checkfield-selected::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.my-checkfield-selected::before {
border-width: 0;
}
.my-checkfield-selected::after {
border-radius: 0;
border-width: 12px;
border-left-color: green;
border-top-color: green;
}
As shown in the Fiddle, the triangle successfully toggles. However, I want to show a white checkmark in that triangle. How can I do that, preferably with CSS. I'm not sure where to go.
Thanks,
By swapping the ::before/::after, so the ::before is used for the green corner, you can simply add content: '\2713' (\2713 is the CSS code for a checkmark) to the ::after
function toggle(elem) {
$(elem).toggleClass('my-checkfield-selected');
}
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield-selected {
border: solid 1px green;
}
.my-checkfield-selected::before,
.my-checkfield-selected::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.my-checkfield-selected::after {
content: '\2713';
font-size: 13px;
line-height: 13px;
font-weight: bold;
color: white;
}
.my-checkfield-selected::before {
border-radius: 0;
border-width: 12px;
border-left-color: green;
border-top-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-checkfield" onclick="toggle(this)">
[hi]
</div>
You can't put anything in an element (or pseudo-element) that is only made of borders.
As such, you would need to, as a suggestion, use a square pseudo-element, with an image as a background and then have a second gradient background as the color.
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield::before,
.my-checkfield::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background-image:
url(http://www.clker.com/cliparts/p/e/X/9/d/4/check-mark-white-md.png),
linear-gradient(135deg, green 50%, transparent 50%);
background-size: 70% auto, cover;
background-position: auto, left top;
background-repeat: no-repeat;
}
<div class="my-checkfield" ) ">
[hi]
</div>
I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>
What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units
You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.
I am new here, i need little help from you guys. I tried all the way to sort out this problem but found no way, hope someone can help me out.
here is my website http://www.newwebdemo.com/susan/
if you scroll down to section "What People Are Saying" where testimonials appears.
You will notice that left arrow is not appears but right one appears fine, even left side arrow box have arrow as well, but still not appears, can someone help me find where the issue is coming and why it is not appear.
Here is code section of that
<ul class="flex-direction-nav">
<li>
<a class="flex-prev" href="#"></a>
</li>
<li>
<a class="flex-next" href="#"></a>
</li>
</ul>
and here is css of it
.flex-direction-nav a {
width: 42px;
height: 42px;
font-size: 24px;
line-height: 42px;
margin-top: -21px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background: #fff;
color: #b1b1b1;
text-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-direction-nav a.flex-prev {
left: 0 !important;
}
.flex-direction-nav a.flex-next {
right: 0 !important;
left: auto !important;
}
.flex-direction-nav a:before {
position: relative;
font-size: 30px;
font-family: fontello;
margin-top: -1px;
}
.flex-direction-nav a.flex-prev:before {
margin-left: 14px;
content: "î";
z-index:999999;
}
.flex-direction-nav a.flex-next:before {
margin-right: 14px;
content: "îž";
}
.mini .flex-direction-nav a {
border: none;
color: #fff;
background: #ccc;
background: rgba(0,0,0,.2);
}
.mini .flex-direction-nav a:before {
top: 1px;
}
.mini .flex-direction-nav a.flex-prev {
border-radius: 0 5px 5px 0;
}
.mini .flex-direction-nav a.flex-next {
border-radius: 5px 0 0 5px;
}
.mini .flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-control-nav {
width: 100%;
left: 0;
bottom: auto;
}
.flex-control-nav li {
margin: 0 2px;
display: inline-block;
}
.flex-control-nav li a {
width: 7px;
height: 7px;
display: block;
background-color: #b9b9b9;
cursor: pointer;
text-indent: -9999px;
border-radius: 4px;
box-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-control-nav li a.flex-active {
background-color: #e54939;
}
.nav-bullets-top .flex-control-nav {
top: -40px;
}
.nav-bullets-bottom .flex-control-nav {
bottom: -70px;
}
.flex-direction-nav a {
width: 42px;
height: 42px;
font-size: 24px;
line-height: 42px;
margin-top: -21px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background: #fff;
color: #b1b1b1;
text-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-direction-nav a.flex-prev {
left: 0 !important;
}
.flex-direction-nav a.flex-next {
right: 0 !important;
left: auto !important;
}
.flex-direction-nav a:before {
position: relative;
font-size: 30px;
font-family: fontello;
margin-top: -1px;
}
.flex-direction-nav a.flex-prev:before {
margin-left: 14px;
content: "î";
z-index:999999;
}
.flex-direction-nav a.flex-next:before {
margin-right: 14px;
content: "îž";
}
.mini .flex-direction-nav a {
border: none;
color: #fff;
background: #ccc;
background: rgba(0,0,0,.2);
}
.mini .flex-direction-nav a:before {
top: 1px;
}
.mini .flex-direction-nav a.flex-prev {
border-radius: 0 5px 5px 0;
}
.mini .flex-direction-nav a.flex-next {
border-radius: 5px 0 0 5px;
}
.mini .flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-control-nav {
width: 100%;
left: 0;
bottom: auto;
}
.flex-control-nav li {
margin: 0 2px;
display: inline-block;
}
.flex-control-nav li a {
width: 7px;
height: 7px;
display: block;
background-color: #b9b9b9;
cursor: pointer;
text-indent: -9999px;
border-radius: 4px;
box-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-control-nav li a.flex-active {
background-color: #e54939;
}
.nav-bullets-top .flex-control-nav {
top: -40px;
}
.nav-bullets-bottom .flex-control-nav {
bottom: -70px;
}
flex-prev not showing arrow, however flex-next class is showing fine the arrow
both contain css classes working, not sure what else is causing here....
Do one thing go to the demo of flexslider.right click then click on view page source.after that go into the source of the demo and locate flexslider.css.just copy the css code into your flexslider.css code.then google look for bg_direction_nav.png flexslider.
You'll find two arrow image.download it into your system.then go to flexslider.css and change on line 51:
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(images/bg_direction_nav.png) no-repeat 0 0;
position: absolute; top: 50%; cursor: pointer;
text-indent: -9999px;
opacity: 0;
-webkit-transition: all .3s ease;
}
Change background:url(point to the newly saved image)
Then save everything.refresh page and u'll get the arrows.
If you post useful please log on to www.facebook.com/brightinfoway and like that page. It is a request. Thanks