Link in footer Forefront theme
-
Hi everyone,
I need some help with the following: I’ve created a button (which actually just displays as an underlined text, I don’t know why) in the footer of the forefront theme, but now I need the CSS code to place it on the far right side of the bottom of the footer where it also says: Blog on wordpress.com / The forefront theme. Can anybody help me with the code needed please?
The blog I need help with is: (visible only to logged in users)
-
Hi there,
If link that you mean is “Algemene voorwaarden”, then you can try use this css;
.footer-widget-area{ position: relative; } #text-3 .textwidget a{ position: absolute; bottom: -50px; right: 90px; font-size: 12px; border: none; opacity: 0.75; } #text-3 .textwidget a:hover{ opacity: 1; }I hope it will works. Please let us know if there are any other questions.
-
-
However: 1 more question. If I do this, the existing map and fb wall in the footer become smaller in size. I guess because the text widget with the button (link) in it keeps “existing” in the footer widget area.
Is there somehow that I could include the link in another widget area, like the front page widget area one for example, and then move it down to the preferred position using CSS? That way, in theory, it wouldn’t affect the footer area and/or the rest of the site I guess.
Thx again for your help?
-
Hmm.. it’s weird, because I just apply font-size for #text-3. Could you apply it in your website so I can see smaller thing issues?
Yes, we can do it. But we need to adjust it with specific css, then you need to put the links on widget area first. So I can adjust it with css.
-
Thx for your quick reply! had to go to bed on my end, lol.
I included the link in a footer text widget. That works fine. Please see the website. But again the map and fb wall are smaller now.
Then I applied your css code. That worked fine the first time but now seems to not work anymore?
-
Hi there, sorry took so long. Just took a break and had a dinner :D.
Are you sure you already applied the css code? Because I can’t see the css on web inspector.
-
Hi, we´re in completely different timezones I guess. The wonders of the internet!
I have put the code in the CSS field in the customization window and clicked “save”. I did that again but it doesn’t seem to work…
-
Yes, sorry about that. It makes our communication slower. Actually it’s 3AM here.
It’s weird. Are you using other custom css code? Maybe you can check open/close tag. Or let WordPress staff help you.
-
Hi,
no, no other code than the one I used for the button in the text field in the footer.
included the html open and close tag. no difference. Strange that it worked before and now no longer. Any idea as to how to get in touch with WP staff? Thx in advance!
-
-
nizamilputra – thanks for trying to help out here!
Looks like amayagasull’s button is in the #text-7 widget now (instead of #text-3), so the code needs to be adjusted to reflect that.
So try adjusting the CSS nizamilputra gave you to this instead:
.footer-widget-area{ position: relative; } #text-7 .textwidget a{ position: absolute; bottom: -50px; right: 90px; font-size: 12px; border: none; opacity: 0.75; } #text-7 .textwidget a:hover{ opacity: 1; } -
-
-
Thank you both! This worked great! Now we just have to find a way to make the two “windows” in the footer (the map and the FB wall) bigger again, like they were before introducing the text widget.
Your help is greatly appreciated!
Amaya
-
Glad that worked!
Try this to resize the two widgets so they take up equal amounts of space in the footer widget area:
.three-widgets .widget { width: 50%; } -
You may also want to wrap that CSS in a media query so it only applies to larger screens, so replace what I gave you just above with something like:
@media screen and (min-width: 570px) { .three-widgets .widget { width: 50%; } } -
Wow Kathryn, you are a true happiness engineer! This works like a charm. The last thing re this topic I take the liberty to bother you with, is how I could get the font, size and hight of the “algemene voorwaarden” in the footer equal to WP’s text there (ie Blog op WordPress.com. Het Forefront thema).
Again, many thanks for your help!
-
Oops, and also, I see that on mobile devices, the Algemene voorwaarden text now lays on top of WP’s text in the footer
-
Wow Kathryn, you are a true happiness engineer! This works like a charm.
Great!
The last thing re this topic I take the liberty to bother you with, is how I could get the font, size and hight of the “algemene voorwaarden” in the footer equal to WP’s text there (ie Blog op WordPress.com. Het Forefront thema).
Did you already get this sorted out? The font/size already look the same to me:
Oops, and also, I see that on mobile devices, the Algemene voorwaarden text now lays on top of WP’s text in the footer
I’d recommend that you restrict the repositioning you did to large screen sizes only, by adding a media query.
So replace this:
.footer-widget-area{ position: relative; } #text-7 .textwidget a{ position: absolute; bottom: -50px; right: 90px; font-size: 12px; border: none; opacity: 0.75; } #text-7 .textwidget a:hover{ opacity: 1; }with this:
@media screen and (min-width: 930px) { .footer-widget-area{ position: relative; } #text-7 .textwidget a{ position: absolute; bottom: -50px; right: 90px; font-size: 12px; border: none; opacity: 0.75; } #text-7 .textwidget a:hover{ opacity: 1; } }
- The topic ‘Link in footer Forefront theme’ is closed to new replies.
WordPress.com Forums 