0
Welcome Guest! Login
0 items Join Now

Protean template global site width

  • Protean template global site width

    Posted 5 years 8 months ago
    • Hello, I'm trying to update a Joomla 2.5 website (Gantry v1.0 theme978) to Joomla 3.8.10 (Gantry v5). I'm using the Protean template for the new site. The website I'm updating is fairly simple, but I'm new to Gantry and am having trouble trying to configure the new site template to look similar (doesn't have to be exact) to the old site. I've read the documentation and watched tutorials, but I'm still stuck. Specifically, I'm trying to duplicate the page content width (white - #f9f5f5), and the page background (orange - #e04c29) sitewide.

      Here is the old site: www.nonprofitevolution.com/

      Here is the new site: jupgrade.nonprofitevolution.com/

      Is this (center content w/ orange background) possible with the Protean template?

      Thanks
      1
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Protean template global site width

    Posted 5 years 8 months ago
    • Yes, you just need to set the settings for each section on the layout of your outline to "fullwidth (boxed)" layout and then set the breakpoints in the styles tab in the base outline to the width of the template you require (should be ok as default).

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: Protean template global site width

    Posted 5 years 8 months ago
    • Hi Mark,
      Thanks so much for the help. I set the settings for each section on the layout of my outline to be "fullwidth (boxed)", and left the breakpoints in the styles tab in the base outline at their default settings of: Large Desktop-75rem, Desktop-60rem, Tablet-48rem, Mobile-30rem, and Mobile Menu-48rem. I also changed the Base Backgroung under "Base Styles" to the color of the page backgroung that I want (#e04c29).

      These changes still don't seem to change the template style to what I'm looking to match here: nonprofitevolution.com
      I've gone through Gantry 5 doc ( docs.gantry.org/gantry5/basics ) and I can't figure out what I'm doing wrong.

      Plase advise...
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Protean template global site width

    Posted 5 years 8 months ago
    • Your old template has some weird sizes and that will mean that you have to change the breakpoints more if you want it to look identical (which I actually don't recommend - since the existing ones are industry standard breakpoints).

      Next you are using the "home" outline to show your content which has some unqiue styling for the template which won't be required if you want to replicate exactly the existing look of your site. You can improve things though with this CSS:
      .section-paddings, #g-top, #g-header, #g-above, #g-utility, #g-feature, #g-expanded, #g-extension, #g-bottom {
         padding: 0 !important;
      }

      Even then though it's still going to require a lot more custom CSS to reverse out the template styling in order to make it look like your old template. I'd suggest that you consider actually using the styling of the template in redeveloping your site rather that trying to replicate your existing site, it will be a far eqasier route to take.

      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.039 seconds