Solved

Need CSS assistance with photo slider in wordpress theme

Posted on 2013-10-31
12
929 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Why isn't my DIV and Form centering? 1 28
Regular Expression needed 4 40
CSS question 4 56
SSL unsecure page mystery 17 45
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

739 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