SOLVED Dropcap in category blog description
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Hi all,
I'd like to put a dropcap in the first paragraph of the front page category description of this website:
renvylerentalcottages-connemara.com/test
I wrote this simple css code and put it in my gantry-custom.css:
but in spite of this I can't see the "F" dropcap in my front pagebody{ background: none; } p{ color: grey; font-family: Helvetica; text-align: justify; font-size: 14px; } p:first-letter{ color: #0fd66c; } p:first-letter{ float:left; font-size: 64px; margin-right: .2em; margin-top: -0.1em; }
The code in codepen is working anyway... Any idea? Thanks!! - Last Edit: 10 years 1 month ago by beamaria.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
I don't see that code in your custom css
I added in my browser and it works.
Just check your custom css file.
Hope this helps
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Hi David, thanks for having a look at it. Yesterday I removed the code, because it didn't work; today I put it again in custom-css and cleared the cache and it works properly... Now I' d like to add a bit more style to the "F", for instance I'd like the upper part of it aligned with the rest of the first row and also I'd prefer using the "Lora" Google font. Can you help me to achieve this? Thanks a million
Solved!
I modified the css code with this one:
p:first-letter{ font-family: 'Lora', serif; color: #0fd66c; } p:first-letter{ float:left; font-size: 64px; line-height: 64px; font-weight: normal; margin-right: .2em; margin-top: -0.1em; }
This did the trick!! - Last Edit: 10 years 1 month ago by beamaria.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Hi again,
I supposed I solved my problem with Dropcap, but now I have a new problem: I need to limit the code ONLY to categories descriptionbecause otherwise my code applies also to the body of articles and I don't want this behaviour.
I think I have to add some css to my previous one, but don't know what to write...
Any idea? Thanks!!!
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
Try changing your code to this...
.category-desc p:first-letter{ font-family: 'Lora', serif; color: #0fd66c; } .category-desc p:first-letter{ float:left; font-size: 64px; line-height: 64px; font-weight: normal; margin-right: .2em; margin-top: -0.1em; }
On the home page you have the other items using the dropcap css...
<p class="dropcap">Settled in its own large garden, just in views of the sea and the Connemara mountains, this romantic cottage is the perfect retreat for honeymooners. The entrance gives way to the spacious living room with a turf-burning stove in stone fireplace; there is also a comfortable a double sofa bed. The following room is the kitchen/dining area, with Liscannor slate floor and stone fireplace. The double bedroom has antique brass bedstead, old pine furniture and ornamental cast-iron fireplace.The bathroom offers a corner bath and a shower cubicle. Parking for two cars in the garden surrounding the building.</p>
Just change to <p> if you don't want the dropcap displayed.
Hope this helps
-
The following users have thanked you: beamaria
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
Time to create page: 0.072 seconds