Outlines, Overrides and Particles
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Hopefully this guide will give you a better understanding of the relationship between Outlines, Overrides and Particles (OOP's for short).
You should go to our documentation and read up on the Basics of " Outlines ".
In this guide we're going to use our Hydrogen template and our opening scenario can't happen when you install Hydrogen but I use it so you can clearly see the path I'll be using.
We'll start with an installation of Hydrogen that has only the Hydrogen-Default site OUTLINE (think template).
This image is hidden for guests.
Please log in or register to see it.
The definition of Default for our purposes means that ALL menu pages on the Site are assigned to this OUTLINE for features and styling.
In the Layout Manager of the Hydrogen-Default OUTLINE there is NO Logo_Particle present. This means NO menu pages will display a Logo.
Before we introduce the Logo_Particle to our Hydrogen-Default OUTLINE layout we will modify in it in the BASE_OUTLINE Particle_Defaults screen. The BASE_OUTLINE is a special System Outline therefore is not visible in the Template Manager. You have to open a site Outline and then from the Outline dropdown select it. The BASE_OUTLINE stores all the default Particle setups as well as styling for the site OUTLINE.
When you initially Drag & Drop a Particle into the Layout the BASE_OUTLINE settings for the Particle are used.
In the image you can see we've made modifications to the "Tagline" using the text "Base Outline Modified". This is text that will appear beside the Logo image.
This image is hidden for guests.
Please log in or register to see it.
Going to the Hydrogen-Default Layout Manager we see no Logo particles
This image is hidden for guests.
Please log in or register to see it.
We can see on the Front End of our Home page that there is no Logo
This image is hidden for guests.
Please log in or register to see it.
Now we can use the Logo_Particle we modified in our layout by Dragging it from the Particle Picker
This image is hidden for guests.
Please log in or register to see it.
We'll place a Logo_Particle in both the Header and Footer Sections of the layout and now we can see our Base_Outline modified on our menu pages.
This image is hidden for guests.
Please log in or register to see it.
At this point we want to Style our Home page differently than the layout and styles used by the Hydrogen-Default OUTLINE for this page.
We duplicate the Hydrogen-Default OUTLINE and rename the copy to Hydrogen-Home OUTLINE.
This image is hidden for guests.
Please log in or register to see it.
We assign this page to our Home menu page and can style it independantly of the Hydrogen-Default OUTLINE. The first thing we want to do is change the look of our Logo for the Home page only. At the same time we want to retain the BASE_OUTLINE Logo_Particle settings for any other menu pages that we create.
At this point we have already "Overridden" the Hydrogen-Default OUTLINE for the Home page by using the Hydrogen-Home OUTLINE. Now we'll "Override" the BASE_OUTLINE Logo_Particle settings for the Hydrogen-Home OUTLINE by modifying the Logo_Particle in the Particle Defaults screen.
This image is hidden for guests.
Please log in or register to see it.
For this Logo_Particle we'll again modify the "Tagline" this time by using the text "Hydrogen-Home OUTLINE Modified" and setup some CSS so that the text is RED. As these modifications are tied to the Hydrogen-Home OUTLINE dragging a Logo_Particle to the layout will now use the settings from the Hydrogen-Home OUTLINE Logo_Particle in the Particle Defaults.
This image is hidden for guests.
Please log in or register to see it.
Viewing the Front end for the Default and Home pages we see our new "Outline Override" particles in action.
This image is hidden for guests.
Please log in or register to see it.
We realize that the RED text in the Green background of the Header doesn't look very good so we need to change that to yellow. We'll again create an "override" this time by editing the Logo_Particle already sitting in the Header section.
This image is hidden for guests.
Please log in or register to see it.
For this modification of a Logo_Particle "in place" we'll change the "Tagline" this time by using the text "Logo modified in BLOCK-> Header Section" and setup some CSS so that the text is YELLOW. After a save you can see by looking at the red arrow that we've "Overridden" the Logo_Particle in the Hydrogen-Home Outline Particle Defaults screen for the Header section.
We view the Front end Home page and we see the result of our Overrides.
This image is hidden for guests.
Please log in or register to see it.
So the short version of this is:
BASE_OUTLINE Particle_Defaults
Particle settings are used whenever the Particle is FIRST placed in a Layout of ANY Site Outline
Site OUTLINE Particle_Defaults
Particle settings are used whenever the Particle is FIRST placed in that same Site OUTLINE
Site OUTLINE Layout Particle settings
Particle settings are set by the user for ALREADY placed Particles placed in a Layout BLOCK - Last Edit: 7 years 11 months ago by DanG.
-
Time to create page: 0.045 seconds