0
Welcome Guest! Login
0 items Join Now

Module CSS files dont seem to work.

Last Post
Search Topic

  • Module CSS files dont seem to work.

    Posted 11 years 4 weeks ago
    • I am using JoomlaWorks Front Page Slideshow because I just couldnt seem to get RokGallery to show my slides on one of my sites and yes I know very well how to use it, tag and publish images, etc... They just refused to show up on the template Chapelco. But this post is not about Chapelco it IS in fact about Gantry I believe.

      FPSS is a skinnable player. And you can create a copy in the html folder to adjust CSS to the override template for that particular extension. After adding custom CSS to make the player "adaptive" so it shows a smaller version on mobile devices instead of showing just a 1/4 of the main display as it does now, I can see no change.

      I then added the css code for #fpss to my custom css file for the template itself to see if that override would do the trick.

      For some reason the module will not adapt when viewed on different screen sizes as it should and I believe there is something in Gantry causing it to stay full width even on mobile versions.

      Can anyone shed some light on this and suggest something I can do to get it to scale?

      This is the css code being used in the skin.css file (which I also put in the custom.css file for the template):
      #fpssContainer<?php echo $mid; ?>.fpss-template-simple .slides-wrapper,



#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slides-wrapper .slides .slide { height: 1px; padding: 0 0 40%; }



#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slides-wrapper .slides { width: 100%; } 



#fpssContainer<?php echo $mid; ?>.fpss-template-simple { max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}



#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slides-wrapper { max-width: 100%; }



#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slide { min-width: 100%; max-width: 100%; min-height: 100%; }



#fpssContainer<?php echo $mid; ?>.fpss-template-simple img { max-width: 100%;  min-width: 100%; min-height: 100%; height: auto; }



#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slides-wrapper .slides { height: 100% width: 100%; }  



#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slidetext { max-width: 100%; }



#fpssContainer<?php echo $mid; ?>.fpss-template-simple .navigation-wrapper { max-width: 25%; margin: 0; }



@media only screen and (max-width: 600px){



	#fpssContainer<?php echo $mid; ?>.fpss-template-simple .navigation-title { display: none; }



	#fpssContainer<?php echo $mid; ?>.fpss-template-simple .navigation-wrapper { max-width: 65px; margin-left: -65px; float: right; position: relative; z-index: 99;}



	#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slides-wrapper { max-width: 100%; } 



	#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slidetext  { margin-top: -20px; }



}



@media only screen and (max-width: 450px){



	#fpssContainer<?php echo $mid; ?>.fpss-template-simple .slidetext  { margin-top: -20px; }



	#fpssContainer<?php echo $mid; ?>.fpss-template-simple .navigation-wrapper { display: none; }



}
    • Last Edit: 11 years 4 weeks ago by MrT. Reason: Code tags added
    #1082187
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22268
    • Thanks: 3224
    • messin' with stuff

    Re: Module CSS files dont seem to work.

    Posted 11 years 3 weeks ago
    • link
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1082469

  • Re: Module CSS files dont seem to work.

    Posted 11 years 3 weeks ago
    #1082477
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22268
    • Thanks: 3224
    • messin' with stuff

    Re: Module CSS files dont seem to work.

    Posted 11 years 3 weeks ago
    • I see this being loaded in your <head>:
      <link rel="stylesheet" href="/templates/rt_chapelco/html/mod_fpss/Movies/css/template.css.php?width=1024&amp;height=550&amp;sidebarWidth=0&amp;timer=0&amp;thumbnailViewportWidth=65&amp;thumbnailViewportHeight=40&amp;mid=0" type="text/css">

and

		/* Frontpage Slideshow v3.5.6 */
		$FPSS(document).ready(function(){
			$FPSS('#fpssContainer0').fpss( {
				autoStart: 1,
				transitionTime: 1000,
				interval: 12000,
				timer: 0,
				effect: 'crossfade',
				event: 'click',
				textEffect: 1,
				lavalamp: 1,
				playLabel: 'Play',
				pauseLabel: 'Pause'
			});
		});
		
if (typeof RokBoxSettings == 'undefined') RokBoxSettings = {pc: '100'}


      I do see rt_chapelco/html/mod_fpss/Movies/css/template.css.php?width=1024&height=550&sidebarWidth=0&timer=0&thumbnailViewportWidth=65&thumbnailViewportHeight=40&mid=0 being loaded in Chrome's Developer tools (resources tab) being loaded; as a stylesheet

      I see this css style, as an example, on that page actively styling an element of your slider


      .fpss-template-movies .slidetext {
      position: absolute;
      }

      If you commented that out in your override file you'd see your text box on your slider disapear... in theory... :)

      So I dunno... that override file is loading and styling certain elements on the page for me.

      Whatever css styling battles your override file is losing, investigate, and make sure your changes have greater css specificity.

      firebug and chrome dev tools.... these are good things...
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1082501

  • Re: Module CSS files dont seem to work.

    Posted 11 years 3 weeks ago
    • Just to be sure I understand, you are saying the css code I added does not make the thing adaptive?

      They gave me the CSS code I am using for specifically that purpose. I guess I will have to check with them then update what the outcome is. I saw that it was loading, but I thought perhaps gantry wins when it comes to the width setting because the width is defined in the module settings first...
    • Last Edit: 11 years 3 weeks ago by Ron Farber.
    #1082517
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22268
    • Thanks: 3224
    • messin' with stuff

    Re: Module CSS files dont seem to work.

    Posted 11 years 3 weeks ago
    • I don't know anything about the plugin... I was just confirming that your css file was actually loading and styling some things... you'll wanna check with them

      The last responsive element that your slider is wrapped in by Gantry is:

      <div id="rt-mainbody-surround">
      <div class="rt-container">...</div>
      </div>

      rt-container uses media queries to set the width based on browser size... and I verified it's doing just that on your site... there's no Gantry "winning" over this plugin or anything, gantry is just framework... positioning/placement/widths/heights, etc...
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1082553

Time to create page: 0.074 seconds