Items filtered by date: December 2015

This laptop was an old Dell but had 64-bit processor and 4gb RAM so i upgraded it to windows 10. If you send it to sleep and then wake it up, the screen appears. This is obvously a driver issue.

These are my notes on what I tried using the offcial driver:

• Bios auto memory size causes black screen. Set video memory to 32mb manual (Did not work for me)
• Change bios settings + set windows to auto load
• Also the official driver from windows update is not compatible. Force the driver not to download
• Send to sleep, wake up with ctrl + del will always display the screen

Solution

This do not give you all the acceleration of the graphics card but it does not suffer from the blacked out screen issue.

• Windows basic video driver will always work without issue

The following error usually occurs sometimes when you move your website with kunena or you change templates.

0 load error: failed to find /home/xxxxxx/public_html/components/com_kunena/template/crypsis/assets/less/crypsis.less

Solutions

• Empty Joomla Cache (which should include Kunena)
  or
• https://www.kunena.org/forum/k-3-0-fatal-errors/128655-500-error-after-moving-website

This show you the default layout for the gantry Helium Theme (Base Outline) and the section names.

These are the steps I took to create my first template with the layout and module positions I want. Based on the Gantry5 Helium Theme. These are not instructions but someone might find it useful if you are going through the same thought process.

Step 1

• Remember it is a blank template
• Do fresh install of gantry
• Think of a template name (Lancastrian)
• Clone/duplicate base outline, no inheritance
• Set as default Joomla template
• Plan your sections, how you want then on paper
• Edit the layout.yaml of the outline to configure your sections on how you want them
• Change the name in the .yaml (word auto capitalizes, - are changed to spaces)
• Add modules, module positions and particles however you want them
• Edit particle defaults in base outline, styles page, page settings, can do in .yaml file but in admin is easier
• Make a list of new sections (over the base outline)
• Make a list of sections to be removed (over the base outline)
• Copy helium.scss to override location
• Remove unneeded sections (optional)
• Disable admin settings via blank .yaml
• Component out css in helium.scss override or rebuild new stack leaving old one commented out
• You can first add new sections below but the current default theme is very messy
• Add new sections
• Helium CSS already has a new section stack
• Create SCSS for new sections in custom/scss/helium/sections…. Only for the new ones or any that you want to override, only if you want to style it
• Make sure you take relevant styling (i.e. aside) and place in the new ones
• Create admin sections for these optional
• Disable admin sections by adding blank .yaml files for the no-longer needed sections /custom/blueprints/styles/.yaml
  
  this causes a new section to be made. Can I disable them in gantry. These will go when I change the default base outline
• NB: you could copy all SCAA files then you know what to work on
• Copy SCSS + create for new
• Copy CSS for aside , sidebar, only override altered code
• Add admin sections for the new sections
• take header styles and use that file to create
• create blank files for the new sections /blueprints/styles/sections
• the .yaml input files must match the code in the SCSS files. so decide how you want them to look what “sections ?” maybe first basic section
• what defaults create the new sections with the code from the nearest section and then get the corresponding SCSS code in the right file with references changed as needed.
• Copy aside and sidebar into yaml
• There is no yaml for aside and sidebar but there is a SCSS
• Add styling for the main container > sidebar + aside
• I will override header so it is standard and make all the sections standard as well (features section). Actually I will leave the header as is because it shows me options and I do not have to use them. The rest I copy features section
• I used the features section .yaml and SCSS to make all my sections plain and simple. I can alter them later if needed
• The defaults are what are rendered
• You can use $base-container in other yaml (these variables are like php variables, cross file)
• So I have first done the sections styling and admin sections
• Add custom SCSS /custom/SCSS/custom.scss
• With the nav pills fix in it

Step 2

• Check for errors
• overriding the helium file causes issues = my fault
• I had not added _mainnav.scss which styles the menu

Step 3

• Override the default. This should make all other sections disappear.
• Don’t delete particles folder.
• The admin section for the other sections are still there
• Move the original defaults somewhere safe
• Copy your template files into default
• Recreate the default outline (inherit all)
• You can edit on the base outline and all changes will be reflected in the default outline

Step 4

• Look at how to remove admin sections will yaml overrides. Could still use as is but there is a weired section at the bottom

Step 5

• When backup, delete the standalone template as it is no longer neeed
• Aside and sidebar module positions still exist
• Need to be able to set content-right to max 25% width and main content fills the rest. This setting will not be inherited, I thing it is a bug
• Develop the Lancastrian theme as a separate theme (not default), re-enable particle defaults via hack

Outlines are equivalent to Joomla templates and are installed in Joomla as templates. Outlines all inherit from a ‘Base Oultine’ which is not visible in Joomla as a template. This inheritance can be turned off.

It is recommend to alter the ‘Base Outline’ for global changes and if you are only going to have one arrangement then you only ever need to adjust this template. The outline ‘Helium – Default’ is configured to inherit all of the ‘Base – outline’ so it would be this that you use as you joomla template. The ‘Helium – Home – Particles’ is just a demo showing particles (which only exist in Gantry) functioning on a Gantry template/outline.

To get an new Outline loaded

• put example1.yaml in /custom/layouts/
• and then goto outlines in gantry admin
• Click add (+)
• it will appear in there for adding under presets

Once you have loaded the layout in outlines the edits to the file /custom/layouts/example1.yaml will not work as this is only a preset file and not the actual the layout/template file.

When you add a layout from a preset what happens is:

• It copies the layout example1.yaml into /custom/config/23/example1.yaml (the 23 is the id given to the layout)
• adds a/custom/config/23/index.yaml

You can edit these files and you layout will change.

• NB: don’t just delete the preset files it can cause errors, delete from within the gantry framework
• NB: you can create a new outline from an exisiting outline and then edit that from within /custom/config/{No.}/
• NB: CSS styling might not be automatically applied because it is a new section that is not styled.

Notes

• When you edit the base outline it alters the files g5_helium/custom/config/default/
• A container is set in the outline and cannot be altered in the gantry admin because it has been sectioned in the yaml file so even if you remove all of the modules the sections will remain.
• The ‘Helium – Default’ in this instance has an ID of 9 so if you did any alterations they would be stored in g5_helium/custom/config/19/
• You should always alter the ‘Base Outline’ when designing a site as all outlines will inherit of this outline. So edit stuff you want site wide here and then create other outlines to override this where needed, if at all.

These are styles that are accessible via the dropdown menus in gantry admin should as module styling.

• This has the references in it search 'title1'
  • g5_helium/gantry/theme.yaml
  • I don’t think this can currently be overidden
• this contains the actual styling. the theme.yaml must be "CSS class: display name"
  • g5_helium/scss/helium/styles/_variations.scss
• Confirmation/answer https://github.com/gantry/gantry5/issues/782

Introduction

Gantry’s documentation for noobies is not great because you have no idea what it means except that it is a template framework of some description. If you follow the process below Gantry will appear easy to use.

1. Gantry 5: Introduction (official)
2. An introduction to Gantry 5 from RocketTheme | OSTraining – This course is 100% spot on. They also offer you in in the form of an eBook which I recommend you sign up for and download.
3. Use and look through these Resources
   • Use the Gantry Docs (Official) as a reference file, it is well written and easy to read but you need to know why you are reading it first.. Just be aware some of the file paths and possible some other might be a little out of date but with a little thought they all make sense
   • RocketTheme (Official) YouTube channel – Many easy to follow videos.
   • Gantry 5 GitHub Repository – You might find you question has already been answered here in the comments
   • QuantumWarp.com – We will have many links and resources as time goes on.
4. These are also a useful to read
   • The description on the Gantry5 GitHub page
   • Gantry5 Joomla Extensions Page

Styling

One of the first questions is how can I change the styiling of the theme. This is where you can find the code you want. It is recommend that you alter everything using Custom CSS and override rules.

• http://docs.gantry.org/gantry5/advanced/customizing-theme-files
• All the styling code is in g5_helium/scss/ within the appropriate section. These files are not straight CSS and should only be looked at. The best way to get the styling (because these files have to be parsed) is to load the page and copy the main compiled css file, in this case g5_helium/custom/css-compiled/helium_11.css?581a30e4 the bit on the end (query) will always be different. Or you can grab it from g5_helium/custom/css-compiled/helium_11.css notice the ID on the end, this will be different depending on which outline is loaded, but will all have similar content.
• There are inbuilt styles for modules. These are configures in the module position via the layout manager ‘Module Position’/Block/Variations/ click on the blank input box for a list. You can style different aspects of the module box separately. These settings apply to modules individually.
• Variations - These are styles that are accessible via the dropdown menus in gantry admin should as module styling. They control such things as spaces between the module, text position...
• why is there a helium_19.css, helium-joomla_19.css, custom_19.css would these not be better compiled into 1 file - This is most likely because of the cross platform nature of Gantry Framework

Menu

• Menus are copied (or parts of them ) into the gantry template
• Menu changes and settings are stored in /g5_helium/custom/config/menu/mainmenu.yaml
• New or enabled menu items are added at the end in gantry menu manager
• There currently is an issue with Menu Syncronisation and has an Issue on GitHub - Menu ordering not reflected in Joomla/Gantry menu

Sections and Layout

This is a collection of notes and links

• Outlines - These are equivalent to Joomla templates. Outlines are installed in joomla as templates.
• In a particle's settings
  
  • key = Joomla position name
  • chrome = The third option is the Chrome. This sets the module position's chrome. This takes advantage of any Chrome HTML styling you have set up that you would like to have wrap each module placed in this position.
• Different basic layout (the sections) - http://docs.gantry.org/gantry5/advanced/creating-layout-presets
• Make new sections - https://github.com/gantry/gantry5/issues/1499 - https://github.com/gantry/gantry5/issues/1649
• how do you add a sidebar? (container/section via the yaml outline file)
• When you alter module position sizes in gantry layouot, it automatically adjust the other modules to fit. Exactly how I have not bothered to look or work out.
• Module naming
  • Key = module reference (used in coding)
  • Chrome = https://docs.joomla.org/Understanding_Output_Overrides
    • this seems to be some sort of PHP code wrapping of the output with HTML with the purpose of styling it. This will only be
• Modules vertical stack in the positions, there is no option to assign horizontal stacking. You would use multiple module positions for this.
• Adding a Section to an Existing Layout Preset (Official Doc)
• Creating Layout Presets (Official Docs)
• gantry module positions that are not populated do not take up space, they auto collapse
• gantry module positions if there are 2 modules then the horizontal space is divided between 2 (ie 50%) irrelevant of their position

General Notes

• Everything customized or user set is stored in text in /custom/
• There are some constants you can use for file path
  • gantry-admin://
  • gantry-template://
  • gantry-media://
• Will updates override /custom/ directory = no
• Hydrogen is the first theme built on gantry (and explains why it does not have all of the particles) and Helium is the newer one with extra particles. You should use Helium when you start a new project, but Hydrogen is kept up to date.
• The file name is the referencing point/identifier for a lot of thing
• All configuration and settings are stored in text format using the .yaml format. This allows it to be cross platform easily.
• You cannot disable a section. You can only remove it.
• Offcanvas is used for mainly mobile stuff like the mobile menu
• Outline Files
  • g5_helium/custom/config/{ID}/index.yaml (this file is updated when you save the layout in gantry admin with configuration settings and also stores the preview image location)
  • g5_helium/custom/config/{ID}/layout.yaml (this is the text based layout file)
  • g5_helium/custom/config/{ID}/styles.yaml (this stored any overridden/user set settings and their values) – not always present
• File Override Locations (Official Docs)
• custom HTML is stored in the layout.yaml
• http://docs.gantry.org/gantry5/advanced/customizing-theme-files - file locations are wrong in the docs
• http://docs.gantry.org/gantry5/advanced/creating-layout-presets#adding-a-section-to-an-existing-layout-preset
• Joomla Template names are not stored in the text files, so must be in the joomla database

There are 3 methods for adding custom CSS to gantry

• .scss file
  • create a file at THEME_DIR/custom/scss/custom.scss (use normal css or scss , less?)
  • Adding a Custom Style Sheet (official doc)
• Atom - There is a Custom CSS atom you can use to add CSS
• Asset - Not sure what this is

This issue is posted on GitHub

/*-- Fix breadcrumb arrow going to the top --*/

/*-- the first icon in breadcrumbs is at the top caused by below --*/

/* http://localhost/media/gantry5/engines/nucleus/css-compiled/joomla.css:206
[class^="icon-"], [class*=" icon-"] {
	margin-right: .25em;
	line-height: 14px;
}
/* http://localhost/media/jui/css/icomoon.css:17
[class^="icon-"], [class*=" icon-"] {
	display: inline-block;
	width: 14px;
	height: 14px;
	*margin-right: .3em;
	line-height: 14px;
}
/* http://localhost/templates/g5_helium/custom/css-compiled/helium_18.css:26
    font-size: 1rem;
    line-height: 2;
}
*/

/* Fix only second identifier might be needed.*/
.breadcrumb [class^="icon-"], .breadcrumb [class*=" icon-"] {
    line-height: 2;
}

This will give you a standard horizontal DIV menu.

1. add " nav-pills" to the menu suffix in the joomla footer menu module, notice the space at the beginning, keep this.
2. add this code to ../g5_helium/custom/scss/custom.scss

   /* Horizontal DIV menu */
   
   /* removes the vertical seperators */
   .moduletable .nav.menu.nav-pills {
   	padding-bottom: 0;	
       /* border: 1px solid #e0e0e5; - white border */
   	border: none;
   }
   
   /* Corrects Spacing */
   .moduletable .nav.menu.nav-pills li {
   	margin-bottom: 0;
   	margin-right: 0.625rem;
       border-bottom: none;
   } 

Other CSS rules for nav-pills in a Gantry theme

Make the menu thinner (ideal for top-bar menus)

/*-- Make Nav Pills Menu Thinner --*/

/* Remove padding from menu wrapper */
.moduletable .nav.menu {
	padding: 0;
}
/* Remove the padding at the bottom of the <li> */
.moduletable .nav.menu li{
	padding-bottom: 0;
}

/* remove margin and padding from the link */
.nav-pills > li > a {
	padding-top: 2px;
	padding-bottom: 2px;
 	padding-right: 2px;
	padding-left: 2px;    
	margin-top: 2px;
	margin-bottom: 2px;
	margin-right: 2px;    
	line-height: 10px;
}

/* Gantry changes the link and background colour when the link is selected - this corrects that */
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
	color: inherit;
	background-color: inherit;
}

/* Add space between icon and text for the link item */
.nav-pills .fa::before {
	margin-right: 5px;
}

/* when screen is too small, center the menu and prevent going under the hamburger */
@media only all and (max-width: 47.938rem) {   
    #g-top-bar .g-content {
        text-align: center;
        /* padding: 0.45rem; */
    }
}

/* style <li> items */
.nav-pills li a,
.nav-pills li a:hover,
.nav-pills li a:focus {
	font-size: 1.1rem;
	font-weight: bold;
	/*white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;*/
}