hey my google css request disappeared?

makingwebbetter

site: google search results pages

wants/needs/goals:

1. decrease font of the 'title of the search results'

2. increase font of the 'green url'

3. switch the position of the 'title of the search results' and the 'green url'

for example,

• so that means to show the 'green url' first

• & 'title of the search results' after that

seems like a simple thing but maybe not? is this possible?

i dont know any css/js

stonecrusher

For 1 & 2:

@-moz-document url-prefix("https://www.google.com/search?q=") {
/* Title */
#rso .rc > .r { font-size: 1.2em !important; }

/* URL */
#rso .rc > .s .iUh30 { font-size: 1.5em !important; }
}

In this case number 3 is not possible with CSS because the items to rearrange are not direct children of the same container. JavaScript needed.

makingwebbetter

#-o

stonecrusher

No, you need to learn html and CSS to understand.

!important overrides other rules by giving it a higher specifity
https://www.w3.org/TR/CSS2/cascade.html#important-rules

em is a relative instead of absolute (px) value and more or less best practice
https://www.w3.org/Style/Examples/007/units.html

#rso is an arbitrary identifier name set by google. You need to find them out by inspecting the html code. Developer tools: Ctrl+Shift+C

there's no other ways at all?

In CSS no practical or overly complicated ones (reposition everything using position:absolute or stuff like that). Extreme workarounds are not worth the effort as you have to rewrite everything if google changes a tiny bit of their code.

makingwebbetter

;))

stonecrusher

isnt mozilla links better than w3 overall?

Can't say that. Maybe mozilla has a few more words for explanation and examples than w3, which is more technical.

dont you need to know lots of advance things? and knowing a lil basic wont help?

No, it depends on what you want to do and most of the time it's dead easy. 1. Find out identifier / selector via developer tools 2. Apply your style to the selected element like font-size or background-color

this seems the case with every other topics/things so i dont expect it to be any diff for the field of 'web coding stuff'

We're not building our own stuff but modify highly advanced stuff. That's why sometimes advanced understanding is needed. You won't get that in two weeks.

!important

is this done jsut as a safety net? a 'just in case'? if so, why not jsut put it on every single thing and code just to make sure it works?

As our goal is to overwrite the existing rules, that's what we do. Put !important after each of our own rules.

https://www.w3.org/Style/Examples/007/units.html

this page actually seems pretty good, is there no mozila evilivent to this?

I don't know, just google.

or otehr sites or blogs or youtubes ? this kind of stuff is better shown in videos anyhow

Videos are most of the time pretty shitty as you can't go on your own tempo, need to pause, rewind and spoken language often is not as clear and precise as a text that has been read through several times

that page bolds stuff so that's good cos many sites dont even do basic stuf like bolds

You should read the whole thing and not just the bold stuff... it takes time.

there's prerequsities for that page tho

HTML knowledge is always required before learning CSS.

'rewrite everything if google changes'

is the everything long? the code seems simple tho maybe requires lots of understanding of stuff

It depends on your own code. If google only changes a classname, you can search and replace that for the new one. If they change the whole html structure you have to rethink through all your selectors.

so no web tech better than css so far?

It's not a flaw in CSS. It does a great job. But it was never meant for the thing we use it for. It was made considering to have full control over a websites' html and css, which we don't. We only overwrite foreign css and have no control over the html at all, which is a bit hacky if you want to call it like that.

js would not be any easier i guess?

It depends on what you want to do. Js is more powerful, but much more complicated and harder to maintain. It can change the html structure.
However the tasks are split and usually you need all three for a decent website:

• html for the general structure and content
• css for positioning and styling
• js for interaction like onclick events, popups, changing selections, filtering / rearranging tables and so on

Meanwhile css can do more and more common things that you needed js for in the past like animations.

Analouge to Stylus as injector for CSS with userstyles.org as library there is Tampermonkey for JS with greasyfork.org as library. You can test and see the differences.

(There are alternatives to the above mentioned projects, but those are good examples)

krystian3w

switch the position of the 'title of the search results' and the 'green url'

.rc h3.r {position: relative; top: 40px; margin: -25px 0 0 0}
.rc div.s div.f {padding: 0 0 25px 0}

if no break on your DPI / Zoom page or something else (e.g template google generated with other class / elements positon in HTML tree). Maybe wrong understand switch positon.

---

You should add some class to extend support e.g twitter post, videos in google results - possible use regexp for part of style.
So here can be a better script many times if no possible fix relative positon in only CSS / regexp.

makingwebbetter

X(

krystian3w

#res .rc .r {
position: relative;
top: 2em;
}

No this is complete break google search results:

• 
• 

Padding and margins in my opinion works better / safer.

---

what does this mean?

Sometimes not standard zoom or dpi can broke the page as it is anyhow done or the style of Userstyles is of poor quality.

---

dunno what this means?

Imgages thumbnail video they cover the link after being moved by CSS itself.

• 

I could not correct it with CSS only - because this elements does not differ much from the normal link with the description of the page.

At least I do not see what to distinguish them like not the URL (regxp - Help with @-moz-document and regexp).

makingwebbetter

sorry, here is the full code:

#res .rc .r {
    font-size: 13pt;
}

#res .rc cite {
    font-size: 13pt;
}
#res .rc .s div div:first-child {
    margin-bottom: .5em;
}

#res .rc .s div div:first-child {
    margin-top: .5em;
}

#res .rc .r {
    position: relative;
    top: 2em;
}

what is this code that works doing differently from teh code in this thread?

krystian3w

I do not know, for my still show bad:

• 
• 

makingwebbetter

hmm.. that's weird, i guess there's a big difference between chrome & firefox?

krystian3w

Big - maybe no:

Opera 53.

Still position glitched.

I admit that changing the font-size quasi-changed shape letters (maybe it seems to me).

makingwebbetter

is it cos of the web client (opera) then?

• i really dont knwo why diff web clients affect the same exact code so much

• it makes things lots more complex than it needs to be

• but it works on chrome

makingwebbetter

on chrome the code i put doesnt work anymore, not sure when it stopped working exactly

dunno why, used to work tho