SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Slideshow - incorporating text

3 years 5 months ago #123687 by rain.jones@yahoo.co.uk
Slideshow - incorporating text was created by rain.jones@yahoo.co.uk
Hi, I work for a magazine publishing company, and have signed up, to learn more about Drupal development, we currently have 9 websites, all created in Wordpress, which crash all the time, and all use themes created by other people, I would like to build my own theme, so I can place things where I want. I followed your layout and theming lesson, and your magazine website lesson, which were both really great, very informative, it's how I learn best seeing somebody else do it and have it explained, then do myself, the magazine lesson, included a section on slideshows, using the Nivo Slideshow, which was great, however, I am in the middle of building a brand new site for work, for a glamping holidays magazine, and I want it to look amazing, and I want the slider fill the featured section, and have a small section over the image, with title and approx. 200 words snippet, just like we did in the magazine tutorial, however, in the video it says it needs some styling, and it doesn't fill the space, and the text and the body are off the picture and it looks a mess, plus the slider is not responsive, is there any other video tutorial available that will help me with the style of the magazine site we created, the website in the layout and theming tutorial, is nice, but doesn't include a slideshow, I noticed a couple of other tutorials, but don't have time to do them only to find they don't help me achieve what I want to do?

Thank you for your help.

Please Log in to join the conversation.

3 years 5 months ago #123694 by Valentin
Replied by Valentin on topic Slideshow - incorporating text
Hi and welcome to OSTraining rain.jones@yahoo.co.uk,

I'm glad you're enjoying the training!

In addition to the lesson about responsive slideshows , we have a detailed tutorial about Flexslider that definitely should help since includes responsive support.

Let us know if we can be of any help

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 5 months ago #123696 by rain.jones@yahoo.co.uk
Replied by rain.jones@yahoo.co.uk on topic Slideshow - incorporating text
Thank you, I had seen the FlexSlider tutorial, but it didn't really help me achieve what I wanted to achieve, but I will give it another go and I will certainly take a look at the video tutorial, on responsive sliders, thank you, I'll let you know how I get on.

Thank you

Please Log in to join the conversation.

3 years 5 months ago #123697 by Valentin
Replied by Valentin on topic Slideshow - incorporating text

it didn't really help me achieve what I wanted to achieve

May you talk me through this?

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 4 months ago #124871 by rain.jones@yahoo.co.uk
Replied by rain.jones@yahoo.co.uk on topic Slideshow - incorporating text
Hello again,

I went back to the Slideshow Tutorial and now have a slideshow with text just as I wanted it, the only thing is now I want to assign the fonts from the rest of the website to the title and body text on the sideshow, I have been looking at the html-elements.css / layout.css / html.tpl.php / page.tpl.php, but not sure what I need to add and to where?

I have managed to move things around by using layout and page tpl, such as adding a region etc. and have added to the slider section in layout featured container h1 and featured container .content (attached screenshot to show you) but feel certain I should be adding something to the below views-slideshow code to tell it to assign h1 and content, but just not sure how?

Hope this all makes sense, and I would very much appreciate a little help please?



The website I am working on at the moment can be found at electricaltrademagazine.euromediamail.co.uk, the video uses the following code to position the text and semi transparent box over the image:

.views-slideshow-pager-fields {
position: absolute; /* Positions the element absolutely. */
bottom: 20px; /* Position 20px up from the bottom */
right: 10px; /* Position 10px in from the right */
z-index: 50; /* Set the z-index to something higher than the slideshow, so that the pager is on top of the slideshow */
background-color: rgba(0, 0, 0, 0.6); /* Add a slightly transparent background to set the pager apart */
border-radius: 6px; /* Round the corners of the background */
padding: 10px; /* Add 10px of padding around the pager images */
}

#views_slideshow_cycle_teaser_section_featured_contents-block .views-field-body { /* Select the title field inside the slideshow div */
position: absolute; /* Positions the element absolutely. We can use absolute because the container is positioned relatively. */
top: 0px; /* Position 20px down from the top */
left: 0px; /* Position 10px in from the left */
z-index: 99; /* Set the z-index to something higher than the slideshow, so that the pager is on top of the slideshow */
background-color: rgba(0, 0, 0, 0.6); /* Add a slightly transparent background to set pager apart */
border-radius: 0 0 6px 0; /* Round the bottom right corner of the background */
padding: 10px; /* Add 10px of padding around the pager images */
color: #CCCCCC; /* Set the non-linked text color */
text-shadow: none; /* Remove the text shadow from non-linked text */
width: 940px; /* Set the text box width to 940px */
height: 120px; /* Set the text box to the 120px (adjusting for padding/margin) */
}

#views_slideshow_cycle_teaser_section_featured_contents-block .views-field-body a { /* Select the links inside the title field inside the slideshow div */
color: #000ccc; /* Change the color of the link text */
text-shadow: 2px 2px #000000; /* Adjust the text shadow to look a bit better */
}

Thank you Lorraine

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 4 months ago #124873 by Daniel Pickering
Replied by Daniel Pickering on topic Slideshow - incorporating text
Hi Lorraine,

I can't seem to access your site thought that link. Could you check it please?
Also have you considered using a font module ? fontyourface
This module gives you a good control panel for adding and apply fonts to your site using html tags.

Thanks,
Daniel

Please Log in to join the conversation.

3 years 4 months ago #124874 by rain.jones@yahoo.co.uk
Replied by rain.jones@yahoo.co.uk on topic Slideshow - incorporating text
Hi Daniel,

I hope you are well?

Many thanks for coming back to me, I've re-attached the link: electricaltrademagazine.euromediamail.co.uk/drupal/ , hopefully this will work.

I hadn't heard of the font module, I shall go and check it out, thank you.

Regards


Lorraine

Please Log in to join the conversation.

3 years 4 months ago #124875 by Daniel Pickering
Replied by Daniel Pickering on topic Slideshow - incorporating text
Hi Lorraine,

I am good thank you. You could also try the css inject module It is useful for adding fonts and setting them to work on specific things. Let us know if you need any more assistance.

Thanks,
Daniel

Please Log in to join the conversation.

3 years 4 months ago #124891 by rain.jones@yahoo.co.uk
Replied by rain.jones@yahoo.co.uk on topic Slideshow - incorporating text
Thank you Daniel, I'll let you know.

Please Log in to join the conversation.

3 years 4 months ago #124893 by Daniel Pickering
Replied by Daniel Pickering on topic Slideshow - incorporating text
Great Lorraine we are here if you need anything.

Thanks,
Daniel

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!