I am using the Sphinx "cloud" theme. The main body of text has "justified" text alignment, and I want to turn that feature off. All options for alignment that I see refer to table elements, which is not what I want.
I tried adding an element to the _static/style.css file:
body {
text-align:left;
}
but this did not un-justify the text.
TIP: Don't guess at the CSS selector, inspect the source code or through the web.
In your custom override, you will need to override every instance of text-align: justify; in the theme. I found three.
div.body p {
text-align: justify;
margin: 1.5em 0 1.5em 0;
}
div.body li, div.body dd {
text-align: justify;
}
table.docutils .justify-align {
text-align: justify;
}
This ought to do it:
div.body p,
div.body li,
div.body dd,
table.docutils .justify-align {
text-align:left;
}
Related
I'm using free-jqGrid 4.13.5 and selectize 0.12.4.
I'm trying to apply selectize on my dropdowns in inline edit. But only one value is displayed in the dropdown.
editoptions: {
value: "FE:FedEx;TN:TNT;IN:Intime",
defaultValue: "Intime",
dataInit: function(element) {
$(element).selectize();
}
It works if I'm using select2, instead of selectize.
Fiddle: https://jsfiddle.net/henrik79/90hj0wd9/
The main problem seems to be the parent of drop-down of selectize. To fix the problem I suggest you to use dropdownParent: "body" option:
dataInit: function(element) {
$(element).selectize({
dropdownParent: "body"
});
}
The fixed demo https://jsfiddle.net/OlegKi/90hj0wd9/2/ uses the changes. I added some other CSS properties to improve the look of the results:
.selectize-dropdown-content {
font-size: 11px;
font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif
}
.selectize-input {
min-height: 1.7em;
}
.selectize-input {
padding: .4em .3em;
}
.DataTD .selectize-control {
height: 24px;
}
.ui-jqgrid tr.jqgrow > td {
border-color: inherit;
}
The target text file.
<style type="text/css">
#wrap{
height: 550px;
width: 660px;
}
#wrap ul{
list-style: none;
}
#wrap li{
border-radius:3px;
cursor:pointer;
}
#wrap{
height: 550px;
width: 660px;
}
#wrap ul{
list-style: none;
}
#wrap li{
border-radius:3px;
cursor:pointer;
}
</style>
Now i want to add four white spaces at the begining of the lines which locate between { and } ,to make the above displayed as the below.
<style type="text/css">
#wrap{
height: 550px;
width: 660px;
}
#wrap ul{
list-style: none;
}
#wrap li{
border-radius:3px;
cursor:pointer;
}
#wrap{
height: 550px;
width: 660px;
}
#wrap ul{
list-style: none;
}
#wrap li{
border-radius:3px;
cursor:pointer;
}
</style>
Maybe it is stupid to execute all the commonds to do th task.
3,4s/^/ /g
7s/^/ /g
10,11s/^/ /g
14,15s/^/ /g
18s/^/ /g
21,22s/^/ /g
Is there more simple and smarty way to do?
Assuming the filetype of your document was correctly set to html and your tabulation settings are correct, the following should suffice:
:2,23norm ==
But, to answer your question directly, you should target the lines containing ::
:2,23g/:/s/^/ /
If you don't want to define the range manually, you could do:
vit:g/:/s/^/ /
which inserts the '<,'> range automatically.
:g/^[^<#}]/ normal >>
Explanation:
: ........... command
g ........... global command (executes on the following pattern
/ ........... start search pattern
^ ........... beginning of line
[^ ] ........ denied list
<#} ......... denied chars
/ ........... search pattern's end
normal ...... execute in normal mode
>> .......... indentation
If this pattern is too recurrent you can put a map on your ~/.vimrc file, something like this:
map <F2> <esc>:g/^[^<#}]/ normal >><cr>
the <cr> means Carriage Return
I've been searching for a way to do this effect: http://www.discovershadow.com/
Especially the iPhone reveal part at the bottom where the iPhone stays but the content inside changes at the same time as the background.
Can this be achieved with only css or is it something much more complicated?
This is the way that I found to do this... no one seemed interested in the question but I hope you like the answer:
<html>
<head>
<style>
html, body {
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
width: 100%;
overflow-y: scroll;
position: fixed;
}
.items {
width: 100%;
height: 102%;
background-attachment: fixed;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
}
#box1 {
background-image: url(yourimage1.png);
background-color: #03F;
}
#box2 {
background-image: url(yourimage2.png);
background-color: #609;
}
#box3 {
background-image: url(yourimage3.png);
background-color: #3C0;
}
</style>
</head>
<body>
<div id="container">
<div class="items" id="box1"></div>
<div class="items" id="box2"></div>
<div class="items" id="box3"></div>
</div>
</body>
</html>
Yes can achieve that... You have not added any code or not even tried i think. Here is simple code for you to get you started.
.a
{
background-image : url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Beautiful-Nature-Images-HD-Wallpaper.jpg');
height: 200px;
width: 100%;
position: fixed;
}
p
{
color : #000;
font-size: 72px;
position: relative;
z-index: 999;
}
fiddle
This effect does require CSS + Javascript, there is no way to do it effectively without using these technologies. You could have the iPhone centred on screen and the rest of the screen move around it but it wouldn't create such as nice effect as seen on the website.
I would personally recommend looking at the source of the target website and investigate yourself how it was achieved, never hurts to have a sneek peek at source from other websites.
Looking at that sites script.js page they handle scrolling with
// handle scrolling
$window.scroll(function() {
handleScroll();
});
Which does this. You will need to look at the full code to work out exactly how its done.
// handle scroll
function handleScroll() {
scrolledWin = getPageScroll();
$body.addClass('scrolling');
// show logo
if((scrolledWin * 1.5) > winH) {
$body.addClass('content');
}
// show navigation
if(scrolledWin > 50) {
$body.addClass('scrolled');
}
// app img animation
if(topOff >= scrolledWin) {
$appImg.removeClass('sticky');
} else {
$appImg.addClass('sticky');
}
if(topOff2 >= scrolledWin) {
$appImg2.removeClass('sticky');
} else {
$appImg2.addClass('sticky');
}
// fix navigation issue on top scroll
if ((scrolledWin > -(winH - (winH * (f1 *0.8)))) && $('#hook2').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a2');
} else if ($('#hook2').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a1');
}
//fix navigation issue between how it works and next section
if ($s9.hasClass('inViewport')) {
if ($('#hook5').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a5');
} else {
$nav.attr("class", "").addClass('a4');
}
}
//fix navigation issue between Experts and next section
if ($sExperts.hasClass('inViewport')) {
if ($('#hook6').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a6');
} else {
$nav.attr("class", "").addClass('a5');
}
}
}
Ref: http://www.discovershadow.com/js/script.js?v=2.14
I have an <ol> element to which I'd like to apply a background color. I don't want the background color to cover the entire width of the <ol>'s parent but rather just its contents + some padding.
Setting {display:inline-block;} on the <ol> basically does the trick but somehow Google Chrome decides that the <ol>'s width should be 462px. This causes the third <li> to break over two physical lines which is neither necessary nor desired.
Where do the 462px come from? How can I keep the third <li> on a single line? I don't want to set the <ol>'s width to a static value since I've many such <ol>s. Using {float:left;} rather than {display:inline-block} triggers similar behavior but also forces me to clear whatever element comes after the <ol>. Giving the <ol> a width of auto doesn't seem to change a thing (I suspect it already was auto). Thank you in advance for any suggestions.
Try putting white-space: nowrap onto the li elements
Try to reset your html project with this css code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal;
}
ol, ul {
list-style: none;
}
blockquote {
quotes: none;
}
blockquote:before, blockquote:after {
content: '';
content: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none;
}
Otherwise, you can override this value like this:
Css:
ol,li {
width: 100% !important;
}
I have two probably easy CSS questions here:
http://web288.merkur.ibone.ch/klingler/
How can I get the © Klingler Fahrzeugtechnik AG 2013 in the footer vertically aligned to the bottom? I tried align-bottom and vertical align of the p tag but without luck...
The second thing is, I feal the distance between the lines of the main text is a bit narrow. I wanted to have a bigger line height. I tried changing the line-height property of the p tag to 2.5em instead of 1.5em but this did not change anything? Why is this?
p {
font-size:1em;
line-height:1.5em;
margin: 1.5em 0 0 0;
}
Do this:
footer {
position: relative;
}
.ym-g25 {
position: absolute;
bottom: 0;
}
Do this:
.ym-g25 {
width: 25%;
vertical-align: bottom;
display: table-cell;
line-height: 1;
float: none;
}