• Resolved CK-ONE

    (@ck-one)


    Where do I change the appearance of HTML-headlines, like h1, h2, h3 …?
    Is it possible to do so via CSS code in the menu Maskitto Light > Options > General?

    Thanks for help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Yes, because you can always override existing CSS. I’d use the following classes for your purpose (I am under the assumption that you are going to hide the default title, hence .post-inner):

    .post-inner h1 {
    }
    
    .post-inner h2 {
    }
    
    .post-inner h3 {
    }
    
    .post-inner h4 {
    }

    In case you meant the default headline the theme uses i.e. the page title, you should visit Maskitto Light Options. You’ll see preset titles in the Styling tab (under Title Style). If none suit your liking, you can of course still change it via CSS, albeit overriding a different class instead:

    .page-section h3 {
    }

    Additionally, you can use SiteOrigin Headline, a widget. The theme installs this by default, but you will need to enable it. To do so:

    1. On the dashboard sidebar, hover over Plugins and select SiteOrigin Widgets.
    2. Go to the Disabled tab.
    3. Find Headline and click on Activate.

    You should now be able to find it included in the list of available widgets you can insert into a post or page. Once you try to edit it, I’m pretty sure you’ll know your way around as it is descriptive.

    Thread Starter CK-ONE

    (@ck-one)

    Thank you very much for your answer.
    It will be very helpful for many people in the future.

    My fault: I did not specify which headline I meant … Sorry!

    I am using the visual editor widget and would like to change the size of the headlines for the text I have put in there.
    So it’s in fact the running main text of the page.

    Unfortunately, none of the above examples lead to a change of these headlines within a page’s text when inserted into the CSS code box under Maskitto Light Options.

    Maybe I cannot see the wood for the trees(?). ??

    Well, you have to specify the actual change first before the magic happens, like so:

    .post-inner h1 {
         text-color: white;
         text-decoration: underline;
    }

    Now try enclosing something within <h1></h1> and see if it does change.

    Thread Starter CK-ONE

    (@ck-one)

    Yes, of course. I did so. :-)))

    It does not work though like this:

    .post-inner h1 {
        font-size: 48px;
    }

    There is an info in the CSS editor saying:

    “Heading (H1) should not be qualified”

    :-/

    Thread Starter CK-ONE

    (@ck-one)

    When changing the font-size in the main style.css file, it’s working though … hmmm …

    Sorry, I overlooked something that you said. To achieve what you want from what I understand, you’ll need to use the Text tab instead and style it using inline CSS. So say:

    <span style="font-size: 48pt;">Hello, I am huge.</span>

    You don’t necessarily have to modify the heading tags, but if you really wanted to:

    <h1 style="font-size: 48pt;">Hello, I am huge.</h1>

    You can switch back to the Visual tab anytime to see the changes immediately.

    Thread Starter CK-ONE

    (@ck-one)

    Thank you. Of course, that’s working like a charme.
    I was looking for something that will affect all headlines of all pages though. ??
    But nevermind, I am using a different solution for my text hierarchy now, excluding headlines at all (even if it’s against SEO – which is no real problem for this very page). ??

    In that case, you probably should have stuck with using the default page title as the heading. Modifying .page-section h3 would have made changes across the board. At any rate, I’m glad you’ve found a suitable solution!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Where/how to change Headlines h1, h2, …?’ is closed to new replies.