I would like to substitute our company logo for the default logo.png file in the Charcoal_Gray HTML5 layout. One of the RH experts sent me these instructions and code:
"The logo is defined in the SCSS, but you can use your own CSS to get around the limitation. It's a little trial and error to position it the way you want. The attached CSS contains the correct selectors that you can use to manipulate. Set the width and the height of the logo div and the image will scale automatically."
/** Desktop **/
body.media-desktop div.header div.logo {
}
body.media-desktop div.header div.title {
/* Title will automatically be pushed when the logo is made larger/smaller */
}
/** Tablet **/
body.media-landscape div.header div.logo {
}
body.media-landscape div.header div.title {
/* Set left property to align to logo image */
}
/** Phone **/
body.media-mobile div.header div.logo {
}
body.media-mobile div.header div.title {
/* Set left property to align to logo image */
}
I am only using the code for Desktop. I was able to replace the default logo.png with our company logo using the layout editor within RoboHelp. I need to know how to specify the image size so that the entire image displays and the title moves to the right. I don't have expertise with .css, so can someone tell me what I need to do to get my company logo to fit? Here's the way the company logo looks now (identified by the red square around it). Following the screen shot is the code I tried in my .css to alter the image size. It didn't do anything. Can someone tell me what the code should look like? I can try to fool around with the dimensions, but first I need to know what code to include.
/** Desktop **/
body.media-desktop div.header div.logo {
height: 50px;
width: 158px;
}
body.media-desktop div.header div.title {
/* Title will automatically be pushed when the logo is made
larger/smaller */
}
Message was edited by: Rick Stone - Clarification of title.
AdChoices