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
}
Related
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
I have a listbox, I need it to on select neither change text color as active or inactive, focus or not focused. Its click add, click add. On this one the text stays white on select, and turns black when click out of the listbox. I need it to stay red and only background to change when its clicked, to show it was clicked, then just go back to black. (Ive been at this for a couple days before asking, might have errors in the code after rewriting it so many times.)
<select onclick="" class="sometext" name="sometext" size="5">
<?php
$sql = "select * FROM mom WHERE type='feedme'";
foreach ($dblsm->query($sql) as $row){
echo "<option value=$row[id]>$row[title]</option>";
/* Option values are added by looping through the array */
}
?>
</select>
css
/* turn it off completely */
select:active, select:hover, select:focus {
outline: none;
}
select option:hover {
background: linear-gradient(#a81b1b, #000000);
background-color: #000000 !important; /* for IE */
color: #a81b1b !important;
outline: none;
}
select option:checked, select option:active, select option:disabled {
background: linear-gradient(#000000, #000000);
background-color: #000000 !important; /* for IE */
color: #a81b1b !important;
}
.sometext::-webkit-scrollbar {
width: 8px;
}
/* Track */
.sometext::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
.sometext::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #a81b1b;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.sometext {
color: #a81b1b;
background-color: black;
width: 225px;
border: 3px inset;
border-color: #a81b1b;
scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #a81b1b;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}
So, if I understand your question better now from your comments, I'm not sure how to accomplish this with the default options of a form's select box. What I did come up with for you is a way to get a similar outcome with plain ol' html/js/css and hopefully you can adapt this to your needs:
<html>
<head>
</head>
<body>
<div>
<ul class="redhue">
<li onClick="changeSelectionTo(this)">1</li>
<li onClick="changeSelectionTo(this)">2</li>
<li onClick="changeSelectionTo(this)">3</li>
</ul>
</div>
<script>
var currentlySelected;
function changeSelectionTo(item) {
if(currentlySelected){
currentlySelected.classList.remove("selected");
}
currentlySelected = item;
item.classList.add("selected");
console.log(item.innerText);
}
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li:hover,
.selected {
background: linear-gradient(#a81b1b, #000000);
background-color: #000000; /* for IE */
color: #a81b1b;
}
.redhue {
color: #a81b1b;
background-color: black;
width: 225px;
border: 3px inset;
border-color: #a81b1b;
list-style: none;
}
</style>
</body>
</html>
I left the console.log statement to show how to retrieve the list item's value for whatever you would need it for... Hope this helps!
I am using the woo-commerce plugin within my Wordpress environment and there are category pages which I need to change the colour of a div background depending on which category are you in.
So I have like a banner across the top which is found in 'archive-product.php'
the div is named 'publicationsHeader'
I need it to change the background when you are category pages like so..
?product_cat=creative
I am a bit stuck on the best approach?
Here is my code:
<div class="publicationsHeader">
<section>
<div class="introLeft">
<h2>Publications</h2>
<h3 style="font-size: 1.2em;
color: #fff;
line-height: 28px;
padding-top: 20px">We write and produce current, practical and highly effective publications that teachers and pupils can use with immediate effect. All resources have been revised for the 2014/15 academic year.</h3>
</div>
<div class="introRight">
<a href="https://www.facebook.com/JaneConsidineEducation" target="_blank">
<button style="background-image:url(img/facebookIcon.png)"></button>
</a>
<a href="https://twitter.com/janeconsidine" target="_blank">
<button style="background-image:url(img/twitterIcon.png)"></button>
</a>
</div>
</section>
</div>
.publicationsHeader{
background-color: #e84b34;
box-sizing:border-box;
padding: 40px 0;
height: auto;
overflow:auto;
}
.publicationsHeader h2{
font-size:3em;
color: #fff;
text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.3);
}
.publicationsHeaderLeft{
background-color: #fff;
box-sizing: border-box;
padding:40px 20px;
float:left;
width: 50%;
}
.publicationsHeaderLeft input{
border: solid #ccc thin;
width:95%;
font-size:16px;
padding: 10px 5px;
margin: 10px 0;
}
.publicationsHeaderLeft textarea{
border: solid #ccc thin;
width:95%;
font-size:16px;
padding: 10px 5px;
margin: 10px 0;
resize:vertical;
}
.publicationsHeadereft button{
background-color: #ec4a2c;
border: none;
color: #fff;
padding: 10px 20px 10px 20px;
font-size:16px;
}
.publicationsHeaderRight{
background-color: #fff;
box-sizing: border-box;
padding:40px 20px 160px 20px;
float:right;
width: 50%;
}
.publicationsHeaderRight li{
padding: 5px 0;
}
Why not just use the body_class() function? It adds a bunch of class names to your body tag that reflect the current page; in the case of WooCommerce it will add classes for .woocommerce, tax-product_cat and a class identifying that particular category, such as: .term-my-product-cat.
Using these you could style everything quite simply:
.publicationsHeader{
background-color: #e84b34; /* Default colour */
}
.term-product-cat-1 .publicationsHeader {
background-color: red; /* Change background for header for category 1 only */
}
.term-product-cat-2 .pulicationsHeader {
background-color:blue; /* Change background for category 2 */
}
You can read more about body_class() here.
First fetch the get data in a variable with some default:
$pcat = empty($_GET['product_cat']) ? 'default' : $_GET['product_cat'];
Then make your div like this:
<div id="publicationsHeader" class="<?php echo $pcat;?>">
</div>
Define a class in your css file like this:
.creative {
background: url(images/creative.png);
}
.default {
background: url(images/default.png);
}
You could do the following: check which category is currently displaying and give the $background variable a color accordingly. Like so:
if(is_product_category('creative')){
$background = "#ffffff";
}
Then call the $backgroundin the stylesetting of your div, like so:
<div id="publicationsHeader" style="background-color: <?php echo $background; ?>">Content goes here</div>
You can grep the parameter $_GET["product_cat"] and wrap that in a if-clause to set the css-class of publicationHeader via javaScript.
I am currently developing a WordPress plugin and the code below is saved in a file called style.css
.toggle { background:url(images/plus.png) 0 5px scroll no-repeat; margin-top:20px; padding:0 0 0 35px; display:block; text-transform: normal; font-size: 18px; position:relative; line-height:25px; }
h4.toggle a { color: #888; padding-top:2px; text-decoration: none; text-transform: normal; }
h4.toggle a:hover { color:#666;}
h4.active { background:url(images/minus.png) 0 5px scroll no-repeat; display:block;}
h4.active a:link { color:#666;}
.toggle_content { clear:both; margin:0px; }
div.toggleinside { padding:15px; padding-left:35px;}
h4.toggle { margin-bottom:0}
.fancytoggle {
position:relative;
border:1px solid #ccc !important;
background-color:#fff;
padding:10px;
margin-bottom:10px;
background:-moz-linear-gradient(bottom, #f2f2f2 0px, #fff 100%);
-moz-box-shadow:0px 1px 1px #aaa;
background:-webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #fff));
-webkit-box-shadow:0px 1px 1px #aaa;
box-shadow:0px 1px 1px #aaa;
}
.fancytoggle h4 { margin:0 0 2px 0; }
.fancytoggle .toggle_content { padding-bottom:0; }
However as this is a wordpress plugin i can't just have
background:url(images/plus.png)
as this is being enqueued onto header.php so i need to include this line below
$jquery_libraryurl = plugins_url('jquery_library', 'jquery_library').'/';
to output the whole url to the image. So I need to know how can I accomplish this. I have tried using style.php with this at the top <?php header("Content-type: text/css"); ?>
The only problem is I cannot use the line above calling the function plugins_url() as wp-load.php is not in the file and if I include it puts a big load on the css file.
So I am looking for a way to maybe output the css code with the variable above to a css file using php. I have looked everywhere and cannot find anything useful that may help me to accomplish this.
What are my options to do this and is there a way around this that is simple.
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;
}