Hi guys,
I have a tricky question here and not even sure if this will be possible.
I've built a responsive website which is now live and the client needs certain sections to be editable and two pages to be cloneable. I have read the tutorials and a realise how to create editable sections of HTML code and how to create cloneable pages.
However my issue is somewhat more complicated; I have used a responsive image carousel where the images are called in the CSS. Each one is linked to a specific <li class=""> in the HTML. With each of the list items is a <p> tag creating the white title within the dark blue block below each image. Please refer to the attached image which clearly shows the images within the carousel and the blue title blocks sitting below.
The URL for the site is: http://www.magicalquests.com
Here's a sample of the HTML code for one list item in the carousel:
<li class="jessica-elf"><a href="drama-party-themes/fairy-pixie-parties.html" title="With storytelling, music, puppetry, party games and a pinch of pixie dust"><div class="label"><p class="jessica-elf">The Emerald Elf's Quest</p></div></a></li>
And here's the corresponding CSS:
/* ---------------------------------------------
Image carousel party theme list images
------------------------------------------------- */
li.jessica-elf {background-image:url(../img/emerald-elf-party-image.jpg);}
/* --------------------------------------
Label text styles
----------------------------------------- */
p.jessica-elf {font-family: times Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size:17px;
color:#fff; padding-top: 10px;}
My question is, if these items (image, blue block and white title text) sit in the same unit but are populated using both HTML and CSS, is it possible to create these as a repeatable unit for this page, effectively allowing the client to add new units (uploading their own images and creating their own titles) as and when necessary?
Thanks in advance.
Marc
I have a tricky question here and not even sure if this will be possible.
I've built a responsive website which is now live and the client needs certain sections to be editable and two pages to be cloneable. I have read the tutorials and a realise how to create editable sections of HTML code and how to create cloneable pages.
However my issue is somewhat more complicated; I have used a responsive image carousel where the images are called in the CSS. Each one is linked to a specific <li class=""> in the HTML. With each of the list items is a <p> tag creating the white title within the dark blue block below each image. Please refer to the attached image which clearly shows the images within the carousel and the blue title blocks sitting below.
The URL for the site is: http://www.magicalquests.com
Here's a sample of the HTML code for one list item in the carousel:
<li class="jessica-elf"><a href="drama-party-themes/fairy-pixie-parties.html" title="With storytelling, music, puppetry, party games and a pinch of pixie dust"><div class="label"><p class="jessica-elf">The Emerald Elf's Quest</p></div></a></li>
And here's the corresponding CSS:
/* ---------------------------------------------
Image carousel party theme list images
------------------------------------------------- */
li.jessica-elf {background-image:url(../img/emerald-elf-party-image.jpg);}
/* --------------------------------------
Label text styles
----------------------------------------- */
p.jessica-elf {font-family: times Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size:17px;
color:#fff; padding-top: 10px;}
My question is, if these items (image, blue block and white title text) sit in the same unit but are populated using both HTML and CSS, is it possible to create these as a repeatable unit for this page, effectively allowing the client to add new units (uploading their own images and creating their own titles) as and when necessary?
Thanks in advance.
Marc