I would like to add a line between the single post titles, the single categories and the months in the right side column. (Here is the link, to show what I mean: www.veda-vit.de)
Is there anybody who knows how I can do that?
Thank you very much.
Greetings,
pradhana
You could add border-bottom: 1px solid #ccc; to .widget-title if you want a line between the title and contents like this: https://www.dropbox.com/s/50b6f862ied5hv6/Screenshot%202016-11-12%2007.24.05.jpg?dl=0 or if you'd like lines between each item like the screenshot below you would add the border CSS to .widget-container ul li https://www.dropbox.com/s/kn8pu2r4g7y6njt/Screenshot%202016-11-12%2007.23.48.jpg?dl=0
Updated CSS:
#secondary .widget-title {
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
}
Related
I am trying to style an active item in bootstrap list-group similar to this:
See how Recent is highlighted with just a dark border on the left.
This is my code:
Code
This is my css:
.list-group-item.active {
background-size: 10px;
background-color: #add8e6;
border-color: #add8e6;
}
Please advice.
Thanks. Added a border-left: 5px solid blue and it worked
I want to get rid of the frame that is around an Input in SAPUI5 framework. I want to make an input field elevated but the frame around the input field makes it not like desired.
I have tried it using CSS like this:
.cityInput{
border-bottom-color: #FFFFFF;
color: #FFFFFF;
background: none;
min-height: 27px;
border: none;
outline: none;
box-shadow: 5px 5px 7px #808888;
}
I want to get rid of the two yellow lines that surrounds the input field.
Thanks.
I am assuming that you want to get rid of the default (silver/grey) border around the input box. If this is the case then I would suggest making the border color same as your background. Making border=none, on the input class, directly does not work.
.cityInput .sapMInputBaseInner {
border: 1px solid #fdf6b1;
}
I am trying to make a header of multistage form containing the page number and description .
What I want to do is divide each step with an arrow mark something like this
1 step > 2tep > 3 step> 4 step
This is mostly a css question I just need to know how to make those boder into arrow sign
Fiddle
Explanation
As you can see in the fiddle I have icons that changes to check mark when you slide to next step . So I am trying to separate these icons with > arrow and then add some css background colors to separate the active,previous, next steps
Looking at your fiddle, does this do what you want?
.divider:before { content: ">"; }
are you searching something like this fiddle (I've done a simple arrow with text)?
.generatecssdotcom_arrowpoint {position:absolute;top:0;right:0;font-size:8px;color:#cccccc;}
.generatecssdotcom_arrowpoint a {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrowpoint a:hover {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrow {text-align:left;font-size:24px;font-family:Georgia;color:#000000;width:250px;height:30px;position:relative;background:#E46B00;border:7px solid #FFCC00;margin:7px 41px 7px 7px;padding:10px;}
.generatecssdotcom_arrow:after, .generatecssdotcom_arrow:before {left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.generatecssdotcom_arrow:after {border-left-color:#E46B00;border-width:34px;margin-top:-34px;}
.generatecssdotcom_arrow:before {border-left-color:#FFCC00;border-width:44px;margin-top:-44px;}
refer this site to generate it
for a single arrow refer this demo
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
<div class="arrow-right"></div>
Here is a funny problem that I encountered.
I am using Asp.net MVC WebGrid in my project. I am trying to apply some CSS to it.
So changed the code to
#grid.GetHtml(footerStyle: "pagination")
Now, the pagination class has some code like this
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #F2F2F2;
}
So now, when I run this file and hover over the page numbers, the panel containing the table starts expanding! One row at a time!
I know I can't manage to get this kind of effect with just CSS if I tried. :p But I am getting it by accident! And it goes away only if I remove both the border and the background-color attributes.
I am just curious to know how is this happening??! Anyone has any idea?
Borders add to the size of some elements. For example, consider you have a div with a height of 800px and a width of 400px. If you add a border of 5px to that div like so:
div.class {
border: 5px solid black;
}
Then you'll notice that the box expands by 5px in every direction; resulting in the box being 810px by 410px.
This can be avoided by using something like this:
div.class {
border: 5px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
This should solve your problem... hopefully!
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.