I am trying to change the logo of the volto site https://investment-economics.in . The original Volto-Plone logo keeps loading although it is not there anywhere in the folders. Where should I look for. if I simply remove it it solves my purpose.
I suggest you look at the Overriding the Plone Logo topic in the Mastering Plone training.
Let us know if it helps.
The documentation is very clear. I have tried it. I am unable to make it work. I am unable to locate this Logo which is getting loaded.
@sudhan77 The logo is referenced by the Logo component. volto/Logo.jsx at master · plone/volto · GitHub
The documentation says that you should shadow the Logo.svg with your own custom logo. You can also shadow the entire Logo.jsx component file and completely remove the logo from being rendered.
I cannot understand why component shadowing is not working. I have tried several things. For example, I create a Header Folder and here is the Header.jsx. I remove the Divs relevant for the Logo and still the logo is not out. If I make any error on these files the compilation catches the error. I also show the static media folder contents in the build, there is no Logo as I prevent that asset from loading. where is the plone logo coming from. How can I check that? It is possible that since I may have deleted the original logo from the components under src, the overshadowing is not working.
/**
* Header component.
* @module components/theme/Header/Header
*/
import React, { Component } from 'react';
import { Container, Segment } from 'semantic-ui-react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
Anontools,
LanguageSelector,
Logo,
Navigation,
SearchWidget,
} from '@plone/volto/components';
/**
* Header component class.
* @class Header
* @extends Component
*/
class Header extends Component {
/**
* Property types.
* @property {Object} propTypes Property types.
* @static
*/
static propTypes = {
token: PropTypes.string,
pathname: PropTypes.string.isRequired,
};
/**
* Default properties.
* @property {Object} defaultProps Default properties.
* @static
*/
static defaultProps = {
token: null,
};
/**
* Render method.
* @method render
* @returns {string} Markup for the component.
*/
render() {
return (
<Segment basic className="header-wrapper" role="banner">
<Container>
<div className="header">
/*
*/
<div className="tools-search-wrapper">
<LanguageSelector />
{!this.props.token && (
<div className="tools">
<Anontools />
</div>
)}
<div className="search">
<SearchWidget />
</div>
</div>
</div>
</Container>
</Segment>
);
}
}
export default connect((state) => ({
token: state.userSession.token,
}))(Header);
Please share the structure of your volto project, specially the src/customizations folder. Also, make sure you restart volto when adding a new customization file.
I started from scratch and I am getting component shadowing to work now.
Thankyou