Apply style to all nested li div's excluding the first li div - nested

No matter what I've tried to either target or exclude the first li div, nothing works. I tried :not(and different variations of the selectors here) but that didn't work. On one occasion, the result rendered as though looking into a mirror that's facing a mirror. No bueno. No classes or ids can be added--representative example below.
ul {
list-style-type: none;
}
.message-content-wrap {
background-color: red;
}
<ul id="thread-list" class="group-message-thread">
<li>
<div class="message-wrap group-messages-highlight">
<div class="avatar-wrap"></div>
<div class="message-content">
<div class="message-content-wrap">
<p>This is content in the first message</p>
</div>
</div>
</div>
</li>
<li>
<div class="message-wrap">
<div class="avatar-wrap"></div>
<div class="message-content">
<div class="message-content-wrap">
<p>This is content in the second message</p>
</div>
</div>
</div>
</li>
<li>
<div class="message-wrap">
<div class="avatar-wrap"></div>
<div class="message-content">
<div class="message-content-wrap">
<p>This is content in the third message</p>
<p>some text</p>
</div>
</div>
</div>
</li>
<li>
<div class="message-wrap">
<div class="avatar-wrap"></div>
<div class="message-content">
<div class="message-content-wrap">
<p>This is content in the fourth message</p>
<p>some more text</p>
</div>
</div>
</div>
</li>
</ul>
Any ideas would be most welcome. My attempt in jsfiddle

a few ways to style child elements
ul > li:not(first-of-type) {
// styles go here
}
ul > li {
// styles go here
}
ul:first-child {
}
li + li {
}

Related

Overlay a bootstrap 4 transparent navbar over an image using flexbox

I need to place a transparent bootstrap 4 navbar over a full screen image utilising flexbox. I need to be able to expand a carousel container (swiper.js) to fill the view port.
I have managed to expand the carousel container to fill the view port but the navbar does not appear transparently over it. To view what it currently does [click here][1]. To view what I would like to achieve [click here][2]
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png
To make your image overlap to the navbar, you just have to give position:absolute property to the navbar.
.navbar{
position:absolute;
}

Can I alter the way Bootstrap places columns?

I am looking for a way to make a row with 8 col-md-6 divs display in a different way than usual.
How bootstrap normally does it:
How I want it:
The number columns is dynamic so it can exceed 20 for example and be a uneven number.
Code:
<div class="row">
{foreach from=$item.Opties|default:array() name=optie item=optie key=key}
<div class="col-md-6">
test {$optie#iteration} (normally there is more code in here)
</div>
{/foreach}
</div>
I have tried:
order-md-* but for this solution i need to add css since it might exceed 12 which i'd rather not.
Having just 2x .col-md-6 and the foreach in there but its a bad solution. since then I have big piece of html twice.
If you can't change the markup structure there's no simple way.
One option is to use flex-column but there is no way to set the number of divs per column so you'd have to use max-height...
#media(min-width:768px) {
.mh {
flex-direction: column;
max-height:140px;
}
}
Another option is to use CSS columns which order from top to bottom instead of left to right.
.row.columns {
column-count: 2;
column-gap: .1rem;
display:block;
}
.columns > .col-md-6 {
display: inline-block;
width: 100%;
max-width: 100%;
}
The last option is to use flexbox ordering for the specific positions...
<div class="row">
<div class="col-md-6 order-1">
<div class="border p-1">1</div>
</div>
<div class="col-md-6 order-3">
<div class="border p-1">2</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">3</div>
</div>
<div class="col-md-6 order-7">
<div class="border p-1">4</div>
</div>
<div class="col-md-6 order-2">
<div class="border p-1">5</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">6</div>
</div>
<div class="col-md-6 order-4">
<div class="border p-1">7</div>
</div>
<div class="col-md-6 order-8">
<div class="border p-1">8</div>
</div>
</div>
Demo: https://www.codeply.com/go/IczuqP9l7K

Bootstrap 4 align-items-bottom inside div flexbox

this is simple. I'm trying to align-items-bottom a gear svg image to the bottom center of a div. However, it always keeps at the top of the div.
I tried both align-items-center and also align-bottom options.
What happens
How it should be
.gear {
height: 50px;
}
.banner {
height: 70px;
}
<footer>
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>
There is no align-items-bottom class. The class name is align-items-end..
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
<img class="gear d-flex" src="//placehold.it/300x70">
</div>
https://www.codeply.com/go/ub6hNpd9TL
Rows and column are your friends in Bootstrap.
So, create a pair, put your image/SVG inside, apply the class d-flex to the column and mt-auto (margin-top:auto) to the image.
Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer>
<div class="container-fluid bg-warning banner d-flex justify-content-center">
<div class="row" style="height: 60px;">
<div class="col d-flex">
<img class="gear mt-auto" src="https://placehold.it/30">
</div>
</div>
</div>
</footer>

Bootstrap 4 Navbar Spacing Issue

Hello I am trying to layout my navigation bar with Bootstrap 4 but some reason no matter it is not calling it out. It works in my Google developer inspector but when I insert the same code in my text editor nothing happens. Can someone help me understand what I am doing wrong?
HTML code:
<body>
<!--TOP Navigation -->
<nav class="navbar navbar-default navbar-toggleable-md ">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Delvin McCray
<!-- Right Side of Navbar w/ Dropdown Fatures-->
<ul class="nav navbar-nav">
<li class="dropdown">Women <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li class="dropdown">Men <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li>Off the Rack</li>
<li>Fall 2017</li>
</ul><!--End of navbar-right-->
</div>
<!-- Right side Navbar -->
<div class="collapse navbar-collapse justify-content-end"
id="navbarCollapse">
<ul class="navbar-nav">
<li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
hidden="true"></i> </a></li>
<li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
</body>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the top and fixed top examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
CSS styling:
body {
padding-top: 50px;
}
.dropdown, .dropup {
position: relative;
margin-right: 20px;
}
.nav li {
margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}

CMSMS does not display html code in edito

I have a very weird problem with CMSMS. I have some HTML in my header file, there should be 2 links, but every time I paste a second one and click Apply- it disappears from editor. Although it shows on website.
CMSMS version: 1.11.9
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a></div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It should be after save:
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a>
(this link keeps disappearing)
<a class="rounded no-bg-color" href="apps/customer/web/logout"><i class="icon-off icon-white"></i></a>
</div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It's probably the HTML editor (MicroTiny I expect) believing that link is invalid HTML and throwing it away.
Set the editor to HTML mode so that you can edit the HTML directly (not WYSIWYG). It will then accept your edits and not try to edit them.

Resources