Skip to content

DuckDuckGo - Multi-Columns (ORGANIC) v.45 by decembre

Imported and mirrored from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/102738.user.css

DuckDuckGo - Multi-Columns (ORGANIC) v.45 screenshot

Details

Authordecembre

LicenseNo License

Created

Updated

Categoryduckduckgo

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Weekly updates

Description

Firefox and Chrome tested.
Less scrolling with a multi columns interface.....

Notes

[2023.05] Why "ORGANIC" ?
Because DuckDuckGo seems to deploy a new code and one its characteristic selector is named "organic" !
:-)

This Userstyle fill the windows in a multi-column page (based on window size) .

You can use too the enable options of DuckDuckGo to format the result page:
Many options are provided and you can save your preferences too.
For me on a large screen , this is 3 columns.

If you want less or more columns, you can play with the width variable of :
#react-layout > div > div section ol.react-results--main li[data-layout="organic"]
(find it in my userstyles and play )

By example to have 2 columns:

/* (new43) NEW CODE - RESULTS ITEMS */
#react-layout > div > div section ol.react-results--main li[data-layout="organic"] {
float: left !important;
clear: none !important;
min-height: 155px ! important;
max-height: 155px ! important;
min-width: 49.6% ! important;
max-width: 49.6% ! important;
margin-right: 4px ! important;
margin-bottom: 3px !important;
padding: 1px 1px 1px 0px ! important;
border-radius: 5px !important;
border: 1px solid gray ! important;
}

Also to see the left side panel colored (with the checkmark to show if the result was or not visited before),
use the Dark/Gray Light or the Dark theme and enable the (option "show when visited".
See the screenshot here:
Looks even better than the screenshot with the left side panel colored.

Adaptation for GM:

- SearchPreview

- Linkify Plus Plus [ GreasyFork ] in use:

Mark text links "Linkifyed" by GM "Linkify Plus Plus"

test link :
ShowAllGroups - by vispillo chez DuckDuckGo

CHANGES in v.8...v.45:

  • Support for New Code change [2023.05]:
    Seems they deploy their new "Organic" design ....
  • Corrections for specials (first load and change after at refresh ?) loading pages results:
    [data-nrn="result"]
    .Last one (2004.04 ):
    super-wide ol.react-results--main li article
    I see it only few time (2 time) yet and don't know why it is serve like that. At refresh it return to its normal state. So it's just a quick fix for it. An idea?)
  • Top Info Sidebar (Expand on Hoverr) + Fine tuning Top Infos ( Transparent background if empty + add on hover text "No more infos on hover")
  • Support the HTLM (Mobile?) version:
    https://duckduckgo.com/html/

Others Correction for:
Related Search, Top "News" , Right Infos Panel (Map view), Videos , columns, Auto load, Map Search, Carousel Images / News....

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           DuckDuckGo - Multi-Columns (ORGANIC) v.45
@namespace      USO Archive
@author         decembre
@description    `Firefox and Chrome tested.Less scrolling with a multi columns interface.....`
@version        20230603.13.15
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("duckduckgo.com") {

/* ==== 0- DuckDuckGo - Multi-Columns (Organic) v.45 (new45) [A VOIR]==== */

/* [A VOIR]:
- ONE DESCRIP MORE (not TOP FIRST RESULT
==== */

/* (new37) PAGES NUM */
#links.results.js-results .has-pagenum .result__pagenum--side  {
    font-size: 13px  !important;
color: silver !important;
/* opacity: 0.5 !important; */
background: #AE5A5A !important;
}

/* (new45) PAGES NUM */
[arial-label^="Page"] {
    -moz-box-align: center;
    align-items: center;
/*     display: inline-block !important; */
float: left !important;
clear: both  !important;
    margin: -0.5vh 0 0 0 !important;
right: 3px !important;
    position: absolute !important;
    width: 100%;
    min-width: 2vw  !important;
    max-width: 2vw  !important;
/* background: green !important; */
}
[arial-label^="Page"] span{
    color: var(--theme-col-txt-page-separator);
    font-size: 0.833333rem;
    font-weight: 600;
    min-width: 2em;
    border-radius: 5px !important;
    text-align: center !important;
    transform: translateX(10px) !important;
background: red !important;
}

/* [A VOIR] (new34) ONE DESCRIP MORE (not TOP FIRST RESULT) :
https://duckduckgo.com/?q=vue.js&ia=web
https://duckduckgo.com/?q=vue.runtime.global.prod.js&ia=web
PB:
https://duckduckgo.com/?q=%22i%3D!important%3B%22&ia=web
=== */

/* #links.results.js-results .nrn-react-div article:not([id="r1-0"]) > div:nth-child(4) {
    position: absolute !important;
    max-height: 12vh !important;
    margin: -16vh 0 0 22.5% !important;
    overflow: hidden !important;
    overflow-y: auto !important;
border: 1px solid red !important;
} */
#links.results.js-results .nrn-react-div article:not([id="r1-0"]) > div:nth-child(4) {
     border: 1px solid red !important;
}

/* (new45) SUPP PUBS - PB for TOP INFO === */

/* .js-sidebar-ads .module-slot ,
.js-sidebar-ads ,
.results--ads.has-ad ,
.js-right-ads-container {
    display: none !important;
} */
/* (new45) */
/* #iframe_hidden , */
/* .header-wrap::after, */
/* section[data-testid="sidebar"] , */
.set-align-center .footer[style="display: block;"] ,
.footer[style="display: block;"] ,
.header--aside__item.header--aside__item--hidden-lg ,
.footer ,
#bottom_spacing2 {
    padding-bottom: 0px;
    display: none !important;
}

/* (new33) - FOR SETTINGS - CENTER */
html.set-align-center .cw {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
}


/* (new38) TEST - OTHER VIEW when typing search in browser search bar (more results) - === */

.module--carousel__image.is-center-image {
background-color: black !important;
}

/* (new27) RESULTS after TOP RESULTS */
.result__sitelinks--large {
    display: inline !important;
}

/* (new16) TOP NEWS - === */
/* TEST LINKs:
https://duckduckgo.com/?q=youtube&t=ffsb&ia=web
RFI - 
== 
== https://duckduckgo.com/?q=rfif&ia=news
======= */

#results--main.serp__results js-serp-results  .results--main .ia-modules.js-ia-modules{
    height: 0 !important;
}
.module.module--carousel.js-module--news {
    height: auto !important;
/* border: 1px solid red !important; */
}
.module--carousel__items {
    height: auto !important;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}
/* .ia-modules.js-ia-modules:not(:empty) , */
#links.results.js-results  #organic-module:not(:empty) {
    float: left !important;
    height: auto !important;
    width: 98.3% !important;
    margin-left: 0% !important;
    margin-bottom: 15px !important;
    border-radius: 5px ;
border: 1px solid gray !important;
/* border: 1px solid aqua !important; */
}

/* (new34) MORE VIDEOS BUTTON */

/* (new34) */
.module__footer.js-carousel-module-more::before {
    content: "→";
    left: 60% !important;
}


#links.results.js-results  #organic-module:not(:empty)  .module.module--carousel.js-module--news .module--carousel__items.js-carousel-module-items:not(:last-child) .module--carousel__item {
    height: 280px !important;
    width: 17.2% !important;
    margin-top: 8px!important;
    margin-left: -0.3%!important;
    margin-right: 1.3%!important;
border: 1px solid gray !important;
/* border: 1px solid green !important; */
}
#links.results.js-results  #organic-module:not(:empty)  .module.module--carousel.js-module--news .module--carousel__items.js-carousel-module-items:not(:last-child) .module--carousel__item:first-of-type {
    margin-left: 5%!important;
}
#links.results.js-results  #organic-module:not(:empty)  .module.module--carousel.js-module--news .module--carousel__items.js-carousel-module-items:not(:last-child) {
    height: auto !important;
    width: 97.7% !important;
    margin-right: 0% !important;
    margin-left: 0% !important;
    padding: 0px 20px !important;
/* border: 1px solid gray !important; */
/* border: 1px solid tomato !important; */
}
#links.results.js-results #organic-module:not(:empty) .module.module--carousel.js-module--news .module--carousel__items.js-carousel-module-items + .js-carousel-module-more.module__footer {
    float: left !important;
    width: 98% !important;
    margin-top: 0px !important;
/* border: 1px solid gray !important; */
/* outline: 1px solid aqua !important; */
}
/* (new34) */
.module--carousel__left.js-carousel-module-left.ddgsi.ddgsi-left {
    float: right !important;
    margin-top: -40px !important;
    margin-left: 20px !important;
/* outline: 1px solid violet !important; */
}
.module--carousel__right.js-carousel-module-right.ddgsi.ddgsi-right {
    display: inline-block !important;
     margin-top: -40px !important;
    margin-right: 6px !important;
/* z-index: 5000 !important; */
/* outline: 1px solid tan !important; */
}
.js-news-module-title.module__header.module__header--link   {
    margin-left: -4px !important;
    padding-left: 14px !important;
    top: -30px !important;
}

.module.module--news.js-module--news {
    display: inline-block !important;
    width: 99% !important;
    height: 183px !important;
    z-index: 0 !important;
background: #222 !important;
}
.module--news__items.js-news-module-items   {
    height: 162px !important;
    top: -31px !important;
    padding-left: 1.3%;
    padding-right: 1.8%;
/* border: 1px solid red !important; */
}
.module--news__items.js-news-module-items   .module--news__item   {
    height: 158px !important;
}
/* #organic-module .module--news__items .module--news__item  */
.module--news__item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 230px;
    width: 20%;
    margin-top: 4px;
    margin-left: -0.5% !important;
    padding: 0px 5px !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    cursor: pointer;
    white-space: normal;
/* background: #222 !important; */
}

.module--news__item:not(:last-child) {
    margin-right: 1.2%;
    margin-left: -1% !important;
}
.module--news__item:last-child {
/* margin-right: -1.4% !important; */
    margin-left: -1% !important;
}

.module--news__body {
    box-sizing: border-box;
/* height: 135px !important; */
    padding: 0.25em !important;
}
.module--news__body__title {
    display: block;
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 0.20em;
    max-height: 5em;
    overflow: hidden;
}
.module--news__body__content {
    font-size: 0.8176em !important;
    line-height: 1.2 !important;
    min-height: 70px  !important;
    max-height: 4.1em !important;
    overflow: hidden;
}
.module--news__image {
    background-size: contain !important;
    height: 100%;
    width: 100%;
}
.module--news__right {
    padding-left: 1px;
    right: 13px !important;
}
.js-news-module-more.module__footer {
    top: -20px !important;
/* background: red !important; */
}

/* (new22)  CARROUSELS NEWS EMISSIONS
https://duckduckgo.com/?q=i+may+desrtoy+you&ia=news&iai=https%3A%2F%2Fwww.franceinter.fr%2Femissions%2Fune-heure-en-series%2Fune-heure-en-series-13-juin-2020
== */
.module--carousel__item {
    width: 17.2% !important;
    height: 280px;
}
.module--carousel__item:first-child{
    margin-left: 4%;
}
.module--carousel__image-wrapper {
    position: relative;
    float: left;
    height: 72%;
    width: 100%;
background-color: #f7f7f7;
}
/* (new22) NO IMAGE */
.module--carousel__item  >  .module--carousel__body {
    width: 100% ;
    height: 280px ;
    margin-bottom: 20px !important;
    padding: 0 0.75em ;
    text-align: center ;
    overflow: hidden ;
/* background: red !important; */
}
/* (new22) WITH IMAGE */
.module--carousel__item  > .module--carousel__image-wrapper + .module--carousel__body {
    width: 100% ;
    height: 78px ;
    margin-bottom: 20px !important;
    padding: 0 0.75em ;
    text-align: center ;
    overflow: hidden ;
/* background: red !important; */
}
/* (new18) TOP NEWS - VIDEOS CARROUSEL - === */
.module.module--carousel.js-module--videosl {
  box-shadow: none;
  height: 351px !important;
  overflow: initial;
}
.module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items {
  height: 299px !important;
}
.module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items .module--carousel__item.has-image {
height: 270px !important;
}
.module.module--carousel.js-module--videos .module--carousel__item.has-image .module--carousel__image-wrapper.js-carousel-item-im...

Reviews

No reviews yet.