{"id":65034,"date":"2016-02-26T03:47:17","date_gmt":"2016-02-26T08:47:17","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=65034"},"modified":"2017-07-31T09:52:43","modified_gmt":"2017-07-31T13:52:43","slug":"joomla-3-x-how-to-replace-the-text-logo-with-image-logo-on-the-loading-page-wegy-template","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-how-to-replace-the-text-logo-with-image-logo-on-the-loading-page-wegy-template.html","title":{"rendered":"Joomla 3.x. How to replace the text logo with image logo on the loading page (Wegy template)"},"content":{"rendered":"

Hello! This video tutorial shows how to replace the text logo with image logo on the loading page in Joomla Wegy template.<\/p>\r\nJoomla 3.x. How to replace the text logo with image logo on the loading page (Wegy template)<\/a>\r\n

There is a default logo which is displayed while the page is loading:<\/p>\r\n\r\n\"joomla_replace_text_logo_with_image_based_on_wegy_template_1\"<\/a>\r\n

You may want to replace the Wegy logo title with your own image logo.<\/p>\r\n

Let’s learn how to do that.<\/p>\r\n

The tutorial assumes you are already logged into your Joomla admin panel.<\/p>\r\n

    \r\n
  1. \r\n

    Navigate to Extensions ->Templates<\/strong> tab:<\/p>\r\n\r\n\"joomla_replace_text_logo_with_image_based_on_wegy_template_2\"<\/a>\r\n<\/li>\r\n

  2. \r\n

    Then click the Templates<\/strong> tab at the left hand side of the appeared screen:<\/p>\r\n\r\n\"joomla_replace_text_logo_with_image_based_on_wegy_template_3\"<\/a>\r\n<\/li>\r\n

  3. \r\n

    Scroll down to the bottom of the screen to locate the “Theme3092 Details and Files”<\/strong> and click on its title:<\/p>\r\n\r\n\"joomla_replace_text_logo_with_image_based_on_wegy_template_4\"<\/a>\r\n<\/li>\r\n

  4. \r\n

    Now that the theme files editing interface appeared, click on “css”<\/strong> folder icon at the left and choose the template.css <\/strong>file from the opened drop-down:<\/p>\r\n\r\n\"joomla_replace_text_logo_with_image_based_on_wegy_template_5\"<\/a>\r\n<\/li>\r\n

  5. \r\n

    Click on the area with the file code and use the CTRL+F\/CMND+F<\/strong> key (Windows OS\/Mac OS<\/strong>) to find the following block of code:<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    \r\n.mod-custom__page_loader .logo h1:before {\r\nheight: 35px;\r\nwidth: 35px;\r\nborder-radius: 1000px;\r\ncontent: "";\r\nleft: 0;\r\nposition: absolute;\r\ntop: 0;\r\n}\r\n.mod-custom__page_loader .logo h1:after {\r\nheight: 29px;\r\nleft: 23px;\r\ntop: 4px;\r\nwidth: 29px;\r\nborder-radius: 1000px;\r\ncontent: "";\r\nopacity: 0.6;\r\nposition: absolute;\r\n}\r\n<\/pre>\r\n
    Comment the code out and add the following code right below it:<\/p>\r\n
    \r\n.mod-custom__page_loader .logo {\r\nbackground: url(\"direct_path_to_your_logo_goes_here\") 50% 50% no-repeat!important;\r\n}\r\n.mod-custom__page_loader .logo h1 span {\r\ncolor: transparent !important;\r\n}\r\n<\/pre>\r\n
    Where direct_path_to_your_logo_goes_here<\/strong> is the path to the logo image on your server.<\/p>\r\n
    So the code will look as follows after editing:<\/p>\r\n
    \r\n\/*.mod-custom__page_loader .logo h1:before {\r\nheight: 35px;\r\nwidth: 35px;\r\nborder-radius: 1000px;\r\ncontent: "";\r\nleft: 0;\r\nposition: absolute;\r\ntop: 0;\r\n}\r\n.mod-custom__page_loader .logo h1:after {\r\nheight: 29px;\r\nleft: 23px;\r\ntop: 4px;\r\nwidth: 29px;\r\nborder-radius: 1000px;\r\ncontent: "";\r\nopacity: 0.6;\r\nposition: absolute;\r\n}*\/\r\n.mod-custom__page_loader .logo {\r\nbackground: url(\"images\/logo.png\") 50% 50% no-repeat!important;\r\n}\r\n.mod-custom__page_loader .logo h1 span {\r\ncolor: transparent !important;\r\n}\r\n<\/pre>\r\n
    Do not forget to click green “Save”<\/strong> button at the upper part of the screen to apply changes:<\/p>\r\n\r\n\"joomla_replace_text_logo_with_image_based_on_wegy_template_6\"<\/a>\r\n
    Navigate to your site front-end and refresh the page to see changes.<\/p>\r\n
    You can see your logo is now successfully displayed while the page is loading:<\/p>\r\n\r\n\"joomla_replace_text_logo_with_image_based_on_wegy_template_7\"<\/a>\r\n
    This is the end of the tutorial. We have learnt how to replace the text logo with image logo on the loading page in Joomla Wegy template.<\/p>\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJoomla 3.x. How to replace the text logo with image logo on the loading page (Wegy template)<\/a>\r\n\r\n
    \r\n\r\n\r\n<\/a>\r\n<\/div>","protected":false},"excerpt":{"rendered":"
    This video tutorial shows how to replace the text logo with image logo on the loading page in Joomla Wegy template.<\/p>\n","protected":false},"author":68,"featured_media":65042,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[537,483,787,767,2195,2196],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65034"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=65034"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65034\/revisions"}],"predecessor-version":[{"id":82355,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65034\/revisions\/82355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/65042"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=65034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=65034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=65034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}