I have a documentation for my app in readthedocs website. And I have a .css file that changes side bar appearance. About three month ago this .css file worked well, but now it doesn't. Here is the link.
That is how it looked like:
That is how it looks now:
The .css file:
/* Fixes the size of the RTD flyout */
/* .rst-versions {
width: 320px !important;
} */
/* Content area color */
.wy-nav-content {
background: #dddddd;
}
/* Scroll Bar*/
.wy-side-scroll {
width: auto;
overflow-y: auto;
margin-top: 0px;
}
/* width of the side panel */
.wy-nav-side {
width: 320px;
}
/* content section full screen */
.wy-nav-content {
max-width: none;
}
/* set color of left side bar */
.wy-nav-side,.wy-side-nav-search,.wy-nav-top {
/*background: #0079c1; /*005eb8 */
background: #006464;
}
/* Change caption color to be more legible */
.wy-menu > .caption > span.caption-text {
color: #ffcccc;
font-size: 20px;
}
/* Change the version color to match caption color */
.wy-side-nav-search>div.version {
color: #ffcccc;
}
/* Get rid of that ugly yellow highlight color and replace with something more appealing to the eye */
.highlight .hll {
background-color: #fcfcfc;
}
/*
#media screen and (max-width: 768px) {
.wy-nav-content-wrap {
margin-left: 0px;
}
.wy-nav-side {
width: 500px;
}
} */
What could be the reason of this? Thanks!
I partially confirm what #Steve Piercy says in the comment. The rule .wy-menu > .caption > span.caption-text { doesn't work anymore, since the <p> that surrounds the <span class="caption-text"> no longer has a caption class. You can check that by comparing latest with 1.3.4-branch.
However, as you can see from the build logs (old, new), the problem is not with sphinx-rtd-theme (you are using 0.5.0 in both), but the docutils version (0.16 in the old build, 0.17 in the new build). You will need to either upgrade your Sphinx version, or downgrade docutils.
Related
I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…
I have a div on a page, the buttons on other browsers are neatly placed but on chrome, they are falling down.
I am aware of explicit hacks for IE 7 which is like *Margin, but not aware about chrome.Is there a way to define in css.
i dont want conditional statements to deal with this.I need to explicitly mention margin in negative pixels for chrome to pull the buttons up.
This jQuery should add class="chrome" to the html element of your document.
$(document).ready(function(){
if (navigator.userAgent.indexOf('Mac OS X') != -1) {
if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }
} else {
if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }
}
});
You can then target the div like so:
.div {
margin-bottom: 10px;
}
html.chrome .div {
margin-bottom: 20px;
}
this worked like a charm
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.act .now {
margin: -14% auto 0px;
}
/* Safari only override */
::i-block-chrome,.act .now {
margin: 5% auto 0px;
}}
How to increase cell height of GWT celltable ?
In mozilla firefox cell height proper(as per content) but In case of Internet explorer some part of content not displaying properly
see image
My Celltable.css is as follows:
#def selectionBorderWidth 0px;
.cellTableWidget {
border: 1px solid red;
}
.cellTableFirstColumn {
}
.cellTableLastColumn {
}
.cellTableFooter {
text-align: left;
color: #4b4a4a;
overflow: hidden;
}
.cellTableHeader { /** COLUMN HEADR TEXT */
text-align: left;
color: #4b4a4a;
overflow: hidden;
background-color: #E1E1E1;
font-family: arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
padding-left: 10px;
height: 20px;
border-bottom: #e6e6e6 1px solid;
border-left: #a6a6af 0.5px solid;
border-right: #e6e6e6 1px solid;
border-top: #a6a6af 0.5px solid;
}
.cellTableCell {
overflow: hidden;
padding-left: 10px;
height: 20px;
font-family: Arial;
font-size: 11px;
font-weight: normal;
border-bottom: #e6e6e6 1px solid;
border-left: #a6a6af 0.5px solid;
border-right: #e6e6e6 1px solid;
border-top: #a6a6af 0.5px solid;
}
.cellTableFirstColumnFooter {
}
.cellTableFirstColumnHeader {
}
.cellTableLastColumnFooter {
}
.cellTableLastColumnHeader {
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
.cellTableEvenRow {
background: #ffffff;
}
.cellTableEvenRowCell {
}
.cellTableOddRow {
background: #f8f8f8;
}
.cellTableOddRowCell {
}
.cellTableHoveredRow { /** background: #eee;*/
}
.cellTableHoveredRowCell {
/** border: selectionBorderWidth solid #eee; */
}
.cellTableKeyboardSelectedRow {
background: #ffc;
}
.cellTableKeyboardSelectedRowCell {
}
.cellTableSelectedRow {
background-image: url("images/row_Highlight.jpg");
color : black;
height: auto;
overflow: auto;
}
.cellTableSelectedRowCell {
}
/**
* The keyboard selected cell is visible over selection.
*/
.cellTableKeyboardSelectedCell {
}
#sprite .cellTableLoading {
gwt-image: 'cellTableLoading';
/*margin: 20px;
*/}
What changes I need to do in css to make consistency (cell height) in all browser?
I think the problem may be that your CSS style for the cell has "overflow: hidden;".
.cellTableCell {
overflow: hidden;
...
}
Take that away and see what happens. I think the cell and row will expand to fit the content.
There is another possible correction for cellTableRow's CSS. Row styles should be overwritten by cell styles, but GWT may be doing something under the hood to compensate for browser differences in IE. To ensure it always applies to the TDs contained in the TR, write it like this:
.cellTableRow,
.cellTableRow td {
overflow: auto;
...
}
First of all, do you make a CSS Reset? Following post refers to the same problem i guess.
Why is box sizing set to border-box for tables in Firefox?
The problem could be caused from the difference between browsers in the way the handle the box-model.
Read this post for more information.
I would set box-sizing property.
IE uses the border-box, every other browser the content-box-modell.
You can define, which one should be used with the following css rule:
table {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
or
table {
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}
We sometimes have problems with IE breaking the layout, because the page is rendered before everything is ready. Try if assigning a dummy CSS class to some element in the DOM changes anything.
If it does, the following code might help you. It just sets some random class at the body element and resets it to force a rerendering of the page:
/**
* Force Internet Explorer 8 to render the page again without a page refresh. after the given delay of milliseconds. This
* method only works for Internet Explorer 8.
*
* #param delayInMillis delay in milliseconds
*/
public void forceIe8ToReRender(final int delayInMillis) {
// call timer to force ie8 to re-render page without page refresh
final Timer t = new Timer() {
#Override
public void run() {
doForceBrowserToReRender();
// timer should only run once
this.cancel();
}
};
t.schedule(delayInMillis);
}
/**
* Force Browser to render the page again without a page refresh
*/
private native void doForceBrowserToReRender()/*-{
var doc = $doc;
var originalClassName = doc.body.className;
doc.body.className = "foobar";
doc.body.className = originalClassName;
}-*/;
use this
.cellTableCell { min-height : 20px ; ..... }
You can use
.cellTableKeyboardSelectedRow {
background: #ffc;
height:30px !important
}
It Works for me :)
/** Cell height */
.mainCellTable tbody tr td{
height: auto;
}
Extend AbstractCellTableBuilder and then mention height attribute of TableRow
height is not the best solution to assign where the content text either be increased or decreased. So there are two cases to make your above example as follows.
A) Using pure CSS.
B) Using Javascript
Explanation A:
In CSS, we depend on 2 more things whether we are using DIV structure or we are using TABLE method.
A.1 Using DIV:
If we are using div structure building my page and i use line-height to vertical align the text and text-align to horizontally align the text.
A.2 Using Table:
If I am using method table, then I would like to center the text in the middle of cell. This miracle will hold true if and only if I use text vertical-align:middle and horizontal-align:center.
Note: the text should be written in tag .
CSS in body as:
I love Allah
I Love Islam
B: Using Javascript
Use min-height in the td and use vertical align and texl-align properties to center and middle the texts by x-axis and y-axis respectively.
But there is only one problem it will create a bug report in IE6, 7. because IE7, IE8 do not understand min-height. So we have IE9.js file which you download it using google. and put the script in the head of html document. Also put the latest jquery file first and then put the IE9.js script after it.
and in css enjoy min-height property and how far as your text grows, the text will automatically be in the middle of the table cells.
If you are using DIV then it is same process.
I hope this will make you something extra. And you will not need to use Google once again.
i'm building a custom theme for wordpress and saw this in the default 2010 style.css file:
#wrapper {
margin: 0 auto;
width: 940px;
}
#wrapper {
background: pink;
margin-top: 20px;
padding: 0 20px;
}
now this is the default code (except the pink). when i try and collapse it, which seems logical, it makes quite a difference.
what i can't figure out is WHY you'd declare the same element twice like that? i've never seen that before...
WR!
It proves useful when you want to apply shared properties at multiple elements. Another useful application is adding stylesheets from multiple sources Example:
#head, #foot {
height: 100px;
}
#foot { /*Another foot*/
color: red;
}
Second example: CSS from multiple sources:
/* External stylesheet: common.css */
body {
background: yellow;
}
/* Inline stylesheet, overrides external stylehseet */
body {
background: pink;
}
When two properties have the same specificity, the lastly declared property will be applied.
It just overrides previously declared properties.
wrapper will now have margin:20px auto 0 auto (Top Right Bottom Left).
How can I add css to be only read by safari? bascially a div needs moving 5pixels to the left, as it shows fine on ff/ie etc
Thanks
EDIT - added code
code:
#subheading
{
background-color: #004376;
color: #ffffff;
height: 25px;
padding: 10px;
margin: 0 933px;
margin-top: -25px;
width: 761px;
}
you can have a check for a specific css property in webkit. This would likely work in chrome as well.
#media screen and (-webkit-min-device-pixel-ratio:0) {
.someClass{
color:#FF0000;
}
}
margin: 0 933px;
margin-top: -25px;
width: 761px;
This doesn't sound right. The first line sets both left and right margin to 933px. And the width is 761px. The total width of the element would be (933 * 2 + 10 * 2 + 761) = 2647px.
Is this what you want it to be?