• Welcome to Simple Machines Community Forum. Please login or sign up.

Framing the whole thing (CSS)?

Started by Grammy, January 18, 2021, 08:27:26 AM

Previous topic - Next topic

Grammy

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:)

Antes

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)...

Grammy

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

Grammy

January 18, 2021, 08:42:12 AM #3 Last Edit: January 18, 2021, 08:53:29 AM by Grammy
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?

Grammy

Found it:

index.css

div#wrapper

(Just mucking about with a solid border;  it's all Fritos and milk from here!)   :D

Antes

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...


Grammy

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?)

Antes


Grammy


Grammy

I'm dangerous, ha!!  This is awesome, thanks!

shadav

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

Grammy

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".   :)

Antes

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 :)

Kindred

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/
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

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

Grammy

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

shadav

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/

Grammy

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

Kindred

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.
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

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.


shadav

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

Grammy

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.   ::)

Kindred

January 18, 2021, 05:34:15 PM #22 Last Edit: January 19, 2021, 09:43:16 AM by Kindred
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.
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

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

GigaWatt

Don't write whole sentences, just keywords ;). Whole sentences only make sense if you're looking up errors ;).
"This is really a generic concept about human thinking - when faced with large tasks we're naturally inclined to try to break them down into a bunch of smaller tasks that together make up the whole."

"A 500 error loosely translates to the webserver saying, "WTF?"..."

Grammy

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!

GigaWatt

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 ;).
"This is really a generic concept about human thinking - when faced with large tasks we're naturally inclined to try to break them down into a bunch of smaller tasks that together make up the whole."

"A 500 error loosely translates to the webserver saying, "WTF?"..."

Grammy

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.    :)

Kindred

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)
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

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

Aleksi "Lex" Kilpinen

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.
A Finnish Project Manager (Support Specialist)
 Happily running multiple SMF 2.x installations.
  Fooling around with i7-10700 @ 2,90GHz-4.80GHz / 16Gb / RTX-2070 Super / 3840x2160 / Win 10 x64


How you can help SMF

"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

Grammy

January 19, 2021, 11:43:24 AM #31 Last Edit: January 19, 2021, 12:35:56 PM by Grammy
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

Aleksi "Lex" Kilpinen

Well, as long as it works for you, why not :P
A Finnish Project Manager (Support Specialist)
 Happily running multiple SMF 2.x installations.
  Fooling around with i7-10700 @ 2,90GHz-4.80GHz / 16Gb / RTX-2070 Super / 3840x2160 / Win 10 x64


How you can help SMF

"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

Kindred

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)
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

This  (attached) is out in my shed.  Stiff fires up with whopping 8MB (Ram Doubler, ha!!)   :D
Had it since 1990!

Kindred

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
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

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





shadav

 :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

Grammy

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

Kindred

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...
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Kindred owes all his genius to the PowerMate Portable SX!  It's where it all began.....    8)

Aleksi "Lex" Kilpinen

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 :)
A Finnish Project Manager (Support Specialist)
 Happily running multiple SMF 2.x installations.
  Fooling around with i7-10700 @ 2,90GHz-4.80GHz / 16Gb / RTX-2070 Super / 3840x2160 / Win 10 x64


How you can help SMF

"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

Advertisement: