Custom CSS Code

CSS Background Gradient​

Hi, Peter,

Sure. Here's a small video where I demonstrate adding an ID to a table you've made from the text editor in LibGuides: https://www.screencast.com/t/uCnyGISDJg

After you've applied the ID to the table like that, it can be targeted in your guide or site-wide CSS using something called an ID selector. An ID selector starts with a #, like so:

#your-id {
/*properties to apply to the table go here*/
}

Does that help?

Greg
Springshare Support

Mckay,Peter Z.

Apr 25 2018, 12:47pm via Email

Hi Greg,

I’m confused about how to write the CSS code for the gradient background.
The style you're using would do that, but I'd recommend changing the selector away from just a div, and instead giving your table an ID, like <table id="gradient-table">. You can then have the CSS rule target #gradient-table, and it will apply that background.
Can you give me a quick example using you suggestion above?

Thanks

Greg Sigountos

Apr 24 2018, 10:38am via System

Hi, Peter,

1. I went in and commented out the <style> block for you.
2. Since this was in a rich text item, it had to be edited either within the guide, or via our back-end tools. Media/widget items can be edited outside of a guide under content>assets. You could also put customizations like this <style> in the guide or group-level custom JS/CSS to make it easier to locate.
3. You can do this by right-clicking>inspect element. However, this just edits the local copy, not the copy on the server, and it doesn't persist if you refresh or load another page. You can disable or test out various CSS properties in the element inspector, though: In the highlighted sections of this screenshot, you can change or disable properties: https://www.screencast.com/t/JnOFuAZx6
4. The style you're using would do that, but I'd recommend changing the selector away from just a div, and instead giving your table an ID, like <table id="gradient-table">. You can then have the CSS rule target #gradient-table, and it will apply that background.

Greg
Springshare Support

Original Question

Apr 24, 2018 via Email

Oops! Gradient Background

Howdy!

I foolishly tried to provide a color gradient background to a table without understanding what I was doing (Not the first time!). The color gradient applied to the whole page:
http://businesslibrary.uflib.ufl.edu/uftechconnect

Well, at least it is colorful. J

I haven’t been able to remove the code. When I go to Guide editing mode I can’t see the code.

1.       Please help me remove the code.
2.       Is there a way to find it and edited in LibGuides?
3.       Does Google have a Developer Tool that would enable me to edit the page source code directly?
4.       How can I add a color gradient background to a table?

Thanks
-Peter

Here is the code I inserted:

<style>

div {

    height: 400px;

    background: linear-gradient(to bottom, #33ccff 0%, #ffff99 100%)

}

</style>