Solved

Need CSS assistance with photo slider in wordpress theme

Posted on 2013-10-31
12
884 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now