How to customize front end of the portlet without coding

[Seona Joung，修改在7 年前。]

I am interested in customizing the navigation menu and the whole look of the page. As a non developer, what can I use to change the color and sizing of the menu bar?
I was looking at the Look and Feel feature and when change the background color, only the border color changes. Is the application display template the section where I would need to code in for customized look? I also tried using the advanced styling section of look and feel like below and it doesnt affect anything...

#yui_patched_v3_18_1_1_1471292394315_11719 {
background-color: blue;
}

Any help would be appreciated.

[Samuel Kong，修改在7 年前。]

If you want to customize the whole look of the page, you really should look into creating a theme. However, if that's not an option, you can try these other options instead

• Site Administration > Pages > Site Pages > Look and Feel : You can add custom CSS to the page.
• {Any portlet} > Options > Look and Feel : Has various options for changing the look of a portlet

#yui_patched_v3_18_1_1_1471292394315_11719 {
background-color: blue;
}

You should avoid writing CSS rules that uses ids that start with "yui_patched..." These ids changes.

[Seona Joung，修改在7 年前。]

Hi Samuel,

I would like to customize a bit without creating a theme.

Under site administration, I see a section that says 'Insert custom CSS that is loaded after the theme. ' Can I still use this section to add simple css script without the theme? Which class/id should I use? I attempted to find this by using inspect element but wasn't able to get it to work.

Thank you!

[Samuel Kong，修改在7 年前。]

Under site administration, I see a section that says 'Insert custom CSS that is loaded after the theme. ' Can I still use this section to add simple css script without the theme?

Yes. This is the first option I listed above.

Which class/id should I use? I attempted to find this by using inspect element but wasn't able to get it to work.

This really depends on what you're trying to change. Using your browser inspect element feature is definitely a good place to start. If you're having problems getting it to work, you can check with your browser's documentation or your browser's vendor.