Html:
<footer id="colophon"
class="site-footer footer
bg-dark" role="contentinfo">
<div class="container
footer-inner">
<div class="row">
<div class="footer-widget-
area"><div class="col-md-3
col-sm-6 footer-widget"
role="complementary">
<div id="text-4"
class="widget widget_text">
<div class="textwidget"><p>.
<a href="http://4309.co.uk/
contact/">Contact</a></p>
</div>
</div></div>
Tried css:
.page-id-3748>.site-
footer{position:relative
!important;top: 100px!
important;}
Trying to target footer on one page only. I know the selector is site-footer but I'm trying to do it with specificity.
Try to remove the ">" sign inside your CSS.
.page-id-3748 .site-footer {
position:relative !important;
top: 100px! important;
}
Use !important only if nothing else will work.
Because an id has an higher priority you can use
.page-id-3748 #colophon { }
or combining 2 class selectors will also give you more priority.
.page-id-3748 .site-footer.footer { }
or use tags to give it more priority
.page-id-3748 footer.site-footer { }
If you have used the !important elsewhere on site-footer, then nothing here will work. Also if you have overruled the .site-footer on aother place in your styling this will not wordk.
Related
Please help me identify which CSS selectors I need to choose to hide the title and caption in the FIRST SLIDE/Banner of the slideshow. You can probably catch something I missed.
See WordPress theme in the browser to use Google Dev inspect tools to pick CSS classes: https://demo.evisionthemes.com/clean-biz/
Code:
<div class="slide-item cycle-slide" style="background-image: url("https://i0.wp.com/demo.evisionthemes.com/clean-biz/wp-content/uploads/2016/04/architecture-1867635_1280.jpg?fit=1280%2C847&ssl=1"); position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 0; display: block; visibility: hidden;">
<div class="thumb-overlay main-slider-overlay"></div>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 banner-content">
<div class="banner-content-inner">
<div class="banner-content-inner">
<h2 class="banner-title alt-title">Clean Biz- Free Business Theme</h2>
<div class="text-content">
We create digital products for your online business.
</div>
<div class="btn-holder">
<a class="button" href="https://demo.evisionthemes.com/clean-biz/clean-biz-free-business-theme/">Click to Start</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried and failed:
.banner-content-inner:first-child {
display: none;
}
.banner-content-inner, .slide-item:first-child {
display: none;
}
.cycle-slideshow .banner-content-inner:first-child {
display: none;
}
I even tried to add an if conditional to the slider include PHP file, but no bueno. Hopefully this will work. Seems like the easiet.
Judging by the code above, the solution will be
.cycle-slideshow .slide-item:first-child .banner-content-inner {
display:none;
}
Breakdown: .cycle-slideshow is the parent and it contains several .slide-item
Since you're trying to target the with the first element of its kind, you do .cycle-slideshow .slide-item:first-child
and finally target the element you wish to hide .banner-content-inner.
Problem solved.
What actually happens: I have a div in a file there is HTML code, which added Dynamically from BackEnd, CSS Classes(which included from Dynamic code) uses CSS from my style.css
What I need: My own CSS should not impact on dynamically added code.
Similar Solution: iframe is a solution but I want to do same using div tag.
I think this is:
<div class="row" style="all:initial"> do some thing</div>
Better you can write you css with parent-child combination to avoid such issues as like below snippet. Here newly added <p> tag has same class .content but parent has different class name as .dynamic from .static.
jQuery(document).ready(function() {
jQuery('.dynamic').html(jQuery(".static").html());
});
.static .content {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="static">
<p class="content">Some content goes here</p>
</div>
<div class="dynamic">
</div>
Three options from my perspective:
1. Use unique classnames
2. Unique ID
If only classes are added, give the parent div an ID and overwrite the css by using the ID.
<div id="uniqueStyle" class="dynamicDiv">
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
</div>
#uniqueStyle{
background: red; //overwrite
}
#uniqueStyle .row{
background: blue; //overwrite
}
3. Using :not
Give the div an unique ID and use the :not selector to exclude it from styling.
<div id="noStyling" class="dynamicDiv">
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
</div>
:not(#noStyling){
background: blue; //set styling of all elements except #noStyling
}
More info about :not selector: https://www.w3schools.com/cssref/sel_not.asp
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
I have a html page setup like so
<div class="row row-venue">
<div class="col-sm-12">
<h3>Venue 1</h3>
</div>
</div>
<div class="row row-venue">
<div class="col-sm-12">
<h3>Venue 2</h3>
</div>
</div>
All I want to do is make every odd h3 a different colour to every even. I have tried with the code below
div.row-venue div.col-venue h3:nth-of-type(odd){
color:white;
}
div.row-venue div.col-venue h3:nth-of-type(even){
color:black;
}
and even just tried
h3:nth-of-type(odd){
color:white;
}
h3:nth-of-type(even){
color:black;
}
I just cant seem to get my head around it, any help would be appreciated
<h3> is always the first child of <div class="col-sm-12">. Because the counting is zero base - first child = even, so the even rule that you defined applies to all <h3> elements.
To get what you ask, you need to find the nth child between the <div class="row row-venue"> items:
.row-venue:nth-child(odd) h3 {
color: white;
}
.row-venue:nth-child(even) h3 {
color: black;
}
If your divs are mixed with other elements, use :nth-of-type instead of :nth-child.
Your CSS is targeting odd/even <h3> tags within a .col-venue element, which I don't see in your markup. Even if .col-venue was in your markup It would only be targeting H3s within it - example here.
You need to control the styling from a higher level in the markup, see below.
<div class="row row-venue">
<div class="col-sm-12">
<h3>Venue 1</h3>
</div>
</div>
<div class="row row-venue">
<div class="col-sm-12">
<h3>Venue 2</h3>
</div>
</div>
.row-venue:nth-of-type(odd) h3 {
color: red;
}
.row-venue:nth-of-type(even) h3 {
color: black;
}
http://jsfiddle.net/Lvezzrnq/
With the above CSS selectors you are targeting odd and even .row-venue elements and then drilling down to the h3.
I want to add some css rules to .container.picture but only in .medium-width.
HTML is:
<div class="block medium-width">
<div class="container picture">
<img src="img/car4.png" title="Car">
</div>
<div class="container text">
</div>
</div>
CSS is:
.medium-width > .container.picture
{
width: 50%;
float: left;
}
Is something wrong in this selector?
No.
You may have other rules applied, or a context that prevent this selector from working.
But here, selector's right