Basic theme to fix header image displaying improperly

checwi · 2023-03-15T11:43:04+00:00

Hello! Give me ideas on how to make your video stand out.

instagramschrift · 2022-05-31T00:10:50+00:00

You can change font of instagram by this tool: https://instazoom.mobi/instagram-schrift/

pcpmasterrace · 2022-03-26T08:31:12+00:00

I know that there is a dynamic banner by default, but does it rely on Javascript behind the scenes? Anyone know?

TheAmeliaMay · 2021-03-10T00:20:14+00:00

Btw, it's a pain in the ass to put in all those quadruple-spaces, even with a keyboard macro.

JasonCarswell · 2020-05-22T23:33:49+00:00

/u/CompleteDoubterII , /u/kokolokoNightcrawler , /u/send_nasty_stuff mod , /u/Entropick , /u/PikonParadox

I'm not sure if you saw this or not (ie. mentioned in post vs. this comment mention certainly goes to your messages).

This is just an update, so there's nothing pressing, urgent, or necessarily needing a response, unless you want something different that what's mentioned.

JasonCarswell · 2020-04-03T21:05:04+00:00

Correction (the first # was converted into a title):

#header,#header2{background-image: url(%%name%%)!important;}

magnora7 · 2020-03-28T05:30:01+00:00

Thanks for creating more documentation :)

magnora7 · 2020-01-03T08:45:09+00:00

Nice, thanks for crossposting it here

magnora7 · 2019-12-26T04:24:37+00:00

try "background-image:" instead of "background:"

macadoum · 2019-12-25T21:40:00+00:00

I never learned CSS too, and I do exaclty like you u/Snow : copy-paste and see if it works, haha. A pretty hard way to learn CSS but very visual and enjoyable.

magnora7 · 2019-12-25T12:55:46+00:00

Not sure, maybe the URL is incorrect, but I don't know. That should probably work

JasonCarswell · 2019-12-25T12:47:53+00:00

I know that's what you want, but I want to be clear about which white area. For each individual post's section, correct? (Not counting the white in the sidebox chat, etc.)

Tiwaking · 2019-12-25T05:14:21+00:00

The banner for your sub is https://saidit.net/media/x_GWCKnmWahJIQd_6_xpUTYvuOtdvFqljR649DjMVMM.png

Can you upload that background somewhere and then link to that media?

Tiwaking · 2019-12-25T04:42:28+00:00

Did it work?

Tiwaking · 2019-12-25T04:40:08+00:00

.link {

background: url(https://images2.imgbox.com/96/3c/RWMpTzjF_o.png PNG )

???

What about

background-image: url("https://images2.imgbox.com/96/3c/RWMpTzjF_o.png");

Im out of ideas if that doesnt work.

Tiwaking · 2019-12-25T04:36:06+00:00

Whats wrong with

.link {

background: url(https://images2.imgbox.com/96/3c/RWMpTzjF_o.png)

???

magnora7 · 2019-12-25T03:35:28+00:00

Haha yes there are a lot of odd requirements, created by all the code we inherited

JasonCarswell · 2019-12-25T03:25:07+00:00

"No, I want to change it to be this pic."

What is "it"? Describe what you want affected.

magnora7 · 2019-12-24T22:02:51+00:00

It's part of the open source code, the CSS (also called LESS files) are spread across about 20 files: https://github.com/libertysoft3/saidit/search?l=Less&q=reddit

JasonCarswell · 2019-12-24T18:04:43+00:00

It looks like you want your white box post thing to be pink? (Grey in dark mode.)

You might want to first try to simplify - turn off the dashed outline style, etc.

Get the background to the colour you want, then add things on, like rounded corners, etc. and see what breaks.

When you find a glitch report it to M7 D3.

I learned by trial and LOOOOOOOOOOOOOOOOTS of errors. Sadly, sometimes there is just no solution to be had.

JasonCarswell · 2019-12-22T16:04:00+00:00

To my knowledge, all the mods of this sub know CSS to some degree.

/u/magnora7 and /u/d3rr are the co-admins of SaidIt.

/u/OmegaUser296, /u/Mnemonic, and I are fans.

I haven't looked at the code since it got the major facelift recently. However, you can have a look at the code of my shortest titled sub: https://saidit.net/s/Sex/about/stylesheet/ (You can look at other CSS you admire by swapping "sex" for that sub's title.) The opening paragraph with instructions is not completed, nor correct, and is now out of date. However, you will find that I mapped out almost everything there with commented descriptions about what was being affected.

Best other advice: right click "Inspect" and explore and experiment.

As far as that image goes, I don't have enough information about it. You can search my CSS for "retry thumb" but I don't recall if I changed that. I don't know what is to the left of that ending in "w", which you might also search for.

d3rr · 2019-12-18T20:13:15+00:00

I think it's possible. Try setting the top position on those links instead of the left. The whole sidebar might also need position: relative

I can look into this more later.

macadoum · 2019-12-18T19:18:26+00:00

u/d3rr and u/magnora7 do you know if this is possible to do on my sub s/FistfulOfFrags

macadoum · 2019-12-17T22:58:24+00:00

Is it only possible ? I'm not even sure.

magnora7 · 2019-12-11T18:56:57+00:00

Ah I am not sure honestly. At least now you know where the element is so you can re-locate it yourself. Good luck.

macadoum · 2019-12-10T17:58:22+00:00

Thanks, but it doesn't help me much. My menu is still in the sidebar. I want it right there, next to the first drop-down menu : https://imgur.com/XKYKK1z

On Yang's sub the code is on wiki/config/sidebar but is well placed. On SaidIt, the menu seems to be locked up inside the sidebar.

d3rr · 2019-12-10T01:19:33+00:00

m7 is right about absolute positioning. If you want to keep it that way, add bottom margin or padding to the parent container, to give the menu thing room to live.

magnora7 · 2019-12-10T01:13:18+00:00

Here is how I would fix this:

Right click on the broken thing and go to "inspect" or "inspect element" depending on your browser.
This will open up a bunch of information about the page, you should make your browser window very wide so you can see everything
The box of broken buttons is in a <ul> </ul> html element, shown in the inspector. If we click this ul thing (which might already be selected because it's the thing we did 'inspect' on), it shows the CSS for that ul element below it in the inspector. In this particular instance, the CSS for that box of buttons is called ".side .md ul:first-child" as you should be able to see in the inspector.
The fact it's overlapping other stuff shows it's a positioning issue. Within ".side .md ul:first-child { }" we can see that there is the CSS property "position: absolute;"
Uncheck or delete this property in the inspector, and we can see that the bar of buttons jumps to the right spot. So this means instead of "position: absolute;" we instead want "position: unset;" and it would work properly
Now open your sub CSS and find an entry that corresponds to ".side .md ul:first-child" and find within that where it says "position: absolute;" and change this to "position: unset;"
Save your CSS and your sub's CSS should be fixed!

Hopefully that helps, and will give you the tools to diagnose and correct future CSS problems. Let me know if you have any questions.

macadoum · 2019-12-10T00:13:17+00:00

Ah ! I think I understood what is the problem : on Reddit, I can apparently use an editor which create submenu automatically and this not exist on SaidIt.

I probably could also create a dropdown menu for my subsaidit in a different way. But I do not master CSS design...

Mnemonic · 2019-07-08T20:47:58+00:00

I just posted it here, I didn't know here else.

Maybe a /u/d3rr thing for way down his bucket-list... I mean we, as saidit, want to be viewed by pilots flying airplanes too right?

OmegaUser296 · 2019-05-07T00:02:59+00:00

Done

OmegaUser296 · 2019-05-07T00:01:34+00:00

Good Idea, also will add the short explanation on how it works, if you use the working code give credit please, I will add it once done with the current thing I am doing.

Mnemonic · 2019-05-06T23:56:33+00:00

Can you edit the post to show the working code, for reference?

magnora7 · 2019-05-05T02:24:39+00:00

Thanks :)

OmegaUser296 · 2019-05-05T02:23:46+00:00

I credited you for the code snippet It's marked as Additions and Fixes 4 in the code

(I intend to go back and comment what each of them do from here on out so it might change.)

magnora7 · 2019-05-05T02:22:10+00:00

No problem, glad to help!

OmegaUser296 · 2019-05-05T00:06:11+00:00

That worked, I did one more change I found a conflicting piece of code, the sidebar was fixed and then when the conflicting code was removed the body code also worked. Thank You!

magnora7 · 2019-05-04T23:32:18+00:00

Try doing just ".content" instead of ".body .content". That's how it is in the actual css for the site, I just checked

magnora7 · 2019-05-04T23:05:51+00:00

It works for me, .content { margin-top: 32px; } looks pretty good for in my browser.

Then to fix the sidebar do .side { margin-top: 32px; } as well.

Between the two that should fix everything. Looks good after I try out those changes in the css inspector in my browser. Let me know if you need more help.

JasonCarswell · 2019-05-04T02:49:12+00:00

Nitpicking gets 90% to 100% A+++

magnora7 · 2019-05-03T13:09:27+00:00

Good suggestion, it's been fixed.

JasonCarswell · 2019-05-02T16:50:34+00:00

The footer "about help tech donate" still needs a touch more rounding to be consistent with the Moderators box, etc.

JasonCarswell · 2019-05-02T16:49:08+00:00

Maybe I was initially correct after all. Memory is funny.

Mnemonic · 2019-05-02T16:31:01+00:00

I meant with the new corners first they were more round, cutting away more of the image. More oval than the rectangular version we have now.

JasonCarswell · 2019-05-02T16:13:14+00:00

I love rounded corners. My old site was all rounded. The old fashioned way, all with images in tables.

My favourite place for rounded corners? Architecture!!! Especially in the Bay Area with the Victorian / Edwardian ornate dentals and details and rich palettes.

JasonCarswell · 2019-05-02T16:10:39+00:00

Really? I asked several times to go from 70x70 to 100x100, and increase of [some]%.

I saved the thumbnail at 140x140 but that's not what's displayed.

It's still displayed as 70x70.

Mnemonic · 2019-05-01T09:31:19+00:00

I whined and got the thumbnails a tat bigger ^ ^ so my images would display correct.

Tom_Bombadil · 2019-05-01T04:17:26+00:00

Rounded corners can be exploited....

JK! ;-)

d3rr · 2019-05-01T03:19:34+00:00

I hated the thumbnails at first and warmed up too!

JasonCarswell · 2019-05-01T02:45:48+00:00

I like the new rounded corners of the search, text entry, and image thumbnails. Initially I though the thumbnails was way too much for their small size but now I'm loving it.

IMHO consistency in rounded corners should be applied site wide. If you round the corners at 20px on the sidebox then the footer, search, and thumbnails should use the same curve. Exceptions may be made for smaller curves on boxes within boxes, or larger curves for bigger fields, or simply for aesthetics.

"A foolish consistency is the hobgoblin of little minds..." ~ Ralph Waldo Emerson

https://trentonchang.files.wordpress.com/2014/11/emerson-quotes.jpg

https://politicalninja.files.wordpress.com/2011/04/consistency.jpg

hennaojisan · 2019-04-27T23:23:46+00:00

Workers of the World Unite

JasonCarswell · 2019-04-27T23:00:40+00:00

Default reference: https://saidit.net/s/SaidIt/wiki/index

With CSS reference: https://saidit.net/s/DecentralizeAllThings/wiki/index

Comparing "Wiki Tools" on these pages it becomes clear there is something else going on here than I'd originally thought.

Initially I thought it would be nice to put the wiki tools in the header tab menu, beside "Hot new insightful fun top comments wiki". (It is on my todo list to mock up to show you.) I had considered the sidebox but thought it might get lost.

Since I learned how to add images to the sidebar, and now seeing how the Wiki Tools is some how connected, it seems to me to be the right place for it, say, between the submit buttons and chat box. Before I was afraid it might get lost and unnoticed in the sidebox. I don't know why I hadn't thought of this before - it won't get lost with a noticeably different coloured background. Months later I don't think it even needs to be noticed I looked at those tools months ago, and still like them around, but honestly I don't think I've ever used them.

OmegaUser296 · 2019-04-26T22:58:42+00:00

JasonCarswell · 2019-04-26T22:24:49+00:00

No worries.

I don't need or even want the credit.

And if you're editing you can remove big space before none, and more importantly change "Banner" to "Logo".

JasonCarswell · 2019-04-26T21:49:26+00:00

Please add your thoughts about what you want this sub to do for you and the SaidIt community.

OmegaUser296 · 2019-04-26T18:24:35+00:00

Oh shit wrong credit in the code that's on me, I'll edit the snippet. Also I say Logo and Banner interchangeably in this case.

Fixed the credit (Sorry about that I must have gotten my stuff mixed up I was doing a lot at once)

JasonCarswell · 2019-04-26T17:14:20+00:00

I started this comment and then just decided to add it to and modify the sidebox and start the wiki...

Since the post title is now a little misleading, and to not disappoint you, here's some utterly unrelated stuff.

After an image search for "build" to find the image used for this post, I came across a few interesting images:

Custom built motorcycle: https://iamclosetgeek.files.wordpress.com/2013/02/tf-side1wm1.jpg

Elaborate semi-neo-classical architecture, looks like is't made of Lego, but is a "Minecraft Mega-build": https://i.imgur.com/Xa5YIQT.jpg I was collecting a lot of architecture images for a while for my Trutherism 101 project. I wanted to use video samples. But the girl talks to the guru on the mountain, so I thought maybe there's a cave, but inside it's bigger than outside, like the Tardis, and the architecture is Baroque and over the top, and between each set of columns there can be a different kind of theatre stage, and the screen can show the video samples. It might be nice but too much work to be sure. Then I came up with a simpler, more effective, straight forward idea, to use if necessary. I say if necessary because I've finally realized I don't need to cite sources. My creations will be the new original source. I may still use a sound bite from time to time. Anyway, that image looks like it came right out of my imagination, more or less. Maybe one day I'll actually find a reason to build in 3D what I had/have in mind.

https://saidit.net/s/DIY/comments/lga/project_open_core_final_build_pics_a_beautiful/

And I added some stuff to /s/Architecture.

JasonCarswell · 2019-04-26T17:11:08+00:00

Actually that doesn't remove the banner, or even the header. It only removes the logo.

by u/OmegaUser296

???

I just gave wrote that for you. I took a relevant snip of my CSS code kludged together from lots of sources, and modified that snip to your need and shared it with you, with the exception of the big space and the /* comment */.

I don't care about stolen valor or credit, but really man, check the ego. A thank you in the credit is a nice acknowledgement but not critical or expected, unless marked so. Not super experienced in the realm of code, maybe I'm wrong.

SaiditCSSthemes

SaidIt CSS Themes

MODERATORS