p:first-letter

[thesingleparentperspective 1]

I just installed the dms (free) v1.1.3

and found the p:first-letter does not work.  I have this added to the random quotes up in the right side of the header and it worked in my previous theme but not this one.  

 

Any idea as to why this doesn't work?

http://thesingleparentperspective.com/

 

[greenfly 230]

How are you entering the code in your CSS? 

[thesingleparentperspective 1]

How are you entering the code in your CSS? 

 

Do you mean where?  If so, in the custom css section.  I even tried in the theme style.css with no luck

.random-quote {
    font-family: "Lovers Quarrel";
    font-size: 37px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 25px;
    border-left: 3px solid #ccc;
}
.random-quote p:first-letter {
      font-size: 100px; 
      font-family: "Lovers Quarrel";
      float: left; 
      line-height: 0.5;
      font-style:italic;
      text-shadow: 0 3px 0 #b2a98f,0 14px 10px rgba(0,0,0,0.15), 0 24px 2px rgba(0,0,0,0.1), 0 34px 30px      rgba(0,0,0,0.1);
}

The first part is working, just not the p:first-letter part.  The same code worked on a previous theme.

[James B 436]

Hi there,

 

It does seem to be working. http://screencast.com/t/b8gOgpQKQOtU

 

You've given that paragraph the class of .random-quote. Then in the css you've called .random-quote p which won't work as the there isn't another p tag inside that class of random-quote etc.

[thesingleparentperspective 1]

Hi there,

 

It does seem to be working. http://screencast.com/t/b8gOgpQKQOtU

 

You've given that paragraph the class of .random-quote. Then in the css you've called .random-quote p which won't work as the there isn't another p tag inside that class of random-quote etc.

 

That's weird.  You wouldn't happen to know how I can get it to show up right on my computer.  I'm using an acer chromebook. Is this a browser issue and if so how can I get it to show up on chrome?

[Danny+ 1,327]

Try this:

 

.random-quote:first-letter {

      font-size: 100px; 

      font-family: "Lovers Quarrel";

      float: left; 

      line-height: 0.5;

      font-style:italic;

      text-shadow: 0 3px 0 #b2a98f,0 14px 10px rgba(0,0,0,0.15), 0 24px 2px rgba(0,0,0,0.1), 0 34px 30px      rgba(0,0,0,0.1);

}

 

You can find out more here - http://www.w3schools.com/cssref/sel_firstletter.asp

[thesingleparentperspective 1]

 

Try this:

 

.random-quote:first-letter {

      font-size: 100px; 

      font-family: "Lovers Quarrel";

      float: left; 

      line-height: 0.5;

      font-style:italic;

      text-shadow: 0 3px 0 #b2a98f,0 14px 10px rgba(0,0,0,0.15), 0 24px 2px rgba(0,0,0,0.1), 0 34px 30px      rgba(0,0,0,0.1);

}

 

You can find out more here - http://www.w3schools.com/cssref/sel_firstletter.asp

 

 

Thank you but that still isn't showing up right on my screen.

I've tried...

.random-quote p:first-letter {}

p.random-quote:first-letter {}

and

.random-quote:first-letter {}

 

While it appears to be working on another browser it isn't displaying right on mine so I'll have to use another computer and see it on other browsers.

[James B 436]

Try wrapping the paragraph in it's own div and naming that instead of the class. Then use the div name followed by the p first letter code. 

 

#div p:first-letter