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;
}
Related
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;
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.
The issue is a bit problematic to create a fiddle but I found a template that has a similar problem: http://www.elegantthemes.com/demo/?theme=StudioBlue
The issue is the following: there's a wrapper that has all the content inside of it and a background image positioned at the top center with no-repeat. Everything looks fine, until you resize the window until the window size is smaller than the content/wrapper size.
At this point everything still looks fine as the left edge of the content is aligned with the left side of the browser and you get a scroll bar at the bottom. However, if you scroll to the right you'll see that the background image (since it's centered), actually moved to the left and is now partially of the screen, leaving some blank space to the right. Any idea how I can trick the background image to stay on the screen instead of going off the left side when the window size becomes too small?
you could probably either set the center value to 50% and see what that does (probably nothing different) or you could use media queries for smaller screen sizes. The example you've shown does not have a center position, just a top. Let me know if I understood correctly or what occours! :)
background: gray url(img.jpg) 50% top;
or
#media screen and (max-width:480px) {
body {
background: gray url(img.jpg) left top;
}
}
The issue is that the image is being centered relative to the width of the window when it needs to be centered relative to the scroll width. To fix that, you can create another div at the top of your html to have the background image:
#image-div {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') no-repeat center top;
}
Related: https://stackoverflow.com/a/15792723/1721527
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.