I am new to the Vaadin framework.I'm now trying to learn it by rebuilding the demo on their front page of Quciktickets dashboard using the Eclipse vaadin plug-in. Now I'm using css in my Theme to configure the sidebar part of that page.
My problem is after I add the buttons in the sidebar, they seems to be too far away from each other. So how can I fix it? I've tried to use padding, but that will only change the size of the button block while I wanna change the spacing between the blocks. Thx for anyone paying attention or giving hints for such a noob question.
code define the nativebutton layout:
.sidebar .sidemenu .v-nativebutton {
-webkit-appearance: none;
display: block;
padding: 10px 14px 10px;
width: 100%;
border: none;
margin: 0;
/*position: relative;*/
border-top: 1px solid #4b4c4d;
border-top-color: rgba(255,255,255,.05);
border-bottom: 1px solid #353637;
border-bottom-color: rgba(0,0,0,.18);
background:transparent;
color: #888a8c;
font-weight: normal;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
text-align:center;
}
Related
Hay i m using a inovado wordpress theme and i have been struggled from many hoers with my menu and my footer.
Situation is that i have to many elements in my menu and my flags for changing language are going to second row (menu is to long).
http://www.wesby-solutions.com/index.php/accueil/
Second challenge is my responsive footer, i have already changed for desktop and tablet but cannot find for mobile(css file).
When i m changing resolution for mobile the logo is in bad position.
Sow i have two questions:
- in witch files i have to change menu with or some othere solution for keeping menu in one line.
- witch css file is commanding a mobile styles and where can i find this file?
please help me :)
On line 862 of /wp-themes/inovodo/style.css change padding from this
#navigation ul li a {
height: 87px;
display: block;
float: left;
margin: 0 0 0px 15px;
padding: 0px 5px;
line-height: 90px;
border-bottom: 3px solid transparent;
font-size: 13px;
color: #666666;
}
to
#navigation ul li a {
height: 87px;
display: block;
float: left;
margin: 0 0 0px 15px;
padding: 0px 3px;
line-height: 90px;
border-bottom: 3px solid transparent;
font-size: 13px;
color: #666666;
}
and for footer you can add media queries to this element in the same style.css file.
.copyright-text img#footer-img-logo
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.
What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?
.icon-picker {
border: 0px solid #000000;
margin-right: 5px;
width: 24px;
height: 24px;
background-color: #FFFFFF;
padding-bottom: 4px;
}
.selected {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid #000000;
}
.icon-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 15px;
max-width: 300px;
}
Thanks for your time.
jsfiddle
You need to make the <i> tag a block element for the width and height to be applied to the element.
See fiddle
.icon-picker {
border: 0px solid #000000;
display: inline-block;
margin-right: 5px;
width: 24px;
background-color: #FFFFFF;
}
This is my site:
http://www.michelepierri.it/
I correctly see my theme in FF and IE but if I open it in Chrome menu voice are not correctly visualized:
Can you help me to resolve this problem?
After reviewing your css, I found too many unused styling please remove those and use these rules:
.menu li {
float: left;
}
.menu a {
white-space: nowrap;
border-left: 1px solid #585858;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
padding: 0 0.9em;
text-shadow: 0 1px 1px #242424;
}
Please see the attachment after doing that changes.
See I am also using the same version and for me its fine
Prevent menu options from wrapping text
Add an additional style rule to your menu links CSS so all text stays in the same line.
.menu a {
border-left: 1px solid #585858;
color: #fff;
display: block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 0.9em;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px #242424;
white-space: nowrap; /* THIS ONE */
}
And add the same thing to .sub-header-menu a style definition because when I check the site even Cloud Computing is wrapped and breaks the whole situation.
Advice: It is ok that you're exploring the possibilities of CSS but you're playing a bit too much with it producing legibility problems. Letter and word spacing should only be cautiously manipulated. I'd suggest to remove majority of letter and word spacing settings.
I have inherited a legacy app for a rewrite and have run across a curious problem. There is tabular data displayed on the page where the title of the table is within a trapezoidal shape that resembles a manila envelope tab. At the bottom of such tables, there is usually a button row that is the same shape as the table title but rotated 180°. Currently, this effect is being pulled off by using a square image with a white triangle in one half on a transparent background as a background image in the corner of a rectangular block to achieve the look of a trapezoid. However, this technique is prone to flickering when the page is refreshed.
As an exercise, I have tried to see if I can replace this with a pure CSS technique. I found this link to different shapes in CSS and have emulated the trapezoid to look as I need. I am able to place the table title text within a trapezoid correctly. However, when I need the look of the 180° rotated trapezoid, I am unable to get the text to place within the shape. My code is included below and here is a jsFiddle showing what I have accomplished so far. I understand that the text shows below the rotated trapezoid because the height is set to 0 and I'm using border-top to build the shape. Is there anything I can do to get this to work correctly?
Please keep in mind that I need this to display in IE8 (and possibly also IE8 in compatibility mode -- IE7). Also, I'd like to keep additional HTML elements to a minimum because I want to keep this as semantic as possible. I know I can place a span inside the div and absolutely position that span so that it displays the text within the shape, but when I do that I have to manually set a width on the trapezoid and when the width can vary from button row to button row, I'd rather not go down that path.
Thanks.
HTML:
<div class="trap">Title Text</div>
<div class="trap180">Button Row</div>
CSS:
.trap {
color: black;
font: normal bold 13px Arial;
border-bottom: 27px solid #F00;
border-right: 27px solid transparent;
height: 0px;
float: left;
line-height: 27px;
padding: 0 4px;
}
.trap180 {
clear: both;
color: black;
font: normal bold 13px Arial;
border-top: 27px solid #F00;
border-left: 27px solid transparent;
height: 0px;
float: right;
margin: 20px 0 0 0;
line-height: 27px;
padding: 0px 4px 0;
}
It's possible with pseudo-elements. But I don't have access to those old browsers to test.
.trap, .trap180 {
color: black;
font: normal bold 13px Arial;
float: left;
line-height: 30px;
height: 30px;
padding: 0 4px;
background: salmon;
position: relative;
}
.trap180 {
float: right;
margin: 20px 0 0 0;
}
.trap:after,.trap180:after {
content: '';
position: absolute;
height: 0px;
width: 40px;
top: 0;
}
.trap:after {
right: -30px;
border-bottom: 30px solid salmon;
border-right: 30px solid transparent;
z-index: -10;
}
.trap180:after {
left: -30px;
border-top: 30px solid salmon;
border-left: 30px solid transparent;
z-index: -10;
}
Demo
Frankly, if you need to still support IE7, I would just use images or allow a little graceful degradation.