How can I cofigure WebStorm aligning for less that will make it possible to align properties just like bootstrap less files have:
#navbar-default-color: #777;
#navbar-default-bg: #fff;
#navbar-default-border: darken(#navbar-default-bg, 6.5%);
#navbar-default-box-shadow: 0px 1px 5px 0px rgba(17, 16, 14, 0.1);
Currenly when I apply formatting I get the following:
#navbar-default-color: #777;
#navbar-default-bg: #fff;
#navbar-default-border: darken(#navbar-default-bg, 6.5%);
#navbar-default-box-shadow: 0px 1px 5px 0px rgba(17, 16, 14, 0.1);
you can align CSS properties by setting Settings | Code Style | CSS, Other, Align values: on colon
Related
Good morning, or good afternoon :)
I am trying to custom a QToolBar.
I managed to custom the buttons of my toolbar, but I can't find a way to set the expansion button to the two default arrows...
Here is an illustration to help you understand :
On this toolbar, you can see a double arrow at the end of the second toolbar but none at the end of the first tool bar (after Variable)... I would like to set the qt_toolbar_ext_button to the image at this path :/images/images/extension-arrows.png.
The code I used to custom them is :
m_toolbar1->setStyleSheet(
"QToolBar {border-bottom: 1px solid #808d97;"
"border-top: 1px solid #808d97; background-color: #3a4f5e;} "
"QToolButton {background:#3a4f5e; border: 1px solid #585858;"
"border-style: outset; border-radius: 4px; min-width: 5em; min-height: 1.5em; color: white}"
"QToolButton:hover {background: #5d7180; border: 1px groove #293843;}"
"QToolButton:pressed {background:#475864; border: 1px groove #293843;}"
"QToolButton#qt_toolbar_ext_button {"
"border: none;"
"background: url(:/images/images/extension-arrows.png);"
"padding-top: 20;"
"width: 20px;"
"font: bold 14px;"
"color: red;}");
m_toolbar2->setStyleSheet("background-color: #3a4f5e; color:white;");
This code was inspired by : How to set the QToolButton's icons using style sheet?
Thank you in advance for your help ! :D
I'm found this solution, but through widgets API.
ui->toolBar->findChild<QToolButton*>("qt_toolbar_ext_button")->setIcon(QIcon(":/icon/myico.png"));
I am trying to create a custom table header style without section separators and with different colors.
I have this in my stylesheet:
QHeaderView::section {
border: 0;
border-bottom: 1px solid #cccccc;
background-color: white;
}
QHeaderView::section:hover {
border-bottom: 2px solid #aaaaaa;
}
QHeaderView::section:selected, QHeaderView::section:checked {
border-bottom: 2px solid rgb(0, 166, 228);
background-color: rgb(255, 170, 0);
}
It works except the style for active (clicked) section. I thought it should be either :checked or :selected pseudo state (which are mentioned in docs http://doc.qt.io/qt-5/stylesheet-reference.html) but I don't see any effect.
Is it a bug or am I doing something wrong?
Looks like it is not supported by QHeaderView, I guess :checked and :selected are either used for some other purposes or simply not implemented.
Found some old bug reports, reopened one of them: https://bugreports.qt.io/browse/QTBUG-23689
I was trying to build myself a portfolio site. When I thought I was about to finish building the basic template, the margin and media queries stuff totally drove me crazy.
Here is my temporarily hosted domain, www.kenlyxu.com/portfolio_new
I made the pages fit to whatever browser size by using
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
I'm trying to make 10px margin on all side and on every page so that I use this container.
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 100%;
width: 100%;
}
#workcontainer {
margin: 10px;
background-color: #f29e28;
width: 100%;
}
I hope the end result would be like orange background with white margins on all sides. When seeing my site on the desktop, the margin-right and margin-bottom not showing. They only show when I use width: 98.5%;
Also, the orange background color should expand according to the size of browser. On the iPhone 5 portrait view, the orange background does not extent the bottom part. I tried to use some standard media queries for it, but I don't know what values should I give to each of the mobile devices.
Try
Position:fixed;
in
# thethecontainer
now your code looks like
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 98%;
position:fixed;
width: 98.5%;
}
I am using 2 regions with 1 region display selector to create some tab functionality between regions. See the following as an example: http://apex.oracle.com/pls/apex/f?p=19914:30 I used the following to remove the 'Show All' button http://apexplained.wordpress.com/2012/07/16/hide-the-show-all-tab-in-a-region-selector/
Mine looks the same as the example above however it doesnt have the rounded corners on the region display selector.
I wondered how you can apply the rounded corners to the display selector, increase the font size and height of the region display selector?
I've tried style="" in the 'Region Attributes' of the Region display selector but no luck. When investigating my page in Firefox using Firebug the display selector is held in a DIV / in an UL list but i wouldnt know how to access those in the APEX builder.
The region display selector has rounded corners when using Chrome, but not in Internet Explorer.
Please could i have some help with my problem.
Oracle Version: Oracle version 10.2.0.4.0
Full APEX version: Application Express 4.1.1.00.23
Browser(s) and version(s) used: Internet Explorer 7 & 8
Theme: Simple Red
Template(s): The standard templates with the Simple Red theme.
Region/item type(s): 3 HTML pages each holding text box fields.
Thank you.
See example below of region display selector:
Example of region selector html from Simple Red theme
<div class="apex-rds-container">
<ul class="apex-rds" id="485041125812774413_RDS">
<li class="apex-rds-first">
<span>Show All</span>
</li>
<li class="apex-rds-selected">
<span>datepicker</span>
</li>
<li class="apex-rds-last">
<span>region 2</span>
</li>
</ul>
</div>
inspect style tab for
DIV
.apex-rds-container {
height: 40px;
margin: 0 0 9px;
}
UL
ul.apex-rds {
background: url("../images/bg-anchor-nc.gif") repeat-x scroll 0 0 transparent;
border: 1px solid #999999;
border-radius: 8px 8px 8px 8px;
box-shadow: 1px 2px 2px #AAAAAA;
float: left;
list-style-type: none;
margin: 0;
}
LI
ul.apex-rds li {
float: left;
list-style: none outside none;
}
A
ul.apex-rds li.apex-rds-first a {
border-left: 0 solid #000000;
}
ul.apex-rds li a {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
display: block;
height: 16px;
padding: 1px 10px 0;
text-decoration: none;
}
a {
color: #660000;
}
SPAN
ul.apex-rds li span {
color: #000000;
font-size: 11px;
}
So, this shows that a background image is used for the UL. This image's dimensions are 1x18px according to firebug. Hovering over an item will set a different background image, as will a current region selection.
So, if you want a larger selection, use a larger image. Increase the div height. Set the correct styles for current/non-current items.
To increase font size, alter the css for the SPAN.
Borders are done with border-radius: 8px 8px 8px 8px; which don't work in IE.
All css can be found in the theme css file in your apex_images folder: /i/themes/theme1/css/theme_4_0.css
Go to line 1316,
/* -------------------- Region Display Selector -------------------- */
You can find everything you need there.
Don't mess in that file though. If you will, make a backup. Work clean and override properly within a css of your own!
I have seen many answers on the line of
How to change the cell color of a jquery datepicker
But they for some reason do not apply to my example.
http://plungjan.name/test/datepicker_orange.html
I want the WHOLE cell content to be orange, not just what we can see behind the link IN the cell
So what I can see as
.ui-state-default {
background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
which controls the link inside the cell with a class name set by me to "orange"
<td class=" orange" onclick="DP_jQuery_1327604402271.datepicker._selectDay('#toDate',1,2012, this);return false;" title="Almost sold out">
<a class="ui-state-default" href="#">15</a>
</td>
where the orange class is given by me in this code:
return [true,"orange","Almost sold out"];
It shows
and not
Which I can get if I remove the background image of the above ui-state-default in firebug
What is the correct method of changing the complete cell color of the cells I now change using the beforeShowDay?
I tried helping the situation by overriding the default:
.ui-state-default {
background-color: transparent;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
Did not make any diffence
#mplungjan Change css to this:
td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;}
If you put your class directly on the tag you have to change it to this:
.ui-state-default {
background: #E6E6E6;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
In CSS if you have a backgorund image and a background color then the browser will show you the image which in this case is that gradient grey that you have in the first example.