The links on the images are being hidden or covered and I cannot figure out why. The first <a href.. below is an example of this.. Live version can be found here.. Basically any of the product images should be clickable..
<div class="image-wrap">
<a href="http://fundraisingfountain.pixelworklab.com/product/bull-dog/" title="Bull Dog">
<img width="150" height="150" src="http://fundraisingfountain.pixelworklab.com/wp-content/uploads/2013/06/Pillow-Pets-Bulldog-2-150x150.png" class="attachment-shop_catalog wp-post-image" alt="Pillow Pets - Bulldog (2)">
</a>
<ul class="product-details">
<li class="details">
<a class="button details" href="http://fundraisingfountain.pixelworklab.com/product/bull-dog/" title="Bull Dog">View Details</a>
</li>
<li class="price-wrap">
<span class="price"><strong><span class="amount">$25</span></strong></span>
</li>
<li class="cart">
Add to cart
</li>
</ul>
</div>
It works fine on my machine.
You'll have to check your CSS and make sure that there are no div tags that are layered on top of it (or have a higher z-index than it).
That is because you have set ul height:100% that is why it overlaps the image.
Change the height for the ul to something smaller and it will work fine
woocommerce.css Line # 634
ul.products li.product .product-details{
height:25px;
}
btw if you give a
border="0"
to your image links there wil be no grey (or any other color) border around it
Here's what you need to fix
ul.products li.product .product-details {
height: auto;
top: 108%;
}
ul.products li.product .product-details li {
vertical-align: middle;
}
Related
I have some php which works on my site to style a link. However, when I try to use the same code to style other links in a different way, it breaks my site.
For example I have:
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.events-dashboard1 {background-color: green;}
</style>';
}
This works but when I try to duplicate like so:
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.post-job1.post-event1 {background-color: #e5f25c; color: white
!important;}
</style>';
}
The site breaks. I've investigate and found that using multiple classes like that doesn't work. But if I repost the same php code just with 1 class, it breaks. Tried altering the format - nothing.
Html:
<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp-
menu-open menu-top menu-top-first menu-icon-dashboard menu-top.
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu-
arrow"><div></div>
</div><div class='wp-menu-image dashicons-before
dashicons-dashboard'><br /></div>
<div class='wp-menu-
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria-
hidden='true'>Dashboard</li>
<li class="wp-first-item current">.
<a href='index.php' class="wp-first-item current"
aria- current="page">Home</a></li>
<li><a href='update-core.php'>Updates
<span class='update-plugins count-37'><span class='update.
count'>37</span></span></a></li>
<li class="jobs-dashboard1"><a
href='https://adsler.co.uk/jobs-dashboard/' class="jobs.
dashboard1">Jobs</a></li>
<li class="post-job1"><a
href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A
Job</a></li>
<li class="events-dashboard1"><a
href='https://adsler.co.uk/your-events-dashboard/' class="events.
dashboard1">Events</a></li>
<li class="post-event1"><a
href='https://adsler.co.uk/post-an-event/' class="post-event1">Post
An Event</a></li>
</ul>
</li>
So now I have four links, two of which I can't style, the other two are styles by above code and the following code. One for each:
function custom_admin_css() { echo ' <style> .jobs-
dashboard1 { background-color: green; } </style>'; }
add_action('admin_head', 'custom_admin_css');
Just put all of your styles under the same tag. It appears you are trying to use the same function twice, which you cannot do.
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.events-dashboard1 {background-color: green;}
.post-job1, .post-event1 {background-color: #e5f25c; color: white
!important;}
/* Any other CSS you have put here */
</style>';
}
Ultimately, what you should do, is create a CSS file. Put your CSS in it. Then enqueue it. Like this.
admin-styles.css
.events-dashboard1 {background-color: green;}
.post-job1, .post-event1 {background-color: #e5f25c; color: white
!important;}
/* the rest of your CSS */
enqueue the file
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
wp_enqueue_style('admin-css', '/path/to/file/admin-styles.css');
}
I am using bootstrap to build my site and the dropdown I am using is too long for the page so some items cannot be seen, is there any way to, limit the length it can go to before needing the user to scroll, I have attached an image to show what I mean as well as the code I am currently using
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li>Search By Category:</li>
<li role="separator" class="divider"></li>
<?php echo $htmlResult1; ?>
</ul>
The main results are brought in via php but follow the correct style to be listed
Any thoughts
As #Luis P.A. said:
Set a max-height and overflow to <ul>
ul.dropdown-menu {
max-height: 400px;
overflow-y: auto; /*scroll results in a scrollbar even when the height < 400px */
}
set the max-height and overflow attributes in your CSS
.fixedHeight-ddl{
height: auto;
max-height: 300px;
overflow-x: hidden;
}
and your tag
class="dropdown-menu fixedHeight-ddl"
<p style="" class="remove-item">
<a href="<?php
echo $this->getUrl('checkout/cart/delete', array('id' => $item->getId(), Mage_Core_Controller_Front_Action::PARAM_NAME_URL_ENCODED => $this->helper('core/url')->getEncodedUrl())); ?>" style="font-size: 8.5px; float: right; margin-right: 6px; color: #cc0909; font-weight: bold"><?php echo $this->__(''); ?>
Remove item
<a class="remove-item-red" style="float: right; margin-right: 2px; margin-top: 2px"></a>
</a>
</p>
I was wondering how to get an img and the text that states Remove button to link to the same place. The img is the <a class="remove-item-red">, a red circle with an x in the middle. So both the img and the text need to serve the same function but whenever I meddle with the a class for my btn, it tends to crash or the usual that the button itself does not serve the function while the text does.
I had Remove item as <?php echo $this->__('Remove item'); ?> before which still resulted in the same, with Remove item doing its function while the a class button does nothing. It's just an image.
What am I doing wrong and how do I fix it?
Try using a div-tag for the Remove button instead of embedding an a-tag in another a-tag.
Like so:
<p style="" class="remove-item">
<a href="#">
Remove item
<div class="remove-item-red"></div>
</a>
</p>
Is there a way for me to highlight a menu li depending on the page id? I can't seem to figure out a way to do it.
http://www.dawaf.co.uk/cthm/work/
<div id="header">
<h1>
<a href="http://www.dawaf.co.uk/cthm/work">
<img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/logo2.png" alt="CTHM Logo" id="logo" width="140" height="44" />
</a>
<div id="contact-details">
26 Queen Anne Road, London, E9 7AH<br />
t + 44 7912325101<br />
hello#cthm.co.uk
</div>
</h1>
<div id="nav">
<span id="nav-li">
Work
Studio
CTHM+
<a href="https://twitter.com/hello_cthm" target="_blank">
<img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/twitter.png" alt="Twitter" width="13" height="13">
</a>
</span>
</div>
</div>
<div id="content">
I would recommend adding an active class to the navigation item. Something like this:
Work
And then the CSS:
#nav a.active {
/* your active style here */
}
You have two options. One is that mentioned by Zak, whereby you would need to use jQuery for your website to mark only one item at a time as "active". The other option is the CSS :active selector, which will auto apply CSS to the link which is in use (at the present time). For example:
#nav li a:active {
/* Insert styling here, such as, background-color: #01B */
}
Let me know if this helps!
Look at this
http://jsfiddle.net/esTzk/
How come the color on my #header won't apply ?
Give it a height or hide the overflow and it will. Either will work in this case.
#header{
background:#2b2b2b;
color:#fff;
width:100%;
height:200px; /* overrides float calculations */
overflow:hidden; /* clears floats */
}
http://jsfiddle.net/AlienWebguy/esTzk/1/
Give your header a height, because you dont want it be greater than a certain value anyway:
#header{
background-color:#2b2b2b;
color:#fff
width:100%;
height:20px;
}
a better solution would be to move the div with clear both inside the header.
<div id="header">
<ul id="nav">
<li>Service Provider
<ul>
<li>Vendor / Manufacturer</li>
<li>Service Type</li>
<li>Service Technician</li>
</ul>
<div style="clear:both"></div>
</li>
<li>Cities & Stations
<ul>
<li>Stations</li>
<li>Station Owner</li>
</ul>
<div style="clear:both"></div>
</li>
<li>Firefighter</li>
<li>PPE Management</li>
<li>Care & Maintenance</li>
<li>Logout</li>
</ul>
<div style="clear:both"></div>
</div>
Just to add for your knowledge, it is because of the float:left in the #nav li selector. Because the elements inside the #header div are floated the #header div is set to height=0. That's why it won't display the background color before you specify a height for it or clear the float.