Jump to content


Photo
Squared

Image Dim



Best Answer ahansson89 , 16 April 2013 - 03:18 PM

Yup, it is easy - it is a CSS filter

Put this in your custom LESS area:
 

 

#squared {
    .usquare_module_wrapper {
        img {
            &.usquare_square {
                filter: none;
                -webkit-filter: none;
                &:hover {
                    filter: url(@{plExtendRoot}/squared/js/filters.svg#grayscale); /* Firefox 3.5+ */
                    filter: gray; /* IE6-9 */
                    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */}
                }
           }
      }
}

 

Havnt tested the above code, so but hope you get the idea.

Go to the full post


  • Please log in to reply
16 replies to this topic

#1 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 16 April 2013 - 03:08 PM

how to arrange, that the "squared images" are not dimmed to black/white in "neutral state"?

Is there a chance to possibly invert this behavior (neutral=default color,  hover=b/w) ?



#2 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 16 April 2013 - 03:18 PM   Best Answer

Yup, it is easy - it is a CSS filter

Put this in your custom LESS area:
 

 

#squared {
    .usquare_module_wrapper {
        img {
            &.usquare_square {
                filter: none;
                -webkit-filter: none;
                &:hover {
                    filter: url(@{plExtendRoot}/squared/js/filters.svg#grayscale); /* Firefox 3.5+ */
                    filter: gray; /* IE6-9 */
                    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */}
                }
           }
      }
}

 

Havnt tested the above code, so but hope you get the idea.



#3 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 16 April 2013 - 03:26 PM

  • code works perfect  :D
  • section is wonderful  :D  :D
  • your support is just phantastic  :D  :D  :D

regards

,Michael


  • ahansson89 likes this

#4 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 16 April 2013 - 04:09 PM

Thanks! :)

Make sure to leave a review on the product page: http://goo.gl/0PS4h

:)



#5 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 23 April 2013 - 01:30 PM

hi aleksander

 

is there a chance to seperate the boxes?

 

like that: http://sabinehuebner.de

 

br & thanks in advance 

,Michael



#6 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 April 2013 - 09:44 PM

Hi Michael,

Everything is possible with the right LESS...

However that is a bigger operation ass margins needs to be added and everything has to move according to that.

I cannot do this on a free basis as I hope you can understand.

However I really like that idea, so might make something similar.

 

Kind regards,

 

Aleksander



#7 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 25 April 2013 - 12:26 PM

Hi Michael,

Everything is possible with the right LESS...

However that is a bigger operation ass margins needs to be added and everything has to move according to that.

I cannot do this on a free basis as I hope you can understand.

However I really like that idea, so might make something similar.

 

Kind regards,

 

Aleksander

 

Hi Aleksander,

I tried my best (with my basic CSS knowledge) with margins + adding a border on one side .... but the "usquare_square_text_wrapper" slips always down in the space between "usquare_block.usquare_block_selected" and "usquare_block_extended.usquare_square_bg1".

 

Looking at it in Firebug, the width-values strangely stay the same (e.g.. 160x160px) ?

What am I doing wrong? How could you support me?

br

,Michael



#8 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 25 April 2013 - 12:37 PM

Hi Aleksander,

I tried my best (with my basic CSS knowledge) with margins + adding a border on one side .... but the "usquare_square_text_wrapper" slips always down in the space between "usquare_block.usquare_block_selected" and "usquare_block_extended.usquare_square_bg1".

 

Looking at it in Firebug, the width-values strangely stay the same (e.g.. 160x160px) ?

What am I doing wrong? How could you support me?

br

,Michael

 

this is how I mean

 

example.png


#9 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 April 2013 - 04:52 PM

Hi Michael,

 

I am not sure what you mean by the width stays the same?

 

//Aleksander



#10 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 27 April 2013 - 08:50 AM

Hi Michael,

 

I am not sure what you mean by the width stays the same?

 

//Aleksander

 

Hi Aleksander,

I was able to manage the spaces with margins, as you have recommended. The reason of my mistake, mentioned above was, that I did not turn on less in wpconfig :)

 

 

 

 

(2) BUT there is an issue with your existent Section, where I´d like to ask you for your support

 

First I want to give you my settings. 

Layout Editor > Responsive with % Width > Full-Width Sections > the several problems seem to be around the content area handling of your section (and it´s borders) with left & right a marign to the side of the browser.

 

 

1setting.png

2border%20of%20content.png

 

 

 

The PROBLEM EXAMPLES below are shown with pictures of my modified child section, but do occour in the same way with your original section.

 

 

(PROBLEM A) ignoring pagelines content borders

issue: see the screenshots - I have placed some content around, so you can see where the real borders are

 

 

3-0.png

 

3-1.png

 

 

 

 

(PROBLEM B) in some sizing situations it does not center the section

, but some like 50 PX smaller it eg suddenly moves all to center

 

4-1.png

 

 

 

 

 

(PROBLEM C) on mobile devices - ipPAD mini, Portrait

- above PROBLEM B occurs too

- in eg. landscape hold of the iPad Mini ... everything is OK ;)

 

Mobile-iPadMini.JPG

 

 

 

 

 

 

 

(PROBLEM D) on mobile devices - iPhone 5. portrait

- above following problem occours

- again in landscape ... OK

 

Mobile-iPhone5_1.PNG

 

 

also see the strange issue with the CLOSE+ the issue that the box stretches to the very right

 

 

 

Mobile-iPhone5_2.PNG

 

 

 

best regards & thanks in advance for your support

Michael



#11 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 27 April 2013 - 08:59 AM

I see it, I will release an update within a few days.

 

Thanks for reporting.

 

//Aleksander



#12 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 27 April 2013 - 11:19 AM

I see it, I will release an update within a few days.

 

Thanks for reporting.

 

//Aleksander

 

thanks - great !

 

best regards

,Michael



#13 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 28 April 2013 - 02:39 PM

Problem A, B and C is caused by your margins.

 

Looks good on all screen sizes by default:
http://dfcb.github.i...ed.ahansson.com

 

I fixed problem D and released an update: version 1.4

//Aleks



#14 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 28 April 2013 - 04:58 PM

Problem A, B and C is caused by your margins.

 

Looks good on all screen sizes by default:
http://dfcb.github.i...ed.ahansson.com

 

I fixed problem D and released an update: version 1.4

//Aleks

 

Hi Aleksander,

thanks again for your prompt reaction - speaks for a TOP developer!!!

Installed your section 1.4. (deinstalled mine) and made following testing.

 

still following issues:

@A) your squares still override the "content areas" border at the left & right (just not centered, which had to do with my margins)

@B.) sill a break an alignment left (between 1060px & 980px total width, under general page lines setting form above)

@C) still issue on iPad MINI - landscape (same as B

@D) SOLVED

 

br

,Michael

 

 

@A)

10_border.png

 

 

@C)

10_iPadMini.PNG

 

TIP ... my investigation is, the line

 

 

    @media screen and (max-width:980px) {
        .usquare_module_wrapper {
            max-width: 640px;
        }
    }

 

 

if the value was set to 1200px instead of 980px it works, but than the issue is, that the 3 boxes do not work below 1200px



#15 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 28 April 2013 - 08:10 PM

I fixed A and I am releasing an update now. Version number will be 1.6

I am getting issues with B and C as well when I am doing percentage width, but not when doing pixel width layout.

 

If you are using the setting I marked here then your problems goes away.
http://screencast.com/t/ha3EHc2AQb

 

I am not sure why this is happening, but it looks like a core issue.

 

//Aleks



#16 lvcnj

lvcnj

    Member

  • Members

  • 26 posts
  • Country: Country Flag

Posted 10 September 2013 - 11:03 AM

did not work for me -- put code in "Less" section === images still in BW



#17 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 10 September 2013 - 01:51 PM

This should do it

.section-squared {
    .usquare_module_wrapper {
        img {
            &.usquare_square {
                filter: none;
                -webkit-filter: none;
           }
      }
}






Also tagged with one or more of these keywords: Squared