Jump to content


Photo

adding Universal Sidebar in header to the right


  • Please log in to reply
17 replies to this topic

#1 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 03 April 2012 - 02:54 PM

In my templates, I have added the universal sidebar above the branding, but now I need to get my universal sidebar to sit next to my branding. i saw this in another post and tried it but it didn't work. In custom CSS: ul#list_sb_universal { margin-top: -180px; position: absolute; right: 0; z-index: 10; } Any help will be appreciated. PS- I pretty much could use this option for every site I build- 90% of the time that right area in the branding section is just a huge white space.

#2 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 03 April 2012 - 03:33 PM

here's the page you can see the universal sidebar on: www.americasguy.com/home

#3 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 03 April 2012 - 05:25 PM

My universal sidebar has a mailchimp link in it also, but for some reason, the submit button won't show. That could be the plugin though, but if you see what it is that's causing it please let me know. Most importantly however- is getting the universal sidebar to sit next to the branding. Thank you in advance.

#4 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 03 April 2012 - 05:53 PM

since you are trying to use responsive design, it wont be easy, but I'll try to help:
The Idea is to give both your branding and your sidebar a relative width:
 
	#sb_universal {max-width:49.9%; float:right} /*u can use 50% if you don't use borders*/
	#branding{max-width:49.9%;}
	/*If you want it on mobile view to jump under eachother, you can add a */
	min-width:200px;
	/*to both.*/
This might not be the complete solution, but try and report your findings. Play around with the values, so it looks good on all devices.
Edit: As you might have guessed, the float:right tells the sidebar to move right. You don't need float:left for the branding, since it's the standard setting.

#5 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 03 April 2012 - 06:11 PM

Thanks! Do you think doing it as a hook instead would be better? I'll try what you suggested and let you know. Thanks,

#6 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 03 April 2012 - 07:48 PM

I personally don't use hooks, since I am trying not to customize any pageline files... but that is just me, other people do recommend it. Though I can't give you support on that, and you'd have to wait for a real PL Supporter to tell you how its done.

#7 Rob

Rob

    One Smart Egg

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

Posted 03 April 2012 - 08:48 PM

@create180design Yes, hooks are the recommended method to apply additional information next to the branding. A sidebar of any nature in the header will invariably seek its own div space which won't be aligned right of the branding logo. It will push hard to take full width and reject any efforts to resize or realign it. @gyoery Thanks for your efforts to reply, but it would be advisable to review our docs and understand our framework before rushing to reply in a moderated forum. Since you're not a moderator, it's possible for your mistakes to cause fellow clients problems. Please visit and read http://www.pagelines.com/wiki for more information.

#8 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 03 April 2012 - 09:08 PM

@rangelone Thank you for your feedback. I have only done one hook so far and would really appreciate your help on the proper coding for it. I know that I must add it to my Base- function.php file. I'm pretty sure this is wrong, but I'm trying??¦ //HOOK to ADD Universal Sidebar to Right Side of Branding// add_action( 'below_social_media', 'universal_sidebar_right_side_of_branding); function add_universalsidebar() { echo

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 04 April 2012 - 02:31 AM

Have you seen this tutorial on hooks?: http://www.pagelines...ase-child-theme

There is an example hook along with a video tutorial on how to create one. In your hook, the first two lines should follow this format:

 // add_action('hook_name','function name');
	add_action('pagelines_branding_icons_end', 'add_icons_to_branding');


#10 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 04 April 2012 - 05:32 AM

@rangelone even if I were a mod, my mistakes could cause complications. though my reccomendations are mostly CSS and allways unintrusive, meaning easily reversable. most people appreciate my answers. yes, I say stuff that u r not allowed, but hey, its just for the lulz. so stop acting like I'm doing a bad job. and please, while u r at it, tell me why it is better to use hooks? you still have to use CSS styling in the end.

#11 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 04 April 2012 - 09:32 AM

Hi Katrina,

I've checked out the hooks video and go this far:

 // add_action('hook_name','function name');
	add_action('pagelines_before_branding_icons', 'add_universal_sidebar');
	
	//function name
	
	function add_universal_sidebar(){

the example used the "get search" code and did not show me where I go to find out what the code is to add the universal sidebar. I just used add_universal_sidebar but how do I know this is correct?

#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 April 2012 - 10:57 AM

Hi, Please have a play with this, it works but some styling is needed and some proper HTML maybe too. http://paste.pagelines.com/9b

#13 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 04 April 2012 - 03:15 PM

Hi Danny- You rock!!!!! I've added it in and was able to customize the html slightly to shift it up. The only thing I can't figure out is how to make just the font for "Claim Your Free Report" larger.

#14 Rob

Rob

    One Smart Egg

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

Posted 04 April 2012 - 08:05 PM

@create180design, If you're able, wrap that text in a unique div and class. That way, we can apply custom CSS specific to that text. Just make sure the class you create is totally unique so it doesn't possibly conflict with others. @gyoery, I don't think you're doing a bad job. I just don't think forum support is done for laughs and doubt anyone is here looking for comic relief. You're doing very well with the majority of your replies and I applaud your zeal to learn. In light of that, it's much more important to learn from the docs than just from doing. Even Einstein read books first before postulating theories and it didn't seem to hurt him. I think reading and studying the docs will help make you far more valuable to your fellow users. As for why hooks are better... well, obviously, they work. CSS does some things, applicable to styling but hooks handle actual functionality and placement of content. As you can see, even placing the content still needs styling. You'll get there!

#15 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 06 April 2012 - 07:51 AM

Hi Rangelone, I don't know how to do that. Is it just adding a
around the leading line? The part that's stumping me is the "class you create". Can you please be more specific?? Thank you

#16 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 06 April 2012 - 08:32 AM



#17 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 April 2012 - 10:57 AM

@create180design

You have now changed to use a sidebar instead, therefore to make the title larger, add the following code to PageLines > Settings > Custom Code > CSS Rules:

 #frm_show_form-2 .widget-title {font-size: 1.6em;}

You can replace 1.6em with px for example: font-size: 20px;

Just have a play with the size until you have the size you want. Also I recommend you use either the addon Firebug for Mozilla Firefox or use Google Chromes Web Developer tool (press F12 for PC and for Mac Posted Image+Posted Image+I)

This will allow you to change your CSS on the fly.

#18 create180design

create180design

    Super Member

  • Members
  • 195 posts
  • Country: Country Flag

Posted 07 April 2012 - 02:05 PM

@ Danny, I used a hook without adding the universal sidebar at the top. So right now the text up there is not in a sidebar. Any other suggestion to make that text bigger?