Jump to content

Archived

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

richardjacruz

Link not working in header using hook

Recommended Posts

richardjacruz+    4
richardjacruz

Please look at the site at http://www.connectingonline.org. I place a pair of dogtags and a phone number using a Pagelines-Cutomize hook. Unfortunately, I can't get the dogtag to link to the "/donate/" page. When I inspect the element, it appears that where I placed this covers the entire header area. Is there a way for me to get around this? I'd also like to make the dogtag animate as a rollover. I tried putting in basic HTML rollover script, but it broke the site on line 47 of the pagelines-customize/functions.php file.

 

I saw some posts about a plugin called "Branding," but I didn't see it available for Framework (only DMS). Any recommendations?

 

Thanks.

Share this post


Link to post
Share on other sites
Jake    74
Jake

Hi richardjacruz - You can sort of force the primary branding elements behind your donate button by adding the following to your custom CSS:

 

.section-branding .branding_wrap {z-index: -1;}

 

That will bring the donate button to the forefront which will allow folks to click on it. For the hover, you could probably get away with swapping out the image on hover with something like:

 

.visit a:hover 

 

Finally, if you choose to try a different approach, the Business Branding section comes in two flavors, one for Framework and one for DMS! http://www.pagelines.com/shop/sections/business-branding/


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

Cool. Thanks, Jake. Much appreciated. I kinda thought I might have to fool around with the z-index, but I didn't know how to do so. Would I add that custom CSS to the functions.php file or to the Pagelines Customize section? Sorry if that sounds like a dumb question.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

Any css you can add to the pagelines css section inside the wp admin dashboard or into the style.css if using the base theme or customize plugin.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

I hope it's appropriate to add to this thread. For the same element on the site, is there code I can implement that would make the donate button and phone number disappear at the first responsive design breakpoint?

Share this post


Link to post
Share on other sites
James B    436
James B

Has the site url changed? it's no longer visble on http://www.connectingonline.org


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

Sorry, I'm a dufus. It's now live at salutethearmedforces.org. Thanks.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

If you want the donate button and contact info to be removed upon responsiveness, you will need to use @media queries and apply it to your custom CSS using the display property and value none;

 

For more information see here - http://css-tricks.com/css-media-queries/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

I tried adding the following to the custom CSS:

 

@media all and (min-width: 995px) {
  #section-branding .branding_wrap {
    display: none;
  }
  }

 

is that correct? It didn't seem to work.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thats almost correct. However, if you want to remove the whole branding section you will need to use this:

 

@media all and (min-width: 995px) {
  #branding .branding_wrap {
    display: none;
  }
  }

 

However, if you wish for only the donate button and contact info to be hidden, you will need to wrap them inside a div with a unique class, then add that class to the code above, replacing the .branding_wrap class.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

Ah, so in the hook I would create a div with a class, and then I would replace "#branding" with that div instead, right?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No, don't replace #Branding, you already have a class assigned to your div called .visit so you can target that in the @media query like so:

 

 @media all and (min-width: 995px) {
  #branding .visit {
    display: none;
  }
  }
 
That should do the trick.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

Dude, that was SO awesome. Worked like a charm! Set it to "max-width" to get it to work. Thanks a million!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem, happy to help!

 

I was just thinking you could actually wrap the div with the following classes and you wouldn't even need the Media Query.

 

In your div for the donate, contact info you have .visit as a class, next to it add hidden-phone.

 

So it looks like this:

 

[code]

<div class="visit hidden-phone">

[/cpde]

 

By adding that class, it will make that div not be displayed when viewing on a mobile device.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

I think I may still need the media query because at the break point I set it the donate would start to cross over the branding logo. I'll save this, however, for future projects where that's not an issue. Thanks a million. Great job, brilliant mind.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

Sorry to bother you about this again. However, I noticed that now the social media links don't work because that new div overlays those buttons. Is there a fix for that you can recommend? I tried to do this:

 

.section-branding .icons {z-index: -2;}

 

to make that work, but it didn't.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

The issue is caused by your custom CSS or hook, you will need to add custom styling to the hooks content to resolve this issue. Unfortunately, we are unable to provide support to user generated code.
 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardjacruz+    4
richardjacruz

Since I couldn't get this to do what I wanted it to do, I purchased "Business Branded" through the store. I tried uploading it, and I'm told that it's not a valid plugin. How do I install it. The file I downloaded is section-busines-branding.zip. Inside was a folder "business branding", and inside that were a bunch of PNG files, a section.php file, a style-LESS file, and and info.txt file. Is something wrong here? I did make sure to download the Framework "flavor."

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Business Branding should to my knowledge install using the Wordpress Plugin installer. If this isn't the case, please create a new topic in our store forums and the developer will be notified.

NOTE: Be sure to use the prefix your topic with the correct product, this will then inform the developer of the extension.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Grant Turck
      By Grant Turck+
      What file do I need to add code to in my pl-framework-pagelines child theme to insert script after opening body tag on every page?
      Can you someone provide me with the code also?
    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
    • JP
      By JP+
      Hello,
      How can you set the translations with platform5, the parts that are not in pages or posts? Texts and images…
    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
    • Barnaby Skinner
      By Barnaby Skinner+
      Hey team,
      Really simple question: where would I add code to a specific page header? I can see in the settings I can add code to the global header, but can't see how to do it for a single specific page. It's related to facebook pixel tracking
      Cheers
×