Various Customization Questions

[GPKUG350]

Hello,

I'm a new customer and I have a few questions about how to customize certain aspects of the forum. I've been able to find answers to many of my questions doing google searches, but I couldn't find answers to these, mostly because I don't know what these things are referred to as.

About my site:
Vbulletin version 5.6.3
PHP 7.3.22
No add-ons installed
Main default style was the skin modified
Browser is google chrome
This site isn't live yet - I'm working on a beta version

Questions

In the first image:
1) How do I change the colors for the circled buttons?
2) How do I change the colors of the squared buttons?
3) How do I move the copyright text at the bottom to the left (I set my forum at 800px wide) (arrow pointing at it)

In the second image:
1) Can I reduce the size of the top toolbar to 800px to match the rest of my forum? (arrow pointing to it)
2) How can I change the gradient in the squared area, it's adding a secondary color to it?
3) How can I change the color of the lines that I circled?

Other questions:
1) How can I remove the option for people to post emoticons. I want to keep smilies and not emoticons.

I appreciate your help. I'm enjoying the product so far.

[OrganForum]

Use your browser's development tools to determine the CSS class responsible for the element's attribute, color, size, etc. Then change that CSS either by finding and editing its template in the Admin CP Style Manager or Site Builder, or by overriding it in css_additional.css.

[Wayne Luke]

First... How did you change the width of your site? This should be done through the wrapper_max_width style variable. The default is set to 1200 pixels and all elements use it. I'd have to ask why 800 pixels in width? The most common resolutions in use today are larger than than that and you're leaving a lot of screen real estate empty. The display will automatically adjust to smaller devices like phones and tablets to take advantage of mobile devices.

First Image:

1. These are SVG images and rendered on the fly by the web browser. The image colors are controlled by the icon_color_* style variables. It appears that you've already customized these somewhat.
2. To change the colors of your Editor icons, you need to upload a CKEditor sprite to its own sub-directory in /js/ckeditor/images and then update the ckeditor_image_path style variable with the name of your directory. Please look at the default and dark directories at the above path for examples.
3. You would have to set the <footer> element to 800px. This is done automatically if you change the wrapper_max_width style variable.

Second Image:

1. This menu will be 800 pixels in width if you update the wrapper_max_width style variable. However, the background will always be 100% of the screen size.
2. Gradients are controlled in the _background style variables for the location. This specific location is the header_tab_background. You can enter a starting and ending color as well as the direction for the gradient. The rest is filled in by the browser. If you need more complex gradients with individual stop points you will need to create custom CSS and apply it to the ".channel-tabber-list .section-item" within CSS.
3. This is controlled by the header_subtabbar_border style variable.

You would access Style Variables in your AdminCP.

1. Log into the AdminCP.
2. Expand Styles in the left navigation.
3. Click on "Style Manager."
4. Find your style in the list on the right.
5. In the Choose Action... dropdown, select Style Variable Editor.
6. Clicking on a bold group will list all style variables in the group and expand the group.
7. You can edit all the style variables at once or click on a specific style variable name in the left column to edit only that one.
8. When done editing each group of style variables, make sure to click "Save" at the bottom or your changes will be lost.

You can also type the name of a style variable in the search box at the top of the editor to find it.