Jump to content
Sign in to follow this  
create180design

adding Universal Sidebar in header to the right

Recommended Posts

create180design    1
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.

Share this post


Link to post
Share on other sites
create180design    1
create180design
here's the page you can see the universal sidebar on: www.americasguy.com/home

Share this post


Link to post
Share on other sites
create180design    1
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.

Share this post


Link to post
Share on other sites
gyoery    2
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: [code] #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.*/ [/code] 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.

Share this post


Link to post
Share on other sites
create180design    1
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,

Share this post


Link to post
Share on other sites
gyoery    2
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.

Share this post


Link to post
Share on other sites
Rob    547
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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
create180design    1
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

Share this post


Link to post
Share on other sites
catrina    103
catrina
Have you seen this tutorial on hooks?: http://www.pagelines.com/docs/base-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: [code]// add_action('hook_name','function name'); add_action('pagelines_branding_icons_end', 'add_icons_to_branding');[/code]

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
gyoery    2
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.

Share this post


Link to post
Share on other sites
create180design    1
create180design
Hi Katrina, I've checked out the hooks video and go this far: [code]// add_action('hook_name','function name'); add_action('pagelines_before_branding_icons', 'add_universal_sidebar'); //function name function add_universal_sidebar(){ [/code] 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?

Share this post


Link to post
Share on other sites
Danny    1,327
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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
create180design    1
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.

Share this post


Link to post
Share on other sites
Rob    547
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!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
create180design    1
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

Share this post


Link to post
Share on other sites
Danny    1,327
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: [code]#frm_show_form-2 .widget-title {font-size: 1.6em;}[/code] 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 [img]http://km.support.apple.com/library/APPLE/APPLECARE_ALLGEOS/HT1343/ks_option.gif[/img]+[img]http://km.support.apple.com/library/APPLE/APPLECARE_ALLGEOS/HT1343/ks_command.gif[/img]+I) This will allow you to change your CSS on the fly.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
create180design    1
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?

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  

×