Jump to content


Photo
- - - - -

Quick Post Feed /Social Media link question


Best Answer James B , 12 June 2013 - 11:45 PM

Hi Ian

 

The example of the code for the social bar is in http://www.pagelines...tm-file-format/ I've pasted below for you.

 

So you example below, the div class and id's are the names of the div which the css can be assigned to. The link for the icon then follows.

 

<div class="mynewicons">
<div id="connect-pinterest" class="sbconnecticon"><a href="https://pinterest.com/XXXX/"></a></div>
</div>

 

Rob then assigned images/icons to those links using css code which related to the names id names he gave in the code above.

 

#connect-pinterest {
   background: url("http://www.PRIVATE.com/wp-content/uploads/2013/01/pinterest.png") no-repeat scroll 0 0 transparent;
   height: 43px;
   width: 43px;
}

#connect-pinterest:hover {
   background: url("http://www.PRIVATE.com/wp-content/uploads/2013/01/pinterest_rollover.png") no-repeat scroll 0 0 transparent;
   height: 43px;
   width: 43px;
}

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 clearpathnet

clearpathnet

    Member

  • Members
  • 28 posts
  • Country: Country Flag

Posted 12 June 2013 - 05:46 AM

Hey Guys,

Trying to figure out how to place an post feed / social media bar onto my page.

 

I want it on my home page Under a "Feature" section and above a "Boxes" section. Is there a plug-in or a widget to add for this?

 

Thanks!

 

-Ian



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 June 2013 - 10:25 AM

Hi Ian,

 

You can insert a full-width or universal sidebar in your template via Dashboard > PageLines > Drag & Drop > Page Templates.

 

You can then add a text widget to that sidebar.  Wrap everything in the text widget inside a custom div with a unique class to apply things like background and to set alignment. 

 

Then, create your HTML for the content. 

 

To get social media icons with hover effects, please see my reply to this post:

Please Login or Register to see this Hidden Content

 

Any part that's going to have a different background will need its own unique class again, within the overall class.



#3 clearpathnet

clearpathnet

    Member

  • Members
  • 28 posts
  • Country: Country Flag

Posted 12 June 2013 - 10:42 PM

Awesome - that sounds like a great way. 

 

One problem... I have no idea how to do things like setting a custom class or HTML for the content. Do you have code that I could use as like an example? and then tweak on my own?

 

Im good enough with coding to tweak thigns that already exist.. just not making things from scratch.

 

-Ian



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 June 2013 - 11:45 PM   Best Answer

Hi Ian

 

The example of the code for the social bar is in

Please Login or Register to see this Hidden Content

I've pasted below for you.

 

So you example below, the div class and id's are the names of the div which the css can be assigned to. The link for the icon then follows.

 

<div class="mynewicons">
<div id="connect-pinterest" class="sbconnecticon"><a href="

Please Login or Register to see this Hidden Content

"></a></div>
</div>

 

Rob then assigned images/icons to those links using css code which related to the names id names he gave in the code above.

 

#connect-pinterest {
   background: url("

Please Login or Register to see this Hidden Content

wp-content/uploads/2013/01/pinterest.png") no-repeat scroll 0 0 transparent;
   height: 43px;
   width: 43px;
}

#connect-pinterest:hover {
   background: url("

Please Login or Register to see this Hidden Content

wp-content/uploads/2013/01/pinterest_rollover.png") no-repeat scroll 0 0 transparent;
   height: 43px;
   width: 43px;
}



#5 clearpathnet

clearpathnet

    Member

  • Members
  • 28 posts
  • Country: Country Flag

Posted 14 June 2013 - 12:26 AM

Great - that seems to have done it. Thanks James!



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 14 June 2013 - 12:56 AM

Excellent :-)