Mar 192014
 

Add a Slideshow to Suffusion Theme Text Widget tutorial is similar to the previous tutorial but the difference is you will be adding a slideshow to a text widget anywhere on your Suffusion theme.

Last Updated: January 19, 2017

Latest News: I have reworded the content.

Add a Slideshow to Suffusion Theme Text Widget Steps

I will be adding the text widget to Widget Area Below Header. This tutorial will help you add a slideshow beneath your header which is where most add a slideshow.

Remember: Always check the size of your header if you are going to add the images on your header or below your header. If your images are different in sizes then you will have a problem displaying them properly. 

I want to thank Sayontan for pointing me in the right direction.

Step 1 ) Select the shortcode you created using Photonic and copy and paste it into the text widget. See images below:

 Select the shortcode

css-photonic-shortcode

 Step 1-1 )Copy and paste the shortcode into the text widget under Widget Area Below Header.

copy-photonic-shortcode-text-widget

Bullet Point Added

Step 2 ) You will notice a bullet point added to the left hand side of your slideshow which is the same bullet point added to your sidebar widget. See image below:

css-slideshow-photonic-bullet-point

Step 3 ) This looks ugly and unprofessional. So the question you might ask yourself is how do I remove this bullet point from the slideshow widget without affecting the other text widgets on the sidebar? The answer is simple, all you need to do is add some css code to your theme.

Add the following css code. Your changes might be slightly different. Notice how I have added a padding-left: 5px, this is to adjust the left hand padding or else it would be too close to the edge. Remember through CSS you can adjust how you want your images to appear in the slideshow.

.suf-flat-widget .photonic-post-gallery li { background: none; padding-left: 5px; }

The code above will remove the bullet point from the text widget and not from the other sidebar text widgets.

Follow the instructions below starting from Number 1. See images below:

Step 3-1 ) Click on Back-end on Suffusion admin panel.

css-suffusion-photonic-back-end

Custom Includes

Step 3-2 ) Click on Custom Includes on the sidebar.

css-suffusion-photonic-custom-include

Step 3-3 ) Type the following css code, yours might be different.

css-suffusion-photonic-custom-style

Step 3-4 ) Once you are finished editing the code click on Save page ‘Custom Includes’

css-suffusion-photonic-save-cutom-include

Step 4 ) The bullet has been removed only from the slideshow area below the header. You can see the bullet point has not being removed from the sidebar widgets.

css-slideshow-photonic-no-bullet-point

Click on the following URL Add Picasa Photos Using Photonic Plugin WordPress.

I hope this helps you, if you have any questions please let me know.

Come back for more great suffusion tutorials

Enjoy.

Go Back To Photonic Plugin Tutorial List:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

  2 Responses to “Add a Slideshow to Suffusion Theme Text Widget”

  1. Does WP 3.0 have problems with this widget?

    • Hi Jeremy, I have not tested this option yet in my testing environement running WP 3.0. Are you having problems with this setting?

      Regards

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)