Solved

Need CSS assistance with photo slider in wordpress theme

Posted on 2013-10-31
12
905 Views
Last Modified: 2013-11-02
Hey guys, i've been beating my head against the wall trying to figure out the CSS properties that control the photo 'slider' on my main page.  you will see when the page first loads, some text slides across the photo.  My site is fightingilliniblog.com, and I want my text, and text background to look like infowars.com.  I like the white lettering, and the transparent background that it has.  

At the very least, I just want the text to be white, and positioned on the bottom of the photo. From the wordpress admin slider page, I have input the following code:

<h2><span><span><span>
<a href="http://www.fightingilliniblog.com/young-roster-creates-questions-for-illini-basketball/" class="slider">
Young roster creates questions for Illini basketball</span></span></span>
</a></h2>

Open in new window


The default code was something like this:
<h2><span><span><span>After All-Star weekend, Damian <br> Lillard has another accolade</span></span></span></h2>
<br>
<a href="http://livedemo00.template-help.com/wordpress_44325/platea-dictumst-nulla-tincidunt-sapien/knicks-trade-brewer-sign-kenyon-martin/">Read More</a>

Open in new window


Thanks in advance
0
Comment
Question by:bmsande
  • 7
  • 5
12 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39615631
line 738 (or754) of this file:
http://www.fightingilliniblog.com/wp-content/themes/theme2062/style.css
Add opacity: 0.8 (or whatever you like).

.camera_caption h2 {
    display: inline-block;
    font-size: 32px;
    font-weight: 300;
    line-height: 40px;
    margin: 0 0 10px;
    opacity: 0.8;
    padding-left: 40px;
    text-transform: none;
}

This will make the h2 container and the text inside it semi-transparent. That's the way opacity in css works. That's the way it is on infowars.com. To get the text displaying at full strength over a semi-transparent background, you would have to absolutely position one element over top of another. Probably not worth the extra trouble.
0
 

Author Comment

by:bmsande
ID: 39615787
Thanks, i added that code in there, and that brought back the black background, but thats about it.  

I still need to figure out how to make the text white, and move the text and background to the bottom of the pic.  I can live without the transparency.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39616442
Why not just use the same Wordpress plugin that infowars.com is using?

Infowars.com is using the jdgallery plugin. When I Google "jdgallery" I see lots of references to SmoothGallery. Checking that out here, I see a sample gallery that looks exactly like the one on infowars.com. Going this route will be much easier than trying to re-engineer the current solution.
0
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

Author Comment

by:bmsande
ID: 39616933
thanks tommyboy, i downloaded and installed that plugin, but i'm not really sure how to replace the existing slider with the smoothgallery.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39617061
Is the current slider a plugin? How was it implemented? It should be a matter of replacing the shortcode for one slider with the SmoothGallery shortcode, [smoothgallery], in the Wordpress page editor. But it could be more complicated if the current slider is a jquery plugin, independent of Wordpress, possibly added to a page template. I really don't know what your situation is on the back end.
0
 

Author Comment

by:bmsande
ID: 39617092
Thanks, i understand you don't have much to work off of.  I purchased this theme as a template, so I really haven't dug into the code.  But i've attached the page-home.php code from the editor.  I see a reference to the slider...so would I change it there?

<?php
/**
* Template Name: Home Page
*/

get_header(); ?>
<header class="motopress-wrapper header">
	<div class="container">
		<div class="row">
			<div class="span12" data-motopress-wrapper-file="wrapper/wrapper-header.php" data-motopress-wrapper-type="header">
				<?php get_template_part('wrapper/wrapper-header'); ?>
			</div>
		</div>
	</div>
</header>

<div class="motopress-wrapper content-holder clearfix">
	<div class="container">
		<div class="row">
			<div class="span8" id="content" data-motopress-wrapper-file="page-home.php" data-motopress-wrapper-type="content">
				<div class="content_inner">
					<div class="row">
						<div class="span8" data-motopress-type="static" data-motopress-static-file="static/static-slider.php">
							<?php get_template_part("static/static-slider"); ?>
						</div>
					</div>
					<div class="row">
						<div class="span8" data-motopress-type="loop" data-motopress-loop-file="loop/loop-page.php">
							<?php get_template_part("loop/loop-page"); ?>
						</div>
					</div>	
				</div>
			</div>
			<div class="span4" id="sidebar" data-motopress-type="dynamic-sidebar" data-motopress-sidebar-id="home-sidebar">
				<?php dynamic_sidebar("home-sidebar"); ?>
			</div>
		</div>
	</div>
</div>

<footer class="motopress-wrapper footer">
	<div class="container">
		<div class="row">
			<div class="span12" data-motopress-wrapper-file="wrapper/wrapper-footer.php" data-motopress-wrapper-type="footer">
				<?php get_template_part('wrapper/wrapper-footer'); ?>
			</div>
		</div>
	</div>
</footer>
<?php get_footer(); ?>

Open in new window

0
 

Author Comment

by:bmsande
ID: 39617138
I just checked the 'Home' page, and the slider shortcode is not included, see below:

[carousel title="Featured News" num="8" type="blog" thumb="true" thumb_width="150" thumb_height="90" category="fibexclusive" excerpt_count="20" date="no" author="no" min_items="1" spacer="0" custom_class="featured-news"]

[spacer]
Latest News

[posts_grid columns="2" rows="4" order_by="date" order="DESC" thumb_width="362" thumb_height="172" meta="yes" excerpt_count="0" link="no"]

[button text="View all posts" link="http://livedemo00.template-help.com/wordpress_44325/blog/" style="primary" size="normal" target="_self" display="inline" icon="no"]

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39617436
page-home.php is a page template so it will be more difficult to add a different slider than the one embedded in the template. If you want to try anyway, here's what I would do.

Comment out this line in page-home.php:
<?php get_template_part("static/static-slider"); ?>
That should remove the built-in slider.

In the Wordpress page editor for the Home page, click the Add Media button and add your images and captions (if they are not already added by the built-in slider).

Still in the WP page editor, add a custom field to the Home page named smoothgallery with a value of on. (If custom fields options are not visible, go to Screen Options in the upper right corner and check custom fields.)

At the bottom of the WP page editor for the Home page you should see a box added by SmoothGallery that shows the html markup required to display the gallery with your image paths. Copy and paste this html into the position in the page-home.php file where you commented out the built-in slider.
0
 

Author Comment

by:bmsande
ID: 39617988
hrrmm... I was able to get rid of the normal slide, but I cant seem to get the smoothgallery working.  After I add the images and custom field, and the shortcode, i get nothing.  The smoothgallery box just contains the text:  "There aren't any images attached here."

I've tied inserting the images both individually, and as a gallery.  any ideas?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39618210
Ideas:

1.) When you are in the Add Media button popup, select "uploaded to this page" from the dropdown to see which images are associated with that page. Are they checked?

2.) Once you have images associated with that page and they are selected (they have check marks) just close the Add Media popup without inserting the images. Now click the Update button in the WP page editor and the SmoothGallery box should populate with html code. Paste that code to the page-home.php file.

3.) Don't use the smooth gallery shortcode. You will use the html markup directly instead.
0
 

Author Comment

by:bmsande
ID: 39618796
I ended up digging more into the CSS of the slider and was able to figure out how to tweek the font and positioning of the slider bar.  Thanks for the suggestions.
0
 

Author Closing Comment

by:bmsande
ID: 39618797
This helped me with a couple of the initial questions
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question