Can you somebody tell me how can I create hover effect of background and icon? Because all icons have same class name.
This is a code of facebook
<div class="vc_icon_element vc_icon_element-outer vc_icon_element-align-center vc_icon_element-have-style">
<div class="vc_icon_element-inner vc_icon_element-color-custom vc_icon_element-have-style-inner vc_icon_element-size-xl vc_icon_element-style-rounded vc_icon_element-background vc_icon_element-background-color-white">
<span class="vc_icon_element-icon typcn typcn-social-facebook" style="color:#000000 !important"></span><a class="vc_icon_element-link" href="https://www.facebook.com/" title="" target=" _blank"></a></div>
</div>
This is a code of twitter
<div class="vc_icon_element vc_icon_element-outer vc_icon_element-align-center vc_icon_element-have-style">
<div class="vc_icon_element-inner vc_icon_element-color-custom vc_icon_element-have-style-inner vc_icon_element-size-xl vc_icon_element-style-rounded vc_icon_element-background vc_icon_element-background-color-white">
<span class="vc_icon_element-icon typcn typcn-social-twitter" style="color:#000000 !important"></span><a class="vc_icon_element-link" href="https://twitter.com/" title="" target=" _blank"></a></div>
Maybe target that .vc_icon_element and add something like this:
.vc_icon_element:hover {
background-color: red;
}
or to target that span
.vc_icon_element:hover span {
background-color: red;
}
Related
I want to change the color of an accordion depending on status on the current item in the list.
I want to use something like ng-class="{status: item.status}" (where I have testClass: true)
The problem now is that I can't set the color of the whole accordion heading.
<accordion>
<accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
<accordion-heading>
<div ng-class="{testClass: true}">
<p>Test</p>
</div>
</accordion-heading>
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="text-content font-size-14">{{item.text}}</div>
</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
.testClass {
background-color: burlywood;
}
Any idea how to solve this?
I found similar problem here, but the solution didn't work for me
https://github.com/angular-ui/bootstrap/issues/3038
fiddle:
http://jsfiddle.net/f8ce1b0w/2/
Apply the class to the 'accordion-group' and then style with css.
HTML
<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">
CSS
.panel {
&.test {
& > .panel-heading {
background-color: red;
}
}
}
http://jsfiddle.net/BramG/f8ce1b0w/8/
You'll want to move the applied class higher in the hierarchy:
http://jsfiddle.net/f8ce1b0w/7/
Then your css will look like :
.panel-warning .panel-heading {
//customize your css here
}
The problem is you are placing the test-item inside an item with padding. Instead, place the test-item-class higher up, and then use css to target the items.
If your states will match to Bootstrap states, then you may want the validation class names from here: https://getbootstrap.com/docs/4.0/migration/#panels
(panel-success, panel-info, panel-warning, panel-danger)
These class names are already in your Bootstrap css.
This is the solution to your problem
.test{
background-color: red;
}
.test-parent.panel-default > .panel-heading {
background-color:red;
}
<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
<accordion-heading>
<div class="test">
I can have markup, too!
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
white button
I was trying to make a vertical navbar with a background image. But as I clicked the button, they turned to white. What steps can I take to make them stay white? Like, I've tried primary-outline stuff I searched, but it doesn't work out.
Have you tried to define pseudo classes for your button, link?
/* unvisited link */
a:link {
background-color: #ffffff;
}
/* visited link */
a:visited {
background-color: #ffffff;
}
/* mouse over link */
a:hover {
background-color: #ffffff;
}
/* selected link */
a:active {
background-color: #ffffff;
}
I have solved this myself. It was because there was a fault in my markup. I added inside . But I still don't know why this is wrong. Here's the codepen:
<div class="paintallblack">
<div class="row">
<!--let's row this. Like, 1 md for vertical navbar, 5 md each for the rest -->
<div class="col-md-1 verticalnav">
<div class="nav nav-pills nav-stacked">
<a class="btn" href="#mypic">
A<br>b<br>o<br>u<br>t</a>
<a class="btn" href="#">
P<br>o<br>r<br>t<br>f<br>o<br>l<br>i<br>o</a>
<a class="btn" href="#"> C<br>o<br>n<br>t<br>a<br>c<br>t</a>
</div>
</div>
<div class="col-md-5 col-md-offset-1 leftcontent">
<!--LEFT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<img id="mypic" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/15940460_161286387692018_3963016562080030457_n.jpg?oh=6e79da88fff3df387121a5ac66a7de32&oe=59212A06" alt="mystupidface">
</div>
<div class="col-md-5 rightcontent">
<!--RIGHT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<p>Here I am, struggling to learn web development in order to build my own online magazine one day. Who am I? What do I do? In clear weather, I run. I can write stories, poetries, book reviews, compose musics, draw pictures. But nowadays my priorities
are: run for my health, learn to code, and try to read and write science-fiction as frequent as I can.</p>
</div>
</div>
http://codepen.io/Hertzsprung/pen/JEKxwN.
Bootstrap default style is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent;
}
Override the style btn-link border-color:#fff; not transparent
Here is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: #fff;
}
Is there a way to change the default styles of AngularJs search box?
<div ng-controller="PersonListCtrl">
<div class="bar">Search:
<input ng-model="query">
</div>
<ul class="" ng-show="query">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
</ul>
</div>
</div>
I would like to change the colour and size of the search box and perhaps change the text colour. I've messed around in the CSS but it doesn't seem to be effecting anything.
I've tried
#bar {
background-color: #d7d7d7;
color:#000000;
}
and
.bar{
background-color: #d7d7d7;
color:#000000;
}
AngularJS does not introduces any styles as far as I know. You need to assign the id or the class to the HTML element:
<input ng-model="query" id="bar">
or
<input ng-model="query" class="bar">
You're currently targeting the wrapper of the input, you could just use
.bar input {
instead
I have a slideshow that is imported with a shortcode in WP.
I'm trying to add custom css to each 4th image that is displayed, but with no luck.
Any help would be awesome, thanks.
.thumb-res .ngg-gallery-thumbnail:nth-child(4) img { border: 1px solid #000 !important; }
HTML:
<div class="thumb-res">
<div class="ngg-galleryoverview" id="ngg-gallery-97131261c1bb7b3c15f04e8ef0f97c77-1">
<div class="slideshowlink">
<a href='url'>[Show as slideshow]</a>
</div>
<div id="ngg-image-0" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a href="url" title=" " data-image-id='48' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
<img title="slide4" alt="slide4" src="url" width="174" height="150" style="max-width:none;"/>
</a>
</div>
</div>
<div id="ngg-image-1" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a href="url" title=" " data-image-id='46' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
<img title="slide2" alt="slide2" src="url" width="174" height="150" style="max-width:none;"/>
</a>
</div>
</div>
Your ngg-gallery-thumbnail elements are all single children of their respective parents, so the selector never selects anything. You should select based on elements with the class ngg-gallery-thumbnail-box, which are all siblings:
.thumb-res .ngg-gallery-thumbnail-box:nth-child(4) img { ... }
That said, this is still not going to work exactly as expected because it looks like there are also siblings that are not thumbnail boxes.
This:
$(".thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1)").addClass("fourth");
FIDDLE
try
.thumb-res .ngg-gallery-thumbnail-**box**:nth-child(**4n**) img {
border: 1px solid #000 !important;
}
with your code you're selecting just the 4th image. you need 4n for each 4th:D
You need to use nth-child(an+b) for direct siblings.
.thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1) img { border: 1px solid #000 !important; }
Also for add custom css to each 4th image that is displayed you need to use argument in format of "an+b".
For example 4n+1 select 4th, 8th, 12th element etc.
my markup is something like this:
<li class="cont">
<a> Click Here</a>
<form> </form>
</li>
I want to change the background colour of the anchor tag if the form is applied a class for ex: ng-dirty. The form gets applied this class by the angularJs framkework, when that happens I would want to highlight the 'a' tag by changing its background colour.
How can I do this using pure Css(or sass)?
Thanks,
Chris.
There no specific CSS selector for this but you can achieve the desire effect with the combination HTML change & box-direction:reverse;. Write like this:
HTML
<div class="cont">
<form class="ng-dirty">
<input type="text" value="Hi"/>
</form>
<a> Click Here</a>
</div>
CSS
.cont{
display:-moz-box;
display:box;
display:-webkit-box;
box-direction: reverse;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
}
.cont > *{
display:block;
}
.ng-dirty + a{
background:yellow;
}
Check this http://jsfiddle.net/8YnTw/ it's with pure css.
You could do this really simply with angular:
<a ng-class="{'dirty-class': myForm.$dirty}"> Click Here</a>
<form name="myForm">
</form>
http://jsfiddle.net/XYTcL/
Use the next css should work:
.ng-dirty a {
background-color: red;
}