I currently have a small css problem.
I try to restyle Buttons in a WordPress Theme (BeTheme)
<div class="mcb-wrap-inner">
<div class="column mcb_column mcb-item-b2bxp8gm6 one-fifth column_button">
<div class="button_align align_center">
<a class="button btn-home btn-important button_size_2 button_dark" href>
<span class="button_label">My Button</span>
</a>
</div>
</div>
</div>
The problem is this existing css class (output from dev console):
.column_button .button {
margin: 0!important;
vertical-align: middle;
}
Does anyone know how to override this !important margin value?
I am happy about your answers :)
Best regards from Germany and stay healthy
You probably mean “override” not overwrite?
Just add your selector to the Additional CSS in theme customization. Don’t forget the !important.
.column_button .button {
margin: 10px !important;
}
Since the additional CSS is loaded after theme files, it will take precedence over theme CSS.
Related
I have the following button in html code:
<button type="button" id="acp-toggle-toolbar" class=" toolbar-left" style="top: 25px;"><img src="https://apostolosloukas.org/wp-content/plugins/accessible-poetry//assets/icons/access.svg" alt="Accessibility Icon"></button><div id="acp-black-screen"></div> <style>#acp-toggle-toolbar{top:25px;}</style>
<div id="acp-toolbar" class="acp-toolbar acp-toolbar-skin-1 toolbar-left" aria-hidden="true">
<button id="acp-close-toolbar">
<span class="sr-only">Close the accessibility toolbar</span>
<span class="acp-close-icon" aria-hidden="true"></span>
</button>
I need to move the button down.
I tried the following with no luck.
.toolbar-left img:style {
top: 105px;
}
My website is https://apostolosloukas.org/ and it's the accessibility button on the upper left.
You have inline-css that says: top: 25px, this is overriding your class code. In order to fix this, remove the inline css.
You can also add !important, in your class code.
You can use !important to override inline styles:
.toolbar-left {
top: 105px !important;
}
This is widely considered bad practice and should only ever be used in situations where no other way of solving the problem is available.
On top of that, the current top: 25px affects the surrounding button, not the img.
The other issue is that there is no pseudo selector :style in CSS. Just get rid of it.
This is the result of my suggestion:
I have a problem. In my web project I use css. In some moments I want to restart inheritance form the parent class.
I have some classes which define my styles, but I want to reset all style without hover.
When I use reset in this way:
<a id="hrefSite" href="{{route('about') }}"><i style="all: unset; font-size: 150px;" class="conf conf-ui"></i></a>
It works, but when I add color: #868e96; in style inline, the hover dosn't work.
These two classes conf conf-ui must stay because there I load the google, fb, etc icons.
I tried write another class to do it:
.newStyle{
all: unset; !important;
font-size: 150px;
color: #868e96;
}
<a id="hrefSite" href="{{route('about') }}"><i class="conf conf-ui newStyle"></i></a>
but it isn't working correctly. Size is incorrect.
EDIT:
This is my hierarchy in HTML.
<div class="col-md-12 col-lg-4">
<div class="cr">
<div class="cr-block cntr"
<div class="icon">
<a id="hrefSite" href="{{route('about') }}"><i class="conf conf-ui newStyle"></i></a>
</div>
</div>
</div>
</div>
I found the mistake.
I tried to set style to <i> tag. When I changed it for <div> tag it works.
But now I don't now why.
It's due to that in css I can't set style for <i> tag?
Can someone explain this?
Is it possible to not apply a css class to a specific element in the class?
For example:
<div className="container-fluid bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href= {"https://www.linkedin.com"}><img src={linkedin} className={"linkedin"}/></a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!</p>
</div>
In this code I would like to exclude the img tag from the container class so the CSS isn't applied to that element. I know I could just make two separate divs of the same class and put the anchor tag in the middle but I want to know if I can do this programmatically.
div.dummy :not(a):not(img) {
background: black;
color: white;
font - size: 20 px;
width:100%;
height:50px;
position:relative;
}
<div class="container-fluid dummy bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href={ "https://www.linkedin.com"}>
<img src={linkedin} class={ "linkedin"}/>
</a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!
</p>
</div>
You can see in the above demo that except img tag, all are getting affected.
Try using :not selector
Read here consulting can i use
else have a particular css for the img overriding any css you want.
The`:not(selector) selector matches every element that is NOT the specified element/selector.
:not(.container>img) {
background-color: blue;
//your css here
}
I'm modifying a poorly designed website for a client. The original developer placed the same header code in every page which means editing all the individual files really isn't an option.
Here is a sample of the code.
<div class="col-md-3 text-left">
<img src="img/logo.png">
</div>
So it's pretty hard to edit that logo image because it doesn't even have a class attached to it..
Is there a way for me to make a CSS rule that will only apply to the first time the col-md-3 class is called and then edit that img.
Something like this:
img.col-md-3:first{
width:171px;
padding-bottom:10px;
margin:0 auto;
display:block;
}
How would I go about doing this?
Going with what you described:
div.col-md-3:first-of-type img {
width: 171px;
padding-bottom: 10px;
margin: 0 auto;
display: block;
/* For Testing */
outline: 3px solid red;
}
<div class="col-md-3 text-left">
<a href="index.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png">
</a>
</div>
Note to the reader: Although in #ShivamPaw 's situation this snippet resolves the problem, keep in mind of what #disinfor has stated in that if div.col-md-3 were to be found in a new containing element, the image in that container will also be affected within the same page.
In #ShivamPaw 's description I'm assuming through context:
A header on each page.
logo.png
These factors lead me to the conclusion the solution I posted will work (and it did , fortunately)
You can use jquery if that possible using :first selector to add a class or direct css values:
$( ".col-md-3:first" ).find( "img" ).css( "width", "171px" ).css( "padding-bottom","10px").....;
or if this logo is only used in this place
$( "img[src='img/logo.png']").css( "width", "171px" ).css( "padding-bottom","10px").....;
I want to highlight current page by using CSS, but somehow it doesn't work. Please take a look at my code below.
HTML
<body id="home">
<div id="mainNav">
<a href="/Dashboard/Index" id="navIndex">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span>
</div>
</a>
<a href="/samples/register/" id="navRegister">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span>
</div> </a>
<a href="/samples/search/">
.........
</div>
CSS
body#/samples/register a#navRegister .textStyle {
background-color:red !important
}
The syntax is wrong. Use this way:
body a#navRegister[href="/samples/register"] .textStyle {
background-color:red !important
}
Yours is a worst example of having div inside <a>, which is similar to having a bottle inside some water, not water inside bottle, which is right one.
Take your body ID, in this case #home and combine it with the id on the home nave element, in this case #navIndex:
#home #navIndex .textStyle {
background-color: red;
}
Then you can add a selector for each of your pages to catch the current page in the nav with css alone:
#home #navIndex .textStyle,
#register #navRegister .textStyle {
background-color: red;
}
Drop the !important it's only necessary in a couple of edge cases in css and should be avoided (I appreciate one of those edge cases is just trying to definitely make a selector show some visible effect, which may well be what you're doing with the posted css).
You'd also benefit from using classes instead of ids as css selectors.
Caveat:
It's probably better to render this in the html server side as the server can use the request URL to decide which nav item is current. That way you can just add a selected-nav-text class to your current nav span and your css becomes:
.selected-nav-text {
background-color: red;
}
This is simpler, you can write logic once server side to calculate the current nav and css once to highlight it, then when you change your nav the functionality will come instantly.