Jump to content
Sign in to follow this  
bombbeats

More Social Icons Pro Add social network profile icons to your header?

Recommended Posts

bombbeats

I want to add a Soundcloud icon with my link next to the other social icons but there is no soundcloud.com area to add my link? someone help.

Share this post


Link to post
Share on other sites
Rob
You can add additional social icons via a combination of hook and custom CSS. See http://www.pagelines.com/wiki/How_to_Use_the_PageLines_Customize_Plugin and http://www.pagelines.com/wiki/How_to_Add_Customization Once you have the code for your icon and link, it can be placed in line with your Facebook and RSS media icons in the branding area via a hook. To align it, you'll apply CSS.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bombbeats
wow you are great help... not! http://www.pagelines.com/wiki/Hooks look what happens

Share this post


Link to post
Share on other sites
catrina
There are three things you need in order to add the Soundcloud icon to your header: 1. The image file for the Soundcloud icon 2. The HTML code that will create the linked Soundcloud icon 3. The hook The first two are easy to attain. For the icon, you need to Google it, save it (here's an example you can possibly use: http://nonimage.com/downloads/soundcloud_icon.png), and upload it to your Media Library on the Dashboard). For the HTML code, it should be this: [code][/code] Replace IMAGEURLFORICON with the entire direct image URL for the icon you uploaded. As for the hook, you need to create the hook that will include the code above. This will add the icon to your header. The code goes inside the hook and the hook goes inside a specific file in your theme (this can be discussed in detail later). It's kind of like a matryoshka doll (where one goes inside the other and then that goes inside another). Does that make sense so far?

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
bombbeats
ok you explained this first part very well, now please explain how to do the hook step by step please. with the exact place of where i change and add text ect. Also will this soundcloud icon work like the others like when you hover over it it lights up almost.

Share this post


Link to post
Share on other sites
Rob
The last bit first... the hover effect is created by using two images, one light, one with greater opacity. The default is the more transparent one. It's basically the same image, in which opacity is usually set by a graphics editor like Photoshop. The link is relatively simple to create, just wrapped in a div. See http://www.webmasterworld.com/css/3859374.htm for some examples. The edit, as pointed out in the links I provided earlier, takes place in /wp-content/plugins/pagelines-customize/functions.php. Make sure your div name is something really unique (to prevent conflicts with anything else). Then, it's something like this, added to the end of the file: [code]add_action('pagelines_inside_top_branding', 'soundcloud_bombeats'); // function name function soundcloud_bombeats(){ ?>

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bombbeats
did exactly what you guys said and nothing is coming up

Share this post


Link to post
Share on other sites
bombbeats
Removed PageLines Customisation plug-in function.php, far to long. Use [url="Pastie"]http://pastie.org/[/url] service please.

Share this post


Link to post
Share on other sites
bombbeats
Removed PageLines Customisation plug-in style.css, far to long. Use [url="Pastie"]http://pastie.org/[/url] service please.

Share this post


Link to post
Share on other sites
Danny
Have you removed the code now, as I am unable to see anything in your source? If so can you add the code again and post a reply when you have please. Also, I have removed your two posts where you have posted your functions.php and style.css files. In future if you want to post your code, please use a [url="http://pastie.org/"]pastie[/url] service.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bombbeats
they are in my source code... why would you remove it how can people fix it now?

Share this post


Link to post
Share on other sites
bombbeats
THis is my functions: http://pastie.org/3709947 and this is my css: http://pastie.org/3709950 Why isnt it coming up??

Share this post


Link to post
Share on other sites
catrina
I can see the code in both links. In your functions page, this code is missing the image within the link tag (which is why you wouldn't be able to see anything): [code][/code] ^ You need to change this code so that it looks like this: [code][/code]

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
bombbeats
Ok i did it now but the hover doesnt work? and its not in line with the others?

Share this post


Link to post
Share on other sites
Rob
Okay, I didn't realize I needed to inform you about image formats. You can't make a .jpg file transparent or change its opacity for hover purposes. I thought you'd have noticed that in the link I provided earlier. You have to use a .gif or preferably .png format. Here's a link to the semi-transparent image that goes by default in your site regularly. This isn't the one that appears on hover. [img]http://www.epicurus.com/wp-content/uploads/2012/04/scfaded1.png[/img] Actually, you changed the CSS I provided as an example so that the div name does not match the one created in the function. It's not going to work if you do that. Use the image I provided in place of scfaded2.jpg in your code. Save it and upload to your server. I set it up so that BOTH the div name in the function AND the div name in the CSS matched. You went from [b]#bombeats[/b] to [b]#soundcloudlogo[/b] but you didn't change [b]soundcloud_bombeats[/b] where it appears in the function. If you prefer soundcloudlogo for the div name, change the TWO instances where soundcloud_bombeats to [b]soundcloud_soundcloudlogo[/b] so that the div matches the function.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bombbeats
and lets say we do get this to work, 1. will it fade slow like the other icons? 2. How do we move its position ?

Share this post


Link to post
Share on other sites
bombbeats
and the logo you gave me is to light? can you make one that matches the color of my rss logo?

Share this post


Link to post
Share on other sites
Danny
Hi Bombbeats, I recommend you contact one of the PageLines Pros, they are specific here to do custom jobs like you want here. http://www.pagelines.com/pros/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bombbeats
why contact them>? i have been getting fine help here....

Share this post


Link to post
Share on other sites
Jenny
Keep in mind we can't design your site for you so if you need CSS or coding help, make sure you've downloaded [url="http://www.getfirebug.com"]Firebug for Firefox[/url] and check out [url="http://www.w3schools.com/"]W3 Schools[/url] for more info. Also please be sure to watch our Firebug video tutorial [url="http://www.pagelines.com/wiki/Custom_CSS"]here[/url]. If that doesn't help, then a [url="http://www.pagelines.com/pros/"]PageLines Pro[/url] is the route to take.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
bombbeats
haha... thanks for the help -.-

Share this post


Link to post
Share on other sites
catrina
Will you be contacting a PageLines Pro or will you continue to play around with Firebug and CSS?

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

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  

×