hey where my youtube css request go?

makingwebbettermakingwebbetter
edited June 2018 in Style Requests Chrome

site: any 'youtube search results page' like

www.youtube.com/results?sp=CAMSBBABGAJCBAgBEgA%253D&search_query=astro+teller

goal/want: what is the code to do this?

  1. put the 'view count' as the first thing you see (at topmost of all the text)

  2. put the date/year under that?

  3. put the 'youtube channel source/link' like

  • Tested

  • Singularity University

under that?

  1. then the 'video description' under those

  2. then the title under those?

do not know any css (aka: web code stuff)

also, when you click 'filter' it auto-expands

any simple ways to keep the 'filter' auto-expanded?

or is this a js thing?

any simple ways for 'regular ppl' to tell if something would work with css, or if it needs js?

or are there no heuristics or simple way for for 'regular ppl' to tell if something would work with css, or if it needs js?

Comments

  • AnimatoriumAnimatorium
    edited June 2018 Firefox
    I was quite lost after 2.
    Though, this should work finely. 
    @-moz-document url-prefix("www.youtube.com/results?"), url-prefix("https://www.youtube.com/results?") {
/* Video Title height change to fit the rest */
a#video-title.yt-simple-endpoint.style-scope.ytd-video-renderer {
    position: relative !important;
    top: 20% !important;
    padding-top: 6px !important;
}

/* Views position change and index to be visible */
div#metadata-line.style-scope.ytd-video-meta-block > *:nth-child(1) {
    position: absolute !important;
    top: -9% !important;
    margin-left: -9% !important;
    z-index: 9999 !important;
}
/* Upload time */
div#metadata-line.style-scope.ytd-video-meta-block > *:nth-child(2) {
    position: absolute !important;
    top: 0px !important;
    margin-left: -9% !important;
    z-index: 9999 !important;
    padding-bottom: 50px !important;
}
}
    As for clicking automatically "Filter" only JS can do. 
    
// ==UserScript==
// @name     a script name for Greasemonkey
// @version  1
// @grant    none
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
// @include  https://www.youtube.com/results?*
// ==/UserScript==
$( document ).ready(function() {
$("[aria-label=Search filters]").click();
});
    CSS(Cascading Style Sheets) only works as a protocol for styling elements(nodes), so, i mean, clicking isn't styling, aye.
  • makingwebbettermakingwebbetter
    edited June 2018 Chrome

    • tested the first and it didnt work

    • some of the text is moved to the left where parts of it is hidden by the 'video image'

    • this is the new youtube layout to clarify

    • did it work for you?

    use https://violentmonkey.github.io since it's better veeriosn for js, not sure if there's a better one

    didnt work on this for example www.youtube.com/results?sp=CAMSBAgFEAFCBAgBEgA%253D&search_query=stanford+university

    but did work on www.youtube.com/results?sp=CAMSBBABGAJCBAgBEgA%253D&search_query=stanford+university

    "only works as a protocol for styling elements(nodes)

    clicking isn't styling"

    is this a good list of what counts as 'styling' since that's very vague

    i guess there's no good ways to tell without extensive knowledge of css?

  • AnimatoriumAnimatorium
    edited June 2018 Firefox
    Gotta focus on reading html/css/js~jquery first.
    There are many places, most famous w3schools.com.
    A quick rundown would be:
    HTML sets the structure/static content.
    CSS sets the coloring/positioning/Background/index/etc of the HTML content. 
    JS sets the dynamic(clicking most noticable) behavior of the HTML content if needed.
    They all work together and divide the work done as years pass.
    (By the way, everything worked on my browser as i always check before sharing, this could be because you're using Chrome)
  • makingwebbettermakingwebbetter
    edited June 2018 Chrome

    why in the universe would the code work differently using the method of js code into site with the same extension on two common web clients..... ?

    for firefox even the js part fully worked on both links, taht's werid...

    do you know what is going on with the js part?

    some links worked, some dont

  • AnimatoriumAnimatorium
    edited June 2018 Firefox
    Because every client would use a version of that language(script) and then filter through, using its core and mechanics with subjective safety and speed.

    Check if the Address starts with https://www.youtube.com/results?*
    You could possibly replace: // @include https://www.youtube.com/results?* with
    // @include youtube.com/results?* just to be, certain.

    Plus, i used Jquery, i guess you could do this using pure js instead and not a library of it(?) hmm, nah, it should work nonetheless.
    Just read about js and find a workaround, i won't go into Chrome using tampermonkey.
  • makingwebbettermakingwebbetter
    edited June 2018 Chrome

    for js didnt change a single thing and it works on those links mentioend isnt that werid?

    'filter through, using its core and mechanics with subjective safety and speed'

    eh? so web clients doesnt use the code exactly the same?? it shouldnt be that different yea?

Sign In or Register to comment.