Jump to content


Photo
- - - - -
Resolved

Change social website icons



This topic has been archived. This means that you cannot reply to this topic.
14 replies to this topic

#1 x69chen

x69chen

    Advanced Member

  • Members
  • 64 posts

Posted 15 October 2012 - 07:32 PM

Hi I used to develop a website by another theme, and my boss still likes the social icons of it very much,

Like

Please Login or Register to see this Hidden Content

, the social icons on the right top, the round button ones, including the search button.

And now I have bought the PageLine Prof, I want to ask how I can change the icons like those?

I am a new starter, thanks for helping

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 15 October 2012 - 11:12 PM

You can add a simple hook associated with the Branding section, plus some CSS.
You'll want the PageLines Customize plugin found in the Store (free), installed and activated.
Once activated, you go to Dashboard > Plugins > Editor.
On the top right, you'll see a drop-down list. Select Pagelines-Customize. It will say "Inactive". Ignore that.
In the right column, you will see pagelines-customize/functions.php. Click it to open and edit.
Copy and paste this:

Please Login or Register to see this Hidden Content


You will also want to add this to Dashboard > PageLines > Site Options > Custom Code in CSS Rules:

Please Login or Register to see this Hidden Content

Each icon may need individual CSS as well to ensure its placement is in a row.

#3 x69chen

x69chen

    Advanced Member

  • Members
  • 64 posts

Posted 15 October 2012 - 11:44 PM

You can add a simple hook associated with the Branding section, plus some CSS.
You'll want the PageLines Customize plugin found in the Store (free), installed and activated.
Once activated, you go to Dashboard > Plugins > Editor.
On the top right, you'll see a drop-down list. Select Pagelines-Customize. It will say "Inactive". Ignore that.
In the right column, you will see pagelines-customize/functions.php. Click it to open and edit.
Copy and paste this:

Please Login or Register to see this Hidden Content


You will also want to add this to Dashboard > PageLines > Site Options > Custom Code in CSS Rules:

Please Login or Register to see this Hidden Content

Each icon may need individual CSS as well to ensure its placement is in a row.


thanks so much!
i will try it now

#4 x69chen

x69chen

    Advanced Member

  • Members
  • 64 posts

Posted 16 October 2012 - 12:22 AM

...

Hi sir I have followed your instruction step by step but seems it does not work,
I changed "www.yoursite.com" to my website address, upload an image and replace the "

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content


Do I need to make other changes?

As I said, I am a new starter, Sorry to take your time

#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 16923 posts

Posted 16 October 2012 - 08:16 AM

Hi,

Can you provide a link to the site where these social icons are not appearing please.

#6 x69chen

x69chen

    Advanced Member

  • Members
  • 64 posts

Posted 16 October 2012 - 03:22 PM

Hi,

Can you provide a link to the site where these social icons are not appearing please.

Oh thanks here you go,

Please Login or Register to see this Hidden Content


I just have one domination sorry about that

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 16 October 2012 - 10:43 PM

That site appears to be using the following in the header. This may be done by placing a widget in the header, but that will need extra CSS to align.

Please Login or Register to see this Hidden Content


Then, in the CSS for that site I found this:

Please Login or Register to see this Hidden Content


You'd have to include the full URL, not images/ but your full URL to the image.

The hook should have worked. Is there a dev site we can see?

#8 x69chen

x69chen

    Advanced Member

  • Members
  • 64 posts

Posted 17 October 2012 - 04:22 AM

That site appears to be using the following in the header. This may be done by placing a widget in the header, but that will need extra CSS to align.
[code=auto:0]

Oh I just find a demo site here

Please Login or Register to see this Hidden Content

,


I also found those codes in the Chrome, but how could I use them,
Could I directly put them in the Custom CSS code, or in the theme Editor?

Thank you for helping

#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 16923 posts

Posted 17 October 2012 - 09:26 AM

HI,

All custom CSS needs to be added to either the Custom CSS/LESS area in Custom Code, your child themes style.css file or if you're using the PageLines Customisation plugin, add the custom CSS to the plugins style.css file.

#10 x69chen

x69chen

    Advanced Member

  • Members
  • 64 posts

Posted 17 October 2012 - 05:49 PM

Hi I add the codes to the Custom CSS, also upload logos, get the url addresses and replace the images/ with the addresses, but they does not work,
and it says Custom LESS/CSS error.

also I find these codes which build in that theme

function pinboard_social_media_options() {
add_settings_field( 'pinboard_facebook_link', __( 'Facebook Page', 'pinboard' ), 'pinboard_facebook_link', 'pinboard_options', 'pinboard_social_media_options' );}


function pinboard_facebook_link() { ?>
<input name="pinboard_theme_options[facebook_link]" type="text" value="<?php echo pinboard_get_option( 'facebook_link' ); ?>" />
<?php}

I find these in their theme-option.php folder

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 17 October 2012 - 11:55 PM

The CSS is placed in Dashboard > PageLines > Site Options > Custom Code in CSS Rules.

The first bit of text requires that you add a sidebar or some other element to the Header. To do this, you go to Dashboard > PageLines > Drag & Drop and you'll see "Header" (it will be blue). Drag an element like Universal Sidebar from Available Sections to Active Sections.

Then, go to Dashboard > Appearance > Widgets. Click on Universal Sidebar. Drag "Text Widget" into the Universal Sidebar. It will open.

Paste the code I provided in the first group into the text widget. Click save.

We may need to add more CSS later to align it.

#12 x69chen

x69chen

    Advanced Member

  • Members
  • 64 posts

Posted 18 October 2012 - 01:22 AM

Ok thanks so much for helping, I finished social icons, they look exactly the same ;)

And how about the Search icon? Seems like it is supported by a totally different codes?

#13 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 18 October 2012 - 01:58 AM

The search field will be in a different hook. pagelines_search_form

You can edit that in the same manner as you did the icons. However you also might be able to get the same look using css to style the search field.

A full list of the hooks can be found here

Please Login or Register to see this Hidden Content



#14 x69chen

x69chen

    Advanced Member

  • Members
  • 64 posts

Posted 18 October 2012 - 03:09 AM

Ok I just finished :)

Thank you Rob, Danny and James for helping~

Have a good day

#15 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 18 October 2012 - 04:36 AM

The topic was marked as resolved.