Styling your citation library, code examples

In Citation tracking, Smart Embed Code by Xu CuiLeave a Comment

If you use Smart Embed Code to show your citation library, you usually do not need to do anything to make the style look native on your website. However, if you do want to customize the style, Smart Embed Code makes it very flexible for you to do so. Many components have class names for you to write CSS rules. Here we show a few examples:

Change colors of the citation numbers

You may change the color of the citation number with a simple inline css.

<div id="bizgenius-citation-widget-container-count-total-year-month" style="color:#00D59F; font-weight:bold; display:flex; justify-content:center; flex-wrap:wrap;"></div>

Change colors of the search button

/* CSS example */
#submitButtonBizGeniusSearch{
    background: #00d595;
    border: 0;
    border-radius: 5px;
    color: white;
    text-transform: uppercase;
    padding: 5px 20px;
    font-size: 0.9em;
    font-weight: bold;
}

Show the citations inside boxes, and change the journal format


.bizgenius-citation-single {
    border: 1px solid #f2f2f2;
    border-width: 1px 1px 0px 1px;
    padding: 30px;
    color: black;
}
.bizgenius-citation-single a {
    color: black;
}
.bizgenius-journal {
    color: #00d595;
    background: #D6F9F0;
    padding: 5px;
    border-radius: 3px;
    margin-right: 10px;
    font-size: 0.8em;
}

Add an icon before each citation

.bizgenius-citation-single {
    border: 1px solid #f2f2f2;
    border-width: 1px 1px 0px 1px;
    padding: 30px;
    color: black;
    padding-left: 100px;
}

.bizgenius-citation-single::before {
    position: absolute;
    left: 30px;
    content: url(https://storkapp.me/images/pdf.png);
}

Show citations in gray boxes

.bizgenius-citation-single {
    background: #f2f2f2;
    padding: 30px;
    margin-bottom: 30px;
}
.bizgenius-journal {
    font-style: italic;
}

Show citations in two columns

.bizgenius-citation-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.bizgenius-citation-single {
    width: 49% !important;
    border: 1px solid #eee;
    margin-bottom: 1rem;
    padding: 1rem;
}
If you find the article useful, you may consider to subscribe:

Leave this empty:

Leave a Comment