Jump to content

Archived

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

micstepl

Image Dim

Recommended Posts

micstepl+    15
micstepl

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
ahansson89    57
ahansson89

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
micstepl+    15
micstepl
  • code works perfect  :D
  • section is wonderful  :D  :D
  • your support is just phantastic  :D  :D  :D

regards

,Michael

  • Like 1

Share this post


Link to post
Share on other sites
micstepl+    15
micstepl

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
ahansson89    57
ahansson89

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
micstepl+    15
micstepl

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
micstepl+    15
micstepl

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
micstepl+    15
micstepl

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
micstepl+    15
micstepl

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
ahansson89    57
ahansson89

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

Share this post


Link to post
Share on other sites
micstepl+    15
micstepl

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
ahansson89    57
ahansson89

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
lvcnj    2
lvcnj

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

Share this post


Link to post
Share on other sites
ahansson89    57
ahansson89
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

  • Similar Content

    • microsqueek
      By microsqueek
      I have another A.Hannson plugin problem, which I'm hoping someone can help with. The Squared plugin allows you to add links, so the image takes you to a new page. Unfortunately, you can't decide whether it's in the same page (_self) or a new page (_blank). It always opens in a new page.
       
      Do you have any suggestions for custom code that would instruct the plugin to open in the same window? I tried modifying the PHP files directly, but didn't have any effect.
       
      You can see what I mean here: http://dev.transitionbydesign.org/projects - the two buttons on the top left have links.
       
      Thanks!
    • microsqueek
      By microsqueek
      Hi Aleksander, quick question - is there a way to tell Squared to open a link in the same page instead of in a new one? Right now it's going to a _blank, but I don't really know how to tell it to stay _self.
       
      I'm sure you know what I mean, but if you want an example, it's what happens when you click the top left box in the Squared section here: http://dev.transitionbydesign.org/home
       
      Any thoughts?
       
      Many thanks.
    • chules
      By chules+
      I am running Wordpress 3.8 and DMS Pro 1.1.5. I instaled Squared but can not figure out why I can't disable the arrows.  I have both options checked.  I wish to remove the arrows.  Is this possible and is Squared compatible with the versions I am running.  Attached is a screenshot showing my settings.
       
      Thank you
       
      Chules
       
       
×