I am fairly newbie so bear with me if this seems simple to you, because it isn't simple to me!
I've bought a nice template which is providing the framework for a new food festival site I'm building. I'm new here, so they won't even let me post a screenshot, so I can't show you how I've modified the template! Dumb!
Below the main logo are several hover buttons which slide an image from right to left. I'd like to turn them into hover images which don't 'slide' but simply change on mouseover - as suggested in this article.
Can anybody point me in the right direction?
Simply add in your CSS:
ul#menu:hover li{
background-image: url('yourImageUrl');
background-repeat: no-repeat;
background-position: top center;
}
eventually using opacity to make the hover image semi-transparent, and adjusting the margin / padding according to your layout
DEMO: http://jsfiddle.net/ZSGDH/
I think that I finally know your problem, and it lies in the fact that the "mouse hover effect" that we are seeing is actually triggered by a javascript and not the CSS3 which was presumed.
And in order to get what you want, you should first disable the javascript which is overriding the css rules. and its location is "http://static.livedemo00.template-help.com/wt_39062/js/jquery.backgroundpos.js"
Once the js/ is disabled then you can easily implement your idea using the css3 trick that you linked to. You can further inquire about how to implement that, but for the time being I suppose that you'd like to do it yourself.
Related
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
I'm new to wordpress and website building. Just bought a theme and faced an issue.
I want to put my image over accordion div container. How I can do that? My theme has content building option, but as far as I know it doesn't support creating layers feature (nor any other content builder plugins, like this or this
I would really appreciate any kind of help!
If you find a way to customize the CSS, this should do the trick:
.column.one {
position: absolute;
z-index: 2;
}
The property position:absolute allows you to position the image freely using the CSS properties top, left, right and bottom.
z-index:2 makes sure, that the image is in front of the accordion.
Edit:
Turns out that there is one more problem: since the image overlaps the accordion, the overlapped areas are not clickable anymore. To solve this problem, you can use the CSS property pointer-events:none. But beware! This is not supported by IE and Opera. You may need to find a workaround for these browsers.
Browser Compatibility Table: http://caniuse.com/pointer-events
Article about the Property: http://www.sitepoint.com/css3-pointer-events/
Goal: when someone clicks on the logo on my website it appears to be "pushed" by changing the image to a different one with a stronger inner shadow or to one that has a top padding of a few pixels.
I've been reading boards on here and trying tutorial after tutorial to get this to work yet am still having issues. Where I'm at now is going back to very simple code... no extra CSS... no javascript, but am finding that I probably will have to use one or both of those. Right now (with very basic html and no CSS or JS) I am finding that when my logo is clicked on the 2nd image appears but is BEHIND the first. The first image doesn't go away and I can only see the test image glowing behind it when clicked on (probably because I'm using 'background-image' but it's the only way I've been able to see any kind of change).
<div class="logo"><img src="images/logo.png" onmousedown="this.style.cssText='background-image: url(images/logo-click.png)'" onmouseup="this.style.cssText='background-image: url(images/logo.png)'" /></div>
CSS I can handle but my knowledge of JS is limited so if this has to involve JS please point me to a template or tutorial. I have found tons of tutorials about how to create this effect from scratch in CSS but I can't do that with my logo as it is an image.
It seems like it should be simple to show one main image, click on it to show a different one, and let go of your click to show the original with no fancy smooth transition effects. Yet... I am struggling with this.
If you want to obtain the change only when the mouse is being clicked you could use the :active element of CSS.
I haven't tested the following code but I think it should work:
a {
background-image: url(images/logo.png)
}
a:active {
background-image: url(images/click.png)
}
I've followed the tutorial url to get a popup working:
I have one caveat though. Sometimes the pages it will be popping up from are really, really long. The code in the tutorial has it popping up in the center. Vertically, this is not acceptable. I'm trying to get it to pop up in the center, but at the very top. I've used top: 0px; and for testing purposes left: 0px; (and a few others) but it seems to matter not. Always pops up in the center.
You can take a look at the latest one I've done here
Am I missing something?
Your technique is very old and not the right way!
What happens in your case is, you have considered the page's height and width for calculating the center position. If you can change it like:
popUpDiv.style.top = '10%';
Just give a try and let me know.
Best Suggestion: Use jQuery! :)
But, what I have followed is from Queness, which is still more simple.
Tutorial: Simple jQuery Modal Window Tutorial and Live Demo.
Hope it helps! :)
In your css for #popUpDiv do top : 0 !important and you will find your popup box at the top. It is because javascript is calculating the top position and its overwriting your css style. Hope this helps.
The problem is your top and left values are being ignored in the CSS because whatever script you're using to make the popup happen is applying the styles inline directly to the popup. So you should look through that script and find where it's applying the styles, then change it there.
I am making a simple little web based control panel of sorts, and my lack of CSS knowledge is killing me. I basically need to make a div class that uses both an image icon and places a text caption underneath it (both are links to the target page).
I found some examples for doing this on various sites, but none of them work for placing the icon/captions side by side. To give a better idea of what I am trying to do, CPanel is a perfect example of what I am trying to accomplish.
How can I go about doing this?
Something like this maybe?
<div class="image-caption">
Some Text
</div>
.image-caption {
background: url(icon_path) no-repeat top center;
width: icon_width;
padding-top: icon_height;
}
Found a website with a very simplistic approach that works perfectly here...
http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm