format the first letter of a post

https://www.ads-software.com/support/topic/25530
that help at all ?

i searched but didnt come up with the link.. thanks a lot podz.. you are a major help… god bless.

Thanks podz, your link pointed me to the right direction but alas I am stuck somewhere… this is my css style

.post {

margin-top: 18px;

}

.storycontent

font-family: Verdana, Helvetica, Arial, Sans-serif;

line-height: 16px;

font-size: 13px;

padding: 0px 9px 9px 9px;

}

/*.storycontent:first-letter {

float: left;

color: #993333;;

font-size: 60px;

line-height: 46px;

font-family: Times, Serif;

} */

.storycontent:first-letter {

font-size: 60px;

font-family: New York Times, Serif;

color: #993333;;

}

Its implemented in the same manner as another poster but alas I am unable to view the drop caps, any help would be most appreciated.

Your wp address would help – we have tools to manipulate the css and so get it right for you, but your name leads to a Blogger blog ?

ooops so so sorry… the address is https://www.arrogantly.com

thank you yet again podz

.storycontent p:first-letter {

Add the p

??

still not working podz. here is the reworked code as per your suggestion that I’ve put up.


.post {

margin-top: 18px;

}

.storycontent /* This is what the actual post text looks like */ {

font-family: Verdana, Helvetica, Arial, Sans-serif;

line-height: 16px;

font-size: 13px;

padding: 0px 9px 9px 9px;

}

/*.storycontent p:first-letter {

float: left;

color: #993333;;

font-size: 60px;

line-height: 46px;

font-family: Times, Serif;

} */

/*This adds the magazine caps */

font-size: 60px;

font-family: New York Times, Serif;

color: #993333;;

}

.date {

I have no idea where I have made the mistake ??

one of my favourite resources for little tidbits like this is mandarin design – there’s a whole article dedicated to this, perhaps you can work something from it:

https://www.mandarindesign.com/dropcaps.html

information overdose.. I am dead for now… :-(( somebody helppppp.. thanks a lot Jinsan and podz for trying to help me out…

the only possible area where I can go wrong is


.storycontent p:first-letter {
maybe there should be another colon before p … let me just try it.

ok not sure here mate, but was this in your code as you tested, or did you place it in just for the sake of the forum?

/*.storycontent p:first-letter {

float: left;

color: #993333;;

font-size: 60px;

line-height: 46px;

font-family: Times, Serif;

} */

if you use this /* it will ignore the css between those – just something I noted so…dunno:p

is it even increasing the size?

You have this:
/*.storycontent p:first-letter {

float: left;

color: #993333;;

font-size: 60px;

line-height: 46px;

font-family: Times, Serif;

} */

/*This adds the magazine caps */

font-size: 60px;

font-family: New York Times, Serif;

color: #993333;;

}

Edit all that to only be this:

.storycontent p:first-letter {
float: left;
color: #993333;
font-size: 60px;
line-height: 46px;
font-family: Times, Serif;
}

Hello Jinsan, I just placed it to add some comments in the forum and then forgot ??

Podz, as usual absolutely ditto, it did the trick but now am left with a precarious situation where all the paragraphs start with drop caps.. I dont want that to happen.. I want only the first para to do that but alas all the paras are doing this..

Podz, the link you gave me before, there was a poster who did it perfectly… https://familywebwatch.com/blog/
I have send a post from his page, hope I get a reply..

Do you think you could once again take your time to help me in solving this small issue of having the drop caps applied to only the first letter of the first para

I do have an idea – apply a span to the letter you want to apply the code to.

Try this, create the css for span class in your, er, css. Then follow this guide:

https://www.tamba2.org.uk/wordpress/quicktags/

Add the required tags which would result in something like

<span class="drop">crap here</span>

This way you can specify the first letter of the entry and apply the class to it.

That’s one way that came to mind. These are all CSS ways though, and there are other ways to do it using Javascript which is a bit smarter.

if you view the source for the site, they’ve used a similar method but used a p class instead. It might work better dunno.

Jinsan, I am not fond of span class and try to avoid it all costs, it is also not an efficient way to code, for every post I’d have to handcode the span class which would beat the purpose of the css. ….. anyways thanks for your suggestion my friend… god bless ya.

ah well – that’s why i suggested adding it to the quick tags so you wouldn’t have to hand code it – you simple highlight the one letter you want as your first cap and hit the button and it applies the class for you.

Alternatively you can do the same thing, but add a p class in your css and set that to a quicktag button