Jump to content

Archived

This topic is now archived and is closed to further replies.

nicoleisthenewblack

Hover Effect on Boxes

Recommended Posts

nicoleisthenewblack    0
nicoleisthenewblack

I am currently using Pagelines version 2.4.4 along with the latest version of Wordpress.

 

My site is nicoleisthenewblack.com

 

I would like the three images in my header that are currently in boxes to change upon hover. the image would be a colored background with text descripting the catergory page it leads to.

 

Is this possible with CSS with the current version of pagelines?

I have no desire to upgrade to DMS.

 

I put this in the custom code section and nothing happened, I even tried to just put a simple border around the box to make sure I wasdoing it correctly and nothing happened. Can someone point me in the right direction

 

#fbox_4950:hover {
background-image: url('*url of image*');
}

 

Thank you

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Nicole

 

Yes this will be possible with css, however you'll need to put the id of the box on your site in place of 4950. Each box will have it's own id. If you're planning on all the boxes reacting the same, then just put .fbox

 

#fbox:hover {
background-image: url('*url of image*');
}

 

That code will change the background image on hover. If you want to change the color, replace the hex value with your color of choice. 

 

#fbox:hover {
background-color: #000000;
}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
nicoleisthenewblack    0
nicoleisthenewblack

hi james thanks for your help

its not working for me and i am not sure why.

 

i just did something really simple to check if was using the right syntax and identifying the right thing and i placed this

 

#fbox:hover {
background-color: #48d3ff;
}

 

in my custom code and nothing happens when roll over with the mouse. i checked in firefox and in chrome.

 

what could i be doing wrong? do i have to somehow make the image "invisible" to see the background or something

Share this post


Link to post
Share on other sites
nicoleisthenewblack    0
nicoleisthenewblack

also it looks like on my custom css page it just keeps displaying "saving..." is this a known issue

 

you know what, i dont think any of my css is being applied

im trying simple changes and nothing works

and the changes that i implimented before my upgrade arent working

 

thoughts?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

OK, this isn't going to happen with CSS unfortunately, as far as I am aware. Because your image is using the src attribute, so using CSS:hover will only add it behind the HTML added image.

 

You will need to either use jquery to change the image or remove the uploaded image from your box and then target the box and add the image with CSS, then replace the image using CSS:hover.

 

For more information on the jquery option see here - http://stackoverflow.com/a/20180578


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nicoleisthenewblack    0
nicoleisthenewblack

Danny

 

do i need to start a new topic for my css not saving issue?

 

when i try to impliment changes on the custom css screen all i see is "saving...." and it never stops.

 

is this a known issue?

 

im just trying simple things like change the position of my .mainlogo-link img it works in firebug but nothing is working.

 

i update was there something i missed?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

If you're encounter a Saving that never ends, this is most likely caused by a plugin, I recommend you disable all active plugins and see if the saving issue persists, which it shouldn't.

 

In regards to your CSS working in Firebug, but not in your custom CSS. This is most likely because you haven't used one of the PageLines prefixes to guarantee your CSS will override the default CSS.

 

See our PageLines Framework custom CSS documentation for more information - http://support.pagelines.me/docs/customization/custom-css/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.
       
       

    • claudedagenais
      By claudedagenais+
      Hi,
      Could it be possible to add to the boxes an option so that if an Item has an optional link that we can also optionally make it open in a new windows.
      Thank you :-)
×