Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Grammy on January 18, 2021, 08:27:26 AM

Title: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 08:27:26 AM
2.0.17, Default

You guys see "the whole thing"?  The entire forum, here, everything but the background (backdrop.png)?  It's all wrapped in this very thin border.  I'm guessing that it all lives in index.css but which block of code controls the exterior border wrap about the entire forum?  'Cause I have to mess with it.  I just have to.   O:)
Title: Re: Framing the whole thing (CSS)?
Post by: Antes on January 18, 2021, 08:35:07 AM
well, 2.0 is bit old and its not exactly a border, but more like background images... (since when 2.0 created there was no proper CSS :P) - people had to do images with curves so you can actually have curved themes (unlike today we just use border-radius).

You have to mess with main_block.png unless you go for rewrite the small parts of the main template (you can take a look at my 2.0 themes)...
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 08:39:06 AM
Quote from: Antes on January 18, 2021, 08:35:07 AM
well, 2.0 is bit old and its not exactly a border, but more like background images... (since when 2.0 created there was no proper CSS :P) - people had to do images with curves so you can actually have curved themes (unlike today we just use border-radius).

You have to mess with main_block.png unless you go for rewrite the small parts of the main template (you can take a look at my 2.0 themes)...

Oh, it's an image, not a border-radius, then?  Phooey.  I mean, I'm willing to fire up GIMP and see what I can do, but I was SO hoping it was just a code tweak. 

But just between you and me...   main_block.png has always hated me.   :D
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 08:42:12 AM
Weirdness though...  I just opened up main_block.png and I can't see a border around it or on the sides... 

I need to go soak my head in coffee.   :-\


Dropping back by to ask...  do you think it might work to create a div that surrounds the wrapper and give that a border?  If so, edit index.template.php?
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 09:29:20 AM
Found it:

index.css

div#wrapper

(Just mucking about with a solid border;  it's all Fritos and milk from here!)   :D
Title: Re: Framing the whole thing (CSS)?
Post by: Antes on January 18, 2021, 10:49:55 AM
Well, wrapper contains footer as well so unless you want a border all around... yea, you should use div#wrapper... other than that, you should do some border work on #header & #content_section.

I'd love to see the end result of this full-border work...

Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 11:01:47 AM
Quote from: Antes on January 18, 2021, 10:49:55 AM
Well, wrapper contains footer as well so unless you want a border all around... yea, you should use div#wrapper... other than that, you should do some border work on #header & #content_section.

I'd love to see the end result of this full-border work...

Well, it's just another one of those "practice forums" where I break stuff, so it looks pretty awful, but here ya go.   :D
(Still trying to figure out why SimplePortal insists on being outside the wrapper when everyone else plays inside, but what are ya gonna do?)
Title: Re: Framing the whole thing (CSS)?
Post by: Antes on January 18, 2021, 11:14:53 AM
A RBGA border (https://css-tricks.com/transparent-borders-with-background-clip/) could work nicely...
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 01:11:25 PM
Quote from: Antes on January 18, 2021, 11:14:53 AM
A RBGA border (https://css-tricks.com/transparent-borders-with-background-clip/) could work nicely...


Ooooo, a new toy!  I'm gonna go play with it.   :D
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 01:22:29 PM
I'm dangerous, ha!!  This is awesome, thanks!
Title: Re: Framing the whole thing (CSS)?
Post by: shadav on January 18, 2021, 02:00:43 PM
depending on your browser, you should be able to right click the area you are wanting to edit and then click on inspect

it will show you what parts to edit and you can play with it before actually doing the edits on your files to see how it will look first, just refresh the page to set it back to normal.

I usually get rid of all the background images and just use css
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 02:06:23 PM
Quote from: shadav on January 18, 2021, 02:00:43 PM
depending on your browser, you should be able to right click the area you are wanting to edit and then click on inspect

it will show you what parts to edit and you can play with it before actually doing the edits on your files to see how it will look first, just refresh the page to set it back to normal.

I usually get rid of all the background images and just use css

I've been playing around with "Brave" browser this past week and its inspection features aren't the best.  I guess I'll have to use Firefox to really "get in there".   :)
Title: Re: Framing the whole thing (CSS)?
Post by: Antes on January 18, 2021, 03:14:50 PM
I did all my on-spot edits with Firefox till new Edge... and switched all my eco-system to new Edge.

I suggest going for more blue-ish colors and be brave to edit template - default template is not enough to achieve something with "just" CSS... also I'll drop you another site for background images: https://coolbackgrounds.io/

At first theme, it takes quite a lot of time to remove old code and adapt to new one, but once you do that... your theme becomes insanely flexible :)
Title: Re: Framing the whole thing (CSS)?
Post by: Kindred on January 18, 2021, 03:15:57 PM
both Antechnius and myself have redone themes in pure CSS without the images.
I modified the Stuiod003 theme from bloc http://fx-sabers.com/forum/
and
Antechinus modified the curve (aka default) theme. https://test.turtleshellprod.com/
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 03:19:34 PM
Quote from: Antes on January 18, 2021, 03:14:50 PM
I did all my on-spot edits with Firefox till new Edge... and switched all my eco-system to new Edge.

I suggest going for more blue-ish colors and be brave to edit template - default template is not enough to achieve something with "just" CSS... also I'll drop you another site for background images: https://coolbackgrounds.io/

At first theme, it takes quite a lot of time to remove old code and adapt to new one, but once you do that... your theme becomes insanely flexible :)

Well, they do say that blue is not only easy on the eyes but it actually creates better vision.  (That may be redundant, ha.)
Wow, great site, thanks!  I could muck around in that all day.   :D
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 03:21:21 PM
Quote from: Kindred on January 18, 2021, 03:15:57 PM
both Antechnius and myself have redone themes in pure CSS without the images.
I modified the Stuiod003 theme from bloc http://fx-sabers.com/forum/
and
Antechinus modified the curve (aka default) theme. https://test.turtleshellprod.com/


Wait, what?  Those are pure CSS?   :o
Title: Re: Framing the whole thing (CSS)?
Post by: shadav on January 18, 2021, 03:31:58 PM
I'm not the best examples but  :P
there is a lot you can do with css
https://adserver.business/test/smf/

even changing font colors ;)
https://adserver.business/test/smf21/
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 03:42:08 PM
Quote from: shadav on January 18, 2021, 03:31:58 PM
I'm not the best examples but  :P
there is a lot you can do with css
https://adserver.business/test/smf/

even changing font colors ;)
https://adserver.business/test/smf21/


The CSS isn't loading for me but that may just be this new browser I'm trying, so I'll look again on another one. 

(Staring at shadav's sig and secretly wondering if any of the squirrels currently robbing my birdfeeders are "foamy"...)   :o
Title: Re: Framing the whole thing (CSS)?
Post by: Kindred on January 18, 2021, 04:08:23 PM
Quote from: Grammy on January 18, 2021, 03:21:21 PM
Quote from: Kindred on January 18, 2021, 03:15:57 PM
both Antechnius and myself have redone themes in pure CSS without the images.
I modified the Stuiod003 theme from bloc http://fx-sabers.com/forum/
and
Antechinus modified the curve (aka default) theme. https://test.turtleshellprod.com/


Wait, what?  Those are pure CSS?   :o

with the exception of the background and the header/logo, on the fx-sabers one yes -- for Antechinus' one on my test site, the on/on2/off are images still, but simple to replace with a Fafa icon

it gets even easier in 2.1
https://test2.turtleshellprod.com/ is my working site to remake the fx-sabers theme in 2.1 -- and has had ONLY CSS changes from the curve2 default except for 2 template files with really minor changes.
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 04:22:30 PM
Quote from: Kindred on January 18, 2021, 04:08:23 PM
with the exception of the background and the header/logo, on the fx-sabers one yes -- for Antechinus' one on my test site, the on/on2/off are images still, but simple to replace with a Fafa icon

it gets even easier in 2.1
https://test2.turtleshellprod.com/ is my working site to remake the fx-sabers theme in 2.1 -- and has had ONLY CSS changes from the curve2 default except for 2 template files with really minor changes.

Oh, that last one is scary good.  CSS is probably the most fascinating part of site coding (to me, anyway) but I'm such a rookie (hack).  You guys make me dizzy.

Title: Re: Framing the whole thing (CSS)?
Post by: shadav on January 18, 2021, 04:42:33 PM
Quote from: Grammy on January 18, 2021, 03:42:08 PM
Quote from: shadav on January 18, 2021, 03:31:58 PM
I'm not the best examples but  :P
there is a lot you can do with css
https://adserver.business/test/smf/

even changing font colors ;)
https://adserver.business/test/smf21/


The CSS isn't loading for me but that may just be this new browser I'm trying, so I'll look again on another one. 

(Staring at shadav's sig and secretly wondering if any of the squirrels currently robbing my birdfeeders are "foamy"...)   :o

do you use an adblocker? for some reason they don't load the css

:laugh: if one of them starts throwing them at your head, then yep it's foamy  :P
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 05:02:21 PM
Quote from: shadav on January 18, 2021, 04:42:33 PM

do you use an adblocker? for some reason they don't load the css

:laugh: if one of them starts throwing them at your head, then yep it's foamy  :P


That was it, the blocker.  I see what you mean and especially those fonts, wow!

I need to prepare to cope with foamy squirrels, I think.   ::)
Title: Re: Framing the whole thing (CSS)?
Post by: Kindred on January 18, 2021, 05:34:15 PM
Quote from: Grammy on January 18, 2021, 04:22:30 PM
Quote from: Kindred on January 18, 2021, 04:08:23 PM
with the exception of the background and the header/logo, on the fx-sabers one yes -- for Antechinus' one on my test site, the on/on2/off are images still, but simple to replace with a Fafa icon

it gets even easier in 2.1
https://test2.turtleshellprod.com/ is my working site to remake the fx-sabers theme in 2.1 -- and has had ONLY CSS changes from the curve2 default except for 2 template files with really minor changes.

Oh, that last one is scary good.  CSS is probably the most fascinating part of site coding (to me, anyway) but I'm such a rookie (hack).  You guys make me dizzy.


So, do you know how I learned most of my mySQLand css?

Ask questions...   either on google, or from an expert (like on here. :) )


google: make rounded corners CSS (that one was pretty much instant gratificaton)
google: navigation tabs div css (this one took about 15 tries to get it right, and even then, had to get an expert to give me the last hint)
google: mysql replace text inside string

the key is to learn the proper search terms and then try stuff on a test site. The rest of it mostyly falls together after that.
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 05:38:01 PM
Quote from: Kindred on January 18, 2021, 05:34:15 PM
So, do you know how I learned most of my mySQL and css?

Ask questions...   either on google, or from an expert (like on here. :) )


google: make rounded corners CSS (that one was pretty much instant gratification)
google: navigation tabs div css (this one took about 15 tries to get it right, and even then, had to get an expert to give me the last hint)
google: mysql replace text inside string

the key is to learn the proper search terms and then try stuff on a test site. The rest of it mostly falls together after that.

Proper search terms is a huge problem for me, I admit it.  That's what I need:  a site that teaches "proper search terms".   :D
Title: Re: Framing the whole thing (CSS)?
Post by: GigaWatt on January 18, 2021, 06:08:39 PM
Don't write whole sentences, just keywords ;). Whole sentences only make sense if you're looking up errors ;).
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 06:35:59 PM
Quote from: GigaWatt on January 18, 2021, 06:08:39 PM
Don't write whole sentences, just keywords ;). Whole sentences only make sense if you're looking up errors ;).


You should see my red face; that is exactly what I do!!    :D

You guys are tracking me, ha!
Title: Re: Framing the whole thing (CSS)?
Post by: GigaWatt on January 18, 2021, 09:49:03 PM
Quote from: Grammy on January 18, 2021, 06:35:59 PM
You should see my red face; that is exactly what I do!!    :D

Don't get worked up over things that is not worth getting worked up over ;). Life's short, enjoy it :). If it pans out, great, if not, take a look at the problem in a day or two ;). If it still doesn't make sense or doesn't work, leave it be, not worth it at the moment ;).
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 18, 2021, 09:53:47 PM
Quote from: GigaWatt on January 18, 2021, 09:49:03 PM

Don't get worked up over things that is not worth getting worked up over ;). Life's short, enjoy it :). If it pans out, great, if not, take a look at the problem in a day or two ;). If it still doesn't make sense or doesn't work, leave it be, not worth it at the moment ;).


You've inspired me to close my MacBook and go to bed.  And this is a good thing.    :)
Title: Re: Framing the whole thing (CSS)?
Post by: Kindred on January 19, 2021, 09:44:13 AM
Quote from: Grammy on January 18, 2021, 09:53:47 PM
You've inspired me to close my MacBook and go to bed.  And this is a good thing.    :)


Well, that's part of your problem right there...   you use a macbook....      :P   get a real computer. :D

(j/k)
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 19, 2021, 10:20:05 AM
Quote from: Kindred on January 19, 2021, 09:44:13 AM

Well, that's part of your problem right there...   you use a macbook....      :P   get a real computer. :D

(j/k)

Wait, what.......? 


:D
Title: Re: Framing the whole thing (CSS)?
Post by: Aleksi "Lex" Kilpinen on January 19, 2021, 11:06:10 AM
Quote from: Kindred on January 19, 2021, 09:44:13 AM
Well, that's part of your problem right there...   you use a macbook....      :P   get a real computer. :D

(j/k)
These days, they're pretty much the same parts, just macs cost an arm and a leg compared.

Not really even kidding.
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 19, 2021, 11:43:24 AM
Quote from: Aleksi "Lex" Kilpinen on January 19, 2021, 11:06:10 AM
These days, they're pretty much the same parts, just macs cost an arm and a leg compared.

Not really even kidding.


I'm old school about some things.  I've had this same mid-2010 MacBook Pro for years.  I just keep tearing it open, popping in a logic board or a display or a hard drive or whatever it needs and I'm off again.  Apple just wouldn't quit tinkering and the newer models are so uptight (everything soldered down) that I refuse to budge.  Plus, I become cheaper with every passing year.  I paid them once, I'm done.   :D
Title: Re: Framing the whole thing (CSS)?
Post by: Aleksi "Lex" Kilpinen on January 19, 2021, 11:52:46 AM
Well, as long as it works for you, why not :P
Title: Re: Framing the whole thing (CSS)?
Post by: Kindred on January 19, 2021, 12:10:01 PM
Quote from: Grammy on January 19, 2021, 10:20:05 AM
Quote from: Kindred on January 19, 2021, 09:44:13 AM

Well, that's part of your problem right there...   you use a macbook....      :P   get a real computer. :D

(j/k)

Wait, what.......? 


:D

You have to realize -- I'm from the time before home computers :o -- and remember when the brand wars was a real thing -- PC vs Apple (when Macintosh was just a model of Apple) and then there were the OS clashes (Apple vs vs DOS vs Windows vs OS/2) (and yes, I owned all of them) -- and, being in business then, where the "real" business folks used PCs, but the graphics folks INSISTED that Macs were better (and, they werennt wrong, for their set of needs)
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 19, 2021, 12:41:57 PM
This  (attached) is out in my shed.  Stiff fires up with whopping 8MB (Ram Doubler, ha!!)   :D
Had it since 1990!
Title: Re: Framing the whole thing (CSS)?
Post by: Kindred on January 19, 2021, 02:23:15 PM
lol... Ayup!!

I think my old 8088 8Mhz TURBO with *AMBER* monitor, 1200 baud modem, 2 5.25" FDDs and a 10MB HDD (!!) is still in my dad's home office (1988). :D
Ran my Dial-up BBS off that machine for 3 years.

We trashed the Apple IIe that we had in the mid80s and the TI 99/44A which used an audio tape/player as a storage device
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 19, 2021, 03:05:20 PM
I have those "big-ol" bulky iMacs in the shed, as well:  a turquoise one, a green one, a purply-red one...  Looks like a yard sale in there. 

Oh, dial-up, I can still hear it...   Hey, I know what I'll do:  capture an mp3 of that sound and make it my ringtone.   :D




Title: Re: Framing the whole thing (CSS)?
Post by: shadav on January 19, 2021, 03:26:33 PM
 :laugh: I had to go dig out the video from several years ago :laugh:
my dad showing my daughter the original "laptop"
https://shadav.com/theoriginallaptop.mp4
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 19, 2021, 03:52:32 PM
Quote from: shadav on January 19, 2021, 03:26:33 PM
:laugh: I had to go dig out the video from several years ago :laugh:
my dad showing my daughter the original "laptop"
https://shadav.com/theoriginallaptop.mp4


Her reaction was PRICELESS!!!  I laughed out loud!  That was fun!   :D
Title: Re: Framing the whole thing (CSS)?
Post by: Kindred on January 19, 2021, 05:28:06 PM
LOL! That was hilarious...

My own daughter wasn't quite so disbelieving because I have so much old tech lying around


my first "portable" computer was the attached...  gads.... those LCD screens...
Title: Re: Framing the whole thing (CSS)?
Post by: Grammy on January 19, 2021, 07:06:47 PM
Kindred owes all his genius to the PowerMate Portable SX!  It's where it all began.....    8)
Title: Re: Framing the whole thing (CSS)?
Post by: Aleksi "Lex" Kilpinen on January 20, 2021, 12:45:26 AM
Quote from: shadav on January 19, 2021, 03:26:33 PM
:laugh: I had to go dig out the video from several years ago :laugh:
my dad showing my daughter the original "laptop"
That's cool! - Shame about the RAM failure :)