RocketTheme - TOPIC: dang!!...where was that guide now?? (7/12)

Welcome Guest! Login

0 items Join Now

- Taboga
- Sr. Rocketeer
- Posts: 111
- Thanks: 0
Re: dang!!...where was that guide now??

Posted 9 years 3 months ago
- I did this fix on salient and now my hoime page looks like this: www.tohaveandtohold.us
  
  I have not been able to get the horizontal menu to show at all on the Salient Coming soon page
- Jani Larsen
  Become a Master online
#1243397
- Taboga
- Sr. Rocketeer
- Posts: 111
- Thanks: 0
Re: dang!!...where was that guide now??

Posted 9 years 3 months ago
- Can someone help me please? My horizontal menu was not showing up in Salient (Coming soon) so I applied this fix and now I have a heck of a mess! Can someone please take a look because this website should have been up a few days ago and now I don't know how to fix this jam!
  
  Thank you!
  
  www.tohaveandtohold.us
- Jani Larsen
  Become a Master online
#1243870
- Michael R Williams
- Jr. Rocketeer
- Posts: 27
- Thanks: 3
Re: dang!!...where was that guide now??

Posted 9 years 3 months ago
- First things first. turn off the menu particla and see if you get your site back so we can make sure that is what we are troubleshooting.
- Ambrosia, Requiem and Kraken
  Joomla: Latest
  Gantry: Latest
#1243941
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: dang!!...where was that guide now??

Posted 9 years 3 months ago
- Taboga wrote:
  Can someone help me please? My horizontal menu was not showing up in Salient (Coming soon) so I applied this fix and now I have a heck of a mess! Can someone please take a look because this website should have been up a few days ago and now I don't know how to fix this jam!
  
  Thank you!
  
  www.tohaveandtohold.us
  
  Would you please create a Super Admin login for me along with FTP access info and place it in the SECURE part of your Reply
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  so that I can take a look.
#1244913
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: How to use Page class suffixes in Gantry 5

Posted 9 years 3 months ago
- So you need to have an element (as an example, a background, logo, module border etc.) to look different on your Home page and Contact page compared to the rest of your site pages.
  
  We can use a [JOOMLA-ROOT]/templates/rt_templateName/custom/scss/custom.scss combined with a page class suffix to accomplish this.
  
  The page class suffix is something that you can add to your menu pages to truly create unique styling for individual content pages. With a page class suffix defined, every single content page could have it's own unique style. For example you could have a custom SCSS background image/colour; font colour/type/size; link colour/typo/size/ or custom typography for that page. The possibilities are almost endless, the only limiting factor is what you can add to a content page. Therefore, anything that you insert into a content page, whether that be an image, some text, a table or a list, it can be styled with a page class suffix in combination with your user created custom style-sheet.
  
  This is a flow diagram of how this feature works:
  
  Home page .........---> page class suffix (outline-24).... ───┐...........................................................┌ Home page
  .........................................................................................................├ rt_templateName-custom.scss ┤
  Contact Us page ---> page class suffix (outline-28).... ───┘...........................................................└ Contact Us page
  
  In this example we started with a Page Title appearing for the respective menu page. Both Titles are styled identically because of the templates default CSS values.
  However by applying a page class suffix to each Menu Page, which also affects the Outline assigned to that page, and incorporating those suffixes into our Custom SCSS file our CSS coding will generate different looks for those Page Titles in our two example pages.
  
  For this guide the "Home page" will be menu item "ID #101" and the corresponding assigned template is denoted as "Outline 24". Using an Inspection Tool like Chrome Developer Tools when you inspect the <body> class you will see these represented as class names "itemid-101 outline-24" respectively.
  
  The other page will be the "Contact page" having menu item "ID #36" and the corresponding assigned template is denoted as "Outline 28". When you inspect the <body> class you will see these represented as class names "itemid-36 outline-28" respectively.
  
  If you are aware of the Module Class suffix, this is just the MainBody equivalent. The page class suffix is not delimited by content items, it basically influences anything that is rendered in the MainBody body area. Examples would be:
  
  All content items, whether that be dynamic or static such as the Example FAQs.
  
  All front end components that are rendered into the MainBody such as the Login module.
  
  There are two methods to define a page class suffix:
  METHOD 1:
  MANUAL - In your Template Manager -> Admin -> Menus -> Main Menu -> a Menu page item (e.g. Home) -> Page Display Options -> Page Class -> some-class-name i.e. "outline-24" or any other valid class name
  
  METHOD 2:
  AUTOMATIC - Admin -> Extensions -> Templates -> rt_templateName - Home -> look in the ID column to get the ID# for that template(outline) -> which shows "24"
  
  The latter is my preferred method. So my page class suffix class name for the "Home page" would then be outline-24" and for the Outline representing the "Contact page" it would show the ID as "28" so my page class suffix class name for the "Contact page" would then be outline-28"
  
  The <body> "parent" element contains all the "child" contents of an HTML document, such as DIVS, text, hyperlinks, images, tables, lists, etc. So any class name found inside the <body> tag will also affect everything on that menu page just as the "body" class name does.
  
  So lets say in your main stylesheet you have this CSS statement:
  
  body h2.title { color: #000000; }
  
  So for any menu page that doesn't have an overriding template the "rt_templateName - Default" outline will be used.
  So all these menu pages will have a black text colour.
  
  Now we want the "Home" menu page to have a gray text colour and the "Contact" menu page to have a blue text colour.
  Using our page class suffix for the "Home" menu page Outline outline-24 we duplicate the code above so as to be operative ONLY on the "Home" menu page:
  
  .outline-24 h2.title { color: #DCDCDC; }
  
  Likewise for the "Contact" menu page Outline outline-28 we duplicate the code above so as to be operative ONLY on the "Contact" menu page:
  
  .outline-28 h2.title { color: #1A3867; }
  
  You may have noticed at the beginning I stated in the <body> class you will see menu page class names like "itemid-36 outline-28", which are the menu ID and Outline number respectively.
  If you were to use outline-28 to also represent the "About Us" menu page but wanted to keep the default black coloured text for the "Contact" menu page you would use this instead:
  
  .itemid-36 { color: #1A3867; }
  
  This would target any menu page with the ID #36 and as all ID's are unique then only the "Contact" menu page would be affected.
  
  Joomla has more information on this How to use a Page Class Suffix
- Last Edit: 8 years 9 months ago by DanG.
- The following users have thanked you: Rob West
#1245318
- Adrian Dunevein
- Newbie
- Posts: 2
- Thanks: 0
Re: dang!!...where was that guide now??

Posted 9 years 3 months ago
- Still having difficulties getting my Joomla home page content to display on the home page. Everything else about Gantry 5 seems easy to understand. Why does this totally basic aspect of website construction have to be so freakin complicated !
  
  I have created a featured articles menu, I have the pagecontent particle, I have the featured articles selected in layout and nothing shows up.
  
  Tried creating a seperate menu with a single article, the home page. Still wont show up.
  
  The biggest problem with it is that the process is not intuitive. You can drag a time/date particle onto the layout and get the date and time, you can drag a menu particle onto the layout and get a menu. You can drag pictures and all sorts of fancy stuff.
  
  Now why cant you drag a content particle onth the layout and display any page you wish ?
  
  Sorry but this making me nuts!
#1245780
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: How to create Fixed Header for your Gantry 5 template

Posted 9 years 3 months ago
- Following on the heels of Mr.T's excellant guide " Creating a fixed header&navigation in Callisto (NEW AND UPDATED) " thanks to our genius devs we have an alternative method to use.
  
  We will use the newly implemented Page Settings feature that allows to specify global and/or per-outline overrides for Meta Tags, Body attributes, Assets, Favicons, etc. This was introduced with Gantry 5.2.0.
  
  STEP 0:
  In any Outline(s) that you need a Fixed Header go to the Page Settings tab. In this window go to Body Attributes -> Body Classes and type in "g-header-type-fixed". Then click Apply & Save.
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  STEP 1:
  Scroll further down the page and drag the "Custom CSS / JS" Atom to the Section Row below.
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  STEP 2:
  Click the "gear" edit icon and you will see the Custom CSS / JS modal window open. Beside the CSS field click the "+" to create a new entry. Then in the empty CSS field type in "fixed-header". Then just to the right of your new entry click on a empty portion of the window.
  
  STEP 3:
  This will open another modal window labelled "fixed-header". In the "Inline CSS" text-box paste in this CSS code:
  
  .g-header-type-fixed #g-header .g-menu-block { position: relative !important; } .g-header-type-fixed #g-header { position: fixed; width: 100%; z-index: 3000; opacity: 0; visibility: hidden; box-shadow: 0 4px 0 rgba(0,0,0,0.25); } .g-header-type-fixed #g-header { opacity: 1; visibility: visible; -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }
  Click APPLY. This will close this modal and take you back to the previous one where you click APPLY and SAVE. This takes you back to the Page Settings window where you click SAVE PAGE SETTINGS.
  
  STEP 4:
  We need to give some spacing between the now Fixed Header and the Section immediately below it. In your [JOOMLA-ROOT]/templates/rt_templateName/custom/scss/custom.scss (<--CLICK this is link) file add this:
  
  section#g-slideshow { margin-top: 5rem; } /* section#g-feature { margin-top: 5rem; } */ /* section#g-feature { margin-top: 5rem; } */ /* main#g-main { margin-top: 5rem; } */ /* section#g-extension { margin-top: 5rem; } */ /* section#g-bottom { margin-top: 5rem; } */ /* footer#g-footer { margin-top: 5rem; } */ /* section#g-copyright { margin-top: 5rem; } */
  
  In my example the Section just below the Fixed-Header is the Slideshow section so I've uncommented that code block so its active. If you have a different section under your Fixed-Header then just uncomment the appropriate code block.
- Last Edit: 9 years 1 month ago by DanG.
- The following users have thanked you: rich mccomas
#1246370
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: dang!!...where was that guide now??

Posted 9 years 3 months ago
- Okay so it looks like the groundwork you did is correct so lets try this - for Home page DEFAULT menu item set its menu-type to Category Blog. Then in the assigned template field choose your g5_templateName-Home menu item.
  
  You Page Content should show now.
#1246682
- Adrian Dunevein
- Newbie
- Posts: 2
- Thanks: 0
Re: dang!!...where was that guide now??

Posted 9 years 3 months ago
- Thanks Dan;
  
  I did finally get the thing to work by creating a new menu with a single article in it - The home page. I had neglected to make sure that the default template box in the menu item was set to the name of my outline.
  
  The thing is I have a hard time understanding why it works. I thought if you add a menu it would just appear to the right of my existing horizontal menu, but somehow the pagecontent dohickey figures out its supposed to go where the pagecontent particle is located.
  
  Have to start experimenting with building vertical menus in the left column next and then blog posts and such in the right column. As well as playing around with colour schemes and making a proper logo.
  
  All good fun. Thanks for the reply!
#1246700
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: dang!!...where was that guide now??

Posted 9 years 3 months ago
- Adrian Dunevein wrote:
  The thing is I have a hard time understanding why it works. I thought if you add a menu it would just appear to the right of my existing horizontal menu, but somehow the pagecontent dohickey figures out its supposed to go where the pagecontent particle is located.
  
  Sorry I'm not quite getting this? Would you please place your site URL for us, in the SECURE part of your Reply
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  so that we can take a look.
#1247300