Styling by Code
You have the option of clicking on the Code tab of the Advanced Styling window where you can enter your hand-crafted custom CSS definitions instead of the By target method.
This tab provides a Target drop-down selector for some of the CSS containers found in the relevant element; and, an open text box where you can write your custom CSS rules.
INFORMATION
The Target drop-down selector is not required to be used in the Code tag. You are free to write your own hand-crafted custom CSS in the text box that suits your needs for the specific element.
Using The Target Selector
The Target drop-down selector includes the same list as the By target drop-down selector (see Selecting The Target for reference). Selecting the container and then clicking the Inject Target button will insert the appropriate container reference into the text box where you add your custom CSS.
Example: Item Catalog Top Bar Background Color
As an example, you want to change your default auction catalog top bar to a different color.
The example approach described on the Styling By Target page to change the background color can be done via the Code approach using the Target "Catalog top bar" "injected" into the text box...
An example using the Item Catalog available target "Container top bar".
... and adding the following CSS property to set the background color of the "top bar":
background-color: #5EB676;
An example changing the catalog top bar to "green".
The example "Auction Catalog" after.
IMPORTANT
The custom CSS entered should follow standard notations such as those described at W3Schools or Mozilla Developer Resources.
Example: Advanced Styling Custom Code Only
You can add custom hand-crafted CSS to adjust almost any existing element, for example, you want to make the circle slightly different in the Item Card (B) Catalog Style.
The default Item Card (B) from a demo Item Catalog.
Adding the following custom CSS will adjust the shape of the "circled" images in the item cards.
.item-card-small-b .item-card-top .profile-container .profile-container-inner {
border-radius: 100% / 50%;
}
The example "custom CSS" as it would appear in the Code tab.
The Item Card (B) after having the example custom CSS applied.
Example: Extended Background Color Changes
The By target and Code custom CSS can work together. For example, using the Example: Item Catalog Top Bar Background Color described under By target with additional CSS properties assigned under the Code tab you can round the corners of the top bar and "center" its drop-down selectors for a better "look".
This additional custom CSS rounds the corners and "centers" the drop-down selectors.
Using the By target example with the above will provide an auction catalog with a green top bar and it will have rounded corners and centered drop-down selectors.
An example of the Auction Catalog "after" the custom CSS changes have been applied.
Last reviewed: February 2023