I have this code in my CSS file:
.blog-nav li {
position: relative;
display: inline-block;
font-weight: 500;
}
.blog-nav li a {
color: #fff;
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav li a:hover,
.blog-nav li a:focus {
color: #fff;
text-decoration: none;
}
I would like to add an arrow like this: https://getbootstrap.com/docs/3.4/examples/blog/.
I tried with this code from the basic template from bootstrap:
/* Active state gets a caret at the bottom */
.blog-nav li a .active {
color: #fff;
}
.blog-nav li a .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
as i saw from your code, the .active class is not a selector of anchor tag, which means the .active is a child of anchor tag, not state class, i hope i understood you well
so it should be like this
/* Active state gets a caret at the bottom */
.blog-nav li a.active {
color: #fff;
}
.blog-nav li a.active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
read more about selectors
Related
Fiddle here
I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}
CSS solution with rectangles
Here is an example that does not use triangles, but instead uses rotated rectangle.
Explanation:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow.
Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.
body {
background-color: #555;
}
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu .arrow {
position: relative;
display: inline-block;
list-style: none;
font-size: 2em;
width: 150px;
height: 70px;
background-color: white;
margin-right: 90px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.arrow:first-of-type {
border-left: 2px solid red;
}
.arrow::after {
position: absolute;
top: 9px;
right: -25px;
content: "";
height: 50px;
width: 50px;
background-color: white;
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow::before {
content: "";
position: absolute;
top: 9px;
left: -25px;
height: 50px;
width: 50px;
background-color: #555; /*Needs to match body backgrond-color*/
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow:first-of-type::before {
content: none;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>
I'm a newbie in CSS.
I've created a website in Wordpress and I've made a new template page.
Can be found at http://jobboard.jobsbe.be/test/
I've added some CSS to make the page look like I want but there is one thing that I can't find out how to get it work.
When you look at the page you will see that I used a divider, with between the 2 dividers the word "OR".
I've tried everything that I know and found on the internet, but I can't get the word "OR" centered between the two dividers.
Who knows how I can do this?
This is my css:
/**
* The parent theme's CSS is automatically included so there is no need
* to use the #import rule to include the parent theme CSS.
*
* Place Custom CSS Below this.
*/
/**Changing color of links footer*/
.widget--footer a {
color: #7dc246;
}
/**Changing color of menu links*/
.nav-menu--primary ul li a, .nav-menu--primary li a {
color: #7dc246;
}
.nav-menu--primary ul li a:hover, .nav-menu--primary li a:hover {
color: #fff; background-color: #7dc246;
}
/**Changing style Login box*/
.nav-menu--primary ul li.highlight > a, .nav-menu--primary ul li.login > a {
border-style: solid;
border-width: 1px;
border-color: #7dc246;
color: #fff;
background-color: #7dc246;
}
.nav-menu--primary ul li.highlight > a:hover, .nav-menu--primary ul li.login > a:hover {
border-style: solid;
border-width: 1px;
border-color: #7dc246;
color: #7dc246;
}
/**Changing style menu on small screen*/
.primary-menu-toggle:before {
color: #7dc246; background-color: #fff;
}
/**Buttons Signup Page*/
.btn.btn-primary.text-capitalize.m-0 {
border-radius: 5px;
background: #7dc246;
color: #fff;
padding: 15px;
}
.o-or-divider {
color: #7d7d7d;
font-size: 20px;
font-weight: bold;
padding-top: 115px;
text-align: center;
}
*, :after, :before {
box-sizing: border-box;
}
.o-or-divider:before {
top: -10px;
}
.o-or-divider:after, .o-or-divider:before {
position: absolute;
content: "";
display: block;
padding: 55px 0;
border-left: 1px solid #7dc246;
left: 80px;
}
*, :after, :before {
box-sizing: border-box;
}
.o-or-divider:after {
top: 155px;
}
.o-or-divider:after, .o-or-divider:before {
position: absolute;
content: "";
display: block;
padding: 55px 0;
border-left: 1px solid #7dc246;
left: 80px;
}
*, :after, :before {
box-sizing: border-box;
}
The dividers aren't centered properly, just add left:50%; to the before and after:
.o-or-divider:after, .o-or-divider:before {
position: absolute;
content: "";
display: block;
padding: 55px 0;
border-left: 1px solid #7dc246;
left: 50%;
}
In fact it is your :before and :after that aren't centered.
You should had to both of them the following rule:left: 50%;
Since the container of them is already a position: relative; they will be positionned at 50% from the very left of the container.
More infos about positionning in css
How can I make this CSS progress tracker responsive?
I want the "steps" to stack on top of each other when viewed on a screen that is too small to fit them horizontally.
Code snippet included below, or jsfiddle here if you prefer:https://jsfiddle.net/yr6kwzcv/
/* Resets the ordered list styles and makes the list elements be displayed in a single line */
.track-progress {
margin: 0;
padding: 0;
overflow: hidden;
}
.track-progress li {
list-style-type: none;
display: inline-block;
position: relative;
margin: 0;
padding: 0;
text-align: center;
line-height: 30px;
height: 30px;
background-color: #f0f0f0;
}
/* Make it occupy all the available width */
.track-progress[data-steps="3"] li { width: 33%; }
.track-progress[data-steps="4"] li { width: 25%; }
.track-progress[data-steps="5"] li { width: 20%; }
/* Adds a "done" class to represent the progress */
.track-progress li > span {
display: block;
color: #999;
font-weight: bold;
text-transform: uppercase;
}
.track-progress li.done > span {
color: #666;
background-color: #ccc;
}
/* add the arrows */
.track-progress li > span:after,
.track-progress li > span:before {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: #f0f0f0;
border-width: 15px;
}
.track-progress li > span:after {
top: -5px;
z-index: 1;
border-left-color: white;
border-width: 20px;
}
.track-progress li > span:before {
z-index: 2;
}
/* Make arrows match the color of the previous step and remove arrow from first element */
.track-progress li.done + li > span:before {
border-left-color: #ccc;
}
.track-progress li:first-child > span:after,
.track-progress li:first-child > span:before {
display: none;
}
/* Adds arrows appearance to the start and end */
.track-progress li:first-child i,
.track-progress li:last-child i {
display: block;
height: 0;
width: 0;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: white;
border-width: 15px;
}
.track-progress li:last-child i {
left: auto;
right: -15px;
border-left-color: transparent;
border-top-color: white;
border-bottom-color: white;
}
<ol class="track-progress" data-steps="3">
<li class="done">
<span>Site Information</span>
<i></i>
</li><!--
--><li class="done">
<span>Data Source</span>
</li><!--
--><li>
<span>Final Details</span>
<i></i>
</li>
</ol>
Here is the source of the code snippet I recreated above: https://coderwall.com/p/-7trcg/simple-css-only-wizard-progress-tracker
Fiddle here
I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}
CSS solution with rectangles
Here is an example that does not use triangles, but instead uses rotated rectangle.
Explanation:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow.
Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.
body {
background-color: #555;
}
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu .arrow {
position: relative;
display: inline-block;
list-style: none;
font-size: 2em;
width: 150px;
height: 70px;
background-color: white;
margin-right: 90px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.arrow:first-of-type {
border-left: 2px solid red;
}
.arrow::after {
position: absolute;
top: 9px;
right: -25px;
content: "";
height: 50px;
width: 50px;
background-color: white;
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow::before {
content: "";
position: absolute;
top: 9px;
left: -25px;
height: 50px;
width: 50px;
background-color: #555; /*Needs to match body backgrond-color*/
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow:first-of-type::before {
content: none;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>
LIVE EXAMPLE ON CODEPEN
I would like to have the background-color: papayawhip; on .active connect with the red bar to the left of the . What is the best method in accomplishing this. I would like to maintain the same spacings show in the codepen.
html
<ol class="meny-control">
<li class="active">Potential Apparel</li>
<li>Facebook + Pillow</li>
<li>Skatelocal.ly</li>
<li>Cooking.is</li>
<li>Foodsters</li>
</ol>
SCSS or less
li
{
padding: 10px 0;
margin: 10px 0;
color: #ccc;
a
{
color: #ccc;
text-decoration: none;
}
}
.active
{
position:relative;
background-color: papayawhip;
color: #333;
&:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: -64px;
width: 5px;
background: #f26645;
}
a
{
color: #333;
}
}
ol
{
list-style-type: decimal-leading-zero;
padding-left: 64px;
}
How about this for your scss/less:
li
{
padding: 10px 0;
margin: 10px 0;
color: #ccc;
padding-left: 32px;
border-left: 5px solid transparent;
a
{
color: #ccc;
text-decoration: none;
}
}
.active
{
position:relative;
background-color: papayawhip;
color: #333;
border-left: 5px solid #f26645;
a
{
color: #333;
}
}
ol
{
list-style-type: decimal-leading-zero;
list-style-position: inside;
}
http://codepen.io/anon/pen/oLgqJ