Jump to content

Archived

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

Gavin_

Pseudo before after not working on DMS 2

Recommended Posts

Gavin_

Hello 

As per Andrew I am posting this here. 

On my DMS1 site I am using this CSS 

its a simple add - using the custom styling class field i create the class 'innerpage' and then get going. 

 

.innerpage {
  background: #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
  margin: 26px auto 0;
  padding: 24px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.innerpage:before {
z-index: -1;
position: absolute;
top: -2px;
left: 0;
content: '';
width: 100%;
height: 100%;
background-color: #fafafa;
border: 1px solid rgba(0,0,0,0.15);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.19);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.19);
box-shadow: 1px 1px 2px rgba(0,0,0,0.19);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}
.innerpage:after {
z-index: -2;
position: absolute;
top: 1px;
left: -2px;
content: '';
width: 100%;
height: 100%;
background-color: #f6f6f6;
border: 1px solid rgba(0,0,0,0.15);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}

It works very well http://www.sallygardner.net/about-sally/about-sallys-books/ http://screencast.com/t/PhHogbrckjj5
 

 

However on a DMS2 site its not working 
http://pagelines.kyle-irving.co.uk/multiple-paragraph-post/

It was suggested to add a z-index to the .innerpage but that does not work. I have added the z-index all the way up to 999 and taken it down to -999 and played around with all three layers. The problem is, although playing with the z-index gives the illusion of a fix, in reality what it does is place the 'bottom' layers above the main layer. 

I have also tried other CSS utilising the pseudo before and after; like this from Paul Underwood http://coveloping.com/tools/css-box-shadow-generator and this also does not work. And yes it was edited without the fixed width and height elements.
 

.box-shadow-preview{ 
    height: 200px; 
    width: 500px; 
    position: relative; 
    background-color: #FFFFFF; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #DDDDDD; 
    border-radius: 0px; 
    box-shadow: 0px 1px 4px 0px #99a3ad, 0px 0px 40px #eeeeee; 
} 
.box-shadow-preview:before{ 
    content: ""; 
    z-index: -1; 
    position: absolute; 
    width: 80%; 
    top: 100px; 
    right: 10px; 
    bottom: 0px; 
    left: 10px; 
    border-radius: 100px; 
    box-shadow: 0px 0px 20px #2a2e31; 
} 
.box-shadow-preview:after{ 
    content: ""; 
    z-index: -1; 
    position: absolute; 
    width: 80%; 
    top: 100px; 
    right: 10px; 
    bottom: 0px; 
    border-radius: 100px; 
    box-shadow: 0px 0px 20px #2a2e31; 
}

I'm not sure what the problem is but i would really appreciate some help with this one.  It would be great to understand how to get z-indexes and pseudo classes to work with the post loop. 

Thanks 

Share this post


Link to post
Share on other sites
James Giroux

Hey Gavin,

 

Haven't forgotten about you.  I still don't know the answer to this.  :-/

 

James.


James Giroux, CEO
Groundwork

Share this post


Link to post
Share on other sites
Gavin_

As an update.

I have now tried more before and after examples that can be found from reputable sources.
They al use the same approach to the z-index and none of them are working for me when applied to the post loop. 

Can I ask when someone will be able to give me guidance on this? 

Share this post


Link to post
Share on other sites
Andrew

why are you not applying a z-index to innerpage itself? 

Share this post


Link to post
Share on other sites
Gavin_

why are you not applying a z-index to innerpage itself? 

Thanks arpowers for responding.

I have tried applying a z-index to the .innerpage - what would be the top level

and as i mention in my description of the issue above:
"It was suggested to add a z-index to the .innerpage but that does not work. I have added the z-index all the way up to 999 and taken it down to -999 and played around with all three layers. The problem is, although playing with the z-index gives the illusion of a fix, in reality what it does is place the 'bottom' layers above the main layer. "

I have also tried other CSS using a similar approach to the layers that before and after can create and the use of the z-index. 
You can  see many examples at Paul Underwood's excellent resource http://coveloping.com/tools/css-box-shadow-generator and they wont take in DMS either. 

I would really like some guidance on this please.

 

Share this post


Link to post
Share on other sites
Gavin_

any updates ? 

Share this post


Link to post
Share on other sites
tmeister
Hi there.
 
I passed through this in the past, trying to use negative values in the z-index.
 
The issue is that the class ".site-wrap" set the z-index to 0 but the "position: relative" is not set. So, anything below z-index 0 is below the body, the layers exists but are not visible.
 
 
body .site-wrap {


    background: #FFFFFF;
    

    z-index: 0;


}
 
The solution is a simple add the follow:
 
body .site-wrap{

    position:relative;

}

and and wallah!!

 

00000194.png

 

 

 

 

Enrique Chavez - Premium DMS Themes, Sections and Plugins.

http://enriquechavez.co

Share this post


Link to post
Share on other sites
Gavin_

@tmeister you Sir are a superstar, if i was to have another child i would name the offspring after you. 

Thanks

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×