Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Create header widget area to the left of the RSS icon in logo area


  #1  
Old Sep 30, 2014, 09:15 PM
elisabeth999
 
3 posts · Sep 2014
Hello:
I would like to add social media icons to the left of the RSS icon in the logo area of the header.
Based on my research in the forums (hours and hours), I understand that the best way to do this is to create custom text widgets which link to the social media icons in question.

Here is what I have tried.

I created two dynamic widgets in the header area, as follows:

"%pages <?php bfa_widget_area('name=Header widget area&cells=2&align=2&align_2=3'); ?> %logo %bar1 %image %bar2 %cats"

Unfortunately, this creates widget areas above the blog title, just under the Pages menu, which is not what I want.

I am running Wordpress 4.0 and Atahualpa 3.7.18.
My site is here: http://www.thepassionateprojectmanager.com/

I am looking to add social media icons exactly to the left of the RSS icon.

Thanks.
  #2  
Old Sep 30, 2014, 10:25 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You can use CSS to position the media icons.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Oct 1, 2014, 01:42 PM
elisabeth999
 
3 posts · Sep 2014
I inserted this code in the "ATO/Add HTML CSS Inserts":

#header_widget_area
{
bottom: 90%;
right: 10%;
position: absolute;
}

However, on my iPad the icon was positioned differently than on desktop computer.

When I tried "position:relative" instead of "position:absolute", I got a large white space in between the Pages Menu and the logo area.

Substituting px for % did not help.

Any advice as to what tweaks I can do to the CSS to make it work? I'd like the icons to land right next to the RSS icon in the BFA Subscribe area.
Thanks.
  #4  
Old Oct 1, 2014, 03:18 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try
HTML Code:
#header_widget_area 
{
top: -70px;
height: 0;
position: relative;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 1, 2014, 03:58 PM
elisabeth999
 
3 posts · Sep 2014
Wonderful. Worked like a charm. Thanks!

Bookmarks

Tags
header, social media buttons, widget area style



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Create a new Widget in Header Area only in Homepage Nasti Sidebars & Widgets 12 Nov 19, 2013 08:46 AM
[SOLVED] clickable facebook icon in logo area pmac Header configuration & styling 7 Sep 22, 2011 02:56 PM
[SOLVED] Can't get rid of text in logo image area in header area unadoyle Header configuration & styling 2 Sep 2, 2010 05:43 AM
Positioning widget onto logo area creates extra spacing in the overall header area cab262 Header configuration & styling 1 May 20, 2010 02:14 PM
[SOLVED] An easy way to have a logo over left sidebar area of header? mgclark Header configuration & styling 11 Jul 29, 2009 06:36 AM


All times are GMT -6. The time now is 08:00 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.