Custom html in theme
Permalink
Hi,
We're building a site for a client and have a content area that we need to make editable. The problem is this: in order to achieve the CSS effect we want, I don't know how to create it in the template so that the user can update while maintaining the effect.
The HTML structure we are using is this:
The content that is put in each <li> is a background image. Then, on hover, we have the CSS set to multiply the background. You can see the effect in action here:https://clients.cygnetmidwest.com/FFF/www/... (It's the 3 images under Our Projects)
We need to allow the user to change the images out, and change the URLs that the images links to (currently they are not linked in the demo page).
Any ideas how we could do this while maintaining the CSS hover effect? I don't know how we could let the user change background images of an element.
Thanks,
Colin
We're building a site for a client and have a content area that we need to make editable. The problem is this: in order to achieve the CSS effect we want, I don't know how to create it in the template so that the user can update while maintaining the effect.
The HTML structure we are using is this:
<ul class="projects"> <li class="roll1"></li> <li class="roll2"></li> <li class="roll3"></li> </ul>
The content that is put in each <li> is a background image. Then, on hover, we have the CSS set to multiply the background. You can see the effect in action here:https://clients.cygnetmidwest.com/FFF/www/... (It's the 3 images under Our Projects)
We need to allow the user to change the images out, and change the URLs that the images links to (currently they are not linked in the demo page).
Any ideas how we could do this while maintaining the CSS hover effect? I don't know how we could let the user change background images of an element.
Thanks,
Colin
You could knock this out quite nicely with Designer Content form JordanLev in the marketplace for free. Build each image/link pair as a single link. Add three of them to your page. CSS can do the rest.
Thank you! I will check that one out.
I don't see how I could use this add-on to achieve exactly what I need to.
We could get close to what we want, but the main issue is the CSS hover effect. The images the user chooses need to be set as background images within the CSS. There is apparently no way to allow a user to set CSS background images from the File manager (at least that I can tell).
Does anyone know if there is a way to do that?
We could get close to what we want, but the main issue is the CSS hover effect. The images the user chooses need to be set as background images within the CSS. There is apparently no way to allow a user to set CSS background images from the File manager (at least that I can tell).
Does anyone know if there is a way to do that?
I haven't researched this so ignore as appropriate - using the Designer Content block are you not able to inline the styles you need?
Not exactly. It's an awesome add-on. I'm able to make it so that the editor can put an image into a <li> and then link that image to a page. But, to achieve the CSS hover effect (background-blend-mode: multiply;), the image that the editor chooses MUST go into the CSS as background-image. If the image is put in as a regular img, the background blend mode will not work.
Hence, I need a way for the editor to place an image into the CSS as a background-image. This may not be possible. I don't know.
I've set up the Designer Content on our dev site:http://dev.fatalfunnelfilms.com/... and it works quit nicely. But it cannot achieve the CSS hover effect we want (see here:https://clients.cygnetmidwest.com/FFF/www/... )
Hence, I need a way for the editor to place an image into the CSS as a background-image. This may not be possible. I don't know.
I've set up the Designer Content on our dev site:http://dev.fatalfunnelfilms.com/... and it works quit nicely. But it cannot achieve the CSS hover effect we want (see here:https://clients.cygnetmidwest.com/FFF/www/... )
do you have access to the website source? Are you able to alter the view of the block created by the designer content add-on?
Yes I have access to the source. I'm building the theme for the client.
Not sure what you mean by altering the view?
Not sure what you mean by altering the view?
basically the designer content add on builds you a custom block type based on your inputs.
The html etc that you add into your form to wrap the various images and other elements is what is used in the view layer for your output.
Your custom block will be at
siteroot/blocks/whateverblockhandleyouchose
inside that directory are all the base files for your block including the view
I'm guessing at the moment your block is outputting something like
<li class="myclass1"><img src="<?php echo image path;?>"
if you changes the view can you not change it so this reads
<li style="my background image style etc<?php add image path here;?>" class="if needed"></li>
Does that make any sense at all?
I'm just thinking off the top of my head without anything to back me up so apologies if I've misunderstood or have sent you the wrong way...
The html etc that you add into your form to wrap the various images and other elements is what is used in the view layer for your output.
Your custom block will be at
siteroot/blocks/whateverblockhandleyouchose
inside that directory are all the base files for your block including the view
I'm guessing at the moment your block is outputting something like
<li class="myclass1"><img src="<?php echo image path;?>"
if you changes the view can you not change it so this reads
<li style="my background image style etc<?php add image path here;?>" class="if needed"></li>
Does that make any sense at all?
I'm just thinking off the top of my head without anything to back me up so apologies if I've misunderstood or have sent you the wrong way...
Ah! Yes! That makes total sense. I will see if that works. Thank you for the idea!!
