Is there a way to set only the top border for an element through Pixate? I don't see it in the docs.
I've tried both of these, but they apply the border to all four sides:
#footer {
border-top:5px solid #FF0000;
}
#footer {
border:5px solid #FF0000;
border-width:5px 0px 0px 0px;
}
PLEASE NOTE: I am talking about Pixate here, NOT browser CSS!
You can't apply a border to a single side, no.
But there is a workaround:
#footer {
box-shadow:inset 0px 1px 0px solid #FF0000;
}
That should create the same effect. Good luck. :)
Related
I have a paper-droopdown-menu that displays normally. But I would like to change the backgroud colour as shown in the graphic below
I have tried the following but it did not affect the background.
* /deep/ paper-dropdown-menu::shadow #menu {
background-color: #eee;
border: 1px solid #ccc;
}
paper-dropdown-menu {
background-color: red;
}
or just the input element
paper-dropdown-menu::shadow #control {
background-color: red;
}
If this isn't what you want, can you please add the HTML to your question that produces the layout you have in your screenshot.
I am using zurb foundation framework, I would like to change the triangle image of the drop down on the top-bar nav menu to a cog. How can this be done?
Are you using the vanilla CSS and JS, or the foundation gem? Assuming it's the gem go into foundation_and_overrides.scss and Remove the triangle using:
$topbar-arrows: false; //Set false to remove the triangle icon from the menu item
Then you can add custom css to put a cog there instead. Below is the original css for the triangle, which was creating using a very small inset border, if you want to make sure you're matching the proper margins etc,
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
Edit Here is some CSS which gets nearly there, except margin-right being overridden by some of foundation's css... Should help though
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 15px;
height: 15px;
margin-right: 0px;
background-image:url('https://cdn1.iconfinder.com/data/icons/imod/512/Hardware/pignon.png');
background-size:15px 15px;
background-repeat:no-repeat;
background-position:center;
}
Simply put the question is - is there a way to align link text within an action link vertically?
I need to make a button-looking Html.ActionLink control.
There is a reasonably good example at Html.ActionLink as a button or an image, not a link
I have implemented this approach, however, I need not just an "image" button,
but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.
Here is what I have (Razor):
#Html.ActionLink(#commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { #class = "commiteeButton" })
and CSS:
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
}
The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically).
I do not know how to center link text vertically, so that it can be located right in the center of an image.
Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?
<a class="nonunderlinedlink" href="#Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
<div class="commiteeButton">
<p class="pstyle">#commitee.Name</p>
</div>
</a>
Try the following changes in your css
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}
Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.
Thank you all for your quick reply!
I know it's a bit late but you could also use line-height: 50px; to center your text vertically
I'm trying to place a shadow under a popup panel that defined as follows:
<popupset id="mainPopupSet">
<panel id="autoTagBookmarksPopup" noautohide="true" fade="none" backdrag="true" level="float">
<hbox id="titleBox">
<spacer flex="1"/>
<image id="closeImage" align="end"/>
</hbox>
...
I wasn't succesful with the: box-shadow
any one has sugestions?
Can you paste the css that you were using for box-shadow?
Try this...
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
This is an old question but I had the same issue and want to share my solution so this might be of any help for others.
I have not found a way to place the box-shadow on a panel directly. It seems, that everything visually outside the panel element will be cutted (the shadow is placed outside).
However I then defined the shadow for the first child and added some margin so the shadow will be visible.
For the given example, this might look something like this (untested):
panel#autoTagBookmarksPopup {
background-color: transparent;
border-width: 0px;
}
panel > hbox#titleBox {
margin: 5px;
border: 1px solid #bbb;
background-color: #fff;
box-shadow: 2px 2px 3px #888;
}
I'm trying to create a pointy button like this:
So far, I was only able to achieve this:
I thought increasing the horizontal border-radius would make it sharp, but all it does it make the roundness longer.
HTML
<a class="button">Back</a>
CSS
.button {
display: inline-block;
height: 3em;
padding: 0 0.7em 0 1.4em;
border: 0.1em solid black;
border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
background: -moz-linear-gradient(
top,
#fff,
#ccc
);
}
You don't want to be using border-radius as that assigns a quarter-circle shape to each specified corner. Instead you hack it with specific border-width properties, as illustrated in this site: http://www.howtocreate.co.uk/tutorials/css/slopes
However I feel you're solving the problem the wrong way; what you're doing is best done using a background image, which is how the iOS-style Back buttons are implemented in iPhone-for-web stylesheets. If you need something resolution-independent then you can use SVG without penalty now.
Having thought about it more, this is a more elegant solution that allows much more effective styling and the use of just one HTML element. Using this method, we can achieve the results in your concept completely.
HTML
Back
CSS
a.button {
text-decoration:none;
color:#111;
text-shadow:0 1px 0 #fff;
font-weight:bold;
padding:10px 10px;
font-size:14px;
border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
float:left;
margin-left:30px;
margin-top:20px;
position:relative;
font-family:verdana;
color:#3b3d3c;
border:1px solid #666;
border-left:0;
background: -moz-linear-gradient( top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%);
}
a.button:after {
content:"";
width:25px;
height:25px;
background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
position:absolute;
top:5px;
left:-14px;
z-index:-1;
border:1px solid #666;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
border-left:0;
left:-13px;
}
The last rule is for Chrome, which otherwise renders the result slightly differently.
Hope this helps.
You can create such an effect using 2 elements side by side wrapped in the anchor tags.
<style type="text/css">
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid orange;
float:left;
}
.button {
float:left;
height:60px;
background:orange;
width:50px;
line-height:60px;
font-weight:bold;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
</style>
</div><div class="button">Back</div>
I'm not sure if it's the most refined solution, but it certainly looks the same as your concept art and functions as intended.