Row Increase with Mouse-over

WordPress Business Themes Forums General Discussion Row Increase with Mouse-over

Discontinued - The forum content is out of date. For theme support please use our support desk here.

Row Increase with Mouse-over

July 16, 2013
Jose Jose
  • Jose
    Jose
    Newbie 29 points

    I was having an issue with a row increase on my index page. When one of the products in R. Column was moused over, the rows of products on the index page increased from 4 to 5.

    Mark (i.e. – “Keymaster”) told me that it was a border widget issue and came up with a super-easy fix – and it works very well. He directed me to add the following code snippet to admin -> display setup -> custom css:

    <style> ul.display li:border: {
    2px solid #3f7f00
    }</style>

    However, I wanted to decrease the mouse-over border size from 5px to 2px or 3px, but when I do so, the row increase on mouse-over issue returns.

    It was then suggested that I plug in the subsequent code snippet – but still the problem returns with the code below:

    ul.display li {
    border: 2px solid #3f7f00 !important;
    }

    and

    ul.display li:hover {
    border: 2px solid #3f7f00;
    }

    How should the code snippet appear EXACTLY in order to drop the border from a 5px to 2px or 3px? Because the preceding two-part snippet forces the mouse-over row-increase again…? What am I doing wrong?

    Also – unrelated to my website issue – for some reason, ShopperPress is not appearing in the Drop-down Forum Selection Box in the “Start New Forum Topic.”

    July 16, 2013 at 6:01 am
  • Richard Bonk
    Richard Bonk
    Super Guru 2,739 points

    <style> ul.display li:border: {
    2px solid #3f7f00
    }</style>

    This code is wrong!

    It should have been like this:

    <style> ul.display li {
    border:2px solid #3f7f00;
    }</style>
    July 16, 2013 at 9:30 am
  • Jose
    Jose
    Newbie 29 points

    The following code snippet works by itself for a 5px border. But as soon as I change it to 2px, the mouse-over created row increase returns:

    <style> ul.display li:hover {
    border: 2px solid #3f7f00;
    } </style>

    Now to complicate the issue if I insert Richard’s code (in bold) after the first snippet, it crashes the site:

    <style> ul.display li:hover {
    border: 2px solid #3f7f00;
    } </style>

    <style> ul.display li {
    border:2px solid #3f7f00;
    }</style>

    What am I doing wrong? Should Richards second code snippet be substituted in place of the first snippet (my fault as I included both – as seen ordered above), or is there a different issue?

    Or – is one of the two snippets still incorrect and causing a conflict?

    At 5px, the first snippet works fine for the mouse-over – no row-increase issues, however as soon as i drop it to 2px or 3px, the mouse-over problem returns. And the two snippets together (Richard’s + Original) crashes the whole back-end of the site, and the mouse-over issue also returns again.

    What could the issue be?

    July 16, 2013 at 1:05 pm
  • Richard Bonk
    Richard Bonk
    Super Guru 2,739 points

    Jose, if you enable Right Click on your website, I will give you just one snippet to use instead all the other ones.

    July 16, 2013 at 1:12 pm
  • Jose
    Jose
    Newbie 29 points

    Richard, right-click block has been de-activated.

    The original code worked well, but only for 5px:

    <style> ul.display li:hover {
    border: 5px solid #3f7f00;
    } </style>

    As soon as it is dropped below 5px, the mouse-over row-displacement occurs again.

    So I am hoping that you can give me a snippet for a 2px or 3px border. Both snippets at once crash all of WordPress Admin.

    July 16, 2013 at 1:32 pm
  • Richard Bonk
    Richard Bonk
    Super Guru 2,739 points

    OK use this snippet:

    <style>
    ul.display li {
    border: 2px solid #F1F1F1 !important;
    margin: 5px;
    }
    ul.display li:hover {
    border: 2px solid #3f7f00 !important;
    }
    </style>

    Remove any previous code snippets.

    Kind regards,

    Richard

    July 16, 2013 at 1:56 pm
  • Jose
    Jose
    Newbie 29 points

    Richard – i inserted the following code into ShopperPress -> Display Settings -> Layout -> Custom Styles -> <HEAD> data (versus FOOTER Data):

    <style>
    ul.display li {
    border: 2px solid #F1F1F1 !important;
    margin: 5px;
    }
    ul.display li:hover {
    border: 2px solid #3f7f00 !important;
    }
    </style>

    Same problem. 2px frame is showing, but row displacement still occurs with mouse-over of fourth column products…

    July 16, 2013 at 2:17 pm
  • Jose
    Jose
    Newbie 29 points

    I think I found out the problem. There was a preceding code snippet, for font size. While there was a <style> preceding the first snippet, it was not closed with a </style>. I have placed all the CSS from the <HEAD> data, with the newly inserted <style/> placed in bold.

    Is it possible that failure to close the first snippet with “<style/>” (in bold below) caused the subsequent code insertion (created by you), to be totally thrown off – and subsequently crash the site?

    It looks as if all is okay now. Crossing my fingers.

    Entire code sequence – with pre-existing code snippet is shown below:

    <style>
    .menu li a { font-size: 14px;
    color: #3F7F00;}
    ul.display li h3 a {font-size: 12px;}
    </style>

    <style>
    ul.display li {
    border: 2px solid #F1F1F1 !important;
    margin: 5px;
    }
    ul.display li:hover {
    border: 2px solid #3f7f00 !important;
    }
    </style>

    July 16, 2013 at 2:27 pm
  • Mark Fail
    Mark Fail
    Super Guru 12,814 points

    seems ok to me

    July 16, 2013 at 2:44 pm
  • Jose
    Jose
    Newbie 29 points

    Thanks Mark & Thanks Richard!!!!

    July 16, 2013 at 3:02 pm
  • Jose
    Jose
    Newbie 29 points

    With the 5px border and the older code, there still was some frame displacement with mouse-over (albeit without creating a 5th row). This fix also resolved the “frame-” or “image-jump” which was occurring.

    Once again – My appreciation and thanks to both Richard and Mark…

    July 16, 2013 at 3:22 pm
  • Mark Fail
    Mark Fail
    Super Guru 12,814 points

    :)

    July 16, 2013 at 3:29 pm
Viewing 12 posts - 1 through 12 (of 12 total)

Didn't find what you were after?

Chat with us now

or contact our support team