some part of my css code written in wordpress editor dedicated for mobile version of a website does not work and it doesn't appear in inspect page dedicated
i would like for my table to have horizontal scroll when used by mobile phone
#media (max-width: 768px) {
.gem-textbox-content {
padding-right: 30px !important;
}
.vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-body {
padding: 25px;
}
/*form here forward code doesn't word*/
.gem-table .gem-table-responsive .gem-table-style-1 .row-headers {
display: block !important;
overflow-x: scroll !important;
}
.tabletolist .rh .nrh {
display:none !important;
}
table {
display:block !important;
}
}
and when i write this code directly in dev console it works, but when i write it in wp css editor it doesnt, i put !important to overwrite inline css
You should change the version number in your enqueue code (usually in functions.php for themes) so that the style sheet is reloaded.
wp_enqueue_style( 'my_styles', plugins_url( 'mystyles.css' , dirname(__FILE__) ), array(), 5.52);
In the above example, I would change 5.52 to 5.53 to trigger a style change.
wp_enqueue_style( 'my_styles', plugins_url( 'mystyles.css' , dirname(__FILE__) ), array(), 5.53);
Related
I am using an HTML template (Admin LTE) for my angular project. In it I tried to override a default width specification using this in my index.html head section
#media(min-width: 768px)
{
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header
{
margin: left 300px!important;
}
}
But when executing, its not at all taking my custom css in index.html, instead it takes the 250px which is hardcoded in the CSS file
SO How to override this?
CSS is not valid as shown in dev tools:
margin: left 300px !important
Try:
margin-left: 300px !important
I tried to use media query within CSS that would work only on web front page. ID of the front page is defined within its body as index. This front page uses basically two columns (.aside and .main) and I want to avoid it on the front page but still use it on others.
When I try this CSS without specifying the ID, the .aside column does leave (on all pages), but once I try to add the #index (to use this only on the front page) it stops working.
#media only screen and (min-width: 500px) {
#index {
.aside.col-lg-pull-9 {
right: 100% !important;
}
.main.col-lg-push-3 {
left: 0% !important;
}
.aside.col-lg-3 {
width: 0% !important;
}
.main.col-lg-9 {
width: 100% !important;
}
}
}
The ideal way to handle this problem is as Hidden Hobbes stated—by using a preprocessor such as SASS. SASS is transpiled to CSS, which is then loaded the browser. It eliminates repetitive CSS, which makes development faster, and code easier to understand.
Depending on what framework (if any) you're developing in, you should be able to find the appropriate SASS/SCSS module to use in your project. If you're currently not using a framework, I'm partial to suggesting HarpJS, which includes several preprocessing modules for CSS and HTML.
References:
SASS: http://sass-lang.com
HarpJS: http://harpjs.com
the suggestion to add #index was good, but I kept a mistake in the previous code (dot before aside and main), the code below works well and it allows me to conditionally format the web based on the fact which link is actually viewed.
#media only screen and (min-width: 500px) {
#index aside.col-lg-pull-9 {
right: 100% !important;
}
#index main.col-lg-push-3 {
left: 0% !important;
}
#index aside.col-lg-3 {
width: 0% !important;
}
#index main.col-lg-9 {
width: 100% !important;
}
}
In my application, I have a left sidebar which I want to hide when the user prints the page.
I am using the following media query :
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin: 0 !important;
}
}
i am hiding the sidebar, that works, but canceling the left margin on the wrapper does not work.
It works when I display the inspector and activate the emulation for css print with chrome and opera, it does not work if i press ctrl+P.
Do you have an idea of what I could do ?
I assume that the original css rule you have set is "margin-left: 50px" as an example of 50px. Try the same way in your media query like this "margin-left: 0". I think it worked for in the past. Might not be the best solution but it will probably get you going.
CSS
#page-wrapper {
margin-left: 50px; /* as an example */
}
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin-left: 0; /** try without !important, if doesn't work, then add it back.**/
}
I Hope that helps.
I'm researching existing html5 application.
Its html page contains style for print
<link href="receipt.css" rel="stylesheet" type="text/css" media="print" />
receipt.css file contains also #media and #page directives
.myreceipt {
#page {
visibility: hidden;
margin: 0 15px;
}
#page {
height: auto;
}
}
.myreceipt body {
margin: 0;
padding: 0;
width: 100%;
}
#media screen {
.myreceipt #receipt-header img {
width: 300px;
}
}
.myreceipt #receipt {
margin: 0;
width: 100%;
padding: 0;
background-color: #fff;
}
#media print {
.myreceipt #receipt {
color: #000;
}
}
Why css file contains media directives ? If html file contains media='print' is it used only for printing ?
Can #media screen elements deleted fully from css file and #media print directives removed safely ?
Or is there some reason for them, this css is created by proffessionals ?
Why visibility: hidden is specified in #page ?
According to doc, visibility: hidden is ignored for #page, can it safely removed ?
Can #page also removed since html file contains media=print and in this case #page is always used ?
Why css file contains media directives ?
Or is there some reason for them, this css is created by proffessionals ?
Because it could be used for different media (e.g. screen, print, etc)
If html file contains media='print' is it used only for printing ?
Yes.
Can #media screen elements deleted fully from css file and #media print directives removed safely ?
Only if the file is linked from link elements using media="print".
Why visibility: hidden is specified in #page ? According to doc, visibility: hidden is ignored for #page, can it safely removed ?
That's for CSS 2.1. It does/will matter for CSS 3 (http://dev.w3.org/csswg/css-page/#content-empty). However, as of now, in Firefox 25, both visibility and height are invalid, hence ignored.
Can #page also removed since html file contains media=print and in this case #page is always used ?
Yes, but also for a different (better) reason: at-rules (#page, #media) must be defined top level. As it is in your style sheet, with #page inside .myreceipt, they are simply ignored so you might as well delete them.
If they weren't ignored (ie. outside of .myreceipt) then you should be aware that #page refers to the actual print area on a page, not to the .myreceipt (https://developer.mozilla.org/en-US/docs/Web/CSS/#page). So if you want to remove them, you would have to apply some equivalent formatting to the body element.
I would like to close by pointing out that in this case "created by professionals" probably refers more to someone being paid, than someone being an expert in this stuff.
Andrei
I can't read the full title of my Google Calendar events, because they're truncated to fit in the day box. And so a printout isn't as useful as it could be.
There used to be a greasemonkey plugin that changed the CSS to fix this, but Google have redesigned the calendar, and now the titles overlap each other and can't be read properly.
What CSS do I now need to add to the page to make the event titles wrap nicely? This is the existing code of the Greasemonkey plugin:
function buildStyle()
{
var st = "div.rb-n, span, nobr { white-space: normal; }";
var dochead = document.getElementsByTagName("head")[0];
var stEl = document.createElement("style");
stEl.setAttribute("type", "text/css");
stEl.innerHTML = st;
dochead.appendChild(stEl);
}
window.addEventListener("load", function(e) {
buildStyle();
}, false);
Here is the Greasemonkey plugin itself: http://userscripts.org/scripts/show/97755 -- It can be seen working correctly if you revert Google calendar to 'classic view', but fails to work for the new view.
UPDATE:
I've saved off an example of a Google calendar, showing two test events:
http://pastebin.com/wx5Qm8yx - the HTML code for the calendar
http://pastebin.com/UZnLp2Pj - The existing stylesheet, rename this to style.css
Based on the page sample provided, you would use these styles:
.rb-n {
white-space: normal !important;
}
.te {
overflow: inherit !important;
white-space: normal !important;
}
Note:
If you are just changing styles, then it is far superior to use
Stylish.
Stylish is faster; Page-changes are easier/faster to maintain; Changes apply without any flicker or delay; and often, someone has already posted much of what you want at Userstyles.org.
Likewise, you do not need to use all that JS to add styles in Greasemonkey. Use the GM_addStyle function:
GM_addStyle ( " \
.rb-n { \
white-space: normal !important; \
} \
.te { \
overflow: inherit !important; \
white-space: normal !important; \
} \
" );
Google changes their pages rapidly and without warning. Firebug can help determine new changes, and CSS workarounds, as they appear.
I used a different tutorial and combined the CSS found there with the Stylish extension for chrome. I have copied the original CSS here for convenience and historical reference. A big thanks to Jodie Miners for her hard work.
.rb-ni, .rb-n {
border:none;
display: inline-table;
white-space: pre-wrap;
font-size: 11px;
font-weight: bold;
}
.st-c-pos > div[style] {
border:none !important;}
.st-dtitle-nonmonth {
color:lightgray;
font-size: 10px !important;
}
.st-dtitle{
font-size:14px;
font-weight:bold;
}
.date-top{
font-weight:bold;
font-size:20px;
}
.st-dtitle-today {
border-color: #DDD !important;
background-color: #FFF !important;
}
.st-bg-today, .st-bg-td-first, .st-bg-td-last {
background-color: #FFF !important;
border-color: #DDD !important;
}
#media print { .noprint { display: none; } }
#media print { .noprint { display: inline !important; }
#funbox {display:none !important;}
}
#topLeftNavigation{
left: -10px !important;
}
.applogo{
display:none;
}
#gb {display:none}
#topRightNavigation {display:none}
Be sure to apply to URLs starting with 'https://www.google.com/calendar/'.