• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 980
  • Last Modified:

Need CSS assistance with photo slider in wordpress theme

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
bmsande
Asked:
bmsande
  • 7
  • 5
1 Solution
 
Tom BeckCommented:
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
 
bmsandeAuthor Commented:
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
 
Tom BeckCommented:
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
bmsandeAuthor Commented:
thanks tommyboy, i downloaded and installed that plugin, but i'm not really sure how to replace the existing slider with the smoothgallery.
0
 
Tom BeckCommented:
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
 
bmsandeAuthor Commented:
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
 
bmsandeAuthor Commented:
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
 
Tom BeckCommented:
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
 
bmsandeAuthor Commented:
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
 
Tom BeckCommented:
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
 
bmsandeAuthor Commented:
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
 
bmsandeAuthor Commented:
This helped me with a couple of the initial questions
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now