Home/ Questions/Q 1879
In Process
JayMo
  • 0
Begginer
Asked: 2024-12-11T17:16:08+00:00 In:

Poor H1 and Breadcrumb placements

  • 0

I find that Bread crumbs as well as H1 placemnet control is very limited.
In both situations they use  ::Before:: to be placed prior to any of the natural journal content positions, thus your styling of the container isw very limited.
For example, I want to place my H1 with an Image background, as well as add additional sub-text below. I cannot find a way to do this, as the Title CTA module is only designated to use the page title or create a title as an H3 only.
I cannot figure a way to accomplish this within the confines of Journals capability, and do not want any type of customization done outside of journals natural controls.

h1 title breadcrumbs
Share

You must login to add an answer.

Need An Account,

2 Answers

  1. Enlightened

    It sounds like you’re trying to enhance the control over the placement and styling of the H1 and breadcrumbs in the Journal 3 theme but are facing limitations due to the current functionality. Don’t worry—there are ways to achieve what you need, and I’ll guide you step by step to make the most of Journal 3’s built-in controls without requiring external customizations.

    Step 1: Understand the Default Behavior

    Journal 3 places breadcrumbs and the H1 using the ::before pseudo-element to position them above the content. This setup limits flexibility in styling and layout. The Title CTA module, as you mentioned, only allows creating an H3 or a replacement title, which may not suit your specific design needs like adding an image background or subtext.

    Step 2: Utilize the Custom Code Area in Journal 3

    Journal 3 provides a custom code area to modify or enhance functionality without directly editing core files.

    1. Navigate to Journal > Skin Editor > Custom Code in the admin panel.
    2. Add custom HTML and CSS for your H1 and breadcrumbs in the desired format.
      Example:

      <style>
    .custom-h1-container {
        background-image: url('path-to-your-image.jpg');
        background-size: cover;
        text-align: center;
        padding: 20px;
    }
    .custom-h1-container h1 {
        font-size: 36px;
        color: #fff;
    }
    .custom-h1-container p {
        font-size: 16px;
        color: #ccc;
    }
</style>

<div class="custom-h1-container">
    <h1>{{ heading_title }}</h1>
    <p>Your subtext here</p>
</div>
    3. Replace path-to-your-image.jpg with the URL to your background image.

    Step 3: Override Default H1 Placement

    If you want to entirely replace the default H1 placement:

    1. Disable the default breadcrumb and H1 in Journal > Theme Editor > Breadcrumbs & Titles (uncheck visibility).
    2. Use the custom code approach above to insert the H1 and breadcrumb manually in a new position using the custom HTML module.

    Step 4: Work With the Title CTA Module

    Though the Title CTA module doesn’t natively support H1 titles with additional text, you can still repurpose it:

    1. Set the Title CTA to display the page title but leave the Subheading field empty.
    2. Add a new Custom Block module below the Title CTA with your subtext and style it separately.
    3. Use CSS to align the blocks seamlessly.

    Step 5: If You Need Advanced Placement

    Sometimes, Journal 3’s flexibility might still fall short for complex designs like integrating a background image with conditional logic. In such cases:

    • You can consider minor template adjustments via twig files for precise control while staying within OpenCart’s structure.

    Step 6: Contact Experts for Premium Assistance

    If these steps don’t fully meet your requirements or you want advanced support to implement a tailored solution:

    I hope this solution helps you resolve your problem using Journal 3’s built-in tools. Let me know if you have further questions or need clarification—We are happy to assist! 😊

    • 0