Jump to content
Sign in to follow this  
leah

Adding and Icon next to Social Network Icons

Recommended Posts

leah

Sorry I just read that should be more clear :-) I want to add an "Online Annual Support" button next to the social icons up on the top right of the header of WHP 3.

Share this post


Link to post
Share on other sites
cmunns

Hey Leah, Welcome back! haha I don't see the icon added anywhere. You can put the icon as an image in between the link tags you've coded or you can do it as a background image using the "duesicon" class you've created. If you see the classes for the other icons you'll see that's how those were added. e.g. background css image sprites.

Share this post


Link to post
Share on other sites
leah

:-) You don't see the icon b/c I can't get it to show up!! I have no idea what I did wrong - here is what I did in header.php between the DIV tags <div class="icons"> <?php if(pagelines('rsslink')):?> " class="rsslink"> <?php endif;?> <?php if(VPRO):?> <?php if(pagelines('twitterlink')):?> " class="twitterlink"> <?php endif;?> <?php if(pagelines('facebooklink')):?> " class="facebooklink"> <?php endif;?> <?php if(pagelines('linkedinlink')):?> " class="linkedinlink"> <?php endif;?> <?php if(pagelines('youtubelink')):?> " class="youtubelink"> <?php endif;?> " class="duesicon"> <?php endif;?> </div>

Share this post


Link to post
Share on other sites
leah

Ok, none of that is what is actually in the file let's try it again:

<div class="icons"> <?php if(pagelines('rsslink')):?> " class="rsslink"> <?php endif;?> <?php if(VPRO):?> <?php if(pagelines('twitterlink')):?> " class="twitterlink"> <?php endif;?> <?php if(pagelines('facebooklink')):?> " class="facebooklink"> <?php endif;?> <?php if(pagelines('linkedinlink')):?> " class="linkedinlink"> <?php endif;?> <?php if(pagelines('youtubelink')):?> " class="youtubelink"> <?php endif;?> " class="duesicon"> <?php endif;?> </div>

Share this post


Link to post
Share on other sites
catrina

Hello Leah, Perhaps instead of using the CODE or "quote" options to display your code, you can use the back ticks at the beginning and the end of the code (looks like this and is located on the top left corner of the keyboard: `). That way, the code will display here correctly :).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
leah

did i even write the code in there correctly? i have become quite adept at css but not code AT ALL. no clue what i'm doing :-)

Share this post


Link to post
Share on other sites
catrina

Hello, In the box on your Dashboard where you added the code for the icon you want to add, can you please copy that exact code and paste it here then add ` (the back tick mark) at the beginning and the end of it? That way, I can see exactly what you put.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
leah

`

<?php if(pagelines('rsslink')):?> <?php endif;?> <?php if(VPRO):?> <?php if(pagelines('twitterlink')):?> <?php endif;?> <?php if(pagelines('facebooklink')):?> <?php endif;?> <?php if(pagelines('linkedinlink')):?> <?php endif;?> <?php if(pagelines('youtubelink')):?> <?php endif;?> <?php endif;?>
`

Share this post


Link to post
Share on other sites
catrina

Thanks for posting. In this code: `` You are adding the image URL for the button instead of the the link URL for Online Annual Support. Also, you must remove the

<?php echo ('
and
');?>

on either side so that it looks like this: `` What is the link for the Online Annual Support? (This will be the link that you need to add)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
leah

OOOOOHHHHHHH (can you see the lightbulb that just went on in my head??) Ok I'll try this. Then I style the link using CSS. OK!

Share this post


Link to post
Share on other sites
leah

AWESOME!! I love learning new things and then actually have them work :-) Thanks Catrina! Now I just have to tweek the image itself and its placement. Nice one!

Share this post


Link to post
Share on other sites
leah

Have I mentioned recently how much I love you guys? I just completely stopped using Thesis altogether. I maintain 2 sites for friends using Thesis and I've convinced them to let me redesign their sites using Platform. WHP is perfect for our synagogue, and Platform is great for just about everything else. You guys rock.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×