Best Answer

Where to find existing HTML & CSS code lines?

  • 27 January 2022
  • 12 replies
  • 711 views
J
Rank
Userlevel 1

Hi there,

Brand new here in the community, new to the possibility of using HTML & CSS to customize page, HTML/WYSIWYG widget, as well as look & feel for the platform as well as for courses. Currently learning CSS on the go, have basic knowledge of HTML. My questions are very foundational.

  • Where/how can I write/change a page’s HTML/CSS line? I’ve created the page and would like to customize further.
  • For HTML/WYSIWYG widgets, is it possible to remove the “box” for the particular widget?

Thank you!

icon

Best answer by gstager 27 January 2022, 16:01

View original

12 replies

gstager
Rank
Userlevel 7
Badge +5

You can go to the admin menu and scroll to the bottom on the far left.

There should be an option for Configure Branding and Look

You can put any custom CSS in that area to use in your HTML Widgets.

 

Can you explain further about removing the box? I am not quite sure what you mean there.

Hope that is helpful.

 

 

Greg
J
Rank
Userlevel 1

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?

gstager
Rank
Userlevel 7
Badge +5

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.

 

Greg
gstager
Rank
Userlevel 7
Badge +5

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.

Greg
gstager
Rank
Userlevel 7
Badge +5

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!

Greg
J
Rank
Userlevel 1

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

natemadel
Rank
Userlevel 5
Badge +1

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

N
Rank

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.

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?

gstager
Rank
Userlevel 7
Badge +5

@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.

Greg
gstager
Rank
Userlevel 7
Badge +5

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.

 

Greg
Bfarkas
Rank
Userlevel 7
Badge +3

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!

N
Rank

Thank you! This solved my problem.

Reply


Terms & ConditionsCookie settings