I've got a button. And this button when clicked, will produce popup. The problem is I don't want it to be a button, instead, I just want it to be a plain text. All the function will be the same.
Is there any way to get around this?
The "See size chart" element is not a button, it is actually plain text with a button-like style. You need to change it's CSS rules
If you want it to be simple black text on white background, change this:
.yith-wcpsc-product-size-chart-button{
background: #0f0f0f;
border: none;
border-radius: 0px;
color: #ffffff;
display: inline-block;
padding: 3px 10px 3px 10px;
text-decoration: none;
margin: 5px 3px;
cursor: pointer;
box-shadow: 0px 2px 7px -2px #dddddd;
}
to
.yith-wcpsc-product-size-chart-button {
color: #000000;
display: inline-block;
cursor: pointer;
}
and remove this
.yith-wcpsc-product-size-chart-button:hover {
background: #3f3f3f;
}
Related
This is the html code for the POPUP. If I print this out in a foreach function then when I press the another popup that is create from the function the css will be link together so no matter which CSS I press it will only pop up the data for the first POPUP and the second pop up will stay the same. This is what I made:
So if I press the POPUP from course 1 then the pop up will works but if I press the POPUP from Couse 2 then the POPUP from Couse 1 will pop out instate of the course 2 popup the I pressed. Is there any way to make the css individual by calling out them one by one with foreach function because the number of the course is no specific sometime have more and sometime have less so is there any way to make every popup individual for each course.
<input type="checkbox" id="show" />
<label for="show" class="show-btn"> Join Meeting </label>
<div class="container-attendence">
<label for="show" class="close-btn fas fa-times" title="close"></label>
<div class="text">Attendence Detail</div>
</div>
This is the CSS code
.show-btn{
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
input[type="checkbox"]{
display: none;
}
.container-attendence{
display: none;
background: #fff;
width: auto;
padding: 30px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .show-btn{
display: none;
}
#show:checked ~ .container-attendence{
display: block;
}
.container-attendence .close-btn{
font-size: 18px;
cursor: pointer;
}
.container-attendence .close-btn:hover{
color: #3498db;
}
.container-attendence .text{
font-size: 35px;
font-weight: 600;
text-align: center;
}
.container-attendence form{
margin-top: -20px;
}
.container-attendence form .data{
height: auto;
width: 100%;
margin: 40px 0;
}
form .data label{
font-size: 18px;
}
.Attendence-btn{
background:none;
border:none;
}
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
}
// +---------+---------+---------+---------+---------+---------+---------+
Is it possible to modify selectize.js? Instead of having a dropdown it will open a modal box for its options ? I am thinking of having a onfocus event then it will open that modal but prevent the dropdown. I'm just not sure how I can achieve it. and How I can populate the selectize once the modal options have been saved
It's usually not a good idea to customize a code library because you will not be able to upgrade to the next version. You are better off rolling your own solution using js and css. Actually making modal boxes is not that difficult, you just need to float a div at a higher z-index than the rest of the page, then put a transparent layer behind it to keep the user from clicking through to the background page. Here is some sample css and html I use to float a modal.
css
.BDT_Dialog_Layer {
position: absolute;
display: table;
top: 0px;
left: 0px;
height: 99%;
width: 99%;
}
.BDT_Dialog_Center {
position:fixed;
top:30%;
width:100%;
}
.BDT_Dialog_Decoration {
position:relative;
margin:0 auto;
text-align: center;
background-color: #ffffff;
display: table;
/* -- background-color: #DDDDDD;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF' , endColorstr='#BBBBBB');
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #FFFFFF), color-stop(1, #BBBBBB) );
background-image: -moz-linear-gradient( center top, #FFFFFF 10%, #BBBBBB 100% ); -- */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
-webkit-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
-khtml-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
}
html
<div id="dialogLayer" class="BDT_Dialog_Layer">
<div class="BDT_Dialog_Center">
<div class="BDT_Dialog_Decoration">
My stuff
</div>
</div>
here is the blocking layer css
div.BlockInteractionWithPage {
position: absolute;
top: 0px;
left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #ffffff;
opacity: 0.0;
filter: alpha(opacity=0); /* filter:alpha for IE8 and earlier */
height: 100%;
width: 100%;
}
I run some of the web stuff at work on the side, not exceptionally experienced at this stuff. I don't know what element of the process I've gone through has caused the hiccup so if you bear with me, I'll try and explain in-depth.
Recently our site (basic bootstrap template) has begun expand out from just a few pages, and to stay on top of things I opted to pull the header and footer files out into their own includes folder, and use...
<!--Header include-->
<?php $path = $_SERVER['DOCUMENT_ROOT'] . "/includes/"; include ( $path . 'header.html' ); ?>
...for easier management. Went through the site and stripped out old code and changed page extensions to php (and now began testing site on MAMP).The structure of the site is 75% of pages living in root, 25% living in a folder called services. All pages pull the same header.html So far so good.
The problem arrises when I test the site. All pages that live in root (public_html) work as expected, the nav drop down menu contained in the header works fine. But when you click into any of the pages that live in /services/ the dropdown (and only the dropdown), breaks. By breaks, I mean that a dropdown should appear on mouse hover over and it doesn't. All of the other CSS, the theme, the code for a picture slider, works ok. It's just this one element of the nav bar that breaks for these pages that live in the /services/ folder.
I compared the elements of a working page and a broken page by inspecting them firefox, and this is the only place I can see any differences..
On a working page, the working dropdown html shows as...
ul class="dropdown-menu bold" style="display:none;"
With CSS rules of...
element {
display: none;
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 20px;
}
.bold {
font-weight: 900;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 180px;
padding: 0px;
margin: 2px 0px 0px;
list-style: outside none none;
background: none repeat scroll 0% 0% #343434;
box-shadow: none;
border-right: 2px solid #302F2F;
border-width: medium 2px 2px;
border-style: none solid solid;
border-color: -moz-use-text-color #302F2F #302F2F;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
}
.dropdown-menu {
border-radius: 0px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
list-style: outside none none;
background-color: #FFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0px;
}
ul, ol {
padding: 0px;
margin: 0px 0px 10px 25px;
}
ul, ol {
padding: 0px;
margin: 0px 0px 10px 25px;
}
li {
line-height: 1.6em;
}
li {
line-height: 20px;
}
.nav {
list-style: outside none none;
}
body {
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6em;
color: #656565;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
html {
font-size: 100%;
}
The broken page(s) shows html of...
<ul class="dropdown-menu"></ul> <<< I think this might be a red flag??
and CSS of....
element {
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 20px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 180px;
padding: 0px;
margin: 2px 0px 0px;
list-style: outside none none;
background: none repeat scroll 0% 0% #343434;
box-shadow: none;
border-right: 2px solid #302F2F;
border-width: medium 2px 2px;
border-style: none solid solid;
border-color: -moz-use-text-color #302F2F #302F2F;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
}
.dropdown-menu {
border-radius: 0px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
list-style: outside none none;
background-color: #FFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0px;
}
ul, ol {
padding: 0px;
margin: 0px 0px 10px 25px;
}
ul, ol {
padding: 0px;
margin: 0px 0px 10px 25px;
}
li {
line-height: 1.6em;
}
li {
line-height: 20px;
}
.nav {
list-style: outside none none;
}
body {
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6em;
color: #656565;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
html {
font-size: 100%;
}
(I can manually change the broken dropdown in firefox inspect to element { display:inline } and the dropdown reappears, with working links to the other pages.)
Overall, I can't understand why this is happening.
All of the other CSS is working on the broken pages, so the links to that location must work.
All pages share the same header.html which uses the same html to create the working dropdowns.
All CSS is called individually at the start of each page in the head (not in the header.html file).
If all pages look at the same header file, and they all point to the same CSS, how am I getting different results?
Thanks,
Found the answer to this a while ago and I figured I'd update. The javascript that animates the nav bar was written out and contained in the footer with relative links to the js folder, which hadn't been updated when the pages were moved into the services folder. So the animations would fail because the javascript files couldn't be located.
Fixed this by making the footer as its own file in an includes folder with explicit links to the js folder from there, then used a php document root include (same as the code above) to bring it into the other pages.
how to get the notification number badge in ajax like Facebook. cant post a picture here but i think people know what am i talking about. its like when you log in to Facebook, if you have new messages you will get a little number on the top right corner of the icons next to search bar. i'm currently found this piece of code in charge of creating that number but i cant go any further from that. here is the code i found.
<span class="jewelCount" id="notificationsCountWrapper">
<span id="notificationsCountValue">1</span>
<i class="accessible_elem"> Notifications</i>
</span>
You want something like that?
Here is the css & jquery solution, if you like. DEMO http://jsfiddle.net/yeyene/DfSda/1/
Add <span class="ballons"></span> inside your button, and replace the dynamic count value.
.ballons {
float:right;
margin:-20px 8px 0 0;
line-height:30px;
padding:0 10px;
border-radius: 30px;
border:3px solid #fff;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
background:red;
color:#fff;
text-align:center;
-moz-box-shadow: 1px 1px 3px 3px #ccc;
-webkit-box-shadow: 1px 1px 3px 3px #ccc;
box-shadow: 1px 1px 3px 3px #ccc;
}