Known Participant

Question

Responsive HTML5 - Layout Customization

11 replies
1522 views
Translate

Hi

I liked the Indigo Layout. I would like to use it.

But, I would like to customize it. I have seen the Customize Selected Layout option.

I am not able to see the option which can allow me to change the Layout in my own way.

For example, if I want the TOC on the left side, I don't see any option.

If I want to keep the desired topics below the search box, I don't see any option. Though, I can control the number of rows or number of topics.

Is there any other way I can customize according to my need this layout.

Thanks,

Jignesh Shah

This topic is closed to new replies. Start a new post to keep the conversation going.

D

DavidHutchinson

Known Participant

I'm struggling with this too. I like the Indigo layout, and have made some modifications that make it look more like I would like. However, it's very buggy, for example when I run a preview I get a javascript error "object doesnt support object initindigo" in usersettings.js, so there are bugs in the javascript.

Also, if I switch the index and glossary off, they still appear!

And the project title is repeated rather than the "Welcome to our help centre, how can we help you" showing.

And the Project Title is shown the third time after opening a topic. The burger menu doesn't work, and neither does the search.

I'd like to see a published help centre where this layout has been used. Is anyone aware of one?

Thank you.

Translate

Peter Grainge

Community Expert

It's looking like something got horribly messed up in your customisation so the first thing to do would be to import the layout again giving it a new name, say Indigo2. That will not overwrite your customised version so you can go back to that later.

Also I see you are using OneDrive. That is OK but it can create long path names that will fail.

What I would do now is export your customised layout and import it into a simple new project with just two or three freshly created topics,.Create that project outside of OneDrive in something like C:\Test. After importing your layout, import a new copy of Indigo from the gallery, as above.

Now test both.

I think the repeat issues are related to your customisation but testing a fresh project will establish that.

Come back when you have tested as above.

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

J

JGaf10311788

Inspiring

I'm hijacking this thread - hope you don't mind.

I'm trying to change the color of the header in the Azure Blue layout. I opened the usersettings.js file (from the Output Setup pod) and found:

var backgroundColor = "#509de6";

I changed that to something different...regenerated the document and NOTHING CHANGED! I've searched everywhere. Where else can I look?

I'm so confused..

Translate

Peter Grainge

Community Expert

Using the layout editor would be a good place to start.

Open the SSL in the Output Pod and then select Customise Selected Layout.

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Look under Header to start.

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Captiv8r

Legend

Depending on how adventurous you feel, you might open your Output Setup pod and expand the Screen Layouts folder.

Good luck in figuring out exactly what to change!

Cheers... Rick

Translate

Peter Grainge

Community Expert

The editor is what Adobe have made easy to change and it's probably way more than you could in WebHelp.

Beyond that, you need to have very advanced knowledge of CSS to amend layout.css and of HTML5.

Good luck.

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.