0
Welcome Guest! Login
0 items Join Now

Conditional Styling

  • Conditional Styling

    Posted 13 years 1 month ago
    • I would like to apply styling based on where module positions are rendered.

      For example.

      When the sidebars are rendered to the left of the main body, I would like to apply one styling, such as
      border-right: 1px #000;

      But when the sidebars are rendered to the right of the main body, I would like to apply a different styling
      border-left: 1px #000;

      I would also like to add a divider between each module rendered with a certain position, only if another module follows it.
      top-a | top-b | top-c | top-d | top-e | top-f

      Notice that after top-f a divider isn't rendered.

      Any help would be greatly appreciated.
    • Cliff Pfeifer's Avatar
    • Cliff Pfeifer
    • Preeminent Rocketeer
    • Posts: 8444
    • Thanks: 20
    • Website Developer

    Re: Conditional Styling

    Posted 13 years 1 month ago
    • Hi, there isn't an easy way to do this, unless you are really good with PHP. This type of development is a bit more than we can provide support for here.

      You could do this with CSS, using page class suffixes and applying the styles you want to individual pages that use the different layouts. This is more of a hard coding approach than dynamically creating styles based on layouts, but it's a bit easier. I can help with that if you need it.
    • The difficult we do immediately, the impossible takes a little longer.
  • Re: Conditional Styling

    Posted 13 years 1 month ago
    • I'm not a PHP wizard, but I feel comfortable in it, and that is the approach I'm looking to go.

      Is there any RocketTheme templates that use such conditional styling of which you could point me at specific files or functions?

      I've looked through the features folder of the last 5 or so RocketTheme Joomla templates and don't see anything relevant.

      Does the Gantry Framework have a simple way of returning some sort of variable that would be useful?

      Some to this effect...
       
      $gantry->modulesRendered('top');
       
      //holds array of each module position used in that container
      //i.e. (top-a, top-b,....,top-f)
      //Which could be counted
      //Allowing styles to be placed based on module position or module count.
      //May also allow for additional divs to be inserted between each module
       
    • Cliff Pfeifer's Avatar
    • Cliff Pfeifer
    • Preeminent Rocketeer
    • Posts: 8444
    • Thanks: 20
    • Website Developer

    Re: Conditional Styling

    Posted 13 years 1 month ago
    • Hi, there isn't anything in Gantry that does this specifically, so you won't find a feature like this in any of our themes. I'm not really a PHP expert myself, but the knowledge I do have would lead me to believe you would only be able to implement something like this by writing new code. The issue is that the module positions and placement of those positioned is rendered based on the backend template settings. You would have to write conditional statements based on the output of the Gantry code, and that code doesn't exist until it's rendered by the code you mentioned.

      Maybe a good place to start would be working with layouts, the body_mainbody.php file in your template directory -> html -> layouts contains the code that controls the mainbody / sidebar. You could insert php code there. You would have to come up with a way to change the output based on the variables Gantry is pulling from the backend. That's really all I can tell you, this type of development is a bit advanced for the support we provide.

      www.gantry-framework.org/documentation/j...reating-a-new-layout
    • The difficult we do immediately, the impossible takes a little longer.
  • Re: Conditional Styling

    Posted 13 years 1 month ago
    • Fair enough, I have one last question regarding this. And I think it's much more reasonable.

      The vertical divider was used on the gantry-framework.com website. Specifically here...

      http://www.gantry-framework.org/documentation

      This image is hidden for guests.
      Please log in or register to see it.


      If I had to guess, that was implemented in

      TEMPLATEFOLDER/html/modules.php?

      Could you possibly find out how it was done there or maybe attach the file that was used and I can just reverse engineer it?

      Thanks!
    • Cliff Pfeifer's Avatar
    • Cliff Pfeifer
    • Preeminent Rocketeer
    • Posts: 8444
    • Thanks: 20
    • Website Developer

    Re: Conditional Styling

    Posted 13 years 1 month ago
    • Hi, unfortunately I don't have access to the source code for the Gantry website, but you would be correct about the file - modules.php contains all the chrome for the modules. You could either add a div into the modChrome_standard, or create a new chrome function that does anything you like. All you have to do from there is assign the chrome to the positions in the index.php file, each position has a line like this
      <?php echo $gantry->displayModules('maintop','standard','standard'); ?>
      The third argument is the chrome, just change that from standard to the name of your new chrome and that position will use your function.

      More info here:
      www.gantry-framework.org/documentation/j...custom-module-chrome
    • The difficult we do immediately, the impossible takes a little longer.

Time to create page: 0.079 seconds