I want to override the style padding-top:100px to padding-top:0px. How can i override the inline style inside wordpress template?
<!-- Sidebar With Content Section-->
<div class="with-sidebar-wrapper">
<section id="content-section-1" >
<div class="gdlr-full-size-wrapper gdlr-show-all" style="padding-top: 100px; padding-bottom: 0px; background-color: #ffffff; " ><div class="gdlr-master-slider-item gdlr-slider-item gdlr-item" style="margin-bottom: 0px;" >
<!-- MasterSlider -->
I already tried the below code in style.css but its not working!
.gdlr-full-size-wrapper .gdlr-show-all{
padding-top:0px !important;
}
To select this perticular <div> you to write your CSS like:
.gdlr-full-size-wrapper.gdlr-show-all {
} /*without space between*/
you're using
.gdlr-full-size-wrapper .gdlr-show-all {
}
viz selecting
<div class="gdlr-full-size-wrapper">
<div class="gdlr-show-all"></div>
</div>
Also if you're willing to override inline CSS only then you can use [style] selector also.
As:
<div class="someClass" style="font-size:10px; "></div>
So we can write CSS like:
.someClass[style] { font-size:14px !important}
what's trick here is this CSS only works when someClass has inline CSS for font.
Use following code it will work for both cases if you have one or both classes on div tag.
.gdlr-full-size-wrapper.gdlr-show-all, .gdlr-full-size-wrapper .gdlr-show-all
{
padding-top:0px !important;
}
Justinas explains it well and that should work perfectly, I have applied the same to custom CSS of a WordPress theme and has worked for me. The CSS I had trouble changing were inline a div.
Related
I am trying to override the right property for a h1 element that it is inheriting from the carousel-caption bootstrap class. It inherits right:15% and I am trying to set it to 0%. I found another post that led me to add id="bootstrap-overrides"to the tag and then use the selector: #bootstrap-overrides h1.second but this still doesn't remove the property. I check also in the inspect element and this property is not crossed out. When I uncheck this property in the inspect element I am left with the behaviour I desire.
code from React component:
<div id="initialImage">
<img src={logo} alt="Failed to load Image" class="img-fluid" />
<div class="carousel-caption greeting">
<h1 class="first">First.</h1>
<h1 class="second">Second.</h1>
</div>
</div>
CSS:
#bootstrap-overrides h1.second {
right: 0%;
float: right;
font-family: "Rock Salt", cursive;
color: #fff2f4;
}
and as mentioned I have an id #bootstrap-overrides in the body tag of my index.html. Could it have something to do with the location of the import for boostrap?
Just to confirm, are you adding id="bootstrap-overrides" directly to the h1?
If so, your css should look like this: h1#bootstrap-overrides otherwise, if you are applying it to the parent of h1, then try adding important to your css like so: #bootstrap-overrides h1 { right: 0!important; }
I am using quill editor. and storing the data inside MySQL DB along with the HTML tag.
Example:
<p>heading<p><p><img src=""></p>
Now as I am using angular I have used below code reproduce the same HTML structure which I have saved earlier in DB.
<div class="container-fluid">
<h3 class="fancyFont">Hot Posts</h3>
<div class="row justify-content-md-center">
<div class="col-md" style="width: 100%">
<div style="background:lightgray;">
<div *ngFor="let post of allPosts">
<p [innerHTML]=post.postContent></p>
</div>
</div>
</div>
</div>
</div>
and to give it a proper style I have used the CSS below
p img{
max-width: 100% !important;
}
p {
margin: auto;
padding: 16px;
max-width:100%;
display: inline block;
word-break: break-all
}
But despite doing this I cannot resize or fit my image inside the p tag. To describe innerHtml I can say it will look like this in plain HTML
if you have 2 posts in allposts
[![<div>
<p><p><h1>first post</h1></p></p>
<p><p><h1>Second post</h1><p><p>image</p><p>
<div>][1]][1]
Maybe p inside p tag invalid for HTML 5 and I agree with that. As few members already gave me proof and I also checked it by myself. But in the case of Angular when you use innerHTML like
<p [innerHTML]=post.postContent></p>
It doesn't even matter (Yes I checked my web dev tools and it is working perfectly fine). So the question arises why I was not able to add style to my image tag by using
p img{
max-width:100% !important;
}
p {
max-width:100%;
word-break: break-all
}
because for innerHTML content angular doesn't support that until and unless you add below code in your component.ts file
encapsulation: ViewEncapsulation.None,
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
I would like to change the font size of this, this has paragraph tags within. How do I change it? I am using wordpress and I can add custom CSS to fix this.
Here is my wordpress site that I am trying to fix using Inspect Element in Chrome and Firebug in Firefox. http://defensionem.com/2015/09/14/us-military-demo-3/
<div class="body-text clearfix" itemprop="articleBody">
I tried using this, but no avail.
div[itemprop="articleBody"]
{font-size:32px;}
You could try using CSS Attribute Selectors, such as:
Html
<div class="body-text clearfix" itemprop="articleBody"><h1>Test</h1>
Css
div[itemprop="articleBody"] h1 {
color: red;
}
and
div[itemprop="articleBody"] h1 {
color: yellow;
}
example: http://jsfiddle.net/bEUk8/
Check this out..
This will help you..
div[itemprop="articleBody"] {
font-size: 32px!important;
color: red!important;
}
<div class="body-text clearfix" itemprop="articleBody">
<h1>Hello World</h1>
</div>
inherited from body has the default bootstrap style inherited from body and div.
How can I make the inner classes have the exact same style as inherited from body, without hard-coding the value used by Bootstrap:
<div>inherited from body</div>
<div style="font-size:30px;">
custom
<div class="inner">BAD! I want this to have the same style as "inherited from body"</div>
<div class="inner" style="font-size:16px;">BAD! Same style as "inherited from body", but I don't want to hardcode the value.</div>
</div>
fiddle.
I can use SASS if needed, for example via a mixin that contains all the default styles.
You just need to set what you changed to initial in the CSS for the class inner:
.inner {
color: initial;
}
Fiddle: http://jsfiddle.net/JUMQe/
You could also apply the same id to both <div>s:
HTML:
<div id="same">default</div>
<div style="color:green; background-color:green;">
green
<div class="inner" id="same">inner default</div>
</div>
CSS:
#same {
color: #F00;
}
Fiddle: http://jsfiddle.net/JUMQe/1/