I bought a PHP script from Codecanyon. The link to the script is (https://preview.codecanyon.net/item/atoz-seo-tools-search-engine-optimization-tools/full_screen_preview/12170678).
A dash appears at the top while I'm on the header's menu. I am trying to change it using text-decoration but it is not working.
When I hover over the menu it shows a blue-colored dash on it. How do I remove it?
I used it
.nav{text-decoration: none !important;}
This blue-colored dash is a border from the top to each anchor tag which was initially set to transparent color, but on hover over any anchor it changes to blue. You can get rid of it by adding the below css property:
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-
nav>li>a:focus {
border-color: transparent;
}
P.S: If not works please try using important property, like this
border-color: transparent !important;
Related
I'm working on a Wordpress website and I don't know how to fix this bug.
When I go back on the top of the page after have clicked on a menu button, that menu button keeps the color. It happens in Chrome and Firefox, Safari works fine.
I tried all the possible workaround :(
Can someone help me? HERE
Thanks
The problem is, there is background color & color set :focus selector. So when you click on the menu, it's in focus. Even if you scroll up, the focus remains there. And since you reached top, Home menu will get the class active. Therefore both links will show as active. Try adding this to prevent making the link active on focus,
.navbar-default .navbar-nav > li:not(.active) > a:focus {background-color:inherit !important;color: #4c3d3d !important;}
Note: used !important since the other rules already have !important. Would recommend to not use !important everywhere.
Its this css:
.navbar-default .navbar-nav > li > a:focus {
background-color: #c00000!important;
}
Remove that reference from the css, or override it.
I'm trying to add an arrow to the left hand side of my active link in my categories sidebar for my wordpress site I'm building.
I've already put in the css for it to behave the way I'd like it, I've added a small change in colour just so I know it's working well.
I've attempted to add a background image with a small .png file and tried various CSS styling to get it how I want it but I've had no luck even showing the image.
I'm open to using the character such as "➤" or the like if I cannot use a background image, maybe I might be missing something.
http://94.23.211.70/~cewp/product-category/cushions/
The above my my URL that will go directly to the page you're wanting to see along with a link already highlighted on the sidebar.
Here is the css that is making this active:
.product-categories .current-cat a {
color: #000033;
background-image: url("images/ICONNAMEHERE.png");
}
Hopefully this is enough information to provide, anymore then just ask me.
Regards
You can achieve this by css and font awesome. First add font awesome to your project. You can also use unicode charecters instead.
.widget_product_categories li { margin-left: 2.5em; }
.widget_product_categories li:before {
display: block;
float: left;
margin-left: -2.5em;
font-family: 'fontawesome';
font-size: 14px;
content: "\f054";
}
if not interested in adding font awesome content:url("images/ICONNAMEHERE.png");
I've been trying to figure this problem out, but no luck. There's probably a simple solution that I'm missing. I'm working on a Home Page template that has 4 featured products. The featured products end up showing diagonally and the images also overlap the title, price, and add to cart buttons. If anyone can help, that would be great!
Here's a link to the page that the template is on: http://playground.krisyoungboss.com/home/
(Going to change the front page displays later)
And also here is the shop page link if anyone needs to compare: http://playground.krisyoungboss.com/shop/
Thanks❤️
You've got a collection of things going on.
First, the reason the things are showing diagonal is because you have a <pre> element in your code. I suspect you may have copy-pasted a shortcode, and in doing so picked up the <pre> they had wrapped the shortcode with.
So, first things first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). Look for this:
<pre class="brush: php; gutter: false">
Find it, and remove it (don't forget to remove the closing </pre> tag also).
Then, the reason your images are covering up the content below is because of this declaration in your stylesheet (on line 228 of your stylesheet):
img.wp-post-image {
border: 5px solid #000000;
border-radius: 5px;
float: left;
height: 300px;
margin-bottom: 15px;
margin-right: 10px;
width: 300px;
}
The float:left is applying to the images in your featured section, which is causing the problem. Additionally, the height / width are not good (although they are being overridden by other styles).
Remove float:left, or else add a style like so (after the above styles in your stylesheet):
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
float: none;
}
Finally, your add-to-cart button is too wide. You need to address the styles for it, also - it's spilling out of the parent li elements.
I'm working on a site here:
http://www.jasnasyogaonline.com/membership-test.php
And if you hover over the right nav, you'll see a fade in effect that happens where the background animates to the top and bottom from the middle of the link. In between the three colored lines (the border of the right nav) you'll see that there is white color. This is because on the other pages of the site, the background is white and the original programmer just used a background image to create the 'diagonal' edge of the nav item. Now that there is a full page video/image, this doesn't work because the background isn't white and the effect is lost.
My client is now looking to just have it be transparent between the razor lines but keep the nav items with the diagonal edges. If I removed the images on the end of the nav item, they just become straight rectangles. I've tried some CSS with borders/border-widths, etc. but it's a little tricky because if you look at the source code, the background is being generated by a PHP file that's using imagecreatetruecolor to create the hover effect.
Any ideas on how to cut the corner off of the right nav while keep the area between the razor lines transparent? I'm beginning to run out of ideas. Thanks for your help!
My suggestion would be to drop the hover edge div all together
.nav ul li div {
The recode the animation using a background sprite / animation. In reality I don't really like the mouse over effect at all. Maybe you could sell the customer on something that is easier to do like a text outer glow or an underlining effect.
Also: this post doesn't have anything to do with PHP
EDIT I can't think of another way this can be achieved but you can try if you want this design.
.nav ul li a:hover {
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 10em 0em 10em 0em;
border-radius: 10em 0em 10em 0em;
text-align: center;
}
I want the online icon to blink. Put this in my js code:
function blink(){
$('ul.left_menu li.online').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blink);
}
What happens is that the whole link is blinking. Is there any way to access a specific property in jquery?
My css:
ul.left_menu li.online a{
width:166px;
height:25px;
display:block;
background:url(../images/online-status.png) no-repeat left #dad0d0;
background-position:5px 5px;
border-bottom:1px #FFFFFF solid;
}
I think you want to blink only the icon and not the whole link. But your JavaScript will blink the whole link because JS is assigned to your link container and you set the icon using css background. You can get rid of this using <img> tag. Use <img> to display the icon near your link, and give it a class. Assign blink to this class using jQuery.