I'm in need of practical guidance. My Twenty Seventeen themed blog was initially centered on a single topic, which led to an abundance of information within the "Chat", FAQ, and other sections.
The blog's design, featuring a header image, also aligns with the original theme. However, now we desire to include additional sections covering related topics, each with a unique header image.
These sections should also utilize "master pages" that behave identically to the main page, complete with the fully expanded header image. Creating entirely new blogs and linking them together seems like an unwise decision due to potential confusion among users, along with the inconvenience of registration and plugins.
Are there any recommendations you can provide that would circumvent strenuous modifications or restructuring of the theme, utilizing the standard template's built-in WP functionality or cunning plugins?
If I comprehend your wishes adequately, it would be best to configure custom content types for the "new blogs", and create tailored templates for each. To achieve this, make sure to establish a child theme.
Fortunately, WordPress has built-in features that support these actions, and various plugins are available to simplify the process.
Well what can we say?
Learn css.
Or install a profile plugin, SiteOrigin CSS for example.
It remains then to modify a little by hand.
Probably worth explaining more...
There is a site.
A blog opens in its right frame.
The blog has (in WP terms) "Home" and sections: "help me!", "the works", "chat", "guides".
I need to make two more pages with a different header image, which will be with the same template as the current "home" page, but with a different image at the top (in the header).
Plus, when loading these two pages, the header image should also open in full, and the menu should lead to the same sections ("help me!", "the works", "chat", "guides") as now.
Two options:
1. Make a new template where the picture is located. In your case, most likely header.php.
2. With the help of php, you can replace images from one to another for certain pages.
Change the image using css - one line, without additional dancing.
Are you talking about the s-art website?
By the way, do you know that the right frame is not visible on the phone?
Quote from: Newport on Aug 01, 2022, 06:12 AMAre you talking about the s-art website?
Yes, about this project.
I'll deal with adaptability a little later, there is the simplest topic, without unnecessary difficulties.
Now it is important to solve this problem.
Quote from: -DM- on Aug 01, 2022, 04:58 AMA blog opens in its right frame.
On the calendar 2022. What frames can!!! ;)
Quote from: -DM- on Aug 01, 2022, 04:58 AMThe blog has (in WP terms) "Home" and sections: "help me!", "the works", "chat", "guides"
There are no "partitions" in VP terms at all.
"Main page" in terms of VP - page. And she was chosen as the main one.
And "help me!" is a record. I suspect that the rest too (too lazy to check).
But here's what is under the "guides" and "templates" items - these are the headings (accordingly with the entries .. should be ..).
And if you want to have "exactly the same, but different" (c), then you need custom types.
In your case, most likely header.php.
Look at the theme code
Quote from: Newport on Aug 01, 2022, 06:12 AMChange the image using css - one line, without additional dancing.
I would be extremely grateful to you if you wrote what specific line, and in what CSS it should be inserted.
Unfortunately, I practically do not understand the structure of WP.
Post correction:
Quote from: Newport on Aug 01, 2022, 06:12 AMBy the way, do you know that the right frame is not visible on the phone?
Yes, that's what frames were made for. =)
Quote from: _AnnA_ on Aug 01, 2022, 07:21 AMOn the calendar 2022. What frames can!!! ;)
I have been looking for a functionality for a very long time that can replace the concept of a frame - smoothly change the width, so that there are no jerks and the mouse cursor did not fall off the "separator" and I would be very grateful if you could tell me how to do this using modern methods.
Quote from: -DM- on Aug 01, 2022, 07:48 AMI would be extremely grateful to you if you wrote what specific line, and in what CSS it should be inserted.
As soon as you show a specific page and give the image address.
Quote from: -DM- on Aug 01, 2022, 07:48 AMI have been looking for a functionality for a very long time that can replace the concept of a frame - smoothly change the width, so that there are no jerks and the mouse cursor did not fall off the "separator" and I would be very grateful if you could tell me how to do this using modern methods.
Set the width of the left side strictly in pixels (X px), the width of the right side - (100% - X px) and specify the minimum width of 1px.
Quote from: _AnnA_ on Aug 01, 2022, 10:01 AMAs soon as you show a specific page and give the image address.
First of all, thank you for your patience and participation!
I sent you the link in a private message. I don't want to publish my unfinished work for everyone. Superstitious. :)
I need the right parts (where the WP pages are):
http://go...iris.html (https://blog...s-art-iris-concept/
and
http://go...miracle.html (https://blog...miracle-concept/)
looked and worked the same as the right side
http://go. (https://blog.)
That is, the header also opened to the full page, and the menu "sticked" to the top of the screen, but the picture in the header was different.
I tried to "replace" the image at the js level hand-to-hand, but it's not so simple there - the template uses several sizes of the image on the splash screen.
I also tried using js to add the home and twentyseventeen-front-page classes to the body classes,
but the menu and title start to work crookedly, it seems that there are still some classes missing from other elements, or the main page in this Template (Twenty Seventeen) is processed by unique scripts...
Quote from: _AnnA_ on Aug 01, 2022, 10:01 AMSet the width of the left side strictly in pixels (X px), the width of the right side - (100% - X px) and specify the minimum width of 1px.
I need the user to be able to move the "red" border left and right with the mouse
plus the editor in the left frame, on smartphones automatically occupied the entire width of the screen (that is, "specify the width of the left side strictly in pixels" - does not fit conceptually)
(I tried a lot of approaches on js, but only the concept of frames works most stably, because this is processing by the browser code.
All the variants of the js code that I have tried either give the mouse off the "red line",
or at some point they "break" the layout on smartphones and tablets).
Quote from: -DM- on Aug 01, 2022, 07:48 AMI have been looking for a functionality for a very long time that can replace the concept of a frame - smoothly change the width, so that there are no jerks and the mouse cursor did not fall off the "separator" and I would be very grateful if you could tell me how to do this using modern methods.
The concept of a frame is not about changing the width, but simultaneously displaying
different dоcuments (web pages, if "in a simple way") on one page. And this is evil in the modern world. Well, except for home consumption will do.
As for changing the width of mice, this is done now, and 10 years ago, using js and css (in general, it's better to immediately build the site's architecture so that you don't need to do this). There is only one problem - it needs a specialist. A specialist with knowledge of WP, not just js.
Quote from: -DM- on Aug 01, 2022, 10:25 AMI need the right parts (where the WP pages are):
http://go...iris.html (https://blog...s-art-iris-concept/
and
http://go...miracle.html (https://blog...miracle-concept/)
looked and worked the same as the right side
http://go. (https://blog.)
Using the Custom body class (https://wordpress.org/plugins/wp-custom-body-class/) plugin or any similar (https://wordpress.org/plugins/search/body/) add the twentyseventeen-front-page class to the selected pages and add the rule to the additional styles
CSS Highlight Code
1
2
3
.page-id-138 #wp-custom-header img{
content: url(https://full_path_to/images.jpg);
}
here .page-id-138 - id of the page on which you want to replace the image
repeat the required number of times.
Quote from: -DM- on Aug 01, 2022, 10:25 AMtried to "replace" the image at the js level hand-to-hand, but it's not so simple there - the template uses several sizes of the image on the splashscreen.
Why do you need WP if you crawl into the page code for every sneeze?
Quote from: _AnnA_ on Aug 01, 2022, 12:33 PMWhy do you need WP if you crawl into the page code for every sneeze?
Probably because I know js and don't know WP, I'm imprisoned for something else, so to speak... ;D
THANK YOU VERY MUCH!!!!!!!!!! :)
One possible solution is to leverage the built-in functionality of WordPress to achieve your desired outcome. Here are some recommendations that may help you:
1. Custom Menus: Utilize custom menus feature in WordPress to create a navigation menu where each menu item represents a different section of your blog. You can assign unique header images to each menu item, making it visually distinct.
2. Custom Page Templates: Create custom page templates for each section of your blog. These templates can utilize the same header image as your main page. You can then apply these templates to the respective pages in the WordPress editor.
3. Category-based Styling: Assign categories to relevant posts within each section. Then, customize the styling of each category page to have a unique header image. This way, when users click on a specific category, they will be presented with a distinct header image and layout dedicated to that topic.
4. Widgetized Areas: Leverage widgetized areas in your theme to add dynamic content to each section's landing page. You can use plugins like "Widget Logic" to control which widgets appear on specific pages or sections.
5. Custom Post Types: Consider utilizing custom post types to create separate sections for your related topics. This will allow you to have dedicated sections with their own unique header images, while still keeping everything within the same blog. You can use plugins like "Custom Post Type UI" to create and manage custom post types easily.
6. Page Builders: Explore page builder plugins like Elementor or Beaver Builder. These plugins offer more flexibility in designing and structuring your pages. With their drag-and-drop interfaces, you can easily create unique layouts, including different header images, for each section of your blog.
7. Conditional Logic: Use plugins like "Conditional Menus" or "Conditional Widgets" to display different menus or widgets based on the page or section being viewed. This way, you can show relevant navigation or content based on the user's location within your blog.
8. Child Theme: If you're comfortable with modifying code, consider creating a child theme based on your current Twenty Seventeen theme. This way, you can make customized changes without affecting the parent theme. You can add custom templates or modify existing ones to achieve the desired layout and functionality.
Remember to always keep your WordPress installation, theme, and plugins up to date for security and performance reasons. Additionally, test any changes or new plugins thoroughly to ensure compatibility with your existing setup.