Show only title on the “Featured” slideshow

By
Mitko Haralanov
– January 14, 2010Posted in: Featured, WordPress
Updated: March 15, 2011 02:49 There have been several newer versions of Arras since the original post was published and things have changed a bit. Therefore, I’d like to post an [...]
Updated: March 15, 2011 02:49

There have been several newer versions of Arras since the original post was published and things have changed a bit. Therefore, I’d like to post an updated method to make this change.

This time, instead of changing the Arras theme’s code, what we’ll do is add a couple of additional CSS rules in Arras’ user.css (CSS file where users can add their custom rules without the need to change original Arras files). The file is found in the top level of your Arras theme installation.

To achieve the same change with the current version of Arras (1.5.0.1 at the time of this update), add the following rules to your user.css file:

.featured-entry { height: 44px; top: -44px; }
.featured-entry .entry-summary { display: none; }

The first rule makes the black title bar smaller and moves it down so it lines up with the rest of the frame. The second rule hides the post summary. It is worth nothing that this change does not prevent the PHP engine doing the work of generating the HTML for the post summary box. It’s just hidden by the CSS rule.

I really like the Arras theme for WordPress. It looks very professionally done and it is very clean. I especially like the “Featured” slideshow presented on the front page. It makes it [the frontpage] look like the site was done for a big company, which paid a lot of money to some design company to make their website.

I did, however, decide to modify the theme a bit and hide the text that it showed on the post overlay. I wanted the slideshow to only show the title of the post and to hide any text from the actual post. Fortunately, the change was extremely easy to make and it take just a few minutes.

The files that need to change are <theme_dir>/home.php and <theme_dir>/css/styles/default.css, where <theme_dir> is the directory of the installed Arras theme. In <theme_dir>/home.php, I commented out the line which adds the post’s text (well, only the first line of it) to the overlay:

                <a class="featured-article" href="<?php the_permalink(); ?>" rel="bookmark" style="background: url(<?php echo arras_get_thumbnail($w, $h); ?>) no-repeat;">
                <span class="featured-entry">
                    <span class="entry-title"><?php the_title(); ?></span>
                    <!-- <span class="entry-summary"><?php echo arras_strip_content(get_the_excerpt(), 20); ?></span> -->
                                        <span class="progress"></span>
                </span>
                </a>

I decided to comment it out instead of just removing it because it accomplishes the same effect and I can always revert the change, if I decide. I did the same thing in the StyleSheet – made a copy of the original style definition and commented it out, so I don’t loose it. Below are the two changes that need to be made to the StyleSheet in <theme_dir>/css/styles/default.css:

/* featured slideshow */
.featured                    { background: url(../../images/techblue/content-bg.jpg) repeat-x #FFF; border: 1px solid #CCC; padding: 10px; margin: 0 10px 10px 0; height: 250px; }
/* #controls                { position: absolute; float: left; z-index: 100; width: 630px; padding-top: 75px; } */
#controls                   { position: absolute; float: left; z-index: 100; width: 630px; padding-top: 95px; }

#controls .next, #controls .prev     { text-indent: -9000px; width: 30px; height: 30px; display: block; z-index: 1000; }

and

.featured-article         { display: block; width: 630px; height: 250px; text-decoration: none !important; }
/* .featured-entry       { position: relative; top: 165px; overflow: hidden; background: url(../../images/overlay.png); height: 85px; color: #a7a7a7; padding: 0; display: block; } */
.featured-entry          { position: relative; top: 205px; overflow: hidden; background: url(../../images/overlay.png); height: 45px; color: #a7a7a7; padding: 0; display: block; }
.featured-entry .entry-title     { color: #FFF; padding: 10px 15px 5px; display: block; font-size: 16px; font-weight: bold; }

The first change in the StyleSheet moves the control arrows 20 pixels down. I did this so they can appear vertically centered, now that the height of the title overlay has been reduced by 40 pixel (done in the second change). The second change not only reduces the height of the overlay but also moves it down to it sill appears at the bottom of the “Featured” slideshow.

That’s all that’s needed. Enjoy!

VN:F [1.9.13_1145]
Rating: 2.3/5 (7 votes cast)
VN:F [1.9.13_1145]
Rating: -2 (from 2 votes)
Show only title on the "Featured" slideshow, 2.3 out of 5 based on 7 ratings

Related Posts

Tags: ,