Avoid big red letter and set full-article image on top

cyskye

Hi,
when linking a simple article, not related to a menu "blog" item, it appears always with a big red letter at the beginning and with the full-article image on the bottom.
How can I
1 - avoid the big red letter ALWAYS (I mean, how can I disable the JS related to it or some global solution???)
2 - set the full-article image on top?
PS: I could also use one of the article presets designs, but how can I use one of them in an article not linked to a Blog menu item?
Site is on localhost, so I cannot share credentials. Thank you.

saguaros

cyskye Hi

You can try this custom css to set the first letter normally:

.item-page .com-content-article__body > p:first-child::first-letter, .item-page .com-content-article__body p.has-letter::first-letter {
    color: var(--body-text-color)!important;
    float: left;
    font-family: var(--body-font-family)!important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight)!important;
    line-height: 0.7;
    margin-right: 0 !important;
    padding-top: 12px !important;
}

Not sure which article layout you're using as the normal layout article will show Title >> Intro text >> Full image so I'm not sure what you mean by setting the full image on top.

cyskye

Hi, this works but it's not the ideal solution...
Is there a way I can override the presets without losing them when updating?
Thank you.

saguaros

cyskye You can add your custom css into file:

[your_site_root]/templates/ja_blockk/local/css/custom.css

your custom code will be safe when you update new version of template.

cyskye

saguaros
Hi, can you tell me if there is a way to override the page format? Not with css but the file itself, without losing it when updating? Thank you.

PS: about the image.. I want it to display just below the title, so before introtext. This is why I need to override the file.

richnyc30

I'm using Blockk template in Joomla 4.
I did the change in custom.css copying and pasting.
.item-page .com-content-articlebody > p:first-child::first-letter, .item-page .com-content-articlebody p.has-letter::first-letter {
color: var(--body-text-color)!important;
float: left;
font-family: var(--body-font-family)!important;
font-size: var(--body-font-size) !important;
font-weight: var(--body-font-weight)!important;
line-height: 0.7;
margin-right: 0 !important;
padding-top: 12px !important;
}

but when I change the size of the font in the editor the first letter remains smaller.

I change the font size often so the first letter needs to be the same as the rest when I change font size.

Further more, when I change the font color in the editor it looks like this

And when I refresh the page it changes to

It goes back and forth when refreshing the page.
If you want to see this happen try:
https://goodlookinggolf.com/j4/index.php/setup/812-take-away

saguaros

cyskye Yes, you can override layout files via local folder of template.

For example, the override file for article page locates in:

[your_site_root]/templates/ja_blockk/html/com_content/article/

You can override this by copying this folder and paste into local folder:

[your_site_root]/templates/ja_blockk/local/html/com_content/article/

and customize files here.

It will not be affected when you update new version of template.

richnyc30

I was told if it is not in Custom.css it will be overwritten. I also asked about using a custom2.css and apparently that also is not a good idea.
On the other hand, I found the styles pull-down in the editor can be any css file anywhere in any folder in the site.
My thought is to initially use custom.css to show in the styles pull down and then later on make a smaller css file with only the classes for styling the text.
JCE does have a method to edit any file in the site, just tricky to figure it out. So you could use JCE to edit the style pull-down css file.