• 0
Sign in to follow this  
Followers 0

Squared Image Dim

Question

Posted · Report post

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) ?

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

regards

,Michael

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks! :)

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

:)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

hi aleksander

 

is there a chance to seperate the boxes?

 

like that: http://sabinehuebner.de

 

br & thanks in advance 

,Michael

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Michael,

 

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

 

//Aleksander

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

Thanks for reporting.

 

//Aleksander

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

Thanks for reporting.

 

//Aleksander

 

thanks - great !

 

best regards

,Michael

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

Looks good on all screen sizes by default:
http://dfcb.github.io/Responsivator/?site=squared.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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This should do it

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

Share this post


Link to post
Share on other sites
Sign in to follow this  
Followers 0