Jump to content


Photo
- - - - -

Any Idea On How To Do This?


  • Please log in to reply
2 replies to this topic

#1 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 21 December 2012 - 12:03 AM

The attached file shows how my site should look like. I'm almos there, but I still have some questions.

[attachment=384:Site - Curso Er.jpg]
 
My site can be found here: 

Please Login or Register to see this Hidden Content

 
As you can see I need to put those flags right between the nav and the highlights section. Each flag is a link to a different site.
 
Secondly, I need to reduce the space between the blog content and the morefoot section.
 
Last, but not least, it would be cool if I could put the logo on the same line as the nav, where the logo would be left aligned and the menu right aligned.

 

How can I do it?

 

Thanks!



#2 James B

James B

    Advocate

  • Members

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

Posted 21 December 2012 - 01:33 AM

Hi there,

 

I would advise you to check out the hooker plugin, which will allow you to insert some html into one of the hooks in the header so that the flags and the links go into the correct area. You can find out more about hooker here

Please Login or Register to see this Hidden Content

and a list of the pagelines hooks -

Please Login or Register to see this Hidden Content

 

Both the alignment of the logo and the reduction of the padding between the sections can be done with css. If you've not used css before please check out

Please Login or Register to see this Hidden Content

for an overview. You'll need either Firebug or chrome dev tools for editing the css which you can paste back into Pagelines>site options>custom code.

 

Hope this helps



#3 Rob

Rob

    One Smart Egg

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

Posted 21 December 2012 - 01:45 AM

James is, as always, correct about Hooker.

 

If you check this particular post, you'll see an example of the way to place the flags to the right side of the branding image:

Please Login or Register to see this Hidden Content

 

You can also apply the images into that same hook with CSS associated with each flag.  You'd make a URL, associate it with a unique class, then using CSS, apply the flag (semi-transparent) as a background, and full color image when on hover or active.   This can also be achieved with image opacity, but some browsers still don't work with it: 

Please Login or Register to see this Hidden Content

 

Sprites would work as well as in the example provided here:

Please Login or Register to see this Hidden Content