On Laravel blade I'm using this code to iterate through a list which is filled by an array:
<ul>
#foreach($prerequisites as $prerequisite)
<li class="pre-course"
style="border-bottom: 1px solid #eee;">
<p>
...
</p>
</li>
#endforeach
</ul>
on this my code each <li> have border-bottom: 1px solid #eee; and i'm trying to remove that on last child with Css by code:
ul li.pre-course:last-child {
border-bottom:none;
}
but it doesn't work and last child have border
I suppose that's due to the inline style overriding the stylesheet CSS. Try to move the "regular" rule from inline to the stylesheet, like this:
<ul>
#foreach($prerequisites as $prerequisite)
<li class="pre-course">
<p>
...
</p>
</li>
#endforeach
</ul>
and CSS:
ul li.pre-course {
border-bottom: 1px solid #eee;
}
ul li.pre-course:last-child {
border-bottom:none;
}
That way :last-child will overwrite the regular CSS rule
ul li:last-child {
border-bottom:none !important;
}
Priority of in-line css is higher
<li class="pre-course">
<p>
...
</p>
</li>
Try this css
ul li.pre-course:not(:last-child) {
border-bottom: 1px solid #eee;
}
Related
Okay, new to WordPress. I have created the wordpress recent posts widget, which has generated a some new WordPress Markup which I am trying to select to add my custom style.
After researching on the web I have found no alternative option other than to go inspect element and find the WordPress html markup selector/ids and write my css for them. (Is there a better way).
Here is my Html for widget:
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<?php
// If the sidebar widget is active i.e. in the admin a widget is been created then show the dynamic sidebar in the markup otherwise waste of markup.
if(is_active_sidebar('recentpost')) {
dynamic_sidebar('recentpost');
}
?>
</ul>
</div>
Note: there is another wordpress generated headline 'Recent Post' that is in color white - is there a title filter?
Here is the wordpress inspect element html markup
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Posts</h2>
<ul>
<li>
asdfads
</li>
<li>
Title 2
</li>
<li>
TITLE 1
</li>
</ul>
</li>
</ul>
</div>
Here is me trying to select the Recent Post List id/selector to remove bullets and add style
/* RECENT POST */
.recent-post-wrap {
margin-top: 1rem;
padding: 1rem;
background-color: red;
}
/* list */
.recent-post-wrap ul {
padding: 1rem;
}
.recent-post-wrap ul li {
padding: 2%;
}
.recent-post-wrap a:hover {
background-color: black;
}
#recent-post-headline {
font-size: 1rem;
}
/* Wordpress Recent Post Plugin */
li#recent-posts-3.widget.widget_recent_entries a {
list-style: none;
color: red;
background-color: red;
}
try this
.recent-posts ul {list-style: none;}
or to remove all bullet from ul
ul {list-style: none;}
/* RECENT POST */
.recent-post-wrap {
margin-top: 1rem;
padding: 1rem;
background-color: red;
}
/* list */
.recent-post-wrap ul {
padding: 1rem;
}
.recent-post-wrap ul li {
padding: 2%;
}
.recent-post-wrap a:hover {
background-color: black;
}
#recent-post-headline {
font-size: 1rem;
}
/* Wordpress Recent Post Plugin */
/*li#recent-posts-3.widget.widget_recent_entries a {
list-style: none;
color: red;
background-color: red;
}*/
.recent-posts ul {
list-style: none;
}
.recent-posts ul li a {
color: red;
background-color: yellow;
}
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<li id="recent-posts-3" class="widget widget_recent_entries">
<h2 class="widgettitle">Recent Posts</h2>
<ul>
<li>
asdfads
</li>
<li>
Title 2
</li>
<li>
TITLE 1
</li>
</ul>
</li>
</ul>
</div>
Is it possible to have a multi level dropdown menu by using the elements of twitter bootstrap 2?
The original version doesn't have this feature.
Updated Answer
* Updated answer which support the v2.1.1** bootstrap version stylesheet.
**But be careful because this solution has been removed from v3
Just wanted to point out that this solution is not needed anymore as the latest bootstrap now supports multi-level dropdowns by default. You can still use it if you're on older versions but for those who updated to the latest (v2.1.1 at the time of writing) it is not needed anymore. Here is a fiddle with the updated default multi-level dropdown straight from the documentation:
http://jsfiddle.net/2Smgv/2858/
Original Answer
There have been some issues raised on submenu support over at github and they are usually closed by the bootstrap developers, such as this one, so i think it is left to the developers using the bootstrap to work something out. Here is a demo i put together showing you how you can hack together a working sub-menu.
Relevant code
CSS
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
display: block;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
Created my own .sub-menu class to apply to the 2-level drop down menus, this way we can position them next to our menu items. Also modified the arrow to display it on the left of the submenu group.
Demo
[Twitter Bootstrap v3]
To create a n-level dropdown menu (touch device friendly) in Twitter Bootstrap v3,
jsfiddle-demo of n-level dropdown menu v3.0.0 | v3.1.1 | v3.3.0
CSS:
.dropdown-menu>li /* To prevent selection of text */
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu
{
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.right-caret:after,.left-caret:after
{ content:"";
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
display: inline-block;
height: 0;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.right-caret:after
{ border-left: 5px solid #ffaf46;
}
.left-caret:after
{ border-right: 5px solid #ffaf46;
}
JQuery:
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
</div>
This example is from http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Works for me in Bootstrap v3.1.1.
HTML
<div class="container">
<div class="row">
<h2>Multi level dropdown menu in Bootstrap 3</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
I was able to fix the sub-menu's always pinning to the top of the parent menu from Andres's answer with the following addition:
.dropdown-menu li {
position: relative;
}
I also add an icon "icon-chevron-right" on items which contain menu sub-menus, and change the icon from black to white on hover (to compliment the text changing to white and look better with the selected blue background).
Here is the full less/css change (replace the above with this):
.dropdown-menu li {
position: relative;
[class^="icon-"] {
float: right;
}
&:hover {
// Switch to white icons on hover
[class^="icon-"] {
background-image: url("../img/glyphicons-halflings-white.png");
}
}
}
I just added class="span2" to the <li> for the dropdown items and that worked.
Since Bootstrap 3 removed the submenu part and we need to adapt ourselves the style, I think it's better to go with SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
That would save us time on mobile responsive and style.
This plugin also very promising.
Hi to everyone and many thanks to all who put out the effort to help me.
Here is my problem, and please bear with me as I'm relatively new to all of this.
I'm trying create a custom WordPress theme for the blog on my site, so that the look and feel of my blog and my site are seamless.
Right now my problem is the nav menu. I have vertical lines separating the nav links and I have been unable to find any examples that show how to do this, or something like it in WordPress and if it's possible can it be done without jQuery.
Here is my site for the visual; http://is-images.com/
If it helps, here is the html code for the menu and the css
<div id="HeaderNav">
<ul>
<li class="link">about</li>
<li class="navsep"> </li>
<li class="link">web</li>
<li class="navsep"> </li>
<li class="link">photo</li>
<li class="navsep"> </li>
<li class="link">blog</li>
<li class="navsep"> </li>
<li class="link">contact</li>
</ul>
</div>
CSS
#HeaderNav
{
display:block;
width:300px;
height:24px;
float:right;
margin-top:70px;
margin-right:37px;
}
#HeaderNav ul
{
position:relative;
display:block;
float:right;
}
#HeaderNav ul li
{
padding:0 4px;
display:block;
height:100%;
float:left;
margin:0 auto;
text-align:center;
}
#HeaderNav ul li.navsep
{
width:1px;
height:24px;
margin:0 7px;
padding:0;
background-color:#ffffff;
}
If anyone can help, in any way, I would greatly appreciate it.
Again, many thanks to all who put out the effort.
If you want to add vertical lines to separate your nav menu options on your wordpress theme you can do it with a few CSS rules. jQuery is not needed.
Here you go:
li.menu-item a {
border-right: 1px solid #fff;
padding-right: 5px;
padding-left: 5px;
}
they have just create an empty element after each menu:
<li class="navsep"> </li>
Then design it with css
#HeaderNav ul li.navsep
{
width:1px;
height:24px;
margin:0 7px;
padding:0;
background-color:#ffffff;
}
My issue is that I have cart section of the website where it automatically picks 5 related products on the right side of the page. I added a bottom-border style so you can tell the difference between each product. The issue here is that there's 4 dividers, or border lines, whatever you wish to call it. However as you can see in the picture below, having the 4th divider is completely redundant since it's already the last item. My question is what code would be necessary to add to take off the last divider to this stylesheet. I only have 1 line of code for the add to cart bottom border since it repeats itself every time a new object is added, and the max is 5 items every time.
I was going to take a picture and upload it directly but apparently you need more points just to post a picture, so I uploaded a picture at imgur until I have enough points. Cheers.
Code:
HTML Page:
<div class="addToCart_bottomBorder"></div>
CSS Page:
.addToCart_bottomBorder {
border-bottom: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li:last-child {
border-bottom: none;
}
Reference pic:
Might have better results using border-top and removing it from the first child :)
IE8 and below, from memory, don't support last-child
.addToCart_bottomBorder li {
border-top: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li:first-child {
border-top: none;
border-bottom: none;
}
and here is the html
<ul class="addToCart_bottomBorder">
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
</ul>
and a jsFiddle for good measure
edit
Updated code and added a fiddle.
You could use the CSS adjacent sibling selector (+).
Assuming your HTML looks like this:
<div class="addToCart_bottomBorder">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Last</li>
</ul>
</div>
Then the CSS would be:
.addToCart_bottomBorder {
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li+li {
border-top: #d9d9d9 1px solid;
}
Fiddle: http://jsfiddle.net/M8kN2/
Lets break this down, .addToCart_bottomBorder li:last-child,
.addToCart_bottomBorder This is the parent
li and this is the child
With the following selector you are targeting the li of your parent, .addToCart_bottomBorder, and then removing the border from the last li but since those styles are on the parent you are removing nothing from them.
Without more of your html and css it is hard to tell how you have it structured but this is how it should be structured.
<ul class="pickFive">
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
</ul>
With this css,
.addToCart_bottomBorder {
border-bottom: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.pickFive li:last-child {
border-bottom: none;
}
If you structure it like so the last child of the parent will have no border. Check this JSFIDDLE to see how it works.
Instead of this
.addToCart_bottomBorder li:last-child {
border-bottom: none;
}
Do This
.addToCart_bottomBorder li:last-child {
border-bottom: #FFFFFF 0px solid;
}
that's how i do it anyways, and it works fine
here comes the HTML:
<ul id="plugins_fullMenu">
<li> Főoldal </li>
<li> Bemutatkozás </li>
<li> Termékek </li>
<li> Kategóriák
<ul class="plugins_fullMenu first">
<li> kateg1 </li>
<li> kateg2 </li>
<li> prognyelv
<ul class="plugins_fullMenu ">
<li> C# </li>
<li> C </li>
<li> C++ </li>
</ul></li>
</ul></li>
<li> Linkek </li>
<li> Admin felület
<ul class="plugins_fullMenu">
<li> a </li>
<li> b </li>
</ul></li>
<li> veg </li></ul>
and the CSS:
#plugins_fullMenu, .plugins_fullMenu, #plugins_fullMenu .plugins_fullMenu li
{
margin:0px;
padding:0px;
display: table;
}
#plugins_fullMenu li
{
float:left;
display: inline;
cursor:pointer;
list-style:none;
padding:0px 0px 0px 0px;
border:1px #000 solid;
position:relative;
}
#plugins_fullMenu li ul.first
{
left:-1px; top:100%;
background-color: red;
}
li, li a
{
color:#000;
text-decoration:none;
padding: 10px 0px 10px 0px;
}
#plugins_fullMenu .plugins_fullMenu li
{
width:100%;
/* text-indent:10px;
line-height:30px;
margin-right:10px;*/
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:red;
}
#plugins_fullMenu li a
{
display:block;
width:inherit;
height:inherit;
}
ul.plugins_fullMenu
{
display:none;
}
#plugins_fullMenu li:hover > a, #plugins_fullMenu li:hover
{
color:#fff;
background:green;
}
li:hover > .plugins_fullMenu
{
display:block;
position:absolute;
width:auto;
top:-1px;
left:50%;
z-index:1000;
border:1px #000 solid;
}
li:hover
{
position:relative;
z-index:2000;
}
now the problem is the two submenu of "admin felület" overlaps it. It should not, whats wrong?
ok. as suggested
your fist submenu class is plugins_fullMenu first while the next one is only plugins_fullMenu