• 0
Sign in to follow this  
Followers 0

Link not working in header using hook


Question

Posted · Report post

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

19 answers to this question

  • 0

Posted · Report post

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/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0