Where to find existing HTML & CSS code lines?

Thank you Greg, this is really helpful. A follow up question, I would think in the custom CSS, i would have to specify exactly which page I would want the custom CSS to apply to? 

I was referring to the shadow behind the widgets, that made it look like a “box”. Can that be removed?

In the custom CSS area - you won’t necessarily specify any particular page but you will need to identify the class or id of the objects you wish to style.

I would do this by right clicking on the item I wish to modify and then choosing  Inspect  

Then you have to review the code with a fine-toothed comb.

It can sometimes take a bit of work to drill down to a specific box versus handling all boxes.

You could start experimenting along these lines.

/* Code for generic wrapper shadow */
/* This will affect many boxes platform-wide */

.wrapper-shadow {
    box-shadow: none !important;
}



/* Code for specific box on a page */
/* This is the Admin Tasks panel on the Admin Dashboard. */

.task-list__wrapper.wrapper-shadow {
    box-shadow: none !important;
}

Just paste the above code into that Branding and Look area and then review the look. It should be much “flatter” looking. Less “pop” off the page.

Making these sorts of adjustments is very much a game of Detective and will involve much trial and error.

Always feel free to reach out here for guidance. There are many who are willing to help.

Welcome to the Community!

Really appreciate your help and guidance, Greg. I will check your recommendations out and will reach out with more questions.

There is also a really handy Chrome Extension called Stylebot which lets you live preview css changes! 

/* Code for generic wrapper shadow */
/* This will affect many boxes platform-wide */

.wrapper-shadow {
    box-shadow: none !important;
}



/* Code for specific box on a page */
/* This is the Admin Tasks panel on the Admin Dashboard. */

.task-list__wrapper.wrapper-shadow {
    box-shadow: none !important;
}

I’m looking to do this but only affect specific pages. The CSS I’m using for that looks like this:

#doc-page-209 > .htmlwidget {
    background-color: #23395D !important;
}

#doc-page-209 > .wrapper-shadow {
	box-shadow: none !important;
}

I’m trying to only affect these specific pages due to branding for specific branches. However, while I’m generally sure this code is mostly right, it seems to be ignored? When I inspect the page I can’t find the #doc-page-(number) tag although all other formatting I’ve done for this specific page does work. Is my syntax wrong?

@natticatt - Tricky part here is that we have to target different things because they fall under different classes.

I’ve identified the page so that the shadow can be visible on other pages.

When I want the page ID I will right click towards the top of the page just underneath the breadcrumb bar and choose Inspect - the ID should appear real close by.

Here is where mine took me for this example.

 Notice it is just on the line above.

/** Targets the cards in a card catalog on a specific page **/
#doc-page-31 .ui-card-wrapper {
    box-shadow: none !important;
}

/** Targets the custom content boxes on a specific page **/
#doc-page-31 .wrapper-shadow {
    box-shadow: none !important;
}

/** Targets a search bar on a specific page **/
#doc-page-31 .ui-data-browser-controls-bar {
    box-shadow: none !important;
}

Hope that helps a bit.

Here is another way to find your page ID

Open your inspect panel and hit CTRL-F

Start typing  doc-page  and you should get a hit.

gstager wrote:

Here is another way to find your page ID

Open your inspect panel and hit CTRL-F

Start typing  doc-page  and you should get a hit.

 

It’s also in the URL of the browser when on the page.

Surprised this thread doesn’t have this super user reference page:

https://help.docebo.com/hc/en-us/articles/360020080720-Introduction-to-Pages-and-Menus#subtitle-5

Goes through all the ID and widget type ID’s. Very handy!

Thank you! This solved my problem.