Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Create a ‘Conversation’ Banner With Revolving Text in WordPress: Part 2
  • like 1 18

    Create a ‘Conversation’ Banner With Revolving Text in WordPress: Part 2

    1. June 2016
    2. Daily
    3. read 756

    Final product image
    What You'll Be Creating

    In this set of two tutorials, we're creating a slider to display posts from a custom post type in such a way as to create a conversation effect between two speakers in an image.

    In the previous part, we registered the post type, set up the sliders and added them to our site header. Now we need to position the text and add styling.

    What You'll Need

    To follow along, you'll need:

    • a development installation of WordPress
    • a code editor
    • the free Responsive theme installed
    • the child theme for Responsive from the previous part

    The example I'm be working through is a real-world site I'm developing for a client, which is running a child theme of the Responsive theme. I've created a child of the Responsive theme and added custom styling to that as well as functions in the theme's functions.php file. You could either add this to your own theme or create a child theme of Responsive like me.

    The Current Sliders

    Here's what the site looks like right now:

    the starting site - sliders taking up too much space above the image

    The sliders are there, but they're in the wrong place and they need styling.

    So in this tutorial, we'll do the following:

    • Add positioning for the sliders to place them next to the appropriate speaker.
    • Register a font using Google Fonts and add that to the text.
    • Add quotes around the text.
    • Add a media query to fix any layout issues on smaller screens.

    Note that for each quote I've just added a post title as the text to be shown. If you also add post content then that will be displayed too, so make sure your quotes just have a title and no content.

    Position the Sliders

    Let's add positioning to the sliders to overlay them over the image.

    Add Absolute Positioning

    Open your child theme's style.css file and add this:

    .tutsplus-sliders {
    position: relative;
	max-width: 1000px;
	margin: 0px auto;
}
.smooth_slider {
	position: absolute;
}

    This gives the div we created to contain our sliders relative positioning and the sliders themselves absolute positioning within that div. It also sets up the correct width for our div so it's centred with the image.

    Now the sliders are over the image:

    sliders over the image superimposed above each other

    The problem is that they're superimposed over each other, and they need to be next to the relevant person. Let's fix that.

    Position the Sliders Next to the Speakers

    The Smooth Slider plugin gives each slider a unique ID in the markup. So the 'Heide' slider has an ID of #smooth_slider_3 and the 'Iain' slider has an ID of #smooth_slider_4. We can target those to position each slider correctly.

    Add this to your stylesheet:

    #smooth_slider_3 {
    top: 70px;
	right: 90px;
	text-align: right;
	width: 250px;
}
#smooth_slider_4 {
	top: 10px;
	left: 90px;
	width: 250px;
}

    You'll need to check the ID the plugin has given each of your sliders by checking the output markup: they might be different from mine.

    Now my sliders are in the right place:

    sliders positioned next to people in the image

    That's looking better. Now to add some styling.

    Style the Text

    I want to change the font and add quotation marks around the text.

    Change the Font and Font Size

    First, let's register a font using Google Fonts. Go back to your theme's functions.php file and add this:

    function tutsplus_add_google_fonts() {
    wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Droid+Serif');
	wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'tutsplus_add_google_fonts' );

    Note: in the source code there are two fonts enqueued because I've used another Google font elsewhere in the site, but not for the sliders.

    Save your functions file and return to your stylesheet. Add this:

    .smooth_slider h2 {
    font-size: 19px !important;
	font-family: 'Droid Serif', serif  !important; 
	color: #666633 !important;
	line-height: 26px !important;
}

    I've had to add !important to each line as otherwise it doesn't override the styling added by the plugin. If you wanted to, you could edit the fonts using the settings screen: I haven't because that doesn't let me use my Google font.

    Our font now looks much better:

    image with text next to it and correct style applied

    Add Quotation Marks

    Finally, I want to add quotation marks around each piece of text, to emphasise the fact that the people in the image are supposed to be talking. To do this, I use the before and after pseudo elements.

    In your stylesheet, add this:

    .smooth_slider h2::before {
  content: open-quote;
}
.smooth_slider h2::after {
  content: close-quote;
}

    This will enclose our h2 elements in double quotes.

    Note: some older browsers won't support this as they don't support pseudo-elements. However I'm not concerned about this as the sliders are not essential to the content, and the number of people using those browsers is very small now.

    Now save your stylesheet and check the site:

    quotation marks added around text in sliders

    Fantastic! I now have my text in the right place with quotation marks around it. My client can now add as many quotes as they want, assign them to the appropriate sliders, and the conversation will continue.

    Add a Media Query

    Because I've used absolute positioning, the position of my text will break on smaller screens; the font sizes would also have to be so small as to make the text unreadable. So I'm going to add a media query to hide the sliders on smaller screens.

    First I'll check the point at which the layout breaks: it's at approximately 900 px wide. So I need to add a media query to target screens smaller than 900 px wide.

    At the bottom of your stylesheet, add the media query:

    @media screen and (max-width: 900px) {
    .tutsplus-sliders {
		display: none;
	}
}

    Now the sliders disappear on smaller screens:

    no sliders on smaller screens

    If you wanted to, you could add alternative styling in your media query for mid-sized screens, making the font size a bit smaller and positioning the text to fit.

    Summary

    Using sliders for text can help you add interesting effects in your site: here I've added a conversation effect which is superimposed over an image of two people.

    In this set of two tutorials, you've learned how to create this effect by: 

    • registering a post type
    • installing a slider plugin and assigning posts to it
    • displaying sliders in the header using a function hooked to an action hook provided by the theme
    • positioning the text next to the two speakers
    • styling the text and adding speech marks around it
    • removing the text on smaller screens using a media query

    You could use this technique to create pop-up text anywhere in your pages—get creative!

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    1
    Add a comment...
    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News