17 replies to this topic

[create180design]

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.

[create180design]

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

[create180design]

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.

[gyoery]

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.

[create180design]

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

[gyoery]

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.

[Rob]

@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.

[create180design]

@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

; } //End Function//

• Back to top

[catrina]

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');

[gyoery]

@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.

[create180design]

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?

[Danny]

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

[create180design]

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.

[Rob]

@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!

[create180design]

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

[gyoery]

[Danny]

@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 ++I)

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

[create180design]

@ 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?