• Hi there,

    I really like your BadJohnny theme and I have been trying to set up my blog. I am unable to figure out how to set up my logo on the top left corner of the page, just next to the title of the blog. My first question is, how do I enable my logo to appear on the top left of the screen, just before the blog title? I tried uploading it as a header image but that appears below the title of the blog and taat is not what I want.

    I also may write a few ebooks in the future and would like to set up a simple store. So, my second question is, will the WooCommerce plugin work?

    Best regards

Viewing 12 replies - 1 through 12 (of 12 total)
  • Theme Author badjohnny

    (@badjohnny)

    Hi

    Thanks for your using this theme.

    You have to edit the header.php file, manually insert the following codes into this file behind <div id="page" class="hfeed site">. Remember replace the img URL to your LOGO URL and backup this changed file.

    <div style="position:fixed;top:10px;left:10px;z-index:3;"><a href="<?php echo home_url('/');?>" style="border:none;"><img src="https://pbs.twimg.com/profile_images/452413073031065600/-iLl80j__bigger.png" /></a></div>

    For the WooCommerce integration issue, you can check the plugin documentation here https://docs.woothemes.com/document/third-party-custom-theme-compatibility/ Hope it’s helpful.

    Thanks

    Thread Starter gothichero

    (@gothichero)

    If I update the theme as and when you release the updates, will I still retain the changes I make? I will try doing both tonight and contact you if i am unable to do so or if I face problems. Thanks a lot!

    PS: Is this theme mobile phone compatible? I mean, if people browse on their phones, will they be able to see the website clearly? I guess, the word is responsive, if I am correct..

    Thread Starter gothichero

    (@gothichero)

    Hi,

    I pasted the code into header.php behind <div id=”page” class=”hfeed site”> and clicked on save. However, now, all I see on the homepage is a blank page.

    Update 1: I removed the pasted code and now I can see the homepage but the blog page is blank. In the dashboard I can see that all the posts and pages are there. So, it is strange.

    Update 2: I added the code back to header.php and now I can see the homepage, but there is no logo, and the blog page yields a blank page. On Chrome.

    Update 3: On FireFox and Chrome, I can see the blog (without the logo), and a blank page on the home page.

    Should I use a .jpg file or a .png file? I made no changes except what you suggested, so I am a little baffled why the page itself isn’t visible.

    Also, when you say ‘backup’, where must I backup the file to?

    Thread Starter gothichero

    (@gothichero)

    hi there,

    So I think I had not resized the image properly. I did one on a test site, and the logo finally appears without the blank page error. However, the alignment is a little weird. Can you please specify the right size, and also, how to bring the logo a little down so that it is aligned with the blog title?

    https://fiendish.co.in/

    Thread Starter gothichero

    (@gothichero)

    Hi again,

    I have been working all night on this. Here are the problems:

    1. I successfully could upload the logo. However, the logo is ‘sticky’. If I scroll down the page, it travels along the page, and obstructs the text/image on pages. Can it remain just at the top and not move?

    2. I installed WooCommerce but it spills out where the sidebar should be, and pushes the sidebar down.

    3. I also don’t want ‘Checkout’, ‘MyAccount’ and ‘Cart’ in the menu. I deleted these three pages from Apprarance<Menu, but they still appear in the menu. I fail to understand why this is so. I just want the ‘Store’ shown on the menu.

    Could you please help me, because I really like this theme?

    Thanks

    Theme Author badjohnny

    (@badjohnny)

    If you are worry about the changed file will lost when you upgrade the theme in the future, you can backup this changed file or create the child theme for your custom work(recommended), I’m sorry that free theme support doesn’t include custom service, I will only provide you the genreal idea and hope it will help you. Just refer to the child theme documentation here: https://codex.www.ads-software.com/Child_Themes or https://www.themevan.com/two-important-tips-to-customize-wordpress-theme/

    1. Maybe I understood you incorrect for the LOGO question, you want to add the LOGO in front of the blog title, right? Please remove the those codes. edit header.php, find the following codes

    <?php
    			if(is_home()){
    			  echo badjohnny_seo_wrapper('h1 class="site-title"','<a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'name' ).'</a>');
    			}else{
    			  echo badjohnny_seo_wrapper('h3 class="site-title"','<a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'name' ).'</a>');
    			}
    ?>

    Change to

    <?php
    			if(is_home()){
    			  echo badjohnny_seo_wrapper('h1 class="site-title"','<a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home"><img src="LOGO URL" /> '.get_bloginfo( 'name' ).'</a>');
    			}else{
    			  echo badjohnny_seo_wrapper('h3 class="site-title"','<a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home"><img src="LOGO URL" /> '.get_bloginfo( 'name' ).'</a>');
    			}
    ?>

    Replace LOGO URL to your LOGO, and make sure all quotation marks are English marks, otherwise, the page will return to blank.

    2. Please paste your shop page codes here (woocommerce.php)

    3. You may check this user guide for custom menu using https://codex.www.ads-software.com/WordPress_Menu_User_Guide The important is don’t check the “Theme location” option.

    Thanks

    Thread Starter gothichero

    (@gothichero)

    Hi,

    I think I did not explain my logo question clearly. I want both the header text and the logo to be where they are right now: fiendish.co.in.

    However, when I scroll down, the logo is ‘sticky’, by which I mean, it travels down along the page, and blocks the text and image content that is published from being viewed. It sticks to the top corner of the browser when I scroll down. Can the logo be static (just like the blog title) and not travel down?

    Also, what is the dimension of the image file for logo that you recommend?

    I understand this is a free theme but it is much better than most paid themes I have seen, and I really want to use this on two of my websites.

    2. About the menu, my question was, I removed it from the custom menu settings, but the WooCommerce pages stil show up. Sigh. Also, how do I get menu dropdowns to work? I noticed that the other poster in your support forum here has a dropdown menu.

    Thread Starter gothichero

    (@gothichero)

    Hi,

    I figured out how to set up the dropdown menu. Please help me with the logo.

    Here is my question:

    “I think I did not explain my logo question clearly. I want both the header text and the logo to be where they are right now: fiendish.co.in.

    However, when I scroll down, the logo is ‘sticky’, by which I mean, it travels down along the page, and blocks the text and image content that is published from being viewed. It sticks to the top corner of the browser when I scroll down. Can the logo be static (just like the blog title) and not travel down?

    Also, what is the dimension of the image file for logo that you recommend?”

    Thanks!

    Theme Author badjohnny

    (@badjohnny)

    Like I said, I have to explain again, free theme support doesn’t include the custom issue, I can only give you a right direction, I hope you understand.

    For the LOGO issue, I gave you two solutions.

    1.Place the LOGO at the top left of screen, use my first custom code, if you don’t want a sticky LOGO, just change the position:fixed to position:absolute.

    <div style="position:absolute;top:10px;left:10px;z-index:3;"><a href="<?php echo home_url('/');?>" style="border:none;"><img src="https://pbs.twimg.com/profile_images/452413073031065600/-iLl80j__bigger.png" /></a></div>

    2. If you want to place the LOGO at the front of blog title, please check my previous reply again.

    In this theme, there’s no LOGO option, so no recommend dimension. If you place the LOGO, you should decide the LOGO size by yourself, just make it what you like.

    For the menu issue, like I said, please refer to https://codex.www.ads-software.com/WordPress_Menu_User_Guide make sure you did correct settings and checked the theme location option for the menu.

    Thread Starter gothichero

    (@gothichero)

    The first answer ‘absolute’ was what I needed. It is working perfectly now. Thank you very much.

    Thread Starter gothichero

    (@gothichero)

    Oh, unfortunately I can’t use the logo because the menu and the blog title vanish when I browse from a cellphone.

    Theme Author badjohnny

    (@badjohnny)

    You have to adjust the logo size, position by adding custom CSS. Use CSS media query to do that. You can search a lot of guide on google.

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Inserting logo and enabling WooCommerce’ is closed to new replies.