Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS or Short Code to setup Clickable Areas in Headers
- This topic has 11 replies, 2 voices, and was last updated 8 years, 4 months ago by sunnypapabear.
-
AuthorPosts
-
December 3, 2015 at 8:12 pm #172668sunnypapabearMember
I am running the Prose theme; which is NOT HTML5 (unfortunately I discovered this after I had already completed a lot of development). The below is one of the very last things I need to do before taking the site live, so too late to change themes. Plus already invested a ton of time and money into Prose.
I have a variety of Headers for my development site http://PeterCruikshank.com/dev , based upon specific pages. While the Headers may be different, depending upon the Page/Post, they are all the same size. The Headers are Backstretch images with transparent backgrounds.
What I want to do is setup two Clickable areas on the Headers. One area would be the over the Text that would take the User back to the Front/Home Page. The second Clickable area would be over the image (me and a dragon) that would bring up a larger image file. Unfortunately, you can't make a Backstretch image Clickable so I need to do something like using CSS or some other Code to identify Clickable areas and then establish the links for these areas.
The Clickable areas could be setup to apply the same to all the Headers on the entire website, though if it were possible to specify different areas for different Pages, that would be very kool.
Any thoughts would be really appreciated. I have managed to setup this entire site myself, but not an expert by any means, with HTML, CSS, Short Codes. Mostly figured it out with a lot of Plugins and people from the Forum "spelling out" exactly how I needed to implement the CSS, HTML, Short Code and where (generally in the Genesis Custom Code, but not always).
http://PeterCruikshank.com/devDecember 4, 2015 at 11:33 pm #172808jodzeeeMemberSince your (hidden) title is already a clickable link you just need to make it cover the area you want clickable. Try adding this to your CSS. You can get rid of the pink background, it's just showing you where the area is.
.header-full-width #title-area #title a { background: pink; float: left; display: block; width: 73%; padding: 60px; }
You can use this CSS to make your (hidden) description fit in the area next to it. However, it's not clickable by nature, so you'll need to see if you can modify that.
#title-area #description { background: slateblue; display: block; float: right; padding: 76px 0; margin-right: 50px; width: 21%; }
Brad Dalton has a tutorial that might help you make it clickable. I did not try it myself.
http://wpsites.net/web-design/add-custom-font-clickable-site-description-with-link/Something else you might try is to to add a "Header Right" widget, add the link to that, and style it to fit in that area.
Hope that helps!
December 5, 2015 at 7:38 pm #172850sunnypapabearMemberOkay, I separated the image of me/dragon from the image of the text and put the me/dragon in a Right Header. Works fine and I can click on it and get to the Link.
However, if you look at the Front Page the text image extends way too far to the right. I tried to cut it back, but it just stretches all the way to the right? I played with the CSS code you gave me, but can't seem to get the right settings :0( And once I figure out how to make the text fit in the space I want, how do I make it clickable?
Again any further advice would be more than welcomed.
December 7, 2015 at 12:19 pm #173033jodzeeeMemberTake the padding off the #title-area, change the width to 80%, and add:
#title-area #title a { background: pink; display: block; height: 190px; }
The title is already clickable - what you're doing with the CSS above is styling the link so that it's the size and position you want to be clickable.
December 7, 2015 at 12:34 pm #173035sunnypapabearMemberWhere do I specify the link for the Clickable Title? Right now I don't think there is anything set for it.
December 7, 2015 at 12:44 pm #173037jodzeeeMemberBy default, the title area is set up to be clickable and go to the home page. There is a text-indent of -9999px that hides the text (which is currently set to your name), but the area itself is clickable and that's what we're formatting to be the right size/position. This is why I'm making the background pink, so that you can see the area you're dealing with.
Instead of splitting the image in two, you could use a similar approach and just have text in the right header and hide that, but still have a clickable link.
Just use Chrome Dev tools to find the right tag to format and play around with it.
December 7, 2015 at 1:10 pm #173048sunnypapabearMemberThe problem is that the Title area is NOT clickable :0( I am trying to figure out why and how to reset it so it will be Clickable once again.
December 7, 2015 at 1:16 pm #173051sunnypapabearMemberIf I include the "#title a" as part of the custom code the title disappears. Right now I have the code with just the
"title-area" and the pink block, without the "#title a" The settings are:#title-area {
text-indent:-9999px;
float: left;
width: 65%;
padding: 75px;
display: block;
background: pink;
}The test-indent:-9999px; is so that the title itself doesn't appear on the page and only used for browsers.
December 7, 2015 at 1:28 pm #173052jodzeeeMemberYou need to style
#title-area #title a
because that is the link.First remove the padding and change the width to 80% on #title-area.
December 7, 2015 at 1:32 pm #173054sunnypapabearMemberI put the "#title a" back in and the image disappears :0(
December 7, 2015 at 1:47 pm #173056jodzeeeMember#title-area #title a
is a separate rule. The only change to #title-area was to remove the padding and change the width.Change that back to this (I think that's what it was before):
#title-area { text-indent: -9999px; float: left; width: 80%; display: block; }
But then also add this as a new rule:
#title-area #title a { background: pink; display: block; height: 190px; }
December 7, 2015 at 1:53 pm #173057sunnypapabearMemberThat did it :0)
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.