Abundance Theme Social Icons & Header « Support Forum | Kriesi.at

Support Forum » Abundance

Abundance Theme Social Icons & Header

8 posts from 3 voices

Started 1 year ago by peterhoppe21
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

peterhoppe21
Member

Hi, after looking through this forum for several hours, I finally figured out how to get my logo to appear correctly. Now I am trying two more things:

1) Social icons: I swapped out the theme icons for some others, but the new icons are 32px x 32px and thus are not displaying completely. I would like to get rid of the transparent effect so that the icons look the same with or without hovering over them. I also tried adding a YouTube icon, but don't quite seem to have it. Here's what I added to the header.php file (spacing added):

<li class='youtube'> < a href = "http://www.youtube.com/user/cantreadgood/" > YouTube < /a>

And here's what I added to the custom.css file (NOTE: I deleted "transparent" from the code, hoping to get rid of the transparent effect):

.social_bookmarks .youtube a{background: url(../images/skin-minimal/icons-youtube.png) 0 0 no-repeat;}

How can I get rid of the transparent effect for the social icons, properly set up the Youtube icon, and display each icon fully?

2) I would like to add a second picture to my header (since my logo is so big, I have a huge space in between the social icons and logo anyways). Is there a way I can add a second png picture to the header that links to another page? I was going to do a cutout of the family and link it to their blog.

Here's the link to the site in development: http://www.garetii.com/faithmtnfarm2/

Thanks for your help. This is a great theme to work with.

Posted 1 year ago #
Mya
Hi peterhoppe21,

Let's see what we can do here. :)

Transparent effect:
The transparency issue stems from the the opacity setting not the background. In this case, the default value for opacity is 0.3. You want there to be no transparency so you would use 1.0. (See code below.)

Icon size:
By default, the social bookmark icons are set to 24px width/height within the CSS. So you'll need to change the CSS as well as the images.

Fortunately, both of these issues use the same selector so all you need to do is paste this code in your custom.css.
```
.social_bookmarks a {
    height: 32px;
    opacity: 1.0;
    width: 32px;
}
```
YouTube icon:
I'm pulling up a 404 error when I try loading the image in my browser. Is the file path you list in the CSS correct?

More than likely, you'll need to add some spacing between the social bookmarks and the search box so I'm pasting the code below to do that. I'm also leaving the height declaration in this because that needs to match the icon height as well.
```
.social_bookmarks {
    float: left;
    height: 32px;
    right: 231px;
    top: 70px;
}
```
Now right: 231px; is what you'll need to adjust to add the spacing. I would suggest trying 261px at first then increasing to 271px, 281px, etc if you're not happy with the amount of space.

I'll answer your second question in another post.

Regards,
Mya
Posted 1 year ago #
Mya
Hi peterhoppe21,

To add another photo to the header you have to edit header.php to include something like this:

<div class="headerphoto"><a href="link-to-the-url"><img src="link-to-the-image-url" alt="description-of-image-here-if-you-want" /></a></div>

Then in your custom.css you would need to add something like this:
```
div.headerphoto {
    display: block;
    float: left;
    height: 170px;
    position: absolute;
    right: 500px;
    top: 0px;
    width: 217px;
}
```
You would need to adjust height, width and right accordingly. Note I haven't tested this so you may have to make some adjustments to other pieces of code to make the photo fit.

Hope this helps!

Regards,
Mya
Posted 1 year ago #
peterhoppe21
Member

Thanks for your help Mya, the opacity and size adjustments worked like a charm for the social icons. My Youtube icon is still not working though. Instead, when I click the icon, it's trying to load an image in lightbox. It should go to the Youtube channel, just like the Facebook icon goes to a Facebook page. Again, here's my css:

.social_bookmarks .youtube a{background: url(../images/skin-minimal/icons-social-youtube.png) 0 0 no-repeat;}

and here's my header.php code (spacing added):

<li class='youtube'> < a href =' http://www.youtube.com/user/cantreadgood/' target='_blank '> YouTube < /a > </ li>

How can I get my Youtube social icon to link to the above Youtube channel?

I was also able to shrink the size of the search box, but now how do I re-center the text in the search box?

Thanks!

Posted 1 year ago #
peterhoppe21
Member

The second header photo worked out perfectly! Thanks Mya!!!

Looking forward to fixing the Youtube social icon link.

Thanks.

Posted 1 year ago #
peterhoppe21
Member

Here's another issue: on my product page, the "hover to zoom" option is wider than the actual photo, causing tiling. How can I adjust this so the selected area matches the width of the product image (500px)?

Thanks

Posted 1 year ago #
peterhoppe21
Member

Ok, I figured out the YouTube issue: just need to add

target=\"_blank\" class='noLightbox' to the href code

So...

< li class='youtube' > < a href =' http://www.youtube.com/user/cantreadgood/' target=\"_blank\" class='noLightbox' > YouTube < /a > </ li>

(just delete the spaces)

Posted 1 year ago #
Ismael
Moderator

Hi,

Glad that you figured a way to solve the issue. :)

Cheers,
Ismael

Posted 1 year ago #