Jump to content
Sign in to follow this  
storm09

How to customise 5 column footer?

Recommended Posts

storm09

Hi - How can I customise my 5 column footer? Here's my dev site - http://trm.hickmanking.com/ 1. Change the titles names eg. PAGES to LINKS 2. Then create 2 columns for these; Home About Services Testimonials FAQs Contact I'd like these these to exactly the same as the, LINKS 2 column layout in the footer of this page. 3. Add icons to my footer, like the twitter and facebook icons under COMMUNITY in the footer of this page. Thanks :)

Share this post


Link to post
Share on other sites
storm09
BTW - how can I create a link for 'Design & SEO'? Which is in the 5th column of my footer. Thanks again :)

Share this post


Link to post
Share on other sites
catrina
To change the titles of your columns you'll need to make sure that you have PlatformBase enabled so that you can copy the files over into that folder and edit the files. Where will you two extra columns be placed?

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
storm09
Hi Catrina I've installed PlatformBase. I'd like the footer titles to look like this, in order; Company Logo | Links (2 cols) | Contact | ?© info The two extra columns will replace the 'The Latest' & 'More' columns in the centre.

Share this post


Link to post
Share on other sites
Danny
I think the best method would be to simply add widgets to the 5 Column widget area and start your customisation there. For example: Company logo, you could use a text widget with some HTML. Links (2 cols), same as Company logo, use a text widget with some html for the links and css to create a 2 column layout. With the Contact and Info being done much the same as the others.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
storm09
Hi Danny Yes, adding 5 text widgets to the footer was my starting point. However, I don't know the HTML or CSS to create the nav menu links, or how to add the company logo or how to create the 2 column layout. Whether it's via Platform Base or HTML, CSS - whichever solution works quickest and easiest works for me.

Share this post


Link to post
Share on other sites
Danny
Hi Storm. Below I've linked you some useful info for basic HTML, like creating an image link ect... Image link (your company logo) http://www.tizag.com/htmlT/htmlimagelinks.php When you're talking about a two column layout, what do you actually mean, would it be possible for you to provide a screenshot as an exmaple please ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
storm09
Hi Danny Thanks for the link. I've got the code sorted, I think, but where abouts do I enter this in the TEXT widget? Everytime I add this - it just shows up as the code itself? Is there an HTML tab somewhere I'm missing? The 2 cols layout I'd like to create is the same as the LINKS (2 cols) in the footer of this Support page. Just scroll to the bottom and you'll see it on the far right. My site has 6 titles so a 2 col layout should work nicely. And I need to rename a couple of the titles.

Share this post


Link to post
Share on other sites
Danny
Hi Storm, For the HTML code, you should just be able to add the code into the text widget and save it, if its showing up as code then your code isnt correct. Check out my example below. [code] [/code] Where I have "Add Here a Link To A Website", simply replace this with a link, this is for when you click on the image it takes you to this site/page/post ect. Where I have "This Shouls Be The Path To The Image", this is the link to where the image is, so using your site as an example it would look something like (remember this is only an example): http://trm.hickmanking.com/images/logo.png As for the two column layout, would it be possible for you to create an image using Photoshop or something similar showing me how you would want your entire footer to look and Ill see if I can do this job for you, if you like but I will need an image to go off.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Rob
Storm, please check the 5 column footer at http://www.epicurus.com and view source to see how I added images, text and links. By the way, for your two link columns, you can drag a widget for your blogroll into each of the footer columns and set the name and which link set you wish to use.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
storm09
@ Danny - Thanks for help. I've got the links working okay http://trm.hickmanking.com/, now my next questions are; 1. How can I get each link to start on a new line? They're bunched at the moment. 2. How can I add an underline under each link on rolloever. Ideally, I want these to look like my LINKS to look just like LINKS in the footer of this site. That's the 'dream' anyway. lol.

Share this post


Link to post
Share on other sites
storm09
@ rangelone - Thanks for the tip. I'm happy with the results http://trm.hickmanking.com/ - Just one thing though, how can I hide the extra title eg. HIDE ME. If I delete it, the extra links just rise to the top. I'd like to keep the alignment format the same. Cheers.

Share this post


Link to post
Share on other sites
storm09
@ Danny - I've solved '1. How can I get each link to start on a new line?...' just by checking the box 'Automatically add paragraphs' in the text widget. That works for me. Now, if possible, I'd just like to add an underline under each link on rollover.

Share this post


Link to post
Share on other sites
Danny
Hi Storm, Awesome you finally managed to do it and without much help too, good job. To add a underline when hovering over a link add the below code to Platform Settings --> Custom Code --> CSS Rules: [code] #footer a:hover { text-decoration: underline; } [/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
storm09
Brilliant! Works like a charm. Thanks Danny. Couldn't of done it without you and the great support team here at Pagelines. Unreal. Me and my new mate Firebug will definitely be heading over to Lynda.com for some HTML tuts over the NZ summer. I need to get a handle on HTML - fast. Do you have any idea how I can hide the HIDE ME title in the footer, whilst keeping the title spacing as is? I want to keep these aligned with the Menu col on the left. http://trm.hickmanking.com/ - I've deleted the HIDE ME with 3 dots ... but it looks like I've just made an mistake and left out a title. I used Firebue to see the code on the Links of this site - but that's talking about nested cols etc. Way over my head at this stage lol. Cheers D.

Share this post


Link to post
Share on other sites
Danny
Hi Storm, I think this may work in hiding the "..." and keep a similar distance. Add this to your custom code: [code] #text-7 h3 { text-indent: -99999px; } [/code] The way I worked it out was, I used Firebug and if you inspected the widget you will see that each text widget is given an ID number. For example the text widget with the "..." had an ID of 7 so if you look at the code above you will see what I have done. I used the text widgets ID and added the h3 along with it. The text-indent simply pushes the text of the screen, using the display:none would of worked also but would of pushed the links to where the h3 title was, hence it wouldn't of been the look you required. If you do what you say and become best friends with Firebug :D and go through some of the tutorials over a Lynda.com you will become more than comfortable in no time, good luck :D

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
storm09
Brilliant. If I could shout you a beer mate, I would. Cheers!

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  

×