How to change the title color of a post on a custom page

Developer help
1

Hello! Sorry for my bad english.
I purchased the Horus theme. Now I want to create a new custom page based on the finished code.

{{!< default }}
    {{! The tag above means: Insert everything in this file into the {body} of the default.hbs template. }}
    {{#post}}
        <section id="page-title" class="post-presentation">
            <div class="lazy {{#if feature_image}}background{{else}}background-pattern{{/if}}" {{#if feature_image}} data-bg="url({{feature_image}})"{{/if}}>
                <div class="gradient gradient1">
                    <div class="container">
                        <div class="page-content-wrapper">
                            <div class="carousel-content">
                                <div class="post-tags delay3 animated fadeInDown">
                                    {{#foreach tags}}
                                        <a href="{{url}}">{{name}}</a>
                                    {{/foreach}}
                                </div>
                                <h1 class="delay2 animated fadeIn">{{title}}</h1>
                                <div class="post-extra-info delay4 animated fadeInUp">
                                    {{#primary_author}}
                                        <a href="{{url}}" class="author-info">
                                            {{#if profile_image}}
                                                <div class="author-image background lazy" data-bg="url({{profile_image}})"></div>
                                            {{/if}}
                                            {{name}}
                                        </a>
                                    {{/primary_author}}
                                    <span><i class="far fa-clock"></i>{{date published_at timeago="true"}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div id="main-content" class="post-section">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9 post-presentation article-wrapper">

                        {{#if access}}
                            {{! Article - Go to: partials/article.hbs to view this partial. }}
                            {{> article }}
                        {{else}}
                            {{> mockArticle}}
                            <div class="article-subscribe {{#if @member}}pricing{{/if}}">
                                <div class="subscribe-content">
                                    {{#if @member}}
                                        <h2>{{t "This post is for paying subscribers only"}}</h2>
                                    {{else}}
                                        <h2>{{t "This post is for subscribers only"}}</h2>
                                    {{/if}}
                                    <p>{{t "You don't have access to this post at the moment, but if you upgrade your account you'll be able to see the whole post, as well as all the other posts in the archive! Subscribing only takes a few seconds and will give you immediate access."}}</p>
                                    {{#if @member}}
                                        {{> pricingTable }}
                                    {{else}}
                                        {{> subscribeForm inputOnly="true"}}
                                    {{/if}}
                                </div>
                            </div>
                        {{/if}}
                    </div>
                    <aside class="col-xs-12 col-sm-12 col-md-4 col-lg-3">
                        {{! Aside - Go to: partials/aside.hbs to view this partial. }}
                        {{> "aside" }}
                    </aside>
                </div>

                {{! Subscription Form - Go to: partials/subscribe_form.hbs to view this partial. }}
                {{#if @labs.subscribers}}
                    {{subscribe_form placeholder=(t "Email Address...") input_class="form-control" }}
                {{/if}}

            </div>
        </div>
    {{/post}}

I want to remove the picture at the beginning of the post.
I deleted:

<div class = "lazy {{#if feature_image}} background {{else}} background-pattern {{/ if}}" {{#if feature_image}} data-bg = "url ({{feature_image}})" {{/ if}}>
            <div class = "gradient gradient1">

The image is missing, but the title is white and is not visible on the background of the page. How can I change the color of the title, the color of the author’s name and time of publication?

I lack knowledge. Very grateful for your help.

2

Hey @SantrY :wave:

I think you’ve deleted too much of the code, which is probably why the styles are a bit messed up. If you don’t want the feature image to appear replace the code you removed with the following:

<div class="lazy background-pattern">
            <div class="gradient gradient1">

By doing this you’ll maintain the structure of the page but you’ll remove the feature image being set on the element. Hope that makes sense! :blush:

3

Thanks for the answer. If you use your solution, the picture disappears, but its place is taken by a rectangular gradient.

So far I have solved my problem like this:

{{#post}}

<section id="page-title" class="post-presentation">


        <div class="background">
            <div class="container">
                <div class="page-content-wrapper">

#page-title.post-presentation .author-info, #page-title.post-presentation .post-tags a, #page-title.post-presentation .tag-count, #page-title.post-presentation .tag-description, #page-title.post-presentation h1 {
color: #000;;
}

.post-presentation .post-extra-info a:not(.author-info), .post-presentation .post-extra-info span
{
color: #000;;
}

 #main-content {
padding: 3rem 0; 
}

#page-title .post-tags {
margin-bottom: .9375rem;
margin-top: 2.1rem;
}

Surely this is not the best solution, but it looks good.

Now I am looking for a way to hide some tags from the main page.

1 Like
4

I checked out the theme developer and they do provide basic support, and they can be hired for freelance work. Maybe it’s worth getting in touch for assistance?
https://themeforest.net/item/horus-modern-ghost-magazine-blog/24916525/comments

5

Customization is not included in the basic support.
I did not know that they could be hired for anything more. I’ll think about it.

1 Like