Home Forums ASE Support Chapters font colour and title.

This topic is: not resolved

Tagged: , ,

Viewing 8 posts – 1 through 8 (of 8 total)
  • Author

    Posts

  • #16673

    Reply

    Airdres

    Participant

    Hello,

    I am using the Longform PRO theme with ASE. I would like to know:

    1) Is there any way to change the font colour of the chapter’s titles and subtitles? By default it’s white, which works fine with several chapters, but depending on the picture used as background sometimes white can have such bad contrast that the title becomes very difficult to read. How could I look at this? Could it be changed for an individual chapter?

    I tried using HTML tags on the titles and subtitles fields themselves just to try, but it would only show the code on the actual website, and not the result. This may be the designed behaviour, but actually, it could be a nice and perhaps simple (I am not a coder really) solution to changing the font properties of the titles and subtitles.

    2) I am making a fully bilingual website (English and Spanish) with WPML, could the text that says “Chapters” before opening the chapters menu be edited to at least show “Chapters – Capítulos” or something like that? If possible, where?

    Also a little note, have you been able to figure out why sometimes galleries won’t appear on iPads?
    Thanks!

    #16675

    Reply

    Hyun Supul

    Keymaster

    Hi I will try to address your questions in next few days. Thank you for your patience.

    #16684

    Reply

    Airdres

    Participant

    Hi Hyun,

    No worries, take your time.
    Thanks for replying and I’ll waiting!

    • This reply was modified 3 years, 4 months ago by Airdres.

    #16699

    Reply

    Hyun Supul

    Keymaster

    Hi, here are some answers.

    1. The most flexible way to design the look of the Chapter Component is to use the “Overlay” field under Chapter component options. You can use HTML and style tags here. And it will replace the contents of the Title and Subtitle fields. (You still need to fill out the Title field for the chapter index) So you can use other fields to design the look of the background and use the overlay field to design the look of the text. You can use color, font size and what not to design the look of the text however you want.

    2. That “Chapter” text is coming from the Longform theme, not Aesop, so you need to change the Longform Theme. For your purpose, the best way to do would be to use language customization. Here is the link you should refer to:

    How to Translate a WordPress Theme

    Longform is translation ready. So you should take the English PO file and create the Spanish language files.

    #16704

    Reply

    Airdres

    Participant

    Hi Hyun,

    First and foremost thanks a lot for your support, it’s not only timely but it’s great!

    I have been playing with your suggestions and I have achieved almost everything I wanted.
    I could leave things as they are with the results I got and it would be fine, but I want to ask you a further couple of things in case it’s possible to fine tune:

    If you would be so kind to please go to:

    http://www.alpharamirez.com/es/korea-du-north-septima-parte/

    Once there:
    Go to the third chapter “DE REGRESO EN CHINA”.
    I worked in this chapter with all your advice. I should have known at first that the key was in the overlay, but honestly I am not much of a coder (I’ve had my “crash courses” trying to get this website to look as I want though). As you can see the legibility is much better than the other chapters which I haven’t yet modified. There’s only two things that I wasn’t able to achive:

    1. The whole text is not centered vertically as with the default chapters, and I couldn’t find a way to make it. I was on google and reading for a few hours but none of the methods I found would work (a couple of them actually wacked the whole page haha, but I got it back). Do you know how this could be done? Compare that third chapter with “HASTA LUEGO KOREA DEL NORTE” chapter for example, the text is right in the middle both horizontally and vertically.

    2. Also, the spacing between the title and the subtitle is too much. See the “HASTA LUEGO KOREA DEL NORTE” chapter and the subtitle is just below the title. But in third and modified chapter, there’s too much space between the title and the subtitle, and I haven’t been able to find a way to make it work, tried playing with HTML, adding just a <br>… stuff like that, but whatever I did couldn’t do the trick as needed.

    What I did:
    1. I added this additional custom CSS for the tag “<mark>” to display white letters and a black semi-transparent background instead of the default solid yellow:
    mark {
    background-color: rgba(0, 0, 0, 0.71);color: white;
    }

    Then:

    2.This is the code I wrote in the overlay:
    <p style=’font-family:Old Standard TT;font-size:52px;font-weight:300;line-height:57px’><mark>DE REGRESO EN CHINA</mark></p>
    <p style=’font-family:Old Standard TT;font-size:29px;font-weight:normal;line-height:29px’><mark>DESHACIENDO LOS PASOS EN SHENYANG</mark>

    By the way, as you can see the “Chapters” word translation was a simple as making the .po and .mo files, again I don’t know why didn’t I think of this first, but thanks a lot for your help, I guess I wouldn’t have found it without hahaha.
    Cheers!

    • This reply was modified 3 years, 3 months ago by Airdres.

    #16728

    Reply

    Hyun Supul

    Keymaster

    Hi I will get to back to you on these after I address the parallax gallery issue.

    #16828

    Reply

    Hyun Supul

    Keymaster

    Hi here is a solution on vertically centering. Right now it requires two steps. I will make a modification on a future release of ASE so the first step is not needed in future. But for now. You need to add the following custom CSS:

    .aesop-chapter-overlay-content {
       height:100%;
    }

    Then you can have an overlay code like the following (as an example) The important part is the div that contains your content.

    <div style="position: absolute;top: 50%;transform: translate(0, -50%);">
    <p style="font-family:Old Standard TT;font-size:52px;font-weight:300;line-height:57px;"><mark>VUELO EN ANTONOV AN-24</mark></p>
    <p style="font-family:Old Standard TT;font-size:29px;font-weight:normal;line-height:29px"><mark>LA FELICIDAD QUE ME DAN LOS CLÁSICOS</mark></p></div>
    

    #16829

    Reply

    Airdres

    Participant

    Hi,</p>
    <p>I tried but when I save it appears as if the overlay is not “detected” and reverts to only the title and original formatting.</p>
    <p>When I was first playing with the overlay with your first answer I had the same problem but somehow it magically “clicked” and the overlay began showing as normal. I haven’t been able to make it work this time. It may be just my problem.</p>
    <p>Here’s my steps:</p>
    <p>1. Saved this custom CSS as per your reply (last lines).<br />
    </p>
    <p>2. Then got this.<br />
    </p>
    <p>3. When I revert the code, I get this (normal overlay).<br />
    </p>
    <p>Something tells me you’ve done it all right and this is a particular issue that I have (don’t know where though), but up to this point I haven’t been able to make it work.

Viewing 8 posts – 1 through 8 (of 8 total)
Reply To: Chapters font colour and title.