Dynamic CSS & JS

Just downloaded the pluggin "Dynamic CSS & JS" and I can't get it to work. I looked at his documentation and there is not much to go off of.

If anyone could help I would appreciate it. What I am trying to do is get a dynamic css background for a big top image. Since I am still new to Modx I still fumble around.

So here is what I have done.

I downloaded the pluggin and in my template header I added

I then made a new css file called "dynamic_css.css."

Just to test and make sure the css file was being called I made this css background.


It worked!

So then I tried to add in my TV which looks like this.



It doesn't work . Any idea how I can get this to work or a dynamic CSS? [ed. note: [email protected] last edited this post 14 years, 2 months ago.]

I don't think you'll need a snippet for that, unless I'm misunderstanding you.

Put your tag in your CSS file:



Then put just the URL of the desired image file in the TV.

That should do it. MODX will replace the tag in the CSS file with the content of your TV.

------------

BTW, I think all the snippet does is inject the tag for the CSS file into the head of whatever template you use. The point of the snippet is to specify *which* CSS file you want to use. You don't specify the template and the tag can go anywhere (anywhere in the page content or anywhere the template). The snippet will automatically put the CSS tag in the head no matter where the snippet tag is.

You put the path to the CSS file you want it to use in between the back-ticks of the snippet tag. To make that dynamic, you'd put the path to a CSS file in your TV and a TV tag for that TV between the back-ticks. Using multiple CSS files, a snippet, and a TV just to control a background image would be serious overkill, however, and significantly slower.



------------------------------------------------------------------------------------------
PLEASE, PLEASE specify the version of MODX you are using.
MODX info for everyone: http://bobsguides.com/modx.html

BobRay thank you for responding to my post.

My top_photo background is the main top photo that changes from each page. The reason it's a CSS background div is because of it's size. It's 2000px wide by 500px height. If I didn't have this as a background div then the browser would scroll horizontally.

I was trying to achieve this by adding a TV so the customer could upload the image for each page they made. Then just have the TV variable in my CSS. I thought this plugin "Dynamic CSS & JS" would work.

I still don't understand what you mean by put the "Then put just the URL of the desired image file in the TV?"

Just for learning purposes I tried to make a inline CSS style in my header.

Here is my code:

I can't get this to work with the TV call, but I can change the color. I am so lost. Any help in how to do this?

Here is an example of the website below. FYI I'm still working on the build so you might see changes progress as I am working on it. The main thing is getting the top photo working for each page. Again it has to be a background div image since the photo is so large.

Homepage www.aetoswebdesign.com

Interior page http://www.aetoswebdesign.com/logo-design.html

Ah, I didn't know you were letting users upload the image. I don't know any way to make that work with your CSS. To let the user upload an image, you need to use an Image TV. The tag for that TV will be replaced with a full img tag, which isn't going to work with your CSS (which wants just the URL of the image).

The only thing I can think of is to use a custom snippet that gets the TV value, pulls out the URL with preg_match() and returns it. That would look something like this (untested):





In your template, you'd have something like this:



Or in your CSS file:




Maybe someone else knows an easier way.


------------------------------------------------------------------------------------------
PLEASE, PLEASE specify the version of MODX you are using.
MODX info for everyone: http://bobsguides.com/modx.html [ed. note: BobRay last edited this post 14 years, 2 months ago.]

BobRay thank you for responding to my post again. I really appreciate it. I also wanted to mention I am going to go and purchase your book! I think it could really help me out in my future builds.

So I accidentally got it working. Earlier I was going through the tutorials of The Coding Pad doing getResources and remember the output option for TV's. I then checked my FireFox Debug and my background image didn't show anything. I then went to Chrome debuger and saw this

If you notice whats making this not work is "<>" around the image tag. So I then thought to myself what about the output option in the TV's. All I did is went to my TV - Output - and put Output Type to "Text." Refreshed the page and now everything works.

One last step. In order to get this to work I had to put the css as an inline style in my head chunk. I tried to put it in my normal .css file in the assets folder, but it did not work. The inline style might not be the most ideal fix, but it's one until I figure out another solution.



BobRay I will also try out your snippet suggestion. At the moment I am more of a designer and not much of a programmer. I tend to struggle with this area of what all the code and different variables mean, but I'm learning!

Quote from: [email protected] at Aug 01, 2012, 09:54 PM

If you notice whats making this not work is "<>" around the image tag. So I then thought to myself what about the output option in the TV's. All I did is went to my TV - Output - and put Output Type to "Text." Refreshed the page and now everything works.

Yes, that's exactly what I said in the post just above yours.

The point of the snippet is to remove the outer tags.


I'm glad you found something that worked.


------------------------------------------------------------------------------------------
PLEASE, PLEASE specify the version of MODX you are using.
MODX info for everyone: http://bobsguides.com/modx.html