Jump to content

Archived

This topic is now archived and is closed to further replies.

vanessabt

redesigning a site with pagelines

Recommended Posts

vanessabt

Hi,

I was wondering if you could help me.  my company has a proprietary platform that use to build sites on that we call pebble.  Everything is code and it is only good for sites that really a client would not want to have the ability to update very often.  So I am taking one site we have that was in development and rebuilding it on pagelines but I am not sure how to get the same functionality. If that makes sense?

 

Here is a link to the site that my developer built on the pebble platform (he is much better at this than I am but we have to many projects for him to do now so I have to handle this one) client pebble site 

 

I still have a lot of work to make the pagelines version look like this but my major question is... if you scroll to the bottom you see 3 boxes with images, if you scroll over (hover) them the word portions under the photos light up yellow.

 

How do I make that happen the same way in my pagelines site?  This is what I have so far. I used images that have solid yellow because I was not sure how to get the text only to change to yellow from the image file when you hover.  I have images that look the same as well... but one is with no text highlighting and the other is with the text highlighting.  here is a link to the site I am working on, click here

 

I look forward to hearing your ideas on this.  i am sure I will have more questions as I continue building but this one has me stumped.

 

thanks.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Well the way that hover styling is achieved, as far as I can tell is most likely using Javascript or jquery, as the whole thing is an image and the image when hovered over is being replaced with a different image. So to achieve the same effect, you're going to need to follow the same principle used on that site or see some of the suggestions here - http://stackoverflow.com/questions/17507870/jquery-image-changing-on-hover

 

In my opinion, it would be much simpler if you just used an image without the text and added the text beneath it wrapped inside its own div, then you add target that div and use custom CSS on hover to change the styling.

 

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
vanessabt

you are right on.  and I think I would rather used your suggestion.  so I can modify the image with no text and make 3 columns and put them in side with a text box underneath.  Can you give me a sample of the div I may need to use?  I assume that would go in the text section directly or should it go in the customization section?

 

Also, that leads into another problem.  I have a transparent style on the column but if I can't pull more columns inside that and it creates a break in the consistency of the background.  How would that be addressed?  Because we want not a complete white background of the content area but all these items need to be inside the same box.... does that make sense? 

Share this post


Link to post
Share on other sites
Danny

You wouldn't want to use a TextBox, a TextBox is supposed to be used for Text and basic HTML. To achieve what you want, you will need to use HTML and CSS and therefore, you will want to use a MediaBox or NextBox.

 

For example, you will want to add something like this:

 

<div class="my-box">
  <img src="" alt="">
</div>
<div class="my-box-link">
  <a class="" href="">
    <h3>Hello World!</h3>
  </a>
</div>
 
You will then need to add some styling, especially around the my-box-link, where you're going to want to add a background-color etc.. and then use :hover in your custom CSS to apply a change in the background color on hover.
 
I am not sure what you mean in regards to the consistency of the background. Seeing this topic is now resolved, can you create a new topic regarding this issue. As our forum policy is one question per topic, this is for searching indexing reasons.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×