Jump to content


Photo
- - - - -

Add Title to Carousel

carousel title Add

Best Answer ratputin , 12 July 2013 - 01:45 AM

I have implemented an ugly work around...but it works in IE8-10, FF, Chrome & Safari as well on an iPad. In the end, I have done the following...

 

Add this code to plugins > page lines-customize > functions.php

 
add_action('pagelines_inside_top_carousel','add_carousel_title');
function add_carousel_title() {
printf( '<p class="cat-see-more">&nbsp;</p>' . the_category( ) );
}

*note: the p class was needed in order to have the carousel position properly under the new title.

 

Add this CSS to the Child Theme Stylesheet:

 
#carousel .content ul li a span.list-title { 
line-height:10px;
/* The following was added because alpha background was acting wonky in IE8 */
height:115px;
padding-top:50px; 
bottom:-75px;
background-image: url(/wp-content/uploads/2013/07/pixel_000-75pct.png);
background-color:transparent;
 }

#carousel .content ul li a:before { content:"See more in "; } /* Adds verbiage before the_category */

.section-carousel .content ul li a img { margin-top:-25px; } /* hides the verbiage that shows up above the carousel pictures */

.cat-see-more { margin-bottom: 20px; line-height:35px; } /* Added this for some position love */

This isn't the most elegant solution, but it does the job until a better one comes along. Thanks to all who helped along the way.

 

~Rat

 

Go to the full post


  • Please log in to reply
34 replies to this topic

#21 Danny

Danny

    Is Awesome!

  • Moderators
  • 17124 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 19 September 2012 - 07:59 AM

Hi,

Can you check to see if the text color is set to black and therefore would be unable to see it. You can check this in Firebug/Google Chromes web dev tool.

#22 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 19 September 2012 - 06:53 PM

Danny,
It is not black....lol...always good to cover the basics. :) The "h1" tag is set to "#fff". I also do not see the cat name in the Elements code.

Visual reference in case I missed something (I have highlighted the title to try to reveal any text):
Posted Image

#23 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 September 2012 - 10:40 PM

Honestly, I think this is going to require the assistance of one of our pro developers found at

Please Login or Register to see this Hidden Content



Apologies, but our moderators aren't necessarily developers and validating or correcting a hook like this could result in errors on your site that I for one, would not like to create. Likely, this is a quick solution one of them can provide.

#24 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 20 September 2012 - 02:19 AM

Don't give up on me Rob :). I really do not want to go that route if possible. FYI - There has to be some sort of conflict in the framework. The Facebook button will not work in the Sharebar correctly either ( I started a separate thread, but doubt an answer will be found ).

Seems like every time I come up against something with this platform, I have to solve it on my own. If you've got an inkling about the hook, I'm willing to give it a go...and won't hold you accountable :).

Rat

#25 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 25 September 2012 - 12:27 PM

I just tested the code evan posted and tested cats up to 3 levels deep

Please Login or Register to see this Hidden Content



Please Login or Register to see this Hidden Content



for ref the code i used is:

Please Login or Register to see this Hidden Content

and i added it to pagelines-customize.

#26 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 26 September 2012 - 02:10 AM

Thanks for the input Simon. I have tried it with the code you provided and still no result. However, the client wants to launch the site late this week/early next so I am going to table this until then. Afterwards, the site will be accesible and maybe something will become evident.

Thanks all for the help. I'll be back after the launch.

Rat

#27 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 26 September 2012 - 03:22 AM

Thanks for keeping us posted.

#28 quinntinm

quinntinm

    Super Member

  • Members
  • 121 posts
  • Country: Country Flag

Posted 11 July 2013 - 11:50 AM

Hi there.

I tried adding this as per the post by batman to add a title, but it broke the site. Any ideas?

 

add_action(&#39;pagelines_inside_top_carousel&#39;,&#39;add_carousel_title&#39;);
function add_carousel_title() {?>
YOUR TITLE HERE
<?php
}



#29 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 July 2013 - 03:33 PM

Hi, there may be some errors in that code, due to coversion to ascii

 

Try

Please Login or Register to see this Hidden Content



#30 quinntinm

quinntinm

    Super Member

  • Members
  • 121 posts
  • Country: Country Flag

Posted 11 July 2013 - 04:50 PM

BRILLIANT!!

thank you.



#31 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 11 July 2013 - 11:11 PM

Please Login or Register to see this Hidden Content

 

 

Rob,

I saw this pop up today and decided to take another crack at it, too. Here's what I have "almost" working:

 

 

Please Login or Register to see this Hidden Content

The reason I say "almost" is that the "SEE MORE IN" verbiage shoots to the right of the category name. It seems to be a result of the ul float:left that applies to section#carousel .content ul li and I cannot remove it as it is the same class as the images in the carousel. Is there a way to attribute a class to "the_category" in the code above? If so, I could give it a little CSS love. OR is there another way to add the "SEE MORE" text so that is would appear to the left of the_category? FYI, I even used :before { content:"See More In" } but was stonewalled when it applied to the images in the carousel.

 

TIA

Rat



#32 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 July 2013 - 11:42 PM

Hi there, looking at the code above there is a class for the p tag, cat-see-more. You should be able to use that for your css.



#33 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 12 July 2013 - 12:56 AM

Hi there, looking at the code above there is a class for the p tag, cat-see-more. You should be able to use that for your css.

 

Hi James!
I added it, and do use it for the "See More" verbiage, but it does not wrap "the_category". "the_category" is wrapped with "section#carousel .content ul li a". section#carousel .content ul li a is also used for the images in the carousel so I cannot add a :before to the class without it showing above the images in the carousel as well. Any idea how to get another class on "the_category"?

 

Rat



#34 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 12 July 2013 - 01:45 AM   Best Answer

I have implemented an ugly work around...but it works in IE8-10, FF, Chrome & Safari as well on an iPad. In the end, I have done the following...

 

Add this code to plugins > page lines-customize > functions.php

Please Login or Register to see this Hidden Content

*note: the p class was needed in order to have the carousel position properly under the new title.

 

Add this CSS to the Child Theme Stylesheet:

Please Login or Register to see this Hidden Content

This isn't the most elegant solution, but it does the job until a better one comes along. Thanks to all who helped along the way.

 

~Rat

 



#35 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 July 2013 - 01:27 PM

You're very welcome.







Also tagged with one or more of these keywords: carousel, title, Add