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>
Related
I have a particular piece of code in a component which is as follows:
return (
<div className="Home" id="Home">
<Customnav color="" height="80px" padding="5vh"/>
<div className="parent">
<div class="col-5 son">
<span id="codeflow-text" className="codeflow-text">Codeflow</span>
<span style={{color:"black", fontSize:"70px", fontFamily: "Arial"}}><b>Learning</b></span>
</div>
<div class="col-7 daughter">
<img src={img1} alt="loading"/>
</div>
</div>
</div>
);
Now I have imported Home.css in this js file part of which is as follows:
div#Home span.codeflow-text {
color: "#1cbdd6" !important;
font-size: "70px";
font-family: "Raleway";
}
Now according to me, the word "Codeflow" should import the attributes which I defined but it's not working. On Inspecting I am getting this in the browser:
I tried to increase the specificity and I know the rule of using !important. But something seems to be wrong here. Please help.
In CSS, the value of property should not be wrapped within "(Except some special case). Change your Home.css file as follow
div#Home span.codeflow-text {
color: #1cbdd6 !important;
font-size: 70px;
font-family: Raleway;
}
Why do you add "" between color and font-size. Just remove them.
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>
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 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.
I wrote the following CSS:
MyForm.css
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
If i use it in my code:
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
It doesn't work. If I delete the subclass .my-inner it works properly.
Is it really possibe to use the subclass that way?
I would have done something like:
.my-container [class^="col-md"] .my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
...depending of what you try to acheve.
Based on the markup, it looks like you're trying to use a preprocessor like LESS or SASS. The reason the CSS isn't outputting correctly is because you didn't close .my-inner.
If you're using a preprocessor, it should look like this:
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
} <-- forgot this closing tag
}
If you're using plain CSS, see Fredric's answer.
Please change your html code to this
HTML
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
You missed the double quotes , maybe this is causing problem in your html code and also check this for css code.
CSS
.my-container [class^="col-md"]
.my-inner
{
padding : 10 px;
background-color: #eee;
.... etc...
}
Are removing subclass .my-inner from MyForm.css or the HTML page?
As Dead has said, you stylesheet must be after bootstrap's, so I
ask, is that in the correct order?
If you inspect your page in
the browser, can you see your custom properties there?
Try to write you .my-inner class directly (removing .my-container [class^="col-md"]).
If none of that work, try to post more details about.