I built a plugin to display a full page tab after you call the shortcode.
This is how it looks when I run it.
When I installed it however this is how it looks
As you can see not only is the tab not a full page, the tabs stylesheet has managed to affect the entire site and disorganized it.
I want to make the tab full width(from one end of the page to another) and I want the style for the plugin to only affect the slider returned by the plugin.
I use elementor page builder and I've tried setting the elementor container's margin to 0. It reduced the space but it's still not enough as you can see from the image. My site's layout is already set to 100% full-width. I would appreciate any help I can get.
Here's the CSS for the plugin below.
.elementor-container {
margin: 0px !important;
}
.bs-example {
margin-top: 20px;
margin-bottom: 20px;
}
.hide23 {
border-style: none !important;
}
.tab-pane {
margin: 20px;
}
.selected {
border-bottom: 2px solid #FF7F50;
}
#media screen and (min-device-width: 300px) {
.tab-content {
width: 50% !important;
}
}
#media screen and (max-width: 800px) {
/* li {width:50%;}*/
ul {
display: none !important;
}
}
#media all and (max-width: 959px) {
.elementor-container {
max-width: 100% !important;
}
.elementor-column-gap-default {
max-width: 100% !important;
}
}
h3 {
font-size: 2vw;
color: black;
}
a {
background-color: #fff !important;
}
ul:hover {
color: transparent!important;
}
ul {
border-style: none !important;
/*border-bottom: 2px solid #FF7F50 !important;*/
}
{
display: inline !important;
color: black;
}
.span-active {
border: 2px solid #FF7F50;
border-radius: 100%;
font-size: 15px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-left: 5px;
margin-top: -5px;
color: white;
background-color: #FF7F50;
}
.span-inactive {
border: 2px solid grey;
border-radius: 100%;
font-size: 15px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-left: 5px;
margin-top: -5px;
color: grey !important;
background-color: white;
}
.inactive {
color: grey !important;
}
.progress-bar {
background-color: #FF7F50;
}
Let me know if you need anything else. I apologize if the answer is obvious. I'm new to WordPress development
The red and yellow standard colors of xdebug can hurt your eyes after a few hours.
http://www.designified.com/blog/article/76/restyling-xdebug-output describes how to replace the style with javascript requiring jquery.
I was looking for a more straight forward way and finally found one.
The solution is the !important tag, it overrides the existing style values. Use the following css code to avoid eye cancer when using xdebug:
.xdebug-error {
font-size: 12px !important;
width: 95% !important;
margin: 0 auto 10px auto !important;
border-color: #666 !important;
background: #ddd !important;
}
.xdebug-error th, .xdebug-error td {
padding: 2px !important;
}
.xdebug-error th {
background: #ccc !important;
}
.xdebug-error span {
display: none !important;
}
.xdebug-error_description th {
font-size: 1.2em !important;
padding: 20px 4px 20px 100px !important;
background: #ccc no-repeat left top !important;
}
.xdebug-error_callStack th {
background: #666 !important;
color: #ddd !important;
}
Have a nice xdebug!
Yes you can. Try this css below.
table.xdebug-error {
width: auto;
background: white;
border: none;
border-spacing: none;
border-collapse: collapse;
box-shadow: 0px 3px 10px 0px black;
position: fixed;
top: 0px;
right: 0px;
z-index: 8888;
font: 14px verdana;
transform-origin: top right;
transform: scaleX(0.4);
opacity: 0.3;
transition: all 200ms ease;
}
table.xdebug-error caption,
table.xdebug-error th,
table.xdebug-error td {
text-align: left;
vertical-align: middle;
}
table.xdebug-error a img {
border: 0;
}
table.xdebug-error :focus {
outline: 0;
}
table.xdebug-error pre {
margin: 0;
}
table.xdebug-error tbody tr td,
table.xdebug-error tbody tr th {
border: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
font-weight: normal;
}
table.xdebug-error tbody tr td {
padding: 3px !important;
vertical-align: top;
}
table.xdebug-error tbody tr th {
padding: 13px !important;
}
table.xdebug-error tbody tr td:nth-of-type(1) {
width: 5% !important;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] {
font-weight: normal;
background: steelblue;
color: white;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] span {
display: none;
}
table.xdebug-error tbody tr font[color='#00bb00'] {
color: #005e00;
}
table.xdebug-error tbody tr td small {
display: none;
}
table.xdebug-error tbody tr td i {
padding-left: 12px;
}
table.xdebug-error:hover {
transform: none;
opacity: 1;
}
CONS:
Depending on your other css defs, you may have to fiddle a bit until it looks as promised.
It's not as beautiful as a Laravel/Symfony error
PROS:
You can see the actual page, despite the error. (Message will be dimmed and pushed on the right side, appearing on mouse hover.)
It's nothing more than CSS
You can even add it to your page via CSS Live Editor Plugin or something similar; therefore, no need to add to your own code
It won't break your styling, won't stuff a whole lot of text into a tiny container where the error happened, etc. - because it's position:fixed.
Pleasant to the eye - you'll end up throwing errors just to see it again :)
Another option is to disable xdebug from overloading var_dump.
In the php.ini [XDebug] section add xdebug.overload_var_dump=0
Formatting the output is then up to you; one such way could be wrapping var_dump in your own debug function that prints <pre> tags.
// notice the line height, the padding(cellspacing), monospace font, font size, making readability better at least for me.
//
// A FILENAME : xdebug_stack_trace.css
//
// This is how the xdebug_stack_trace.css is called from the index.php page
//
// <style><?php require_once("./resources/css/xdebug_stack_trace.css");?></ style>
//
// notice that on the line above there is a space between the slash
// and the 'style', on the ending 'style' tag, otherwise the display
// get all messed up when this page gets loaded.
//
// make sure that when you copy the 'style' line from here to the
// index page, that you remove the extra space at the ending 'style'
// tag of the index page.
// +---------+---------+---------+---------+---------+---------+---------+
// orange/black td header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error th
{
font-family:monospace;
font-weight:normal;
font-size:15px;
padding: 6px 6px 6px 6px;
border:1px solid black;
background: #FFCC99; // orange
color:#000000; // black
}
// +---------+---------+---------+---------+---------+---------+---------+
// black/white th header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
line-height:1.6em;
padding: 10px 10px 10px 10px;
border:1px solid #000000;
background: #000000; // black
color:#FFFFFF;
}
// +---------+---------+---------+---------+---------+---------+---------+
// green/black td content one or more lines
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error td
{
font-size:14px;
padding: 6px 6px 6px 6px;
border:1px solid green;
background: #D1FFE8; // light green
}
// +---------+---------+---------+---------+---------+---------+---------+
I use Wordpress on my website and there is a small section of php code from which I want to exclude a php template.
<?php if (is_user_logged_in() ) { ?>
.content_right { float: right !important; border-right:0px !important; border-left: 1px solid #EAE6E6 ;}
.content_right .shadowblock_out { border-right:0px !important;}
.content_left {float: left !important;}
<?php } else { ?>
.content_right {display:none}
.content_right .shadowblock_out {display:none}
.content_left {float: left !important; width: 100%;}
.box {margin: 1px 4px; float: left; width: 24% !important;}
.box .grido {display: block;height: 133px;margin: 2px 3px 5px;overflow: hidden;width: 210px;border: 1px solid #ebebeb;}
#directory {width: 930px !important;}
<?php }?>
And I want exclude "single-ad_listing.php" template from ELSE, because I want to shpw the sidebar for this template. How I can do that?
Thanks in advance.
You can check if a single page is being displayed and further you can give the post type as parameter to be specific.
if ( is_singular( "ad_listing" ) ) { // here you need to put the post type
// what you want here
} else {
// what you want elsewhere
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a forum system in php, but when the posts come out, if they're long, they end up like this,
html,
body {
height:100%;
width:100%;
background: url(/include/images/dirt.png);
}
.center-container {
margin-top:15px;
margin-right:15%;
margin-left: 15%;
box-shadow: 0 1px 10px #a7a7a7, 0 1px 0 #fff;
padding:0.5em;
}
.button {
border-top: 1px solid #002136;
background: #033e66;
background: -webkit-gradient(linear, left top, left bottom, from(#031826), to(#033e66));
background: -webkit-linear-gradient(top, #031826, #033e66);
background: -moz-linear-gradient(top, #031826, #033e66);
background: -ms-linear-gradient(top, #031826, #033e66);
background: -o-linear-gradient(top, #031826, #033e66);
padding: 5px 10px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
padding-bottom:3px;
margin-right:5px;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
.sidebar1 {
margin-top:15px;
float:left;
width:13%;
display:inline-block;
box-shadow: 0 1px 10px #a7a7a7, 0 1px 0 #fff;
}
.sbutton {
border-top: 1px solid #002136;
background: #033e66;
background: -webkit-gradient(linear, left top, left bottom, from(#031826), to(#033e66));
background: -webkit-linear-gradient(top, #031826, #033e66);
background: -moz-linear-gradient(top, #031826, #033e66);
background: -ms-linear-gradient(top, #031826, #033e66);
background: -o-linear-gradient(top, #031826, #033e66);
padding: 5px 10px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
padding-bottom:3px;
display:block;
}
.sbutton:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.sbutton:active {
border-top-color: #1b435e;
background: #1b435e;
}
is there a CSS rule that I can use to make that wrap to the next line?
EDIT: SOLVED! This actually seems to be a problem with Firefox. Not sure why, but if width is set in firefox, even if it is max-width, it will overflow the box for some reason
You can use the CSS3 text-wrap Property:
http://www.w3schools.com/cssref/css3_pr_text-wrap.asp
p.test {text-wrap:unrestricted;}
Your link doesn't work so I'm guessing here.
Most likely your div expands outside of the width of the screen, meaning that the content will to.
You could try to set the max-width property of your div to something like 80% (or less) and wrap any text in p-tags.
To be absolutely sure, combine that with superUntitled's answer and set:
p.test {word-wrap:break-word; }
EDIT
I tried your example and it works for me in this JsFiddle example
Try a css reset like this
yes, the CSS3 word-wrap in combination with the hyphen property
p.test {
word-wrap:break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
I am currently writing an addon module for our Billing Software, and the modules automatically inherit the template's CSS when you use any of the elements. For example, I use the "datatable" element for my tables, and it inherits the CSS style depending upon what template the user is currently using.
I want to hide the inner border that the "datatable" element has, and I am using tags to put all of my CSS in the module code. I am not quite sure how I can do this, but here is what the CSS looks like from the billing software's template style.css file.
table.form {
border: 1px solid #B8CBE7;
background-color: #fff;
padding: 0px;
}
table.form td.fieldlabel {
text-align: right;
font-weight: bold;
padding: 5px;
background-color: #E4ECF8;
}
table.form td.fieldarea {
text-align: left;
padding: 5px;
border-bottom: 1px dashed #ccc;
}
.tablebg {
background-color: #e9e9e9;
}
table.datatable {
padding: 0;
margin: 0;
}
table.datatable th {
background-color: #f3f3f3;
font-weight: bold;
text-align: center;
}
table.datatable td {
background-color: #fff;
text-align: center;
}
table.datatable tr.rowhighlight td {
background-color: #EFF2F9;
}
table.datatable tr:hover td {
background-color: #EFF2F9;
}
You can define the same datatable class again and set it's border as 0. You will just need to ensure this new css definition comes after the actual one
table.datatable {
border: 0px;
}
try append this line in CSS stylesheet:
.datatable{
border: 0 !important;
}