1

I am working on customising the Justice template. I would like to make modification of the heading. The original heading is as below: The original heading I check the code that the building picture (which is the background image) is positioning to the left and the text (the heading and the nav) is positioning to the right. And now I would like to change them like following:

  1. just let the background image with fixed height and not position at the left.
  2. change the heading "JUSTICE" from text to image.
  3. "Advice" in nav change it to "News".

For the first one, the _layout.scss in the "_sass" folder is as following:

header {
background-size: cover;
background-repeat: no-repeat;
/*background-position: calc(50% - 40px) 175px;*/
height: 420px;
box-sizing: border-box;

.container {
    text-align: center;
}

@media (min-width: $mobile-break) {
    background-size: contain;
    background-position: calc(50% - 300px) calc(100% + 20px);

    &.main-hero {
        height: 80vh;
        background-position: calc(50% - 350px) calc(100% + 20px);
    }

    .container {
        text-align: right;
    }
}

I temporary make the background-position as comment status since I think I don't need to fix the position of the background image, but do I need to add anything? For example if the theme shows in mobile (which I guess is at the @media)?

For change the heading "JUSTICE" to image, the code seems like at the line 28-40 in the default.html of the "_layout" folder:

<header style="background-image: url('{% include relative-src.html src=page.background_image_path %}');" {% if page.large_header %}class="main-hero"{% endif %}>
        <div class="container">
            <h1><a href="{{ site.baseurl }}/">{{ site.data.company.title }}</a></h1>
            <nav>
                <ul>
                    {% assign nav_pages = site.html_pages | where: 'show_in_navigation', true | sort: 'navigation_order' %}
                    {% for nav_page in nav_pages %}
                        <li><a {% if nav_page.url == page.url %}class="active"{% endif %} href="{{ site.baseurl }}{{ nav_page.url }}">{{ nav_page.title }}</a></li>
                    {% endfor %}
                </ul>
            </nav>
        </div>
    </header>

The heading is this part: <h1><a href="{{ site.baseurl }}/">{{ site.data.company.title }}</a></h1>. How can I modify this part? I should be something like <a href="{{ site.baseurl }}/"><img src="what is the link here?"></a>, but what is the link in Jekyll in this case? How to modify the _layout.scss with fixed width?

For changing "Advice" in nav change it to "News", is that I just need to change the relative folder name (e.g. here is Advice) to anything I want (e.g. here is "News")? I couldn't find anywhere else seems like including. But I wonder there should be somewhere else which links to the nav, and also link to the _post folder (or else the "Advice" can't get the markdown-file articles)?

Many thanks!

dragonfly
  • 503
  • 2
  • 6
  • 18

0 Answers0