Jump to content
Sign in to follow this  
clearpathnet

Quick Post Feed /Social Media link question

Recommended Posts

clearpathnet    0
clearpathnet

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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: http://www.pagelines.com/forum/topic/27509-rollover-effect-for-images-htm-file-format/

 

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
clearpathnet    0
clearpathnet

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

Share this post


Link to post
Share on other sites
James B    436
James B

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;
}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
clearpathnet    0
clearpathnet

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

Share this post


Link to post
Share on other sites
James B    436
James B

Excellent :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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  

×