Main menu

Pages

Edit post

Hatmech
(0)

Okay, this will involve changes across several files: constants.py, data_manager.py, ui_main_window.py, ui_settings_frames.py, site_generator.py, and your header template file.

Here's a step-by-step guide:

1. constants.py

Add a new constant for the logo alignment setting key.

      # --- START OF FILE constants.py ---
# ... (other constants) ...

# --- Keys for Site Settings (in cms_data.json -> sites -> [site_id] -> settings) ---
# ...
SITE_LOGO_PATH_KEY = "site_logo_path"
SITE_LOGO_ALT_TEXT_KEY = "site_logo_alt_text"
SITE_LOGO_ALIGNMENT_KEY = "site_logo_alignment" # <<< NEW KEY
DISQUS_SHORTNAME_KEY = "disqus_shortname"
# ... (rest of constants) ...

# --- END OF FILE constants.py ---

2. data_manager.py

Update get_default_settings() to include the new logo alignment setting with a default value.

      # --- START OF FILE data_manager.py ---
# ... (imports and other functions) ...

def get_default_settings():
    """Returns a dictionary with default site settings."""
    return copy.deepcopy({
        # ... (other settings) ...
        constants.FAVICON_PATH_KEY: "",
        constants.SITE_LOGO_PATH_KEY: "", 
        constants.SITE_LOGO_ALT_TEXT_KEY: "", 
        constants.SITE_LOGO_ALIGNMENT_KEY: "left", # <<< NEW DEFAULT (options: left, center, right)
        constants.DISQUS_SHORTNAME_KEY: "",
        # ... (rest of settings) ...
    })

# ... (rest of data_manager.py) ...
# --- END OF FILE data_manager.py ---

3. ui_main_window.py

  • In __init__ method: Add the new constant to default_site_settings_tab_keys.

          # --- In ui_main_window.py, inside SiteEditorWindow __init__ ---
        default_site_settings_tab_keys = [
            constants.TAGLINE_KEY, constants.LANGUAGE_KEY, constants.DIRECTION_KEY,
            constants.ENABLE_AMP_KEY, constants.ADSENSE_ID_KEY, constants.ANALYTICS_ID_KEY,
            constants.WEBMASTER_VERIFICATION_KEY, constants.RELATED_POSTS_COUNT_KEY,
            constants.RELATED_POSTS_TITLE_KEY, constants.RELATED_POSTS_LOCATION_KEY,
            constants.TITLE_SEPARATOR_KEY, constants.DEFAULT_AUTHOR_SETTING_KEY,
            constants.BASE_URL_KEY, constants.FAVICON_PATH_KEY,
            constants.SITE_LOGO_PATH_KEY, constants.SITE_LOGO_ALT_TEXT_KEY, 
            constants.SITE_LOGO_ALIGNMENT_KEY, # <<< NEW KEY
            constants.DISQUS_SHORTNAME_KEY, constants.GOOGLE_CSE_ID_KEY,
            # ... (rest of the keys) ...
        ]

4. ui_settings_frames.py

Modify _create_settings_frame to add a UI element for logo alignment in the "General" tab.

      # --- In _create_settings_frame, "General" tab, after Site Logo Alt Text ---
            # Site Logo Alt Text (existing)
            ttk.Label(general_tab_content, text=self._("Site Logo Alt Text:"), anchor=label_anchor).grid(row=current_row_general, column=0, padx=5, pady=8, sticky=widget_sticky)
            self.settings_vars[constants.SITE_LOGO_ALT_TEXT_KEY] = tk.StringVar()
            logo_alt_entry = ttk.Entry(general_tab_content, textvariable=self.settings_vars[constants.SITE_LOGO_ALT_TEXT_KEY], width=50, justify=entry_justify)
            logo_alt_entry.grid(row=current_row_general, column=1, columnspan=2, padx=5, pady=8, sticky="ew")
            current_row_general += 1

            # --- NEW: Site Logo Alignment ---
            ttk.Label(general_tab_content, text=self._("Site Logo Alignment:"), anchor=label_anchor).grid(row=current_row_general, column=0, padx=5, pady=8, sticky=widget_sticky)
            self.settings_vars[constants.SITE_LOGO_ALIGNMENT_KEY] = tk.StringVar()
            logo_align_options = ["left", "center", "right"]
            logo_align_combo = ttk.Combobox(general_tab_content, textvariable=self.settings_vars[constants.SITE_LOGO_ALIGNMENT_KEY], values=logo_align_options, width=15, state="readonly", justify=entry_justify)
            logo_align_combo.grid(row=current_row_general, column=1, padx=5, pady=8, sticky=widget_sticky)
            logo_align_combo.set("left") # Default selection in UI
            current_row_general += 1
            # --- END NEW ---

            # AMP Check (existing)
            self.settings_vars[constants.ENABLE_AMP_KEY] = tk.BooleanVar()
            # ... rest of general tab ...

5. site_generator.py

Modify generate_site method to pass the logo alignment setting to the Jinja context.

      # --- In site_generator.py, inside generate_site method ---

    # ... (inside site_context definition, after site_logo_alt_text) ...
                'site_logo_url': site_logo_rel_url,
                'site_logo_alt_text': site_logo_alt_text,
                constants.SITE_LOGO_ALIGNMENT_KEY: settings.get(constants.SITE_LOGO_ALIGNMENT_KEY, "left"), # <<< NEW
                constants.RELATED_POSTS_SHOW_IMAGES_KEY: settings.get(constants.RELATED_POSTS_SHOW_IMAGES_KEY, True),
    # ...

6. Header Template File (e.g., header.html or base.html)

Update your header template to use the new alignment setting. You'll add a dynamic class to the .site-branding div.

      <header class="site-header">
    <div class="container">
        {# --- MODIFIED: Add dynamic alignment class --- #}
        <div class="site-branding logo-align-{{ site.settings[constants.SITE_LOGO_ALIGNMENT_KEY] | default('left') }}">
            {% if site.site_logo_url %}
                <a href="{{ url_for('home') }}" class="site-logo-link">
                    <img src="{{ site.site_logo_url }}" alt="{{ site.site_logo_alt_text or site.title }}" id="site-logo" class="site-logo-image">
                </a>
            {% endif %}
            {# --- If tagline is part of branding, it would go here or be styled accordingly --- #}
        </div>
        {# --- END MODIFICATION --- #}

        {% if site.tagline and site.settings[constants.SITE_LOGO_ALIGNMENT_KEY] | default('left') != 'center' %}
            {# Display tagline separately if logo is not centered, to avoid conflicting with centered logo text-align #}
            <p class="site-tagline">{{ site.tagline }}</p>
        {% endif %}


        <nav class="site-nav">
            <ul>
                <li><a href="{{ url_for('home') }}" class="{{ 'current-menu-item' if page_type == 'home' }}">{{ _('الرئيسية') }}</a></li>
                {% if categories %}
                    {% for cat in categories %}
                        {% set is_current_category = (page_type == 'category' and category and category.slug == cat.slug) %}
                        <li class="{{ 'current-menu-item' if is_current_category }}">
                            <a href="{{ url_for('category', slug=cat.slug) }}">
                                {{ cat.name }}
                            </a>
                        </li>
                    {% endfor %}
                {% endif %}
            </ul>
        </nav>

        <div class="header-actions">
            {% if site.settings.social_icons_show_header and site.social %}
            <div class="social-links">
                 {% if site.social.facebook %}<a href="{{ site.social.facebook }}" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>{% endif %}
                 {% if site.social.twitter %}<a href="{{ site.social.twitter }}" target="_blank" rel="noopener noreferrer" aria-label="Twitter"><i class="fab fa-x-twitter"></i></a>{% endif %}
                 {% if site.social.linkedin %}<a href="{{ site.social.linkedin }}" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>{% endif %}
                 {% if site.social.github %}<a href="{{ site.social.github }}" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><i class="fab fa-github"></i></a>{% endif %}
                 {% if site.social.instagram %}<a href="{{ site.social.instagram }}" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><i class="fab fa-instagram"></i></a>{% endif %}
                 {% if site.social.youtube %}<a href="{{ site.social.youtube }}" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><i class="fab fa-youtube"></i></a>{% endif %}
             </div>
             {% endif %}
             {% if site.google_cse_id %}
                <script async src="https://cse.google.com/cse.js?cx={{ site.google_cse_id }}"></script>
                <div class="gcse-searchbox-only" data-resultsUrl="{{ url_for('search_results') if 'search_results' in url_map else '/search-results' }}"></div>
             {% endif %}
        </div>
    </div>
</header>

7. CSS File (e.g., style.css in your template folder)

Add CSS rules for the alignment classes. The exact CSS will depend on your header's overall structure (e.g., if it uses Flexbox or Grid for the main layout of branding, nav, actions).

Here are a few common ways to achieve this:

      /* In your template's style.css */

/* Basic Setup for .site-header and .container (if not already done) */
.site-header {
    /* background: #f8f9fa; */ /* Example */
    padding: 10px 0;
}

.site-header .container {
    display: flex; /* Common layout for headers */
    justify-content: space-between; /* Example: Pushes items to ends */
    align-items: center;
    max-width: 1200px; /* Or your site's max width */
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Site Branding & Logo Alignment --- */
.site-branding {
    /* Basic styling for the branding area */
    display: flex; /* To align items like logo and tagline if tagline is inside */
    align-items: center;
    /*
       The alignment classes below will primarily control the positioning
       of the .site-branding block itself, or the text-align of its content.
    */
}

.site-logo-image {
    max-height: 50px; /* Example: constrain logo height */
    width: auto;
    display: block; /* Good for images within links */
}

/* --- Alignment Classes for .site-branding --- */

/* Default: Left alignment for .site-branding */
.site-branding.logo-align-left {
    text-align: left; /* Aligns inline/inline-block content within .site-branding to the left */
    margin-right: auto; /* Pushes other items to the right if .container is flex */
    /* If .container is not flex, this might not do much without other styling */
}

/* Center alignment for .site-branding */
.site-branding.logo-align-center {
    /* To center the .site-branding block itself within its parent (.container) */
    margin-left: auto;
    margin-right: auto;
    /* To center the content (e.g., the logo image) within the .site-branding block */
    text-align: center; /* This works if the <a> tag or <img> is inline or inline-block */
    flex-grow: 0; /* Don't let it grow if other items need space */
}
.site-branding.logo-align-center .site-logo-link {
    display: inline-block; /* Helps with text-align: center */
}

/* Right alignment for .site-branding */
.site-branding.logo-align-right {
    text-align: right; /* Aligns inline/inline-block content within .site-branding to the right */
    margin-left: auto; /* Pushes this item to the right if .container is flex */
    margin-right: 0;
}


/* Adjustments if tagline is outside .site-branding but needs to flow with it */
.site-tagline {
    /* font-size: 0.9em; */
    /* color: #6c757d; */
    /* margin: 0; */ /* Reset default paragraph margins */
    /* Adjust margin based on logo alignment if needed, or place it inside .site-branding */
}

.site-nav {
    /* Styles for your navigation */
}

.header-actions {
    /* Styles for your header actions like social links/search */
}

Explanation of CSS Choices:

  • .site-header .container: I've assumed a common pattern where .container is a flexbox. This makes horizontal alignment of its direct children (.site-branding, .site-nav, .header-actions) easier.

  • .site-branding:

    • logo-align-left: Often the default. margin-right: auto; will push subsequent flex items to the right. text-align: left; aligns content within the branding block itself.

    • logo-align-center: margin-left: auto; margin-right: auto; centers the .site-branding block if it's a flex item and there's space. text-align: center; centers the actual logo image within the .site-branding block (assuming the <a> or <img> is inline-block).

    • logo-align-right: margin-left: auto; pushes the .site-branding block to the right. text-align: right; aligns content within it.

  • Tagline: I've added a conditional display for the tagline in the HTML if the logo is not centered, as text-align: center on .site-branding would also center the tagline if it were inside. You might need to adjust the tagline's position with CSS depending on how you want it to interact with the logo's alignment.

Important Considerations for Header Layout:

  • The CSS for .site-header .container, .site-nav, and .header-actions will significantly impact how the logo alignment works.

  • If your .container is not using Flexbox or Grid, you might need different CSS strategies (e.g., float for left/right, or more complex width and margin for centering).

  • The provided CSS is a starting point. You'll likely need to tweak it to fit your specific header design and the interaction between the logo, navigation, and any other header elements.

After implementing these changes, test each alignment option thoroughly by changing the setting in the UI, saving, and regenerating the site.

You are now in the first article

Comments

Post a Comment