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 » Header configuration & styling »

[SOLVED] invisible floating buttons in %logo area


  #1  
Old Aug 28, 2010, 12:07 AM
thalo
 
9 posts · Jul 2010
biggest little city
I am working on placing my own icons to link to other sites. I have looked around to find the easiest way to do this and decided to try using the tutorial HOWTO: float a button over the header and have it change when hovering.

I was successful with putting in one of my buttons and moving it into place. i did move it from the header area to the %logo area. i figured if i duplicated the codes, changing the necessary names and files, i should be able to do this more than once to place multiples side by side. when i finished it all the space holders were there, but they were not side by side, and they were blank.

here is the site: http://colbystott.com . if you mouse over an area just to the left of the rss icon you will find one (the first) icon. the other two are on the left side, just above the home button and stacked vertically.

here is the code in the ATO>Style and edit HEADER AREA>Configure Header Area:

Code:
%image %logo

<div id="my_linkedin">
<a id="my_linkedin_image" href="http://www.linkedin.com/pub/colby-stott/6/222/592"><img src="./wp-content/themes/atahualpa/images/linkedin_blank.gif" alt="LinkedIn"></a>
</div>

<div id="my_facebook">
<a id="my_facebook_image" href="http://www.facebook.com/?ref=home#!/profile.php?id=631895698"><img src="./wp-content/themes/atahualpa/images/facebook_blank.gif" alt="facebook"></a>
</div>

<div id="my_flickr">
<a id="my_flickr_image" href="http://www.flickr.com/photos/47141901@N04/"><img src="./wp-content/themes/atahualpa/images/flickr_blank.gif" alt="flickr"></a>
</div>

%pages %cats
and that added into the CSS Inserts area:

Code:
/*-----------------------------------------------------------*/
/*---------------- MY link button CSS - START --------------*/
/*-----------------------------------------------------------*/

/*---------------------------------------------------------------*/
/*-- This positions the block that holds the buttons           --*/
/*-- change the margin-right/left %'s for horizontal position  --*/
/*-- change the margin-top to control the vertical position    --*/
/*---------------------------------------------------------------*/
div#my_linkedin {z-index: 4; position: relative; float: left; width: auto; margin-right: 10%; margin-left: 90%;
margin-top: -68px;

div#my_facebook {z-index: 4; position: relative; float: left; width: auto; margin-right: 20%; margin-left: 80%;
margin-top: -68px;

div#my_flickr {z-index: 4; position: relative; float: left; width: auto; margin-right: 30%; margin-left: 70%;
margin-top: -68px;
}
/*--------------------------------------------*/
/*-- This defines the space for the buttons --*/
/*--------------------------------------------*/
a#my_linkedin_image img {
height: 16px; width: 16px; border-width: 0; z-index:999;}

a#my_facebook_image img {
height: 16px; width: 16px; border-width: 0; z-index:999;}

a#my_flickr_image img {
height: 16px; width: 16px; border-width: 0; z-index:999;}

/*--------------------------------------*/
/*-- This is the normal buttons image --*/
/*--------------------------------------*/
a#my_linkedin_image img {
background: url(./wp-content/themes/atahualpa/images/linkedinLinkIcon16px.png) top left no-repeat;}

a#my_facebook_image img {
background: url(./wp-content/themes/atahualpa/images/facebookLinkIcon16px.png) top left no-repeat;}

a#my_flickr_image img {
background: url(./wp-content/themes/atahualpa/images/flickrLinkIcon16px.png) top left no-repeat;} 

/*-------------------------------------*/
/*-- This is the hover buttons image --*/
/*-------------------------------------*/
a#my_linkedin_image:hover img {
background: url(./wp-content/themes/atahualpa/images/linkedinLinkIcon16px_hover.png) top left no-repeat;}

a#my_facebook_image:hover img {
background: url(./wp-content/themes/atahualpa/images/facebookLinkIcon16px_hover.png) top left no-repeat;}

a#my_flickr_image:hover img {
background: url(./wp-content/themes/atahualpa/images/flickrLinkIcon16px_hover.png) top left no-repeat;} 

/*------------------------------------------------------------*/
/*---------------- MY login button CSS - END  ----------------*/
/*------------------------------------------------------------*/
can someone please advise how to make my icons show up, and position them side by side.

cheers
colby
  #2  
Old Aug 28, 2010, 05:32 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try adding the closing '}' to your CSS
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Aug 28, 2010, 10:13 AM
thalo
 
9 posts · Jul 2010
biggest little city
i had gone through to try and see what was missing, making sure my file names were correct, etc. I missed that. thanks

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
Positioning widget onto logo area creates extra spacing in the overall header area cab262 Header configuration & styling 1 May 20, 2010 02:14 PM
How do I put the search box and subscribe buttons within header (not logo line)? saulta Header configuration & styling 0 Jan 31, 2010 09:56 AM
How to replace newer RSS & Comments buttons with colored version buttons? jenb RSS, Feeds & Subscribing 3 Oct 25, 2009 06:14 AM
how to create the background colour of the buttons invisible? rinoa3108 Page & Category Menu Bars 9 Aug 9, 2009 03:06 PM


All times are GMT -6. The time now is 01:03 PM.


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